separation of responsabilities b00tc4mp#129

Antuan94 · Nov 6, 2024 · ee54415 · ee54415
1 parent c493c96
commit ee54415
Show file tree

Hide file tree

Showing 6 changed files with 730 additions and 0 deletions.
diff --git a/staff/antonio-guillen-illan/app/app.3/.gitkeep b/staff/antonio-guillen-illan/app/app.3/.gitkeep
diff --git a/staff/antonio-guillen-illan/app/app.3/index.html b/staff/antonio-guillen-illan/app/app.3/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App</title>
+</head>
+
+<body>
+    <h1>App</h1>
+
+    <section>
+        <h2>Welcome</h2>
+        <p>Please, <a href="">register</a> or <a href="">login</a></p>
+    </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="username" id="username">
+
+            <label for="password">Password</label>
+            <input type="password" id="Password">
+
+            <button type="submit">Register</button>
+        </form>
+
+        <p>Error...</p>
+
+        <a href="">login</a>
+    </section>
+
+    <section>
+        <h2>login</h2>
+
+        <form>
+            <label for="username">Username</label>
+            <input type="username" id="username">
+
+            <label for="password">Password</label>
+            <input type="password" id="password">
+
+            <button type="submit">login</button>
+        </form>
+
+        <p></p>
+
+        <a href="">Register</a>
+    </section>
+
+    <section>
+        <h2>Home</h2>
+
+        <h3>Hello, User</h3>
+
+
+        <button>Logout</button>
+    </section>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/staff/antonio-guillen-illan/app/app.3/main.1.js b/staff/antonio-guillen-illan/app/app.3/main.1.js
@@ -0,0 +1,169 @@
+//data
+var users = []
+
+users[0] = { name: 'Ji Rafa', email: '[email protected]', username: 'jirafa', password: '123123123' }
+users[1] = { name: 'Ele Fante', email: '[email protected]', username: 'elefante', password: '123123123' }
+users[2] = { name: 'Coco Drilo', email: '[email protected]', username: 'cocodrilo', password: '123123123' }
+
+
+// business (logic)
+
+function authenticateUser(username, password) {
+    var user = users.find(function (user) {
+        return user.username === username && user.password === password
+    })
+
+    if (user === undefined) throw new Error('wrong credentials')
+
+    return user
+}
+
+// presentation 
+
+var sections = document.querySelectorAll('section')
+
+var welcomeSection = sections[0]
+var registerSection = sections[1]
+var loginSection = sections[2]
+var homeSection = sections[3]
+
+registerSection.style.display = 'none'
+loginSection.style.display = 'none'
+homeSection.style.display = 'none'
+
+var welcomeLinks = welcomeSection.querySelectorAll('a')
+
+var welcomeRegisterLink = welcomeLinks[0]
+var welcomeLoginLink = welcomeLinks[1]
+
+welcomeRegisterLink.addEventListener('click', function (event) {
+    event.preventDefault()
+
+    welcomeSection.style.display = 'none'
+    registerSection.style.display = ''
+
+})
+
+welcomeLoginLink.addEventListener('click', function (event) {
+    event.preventDefault()
+
+    welcomeSection.style.display = 'none'
+    loginSection.style.display = ''
+
+})
+
+var registerLinks = registerSection.querySelectorAll('a')
+
+var registerLoginLinks = registerLinks[0]
+
+registerLoginLinks.addEventListener('click', function (event) {
+    event.preventDefault()
+
+
+    registerSection.style.display = 'none'
+    loginSection.style.display = ''
+
+})
+
+var loginLinks = loginSection.querySelectorAll('a')
+
+var loginRegisterLinks = loginLinks[0]
+
+loginRegisterLinks.addEventListener('click', function (event) {
+    event.preventDefault()
+
+    loginSection.style.display = 'none'
+    registerSection.style.display = ''
+
+})
+
+var registerForm = registerSection.querySelector('form')
+
+
+registerForm.addEventListener('submit', function (event) {
+    event.preventDefault()
+
+    var registerFormInputs = registerForm.querySelectorAll('input')
+
+    var registerFormNameImput = registerFormInputs[0]
+    var registerFormEmailImput = registerFormInputs[1]
+    var registerFormUsernameImput = registerFormInputs[2]
+    var registerFormPasswordImput = registerFormInputs[3]
+
+    var name = registerFormNameImput.value
+    var email = registerFormEmailImput.value
+    var username = registerFormUsernameImput.value
+    var password = registerFormPasswordImput.value
+
+    var user = users.find(function (user) {
+        return user.email === email || user.username === username
+    })
+
+    var feedback = registerSection.querySelector('p')
+
+    if (user !== undefined) {
+        feedback.innerText = 'user already exists'
+
+        return
+    }
+    var user = {}
+    user.name = name
+    user.email = email
+    user.username = username
+    user.password = password
+
+    users.push(user)
+
+    registerForm.reset()
+    feedback.innerText = ''
+
+    registerSection.style.display = 'none'
+    loginSection.style.display = ''
+
+})
+
+var loginForm = loginSection.querySelector('form')
+
+loginForm.addEventListener('submit', function (event) {
+    event.preventDefault()
+
+    var loginFormImputs = loginForm.querySelectorAll('input')
+
+    var loginFormusernameImputs = loginFormImputs[0]
+    var loginFormpasswordImputs = loginFormImputs[1]
+
+    var username = loginFormusernameImputs.value
+    var password = loginFormpasswordImputs.value
+
+    var feedback = loginSection.querySelector('p')
+
+    try {
+        var user = authenticateUser(username, password)
+
+        loginForm.reset()
+        feedback.innerText = ''
+
+        loginSection.style.display = 'none'
+        homeSection.style.display = ''
+
+        var userTitle = homeSection.querySelector('h3')
+        userTitle.innerText = 'Hello, ' + user.name + '!'
+    } catch (error) {
+        var feedback = loginSection.querySelector('p')
+
+        feedback.innerText = error.message
+
+        console.error(error)
+    }
+
+
+})
+
+var logoutButton = homeSection.querySelector('button')
+
+logoutButton.addEventListener('click', function (event) {
+    event.preventDefault()
+
+    homeSection.style.display = 'none'
+    loginSection.style.display = ''
+})