add a posts section to unsocial b00tc4mp#169

aleixpr27 · Oct 14, 2024 · 2c8fd51 · 2c8fd51
1 parent 466a8d9
commit 2c8fd51
Show file tree

Hide file tree

Showing 16 changed files with 920 additions and 125 deletions.
diff --git a/staff/aleix-palau/unsocial/.gitkeep → staff/aleix-palau/unsocial.4/.gitkeep b/staff/aleix-palau/unsocial/.gitkeep → staff/aleix-palau/unsocial.4/.gitkeep
diff --git a/staff/aleix-palau/unsocial.4/compo.js b/staff/aleix-palau/unsocial.4/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/aleix-palau/unsocial.4/data.js b/staff/aleix-palau/unsocial.4/data.js
@@ -0,0 +1,4 @@
+var users = [
+    { name: 'Forrest Gump', email: '[email protected]', username: 'runner4life', password: '123123' },
+    { name: 'Luke Skywalker', email: '[email protected]', username: 'orphanWannabe', password: 'urnotmyfather' },
+]
diff --git a/staff/aleix-palau/unsocial.4/index.html b/staff/aleix-palau/unsocial.4/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UN$0C14L</title>
+    <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>UN$0C14L</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/aleix-palau/unsocial.4/logic.js b/staff/aleix-palau/unsocial.4/logic.js
@@ -0,0 +1,46 @@
+// REGISTER FORM FUNCTION
+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 > 12)
+        throw new Error('invalid username')
+
+    if (password.length < 6)
+        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 already exists')
+
+    user = { name: name, email: email, username: username, password: password }
+
+    users.push(user)
+}
+
+// LOGIN FORM FUNCTION
+function authenticateUser(username, password) {
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    if (password.length < 6)
+        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')
+
+    return user
+}
diff --git a/staff/aleix-palau/unsocial.4/main.js b/staff/aleix-palau/unsocial.4/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/aleix-palau/unsocial.4/style.css b/staff/aleix-palau/unsocial.4/style.css
@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');
+
+:root {
+    --color: lime;
+    --font: 'Tiny5';
+    font-family: var(--font);
+}
+
+body {
+    background-color: #111;
+    color: var(--color);
+    font-family: var(--font);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+}
+
+h1 {
+    font-size: 4.25rem;
+    margin: 2rem 0 1rem 0;
+}
+
+section {
+    background-color: #111;
+    padding: 0.75rem 2rem 2rem 2rem;
+    margin: 1rem 0;
+    border: 1px solid var(--color);
+    width: 300px;
+    border-radius: 8px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    font-family: inherit;
+}
+
+label {
+    margin-top: 1rem;
+}
+
+input {
+    background-color: #222;
+    color: var(--color);
+    border: 1px solid var(--color);
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    border-radius: 4px;
+    font-family: inherit;
+}
+
+button {
+    background-color: var(--color);
+    color: #222;
+    border: none;
+    padding: 0.75rem;
+    margin-top: 1.5rem;
+    cursor: pointer;
+    border-radius: 4px;
+    font-weight: bold;
+    font-family: inherit;
+}
+
+a {
+    color: var(--color);
+    text-decoration: none;
+    margin-top: 1rem;
+    display: inline-block;
+}
+
+a:hover {
+    text-decoration: underline;
+}
diff --git a/staff/aleix-palau/unsocial.4/view.js b/staff/aleix-palau/unsocial.4/view.js
@@ -0,0 +1,190 @@
+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 buildHomeSection() {
+    var compo = new Compo(document.createElement('section'))
+
+    var section = compo.container
+
+    var title = document.createElement('h2')
+    title.innerText = 'Home'
+    section.appendChild(title)
+
+    var userTitle = document.createElement('h3')
+    userTitle.innerText = 'Hello, ' + loggedInUser.username + '!'
+    section.appendChild(userTitle)
+
+    var logoutButton = buildButton('Logout', 'button')
+    section.appendChild(logoutButton)
+
+    logoutButton.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        loggedInUser = null
+
+        section.remove()
+
+        body.add(loginSection)
+    })
+
+    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 passwordRepeatField = buildFormField('password-repeat', 'Repeat password', 'password')
+    form.appendChild(passwordRepeatField[0])
+    form.appendChild(passwordRepeatField[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 = passwordRepeatField[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 loginLink = document.createElement('a')
+    loginLink.href = ''
+    loginLink.innerText = 'Login'
+    section.appendChild(loginLink)
+
+    loginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+
+        body.add(loginSection)
+    })
+
+    return compo
+}
+
+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 registerLink = document.createElement('a')
+    registerLink.href = ''
+    registerLink.innerText = 'Register'
+    section.appendChild(registerLink)
+
+    registerLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+
+        var registerSection = buildRegisterSection()
+
+        body.add(registerSection)
+    })
+
+    return compo
+}
diff --git a/staff/aleix-palau/unsocial/compo.demo.html b/staff/aleix-palau/unsocial/compo.demo.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compo v0.0.0</title>
+</head>
+
+<body>
+    <script src="compo.js"></script>
+
+    <script src="compo.demo.js"></script>
+</body>
+
+</html>