add more compos to unsocial b00tc4mp#175

Ctgenix · Oct 10, 2024 · 109ee8b · 109ee8b
1 parent d9c8152
commit 109ee8b
Show file tree

Hide file tree

Showing 31 changed files with 1,486 additions and 126 deletions.
diff --git a/staff/carlos-tomas/unsocial.4/.gitkeep b/staff/carlos-tomas/unsocial.4/.gitkeep
diff --git a/staff/carlos-tomas/unsocial.4/compo.js b/staff/carlos-tomas/unsocial.4/compo.js
@@ -0,0 +1,11 @@
+//
+
+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/carlos-tomas/unsocial.4/data.js b/staff/carlos-tomas/unsocial.4/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/carlos-tomas/unsocial.4/index.html b/staff/carlos-tomas/unsocial.4/index.html
@@ -0,0 +1,28 @@
+<!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/carlos-tomas/unsocial.4/logic.js b/staff/carlos-tomas/unsocial.4/logic.js
@@ -0,0 +1,44 @@
+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 < 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 already exists')
+
+    user = { name: name, email: email, username: username, password: password }
+
+    users.push(user)
+}
+
+function authenticateUser(username, password) {
+    if (username.length < 4 || username.length > 12)
+        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')
+
+    return user
+}
diff --git a/staff/carlos-tomas/unsocial.4/main.js b/staff/carlos-tomas/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/carlos-tomas/unsocial.4/style.css b/staff/carlos-tomas/unsocial.4/style.css
@@ -0,0 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
+
+:root {
+    --color: dodgerblue;
+    --font: "Fontdiner Swanky", serif;
+    font-family: var(--font);
+}
+
+body {
+    background-color: #fffe9a;
+
+    text-align: center;
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+}
+
+.login {
+    margin-top: 100px;
+}
+
+.register {
+    margin-top: 100px;
+}
+
+input {
+    background-color: inherit;
+    font-family: inherit;
+    display: block;
+    width: 20px;
+    max-width: 500px;
+    min-width: 300px;
+    margin: 15px auto;
+    border-radius: 10px;
+}
+
+a:visited {
+    color: black;
+}
diff --git a/staff/carlos-tomas/unsocial.4/view.js b/staff/carlos-tomas/unsocial.4/view.js
@@ -0,0 +1,195 @@
+
+// Funcion que crea el elemento label para poder cearlo llamado la funcion 
+// con id  text  type
+function buildFormField(id, text, type) {
+    var label = document.createElement("label") //Crea el elemento label
+    label.htmlFor = id //Introduce un for
+    label.innerText = text  //Intrduce un texto 
+
+    var input = document.createElement("input")
+    input.type = type  //Introduce un type
+    input.id = id // Intoduce una id
+
+    return [label, input]  //crea un array porque el return no puede devolver mas de 1
+}
+
+// Funcion que crea el elemento button para poder cearlo llamado la funcion 
+// text  type
+function buildButton(text, type) {
+    var button = document.createElement("button")
+    button.type = type
+    button.innerText = text
+
+    return button
+}
+//Llamamos la funcion constructora del login section 
+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)
+    //Llamamos la funcion constructora de field / label 
+    var usernameField = buildFormField("username", "Username", "text")
+    form.appendChild(usernameField[0])
+    form.appendChild(usernameField[1])
+
+    var passwordField = buildFormField("password", "Passsword", "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 regiserLink = document.createElement('a')
+    regiserLink.href = ''
+    regiserLink.innerText = 'Register'
+    section.appendChild(regiserLink)
+
+    regiserLink.addEventListener('click', function (event) {
+        event.preventDefault()
+
+        section.remove()
+
+        var registerSection = buildRegisterSection()
+
+        body.add(registerSection)
+    })
+
+    return compo //Retorna la Section 
+}
+//Llamamos a la constructora del Register Section
+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
+}
+// Se llama a la constructora Home Section 
+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.name + '!'
+    section.appendChild(userTitle)
+
+    var logoutButton = buildButton('Logout', 'button')
+    section.appendChild(logoutButton)
+    //Evento de boton "Logout" 
+    logoutButton.addEventListener('click', function (event) {
+        event.preventDefault()  // Parar cargar la paguina web
+
+        loggedInUser = null
+
+        section.remove()
+
+        body.appendChild(loginSection)// LLamar al body a la login Section 
+    })
+
+    return compo
+}
diff --git a/staff/carlos-tomas/unsocial.5/.gitkeep b/staff/carlos-tomas/unsocial.5/.gitkeep
diff --git a/staff/carlos-tomas/unsocial.5/compo.js b/staff/carlos-tomas/unsocial.5/compo.js
@@ -0,0 +1,11 @@
+//
+
+function Compo(container) {
+    this.children = []
+    this.container = container
+}
+
+Compo.prototype.add = function (child) {
+    this.children.push(child) // Par poder montar nuestro comcepto
+    this.container.appendChild(child.container) //Para poder montar el HTML
+}
diff --git a/staff/carlos-tomas/unsocial.5/data.js b/staff/carlos-tomas/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/carlos-tomas/unsocial.5/index.html b/staff/carlos-tomas/unsocial.5/index.html
@@ -0,0 +1,28 @@
+<!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>