add functions to better organise unsocial b00tc4mp#169

aleixpr27 · Oct 9, 2024 · dc4b39f · dc4b39f
1 parent 8a116cc
commit dc4b39f
Show file tree

Hide file tree

Showing 18 changed files with 862 additions and 190 deletions.
diff --git a/staff/aleix-palau/unsocial.2/.gitkeep b/staff/aleix-palau/unsocial.2/.gitkeep
diff --git a/staff/aleix-palau/unsocial.2/data.js b/staff/aleix-palau/unsocial.2/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.2/index.html b/staff/aleix-palau/unsocial.2/index.html
@@ -0,0 +1,20 @@
+<!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="main.js"></script>
+</body>
+
+</html>
diff --git a/staff/aleix-palau/unsocial.2/logic.js b/staff/aleix-palau/unsocial.2/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.2/main.js b/staff/aleix-palau/unsocial.2/main.js
@@ -0,0 +1,192 @@
+var loggedInUser = null
+
+// LOGIN SECTION
+var section = document.createElement('section')
+var loginTitle = document.createElement('h2')
+loginTitle.innerText = 'Login'
+section.appendChild(loginTitle)
+var form = document.createElement('form')
+section.appendChild(form)
+var loginUsernameLabel = document.createElement('label')
+loginUsernameLabel.htmlFor = 'login-username'
+loginUsernameLabel.innerText = 'Username'
+form.appendChild(loginUsernameLabel)
+var loginUsernameInput = document.createElement('input')
+loginUsernameInput.type = 'text'
+loginUsernameInput.id = 'login-username'
+loginUsernameInput.required = true
+form.appendChild(loginUsernameInput)
+var loginPasswordLabel = document.createElement('label')
+loginPasswordLabel.htmlFor = 'login-password'
+loginPasswordLabel.innerText = 'Password'
+form.appendChild(loginPasswordLabel)
+var loginPasswordInput = document.createElement('input')
+loginPasswordInput.type = 'password'
+loginPasswordInput.id = 'login-password'
+loginPasswordInput.required = true
+form.appendChild(loginPasswordInput)
+var submitButton = document.createElement('button')
+submitButton.type = 'submit'
+submitButton.innerText = 'Login'
+form.appendChild(submitButton)
+
+// LOGIN TAB -> LOGIN BUTTON
+form.addEventListener('submit', function (event) {
+    event.preventDefault()
+
+    var loginUsername = loginUsernameInput.value
+    var loginPassword = loginPasswordInput.value
+
+    try {
+        loggedInUser = authenticateUser(loginUsername, loginPassword)
+
+        form.reset()
+
+        section.remove()
+
+        // HOME SECTION
+        var homeSection = document.createElement('section')
+        var homeTitle = document.createElement('h2')
+        homeTitle.innerText = 'Home'
+        homeSection.appendChild(homeTitle)
+        var homeUserTitle = document.createElement('h3')
+        homeUserTitle.innerText = 'Hello, ' + loggedInUser.username + '!'
+        homeSection.appendChild(homeUserTitle)
+        var homeLogoutButton = document.createElement('button')
+        homeLogoutButton.innerText = 'Logout'
+        homeSection.appendChild(homeLogoutButton)
+
+        // HOME TAB -> LOGOUT BUTTON
+        homeLogoutButton.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loggedInUser = null
+
+            homeSection.remove()
+
+            body.appendChild(section)
+        })
+
+        body.appendChild(homeSection)
+    } catch (error) {
+        loginPasswordInput.value = ''
+
+        alert(error.message)
+
+        console.error(error)
+    }
+})
+
+var loginRegisterLink = document.createElement('a')
+loginRegisterLink.href = ''
+loginRegisterLink.innerText = 'Register'
+section.appendChild(loginRegisterLink)
+
+// LOGIN TAB -> REGISTER LINK
+loginRegisterLink.addEventListener('click', function (event) {
+    event.preventDefault()
+
+    section.remove()
+
+    // REGISTER SECTION
+    var registerSection = document.createElement('section')
+    var registerTitle = document.createElement('h2')
+    registerTitle.innerText = 'Register'
+    registerSection.appendChild(registerTitle)
+    var registerForm = document.createElement('form')
+    registerSection.appendChild(registerForm)
+    var registerNameLabel = document.createElement('label')
+    registerNameLabel.htmlFor = 'register-name'
+    registerNameLabel.innerText = 'Name'
+    registerForm.appendChild(registerNameLabel)
+    var registerNameInput = document.createElement('input')
+    registerNameInput.type = 'text'
+    registerNameInput.id = 'register-name'
+    registerNameInput.required = true
+    registerForm.appendChild(registerNameInput)
+    var registerEmailLabel = document.createElement('label')
+    registerEmailLabel.htmlFor = 'register-email'
+    registerEmailLabel.innerText = 'E-mail'
+    registerForm.appendChild(registerEmailLabel)
+    var registerEmailInput = document.createElement('input')
+    registerEmailInput.type = 'email'
+    registerEmailInput.id = 'register-email'
+    registerEmailInput.required = true
+    registerForm.appendChild(registerEmailInput)
+    var registerUsernameLabel = document.createElement('label')
+    registerUsernameLabel.htmlFor = 'register-username'
+    registerUsernameLabel.innerText = 'Username'
+    registerForm.appendChild(registerUsernameLabel)
+    var registerUsernameInput = document.createElement('input')
+    registerUsernameInput.type = 'text'
+    registerUsernameInput.id = 'register-username'
+    registerUsernameInput.required = true
+    registerForm.appendChild(registerUsernameInput)
+    var registerPasswordLabel = document.createElement('label')
+    registerPasswordLabel.htmlFor = 'register-password'
+    registerPasswordLabel.innerText = 'Password'
+    registerForm.appendChild(registerPasswordLabel)
+    var registerPasswordInput = document.createElement('input')
+    registerPasswordInput.type = 'password'
+    registerPasswordInput.id = 'register-password'
+    registerPasswordInput.required = true
+    registerForm.appendChild(registerPasswordInput)
+    var registerPasswordRepeatLabel = document.createElement('label')
+    registerPasswordRepeatLabel.htmlFor = 'register-password-repeat'
+    registerPasswordRepeatLabel.innerText = 'Repeat password'
+    registerForm.appendChild(registerPasswordRepeatLabel)
+    var registerPasswordRepeatInput = document.createElement('input')
+    registerPasswordRepeatInput.type = 'password'
+    registerPasswordRepeatInput.id = 'register-password-repeat'
+    registerPasswordRepeatInput.required = true
+    registerForm.appendChild(registerPasswordRepeatInput)
+    var registerSubmitButton = document.createElement('button')
+    registerSubmitButton.type = 'submit'
+    registerSubmitButton.innerText = 'Register'
+    registerForm.appendChild(registerSubmitButton)
+
+    // REGISTER TAB -> REGISTER BUTTON
+    registerForm.addEventListener('submit', function (event) {
+        event.preventDefault()
+
+        var name = registerNameInput.value
+        var email = registerEmailInput.value
+        var username = registerUsernameInput.value
+        var password = registerPasswordInput.value
+        var passwordRepeat = registerPasswordRepeatInput.value
+
+        try {
+            registerUser(name, email, username, password, passwordRepeat)
+
+            registerForm.reset()
+
+            registerSection.remove()
+
+            body.appendChild(section)
+        } catch (error) {
+            alert(error.message)
+
+            console.error(error)
+        }
+    })
+
+    var registerLoginLink = document.createElement('a')
+    registerLoginLink.href = ''
+    registerLoginLink.innerText = 'Login'
+    registerSection.appendChild(registerLoginLink)
+
+    // REGISTER TAB -> LOGIN LINK
+    registerLoginLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        registerSection.remove()
+
+        body.appendChild(section)
+    })
+
+    body.appendChild(registerSection)
+})
+
+// BODY SECTION
+var body = document.querySelector('body')
+body.appendChild(section)
diff --git a/staff/aleix-palau/unsocial.2/style.css b/staff/aleix-palau/unsocial.2/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.3/.gitkeep b/staff/aleix-palau/unsocial.3/.gitkeep
diff --git a/staff/aleix-palau/unsocial.3/data.js b/staff/aleix-palau/unsocial.3/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.3/index.html b/staff/aleix-palau/unsocial.3/index.html
@@ -0,0 +1,21 @@
+<!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="view.js"></script>
+    <script src="main.js"></script>
+</body>
+
+</html>