add index1 and index2 unsocial b00tc4mp#203

AlbaLomasLopez · Oct 9, 2024 · 09d4203 · 09d4203
1 parent 46c4300
commit 09d4203
Show file tree

Hide file tree

Showing 3 changed files with 551 additions and 0 deletions.
diff --git a/staff/alba-lomas/unsocial/index.1.html b/staff/alba-lomas/unsocial/index.1.html
@@ -0,0 +1,252 @@
+<!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="data:image/png;base64,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"
+        type="image/x-icon">
+
+    <style>
+        /* Estilo de letra. */
+        @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Updock&display=swap');
+
+        /* Css del documento html en general. */
+        :root {
+            --color: rgb(128, 175, 128);
+            --font: 'Dancing Script';
+            font-family: var(--font);
+        }
+
+        /* Hemos creado una variable de color para que todos los css
+        que hagamos de color copien el que ya hemos escogido. */
+        body {
+            background-color: rgb(219, 224, 224);
+            color: var(--color);
+        }
+
+        /* Color del input, creamos una variable de background color
+        para que todos los background colors vayan automaticamente
+        con el mismo color. */
+        input {
+            background-color: inherit;
+            font-family: inherit;
+        }
+
+        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" />
+            <label for="password">Password</label>
+            <input type="password" id="password" />
+
+            <button type="submit">Login</button>
+        </form>
+
+        <a ref="">Register</a>
+    </section>
+
+
+
+
+
+    <section>
+        <h2>Register</h2>
+        <form>
+            <label for="name">Name</label>
+            <input type="text" id="name" />
+
+            <label for="email">E-mail</label>
+            <input type="email" id="email" />
+
+            <label for="username">Username</label>
+            <input type="text" id="username" />
+
+            <label for="password">Password</label>
+            <input type="password" id="password" />
+
+            <button type="submit">Register</button>
+        </form>
+
+        <a ref="">Login</a>
+    </section>
+
+
+
+
+    <section>
+        <h2>Home</h2>
+
+        <h3>Hello, User!</h3>
+
+        <button>Logout</button>
+    </section>
+
+
+
+    <script>
+
+        var users = [ // Creamos un array para poder guardar los usuarios.
+            { name: 'alba', email: '[email protected]', username: 'alba', password: '123123' },
+            { name: 'maga', email: '[email protected]', username: 'maga', password: '123123' }
+        ]
+
+        var loggedInUser = null
+
+        /* Aqui le decimos que cuando arranque la app la 
+        seccion 1 (Register) y la seccion 2 (Home) estén 
+        apagadas, (Es decir, que no salgan en la pantalla 
+        principal), querySelector te permite traer cualquier 
+        elemento del tipo que le dices, en este caso le 
+        pedimos las secciones. */
+        var sections = document.querySelectorAll('section')
+
+        var loginSection = sections[0]
+        // loginSection.style.display = 'none'
+
+        var registerSection = sections[1]
+        registerSection.style.display = 'none'
+
+        var homeSection = sections[2]
+        homeSection.style.display = 'none'
+
+
+        /* Aqui le damos función a los anchors (anclas) */
+        var anchors = document.querySelectorAll('a')
+
+        var registerAnchor = anchors[0]
+
+        registerAnchor.addEventListener('click', function (event) {
+            event.preventDefault() /* Se pone para evitar que navegue */
+
+            /* Aqui le estamos diciendo que cuando cliquemos en registro, 
+            se apague la seccion de login */
+            loginSection.style.display = 'none'
+            /* Aqui le estamos quitando el none para que salga la seccion 
+            de register. */
+            registerSection.style.display = ''
+        })
+
+        /* lo mismo que el anterior pero con la seccion del registro. */
+        var loginAnchor = anchors[1]
+
+        loginAnchor.addEventListener('click', function (event) {
+            event.preventDefault()
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+        var forms = document.querySelectorAll('form')
+
+        // Aqui vamos a pedirle que guarde los inputs que pongamos.
+        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) // guardar input user en el array.
+
+            registerForm.reset() // cada vez que se añada un imput, reiniciar para que se limpie lo relleneado.
+
+            registerSection.style.display = 'none'
+            loginSection.style.display = ''
+        })
+
+        var loginForm = forms[0]
+
+        // submit es un evento del formulario.
+        // funcionamiento del login
+        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
+
+            /*
+            - buscar en users si existe el usuario con este username
+            y password.
+            - si existe entrar en home [1]
+            - si no, una alerta de error.
+            - poner un resert cuando se hace submit (se envia el formulario)
+            - [1] poner el saludo en home con el name del usuario en el h3.
+            - apagar login y encender home.
+            */
+
+            // Aqui busca en el array el nombre del usuario introducido.
+            var user = users.find(function (user) {
+                /* una vez encuentra el usuario, contrasta que la contraseña introducida
+                sea la misma que la que tiene guardada.*/
+                return user.username === username && user.password === password
+            })
+
+            if (user === undefined) {
+                alert('Wrong credentials')
+
+                passwordInput.value = ''
+            } else {
+                loggedInUser = user
+
+                loginForm.reset()// Aqui le pedimos que cuando entremos el usuario y la contraseña se limpie.
+
+                var homeUserTitle = homeSection.querySelector('h3')
+                homeUserTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
+
+                loginSection.style.display = 'none'
+                homeSection.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>