From 547715e78674e865f7ef6a7b1812db999d00a78d Mon Sep 17 00:00:00 2001
From: LuisMorlets <luismorlets07@gmail.com>
Date: Mon, 7 Oct 2024 17:51:21 +0200
Subject: [PATCH] add modification to unsocial app base code and implement
 initial code for csr #184

---
 staff/luis-morlets/unsocial/index.1.html | 213 +++++++++++++++++++
 staff/luis-morlets/unsocial/index.html   | 254 ++++++++++++-----------
 2 files changed, 349 insertions(+), 118 deletions(-)
 create mode 100644 staff/luis-morlets/unsocial/index.1.html
diff --git a/staff/luis-morlets/unsocial/index.1.html b/staff/luis-morlets/unsocial/index.1.html
new file mode 100644
index 000000000..95f902189
--- /dev/null
+++ b/staff/luis-morlets/unsocial/index.1.html
@@ -0,0 +1,213 @@
+<!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">
+
+    <style>
+        @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);
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Unsocial</h1>
+
+    <section>
+        <h2>Login</h2>
+
+        <form>
+            <label for="username">Username</label>
+            <input type="text" id="username" required />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" required />
+
+            <button type="submit">Login</button>
+        </form>
+
+        <p>Don't have an account? <a href="">Register</a></p>
+    </section>
+
+    <section>
+        <h2>Register</h2>
+
+        <form>
+            <label for="name">Name</label>
+            <input type="text" id="name" required />
+
+            <label for="email">E-mail</label>
+            <input type="email" id="email" required />
+
+            <label for="username">Username</label>
+            <input type="text" id="username" required />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" required />
+
+            <button type="submit">Register</button>
+        </form>
+
+        <p>Already have an account? <a href="">Login</a></p>
+    </section>
+
+    <section>
+        <h2>Home</h2>
+
+        <h3>Hello, User!</h3>
+
+        <button>Logout</button>
+    </section>
+
+    <script>
+        var users = [
+            { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+            { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+        ]
+
+        var loggedInUser = null
+
+        var sections = document.querySelectorAll('section')
+
+        var loginSection = sections[0]
+
+        var registerSection = sections[1]
+        registerSection.style.display = 'none'
+
+        var homeSection = sections[2]
+        homeSection.style.display = 'none'
+
+        var anchors = document.querySelectorAll('a')
+
+        var registerAnchor = anchors[0]
+        registerAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loginForm.reset()
+            loginSection.style.display = 'none'
+            registerSection.style.display = ''
+        })
+
+        var loginAnchor = anchors[1]
+        loginAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+        var forms = document.querySelectorAll('form')
+
+        var loginForm = forms[0]
+
+        loginForm.addEventListener('submit', function (event) {
+            event.preventDefault()
+
+            var inputs = loginForm.querySelectorAll('input')
+
+            var usernameInput = inputs[0]
+            var username = usernameInput.value
+
+            var passwordInput = inputs[1]
+            var password = passwordInput.value
+
+            var user = users.find(function (user) {
+                return user.username === username && user.password === password
+            })
+
+            if (user) {
+                loggedInUser = user
+
+                loginForm.reset()
+
+                loginSection.style.display = 'none'
+                homeSection.style.display = ''
+
+                var h3 = homeSection.querySelector('h3')
+                h3.innerText = 'Hello, ' + loggedInUser.name + '!'
+            } else {
+                alert('Wrong credentials, try again')
+                passwordInput.value = ''
+            }
+        })
+
+        var registerForm = forms[1]
+        registerForm.addEventListener('submit', function (event) {
+            event.preventDefault()
+
+            var inputs = registerForm.querySelectorAll('input')
+
+            var nameInput = inputs[0]
+            var name = nameInput.value
+
+            var emailInput = inputs[1]
+            var email = emailInput.value
+
+            var usernameInput = inputs[2]
+            var username = usernameInput.value
+
+            var passwordInput = inputs[3]
+            var password = passwordInput.value
+
+            var user = { name: name, email: email, username: username, password: password }
+            users.push(user)
+
+            registerForm.reset()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+        var logoutButton = homeSection.querySelector('button')
+
+        logoutButton.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            loggedInUser = null
+
+            homeSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial/index.html b/staff/luis-morlets/unsocial/index.html
index 4c8d81696..dadd873b7 100644
--- a/staff/luis-morlets/unsocial/index.html
+++ b/staff/luis-morlets/unsocial/index.html
@@ -50,52 +50,6 @@
 <body>
     <h1>Unsocial</h1>
 
-    <section>
-        <h2>Login</h2>
-
-        <form>
-            <label>Username</label>
-            <input type="text" required />
-            <label>Password</label>
-
-            <input type="password" required />
-
-            <button type="submit">Login</button>
-        </form>
-
-        <p>Don't have an account? <a href="">Register</a></p>
-    </section>
-
-    <section>
-        <h2>Register</h2>
-
-        <form>
-            <label for="name">Name</label>
-            <input type="text" id="name" required />
-
-            <label for="email">E-mail</label>
-            <input type="email" id="email" required />
-
-            <label for="username">Username</label>
-            <input type="text" id="username" required />
-
-            <label for="password">Password</label>
-            <input type="password" id="password" required />
-
-            <button type="submit">Register</button>
-        </form>
-
-        <p>Already have an account? <a href="">Login</a></p>
-    </section>
-
-    <section>
-        <h2>Home</h2>
-
-        <h3>Hello, User!</h3>
-
-        <button>Logout</button>
-    </section>
-
     <script>
         var users = [
             { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
@@ -104,103 +58,167 @@ <h3>Hello, User!</h3>
 
         var loggedInUser = null
 
-        var sections = document.querySelectorAll('section')
+        var loginSection = document.createElement('section')
+        var loginTitle = document.createElement('h2')
+        loginTitle.innerText = 'Login'
+        loginSection.appendChild(loginTitle)
+        var loginForm = document.createElement('form')
+        loginSection.appendChild(loginForm)
+        var loginUsernameLabel = document.createElement('label')
+        loginUsernameLabel.htmlFor = 'username'
+        loginUsernameLabel.innerText = 'Username'
+        loginForm.appendChild(loginUsernameLabel)
+        var loginUsernameInput = document.createElement('input')
+        loginUsernameInput.type = 'text'
+        loginUsernameInput.id = 'username'
+        loginForm.appendChild(loginUsernameInput)
+        var loginPasswordLabel = document.createElement('label')
+        loginPasswordLabel.htmlFor = 'password'
+        loginPasswordLabel.innerText = 'Password'
+        loginForm.appendChild(loginPasswordLabel)
+        var loginPasswordInput = document.createElement('input')
+        loginPasswordInput.type = 'password'
+        loginPasswordInput.id = 'password'
+        loginForm.appendChild(loginPasswordInput)
+        var loginSubmitButton = document.createElement('button')
+        loginSubmitButton.type = 'submit'
+        loginSubmitButton.innerText = 'Login'
+        loginForm.appendChild(loginSubmitButton)
+        var loginAnchorText = document.createElement('p')
+        loginAnchorText.innerText = "Don't have an account? "
+        loginSection.appendChild(loginAnchorText)
+        var loginRegisterLink = document.createElement('a')
+        loginRegisterLink.href = ''
+        loginRegisterLink.innerText = 'Register'
+        loginAnchorText.appendChild(loginRegisterLink)
+
+
+        loginRegisterLink.addEventListener('click', function (event) {
+            event.preventDefault()
 
-        var loginSection = sections[0]
+            loginSection.remove()
+
+            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 = 'name'
+            registerNameLabel.innerText = 'Name'
+            registerForm.appendChild(registerNameLabel)
+            var registerNameInput = document.createElement('input')
+            registerNameInput.type = 'text'
+            registerNameInput.id = 'name'
+            registerNameInput.required = true
+            registerForm.appendChild(registerNameInput)
+            var registerEmailLabel = document.createElement('label')
+            registerEmailLabel.htmlFor = 'email'
+            registerEmailLabel.innerText = 'E-mail'
+            registerForm.appendChild(registerEmailLabel)
+            var registerEmailInput = document.createElement('input')
+            registerEmailInput.type = 'email'
+            registerEmailInput.id = 'email'
+            registerForm.appendChild(registerEmailInput)
+            var registerUsernameLabel = document.createElement('label')
+            registerUsernameLabel.htmlFor = 'username'
+            registerUsernameLabel.innerText = 'Username'
+            registerForm.appendChild(registerUsernameLabel)
+            var registerUsernameInput = document.createElement('input')
+            registerUsernameInput.type = 'text'
+            registerUsernameInput.id = 'username'
+            registerForm.appendChild(registerUsernameInput)
+            var registerPasswordLabel = document.createElement('label')
+            registerPasswordLabel.htmlFor = 'password'
+            registerPasswordLabel.innerText = 'Password'
+            registerForm.appendChild(registerPasswordLabel)
+            var registerPasswordInput = document.createElement('input')
+            registerPasswordInput.type = 'password'
+            registerPasswordInput.id = 'password'
+            registerForm.appendChild(registerPasswordInput)
+            var registerSubmitButton = document.createElement('button')
+            registerSubmitButton.type = 'submit'
+            registerSubmitButton.innerText = 'Register'
+            registerForm.appendChild(registerSubmitButton)
+            var registerAnchorText = document.createElement('p')
+            registerAnchorText.innerText = 'Already have an account? '
+            registerSection.appendChild(registerAnchorText)
+            var registerLoginLink = document.createElement('a')
+            registerLoginLink.href = ''
+            registerLoginLink.innerText = 'Login'
+            registerAnchorText.appendChild(registerLoginLink)
+
+            registerLoginLink.addEventListener('click', function (event) {
+                event.preventDefault()
+
+                registerSection.remove()
+                body.appendChild(loginSection)
+            })
 
-        var registerSection = sections[1]
-        registerSection.style.display = 'none'
+            registerForm.addEventListener('submit', function (event) {
+                event.preventDefault()
 
-        var homeSection = sections[2]
-        homeSection.style.display = 'none'
+                registerSection.remove()
 
-        var anchors = document.querySelectorAll('a')
+                var name = registerNameInput.value
+                var email = registerEmailInput.value
+                var username = registerUsernameInput.value
+                var password = registerPasswordInput.value
 
-        var registerAnchor = anchors[0]
-        registerAnchor.addEventListener('click', function (event) {
-            event.preventDefault()
-
-            loginForm.reset()
-            loginSection.style.display = 'none'
-            registerSection.style.display = ''
-        })
+                var user = { name: name, email: email, username: username, password: password }
+                users.push(user)
 
-        var loginAnchor = anchors[1]
-        loginAnchor.addEventListener('click', function (event) {
-            event.preventDefault()
+                body.appendChild(loginSection)
+            })
 
-            registerSection.style.display = 'none'
-            loginSection.style.display = ''
+            body.appendChild(registerSection)
         })
 
-        var forms = document.querySelectorAll('form')
-
-        var loginForm = forms[0]
-
         loginForm.addEventListener('submit', function (event) {
             event.preventDefault()
 
-            var inputs = loginForm.querySelectorAll('input')
-
-            var usernameInput = inputs[0]
-            var username = usernameInput.value
+            //loginSection.remove()
 
-            var passwordInput = inputs[1]
-            var password = passwordInput.value
-
-            loggedInUser = users.find(function (user) {
-                return user.username === username && user.password === password
+            var user = users.find(function (user) {
+                return user.username === loginUsernameInput.value && user.password === loginPasswordInput.value
             })
 
-            if (loggedInUser) {
-                loginForm.reset()
-
-                loginSection.style.display = 'none'
-                homeSection.style.display = ''
-
-                var h3 = homeSection.querySelector('h3')
-                h3.innerText = 'Hello, ' + loggedInUser.name + '!'
-            } else {
+            if (user === undefined) {
                 alert('Wrong credentials, try again')
-            }
-        })
-
-        var registerForm = forms[1]
-        registerForm.addEventListener('submit', function (event) {
-            event.preventDefault()
+                loginPasswordInput.value = ''
 
-            var inputs = registerForm.querySelectorAll('input')
-
-            var nameInput = inputs[0]
-            var name = nameInput.value
+            } else {
+                loggedInUser = user
 
-            var emailInput = inputs[1]
-            var email = emailInput.value
+                loginSection.remove()
 
-            var usernameInput = inputs[2]
-            var username = usernameInput.value
+                var homeSection = document.createElement('section')
+                var homeSectionTitle = document.createElement('h2')
+                homeSectionTitle.innerText = 'Home'
+                homeSection.appendChild(homeSectionTitle)
+                var homeGreetingText = document.createElement('h3')
+                homeGreetingText.innerText = "Hey " + loggedInUser.name + ", you're finally awake!"
+                homeSection.appendChild(homeGreetingText)
+                var homeLogoutButton = document.createElement('button')
+                homeLogoutButton.innerText = 'Logout'
+                homeSection.appendChild(homeLogoutButton)
 
-            var passwordInput = inputs[3]
-            var password = passwordInput.value
+                homeLogoutButton.addEventListener('click', function (event) {
+                    event.preventDefault()
 
-            var user = { name: name, email: email, username: username, password: password }
-            users.push(user)
+                    loginForm.reset()
 
-            registerForm.reset()
+                    homeSection.remove()
 
-            registerSection.style.display = 'none'
-            loginSection.style.display = ''
+                    body.appendChild(loginSection)
+                })
+                body.appendChild(homeSection)
+            }
         })
 
-        var logoutButton = homeSection.querySelector('button')
-
-        logoutButton.addEventListener('click', function (event) {
-            event.preventDefault()
-            loggedInUser = null
-
-            homeSection.style.display = 'none'
-            loginSection.style.display = ''
-        })
+        var body = document.querySelector('body')
+        body.appendChild(loginSection)
 
     </script>
 
