added compos to app and composite the app b00tc4mp#184

LuisMorlets · Oct 10, 2024 · 90999c4 · 90999c4
1 parent e1dadf3
commit 90999c4
Show file tree

Hide file tree

Showing 40 changed files with 2,476 additions and 124 deletions.
diff --git a/staff/luis-morlets/unsocial.5/.gitkeep b/staff/luis-morlets/unsocial.5/.gitkeep
diff --git a/staff/luis-morlets/unsocial.5/compo.js b/staff/luis-morlets/unsocial.5/compo.js
@@ -0,0 +1,9 @@
+function Compo(container) {
+    this.children = []
+    this.container = container
+}
+
+Compo.prototype.add = function (child) {
+    this.children.push(child)
+    this.container.appendChild(child.container)
+}
diff --git a/staff/luis-morlets/unsocial.5/data.js b/staff/luis-morlets/unsocial.5/data.js
@@ -0,0 +1,4 @@
+var users = [
+    { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+]
diff --git a/staff/luis-morlets/unsocial.5/index.html b/staff/luis-morlets/unsocial.5/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unsocial</title>
+    <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+
+    <script src="data.js"></script>
+
+    <script src="logic.js"></script>
+
+    <script src="compo.js"></script>
+    <script src="view.js"></script>
+    <script src="main.js"></script>
+
+</body>
+
+</html>
diff --git a/staff/luis-morlets/unsocial.5/logic.js b/staff/luis-morlets/unsocial.5/logic.js
@@ -0,0 +1,47 @@
+function registerUser(name, email, username, password, passwordRepeat) {
+    if (name.length < 2)
+        throw new Error('invalid name')
+
+    if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+        throw new Error('invalid e-mail')
+
+    if (username.length < 4 || username.length > 14)
+        throw new Error('invalid username')
+
+
+    if (password.length < 8)
+        throw new Error('invalid password')
+
+
+    if (password !== passwordRepeat)
+        throw new Error('passwords do not match')
+
+    var user = users.find(function (user) {
+        return user.username === username || user.email === email
+    })
+
+    if (user !== undefined)
+        throw new Error('user aleready exists')
+
+    user = { name: name, email: email, username: username, password: password, passwordRepeat: passwordRepeat }
+
+    users.push(user)
+
+}
+
+function authenticateUser(username, password) {
+    if (username.length < 4 || username.length > 14)
+        throw new Error('invalid username')
+
+    if (password.length < 8)
+        throw new Error('invalid password')
+
+    var user = users.find(function (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined)
+        throw new Error('Wrong credentials, try again')
+
+    return user
+}
diff --git a/staff/luis-morlets/unsocial.5/main.js b/staff/luis-morlets/unsocial.5/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = new Compo(document.querySelector('body'))
+body.add(loginSection)
diff --git a/staff/luis-morlets/unsocial.5/style.css b/staff/luis-morlets/unsocial.5/style.css
@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+:root {
+    --color: rgb(170, 60, 43);
+    --font: 'Press Start 2P';
+    font-family: var(--font);
+}
+
+body {
+    background-color: rgb(179, 176, 176);
+    color: var(--color);
+    margin: 50px;
+    min-width: 370px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    min-width: 100px;
+    width: 300px;
+    gap: 5px;
+}
+
+input {
+    background-color: inherit;
+    font-family: inherit;
+}
+
+button {
+    width: fit-content;
+}
+
+a:visited {
+    color: var(--color);
+}
diff --git a/staff/luis-morlets/unsocial.5/view.js b/staff/luis-morlets/unsocial.5/view.js
@@ -0,0 +1,199 @@
+function buildFormField(id, text, type) {
+    var label = document.createElement('label')
+    label.htmlFor = id
+    label.innerText = text
+
+    var input = document.createElement('input')
+    input.type = type
+    input.id = id
+    input.required = true
+
+    return [label, input]
+}
+
+function buildButton(text, type) {
+    var button = document.createElement('button')
+    button.type = type
+    button.innerText = text
+
+    return button
+}
+
+function buildLoginSection() {
+
+    var compo = new Compo(document.createElement('section'))
+
+    var section = compo.container
+
+    var title = document.createElement('h2')
+    title.innerText = 'Login'
+    section.appendChild(title)
+
+    var form = document.createElement('form')
+    section.appendChild(form)
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.appendChild(usernameField[0])
+    form.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.appendChild(passwordField[0])
+    form.appendChild(passwordField[1])
+
+    var submitButton = buildButton('Login', 'submit')
+    form.appendChild(submitButton)
+
+    form.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+
+        try {
+            loggedInUser = authenticateUser(username, password)
+
+            form.reset()
+
+            section.remove()
+
+            var homeSection = buildHomeSection()
+
+            body.add(homeSection)
+        } catch (error) {
+            passwordField[1].value = ''
+
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var anchorText = document.createElement('p')
+    anchorText.innerText = "Don't have an account? "
+    section.appendChild(anchorText)
+
+    var registerLink = document.createElement('a')
+    registerLink.href = ''
+    registerLink.innerText = 'Register'
+    anchorText.appendChild(registerLink)
+
+    registerLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+
+        var registerSection = buildRegisterSection()
+
+        body.add(registerSection)
+    })
+
+    return compo
+}
+
+function buildRegisterSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var section = compo.container
+
+    var title = document.createElement('h2')
+    title.innerText = 'Register'
+    section.appendChild(title)
+
+    var form = document.createElement('form')
+    section.appendChild(form)
+
+    var nameField = buildFormField('name', 'Name', 'text')
+    form.appendChild(nameField[0])
+    form.appendChild(nameField[1])
+
+    var emailField = buildFormField('email', 'E-mail', 'email')
+    form.appendChild(emailField[0])
+    form.appendChild(emailField[1])
+
+    var usernameField = buildFormField('username', 'Username', 'text')
+    form.appendChild(usernameField[0])
+    form.appendChild(usernameField[1])
+
+    var passwordField = buildFormField('password', 'Password', 'password')
+    form.appendChild(passwordField[0])
+    form.appendChild(passwordField[1])
+
+    var repeatPasswordField = buildFormField('password-repeat', 'Repeat Password', 'password')
+    form.appendChild(repeatPasswordField[0])
+    form.appendChild(repeatPasswordField[1])
+
+    var submitButton = buildButton('Register', 'submit')
+    form.appendChild(submitButton)
+
+    form.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var name = nameField[1].value
+        var email = emailField[1].value
+        var username = usernameField[1].value
+        var password = passwordField[1].value
+        var passwordRepeat = repeatPasswordField[1].value
+
+        try {
+            registerUser(name, email, username, password, passwordRepeat)
+
+            form.reset()
+
+            section.remove()
+
+            body.add(loginSection)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var anchorText = document.createElement('p')
+    anchorText.innerText = 'Already have an account? '
+    section.appendChild(anchorText)
+
+    var loginLink = document.createElement('a')
+    loginLink.href = ''
+    loginLink.innerText = 'Login'
+    anchorText.appendChild(loginLink)
+
+    loginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+        body.add(loginSection)
+    })
+    return compo
+}
+
+function buildHomeSection() {
+
+    var compo = new Compo(document.createElement('section'))
+
+    var section = compo.container
+
+    var title = document.createElement('h2')
+    title.innerText = 'Home'
+    section.appendChild(title)
+
+    var greeting = document.createElement('h3')
+    greeting.innerText = "Hey " + loggedInUser.name + ", you're finally awake!"
+    section.appendChild(greeting)
+
+    var logoutButton = document.createElement('button')
+    logoutButton.innerText = 'Logout'
+    section.appendChild(logoutButton)
+
+    logoutButton.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        loggedInUser = null
+
+        section.remove()
+
+        body.add(loginSection)
+    })
+
+    return compo
+}
diff --git a/staff/luis-morlets/unsocial.6/.gitkeep b/staff/luis-morlets/unsocial.6/.gitkeep
diff --git a/staff/luis-morlets/unsocial.6/compo.js b/staff/luis-morlets/unsocial.6/compo.js
@@ -0,0 +1,9 @@
+function Compo(container) {
+    this.children = []
+    this.container = container
+}
+
+Compo.prototype.add = function (child) {
+    this.children.push(child)
+    this.container.appendChild(child.container)
+}
diff --git a/staff/luis-morlets/unsocial.6/data.js b/staff/luis-morlets/unsocial.6/data.js
@@ -0,0 +1,4 @@
+var users = [
+    { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+    { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+]
diff --git a/staff/luis-morlets/unsocial.6/index.html b/staff/luis-morlets/unsocial.6/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unsocial</title>
+    <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+
+    <script src="data.js"></script>
+
+    <script src="logic.js"></script>
+
+    <script src="compo.js"></script>
+    <script src="view.js"></script>
+    <script src="main.js"></script>
+
+</body>
+
+</html>