separation of concerns WIP b00tc4mp#181

Rafa0297 · Oct 8, 2024 · d4a2125 · d4a2125
1 parent de3e016
commit d4a2125
Show file tree

Hide file tree

Showing 14 changed files with 468 additions and 114 deletions.
diff --git a/staff/rafael-infante/unsocial copy/.gitkeep b/staff/rafael-infante/unsocial copy/.gitkeep
diff --git a/staff/rafael-infante/unsocial copy/images/boy.png b/staff/rafael-infante/unsocial copy/images/boy.png
diff --git a/staff/rafael-infante/unsocial copy/images/girl.png b/staff/rafael-infante/unsocial copy/images/girl.png
diff --git a/staff/rafael-infante/unsocial copy/images/users-avatar.png b/staff/rafael-infante/unsocial copy/images/users-avatar.png
diff --git a/staff/rafael-infante/unsocial copy/images/users-avatar2.png b/staff/rafael-infante/unsocial copy/images/users-avatar2.png
diff --git a/staff/rafael-infante/unsocial/index.1.html → ...rafael-infante/unsocial copy/index.1.html b/staff/rafael-infante/unsocial/index.1.html → ...rafael-infante/unsocial copy/index.1.html
diff --git a/staff/rafael-infante/unsocial/index.2.html → ...rafael-infante/unsocial copy/index.2.html b/staff/rafael-infante/unsocial/index.2.html → ...rafael-infante/unsocial copy/index.2.html
diff --git a/staff/rafael-infante/unsocial/index.3.html → ...rafael-infante/unsocial copy/index.3.html b/staff/rafael-infante/unsocial/index.3.html → ...rafael-infante/unsocial copy/index.3.html
diff --git a/staff/rafael-infante/unsocial copy/index.html b/staff/rafael-infante/unsocial copy/index.html
@@ -0,0 +1,349 @@
+<!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="/staff/rafael-infante/unsocial/images/users-avatar2.png" type="image/x-icon">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+    :root {
+      --font: 'Poppins';
+      font-family: var(--font);
+      background-color: #e4b834;
+    }
+
+    .logo-container {
+      display: flex;
+      text-decoration: none;
+      color: black;
+      align-items: center;
+      margin: 0;
+      padding-left: 15px;
+    }
+
+    .logo {
+      max-height: 45px;
+      margin-right: 5px;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 15px;
+    }
+
+    .section-container {
+      background-color: white;
+      padding: 20px;
+      margin: 10px;
+      width: 85%;
+      max-width: 500px;
+      min-height: 500px;
+      border-radius: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .form-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    label {
+      padding-bottom: 8px;
+    }
+
+    input {
+      margin-bottom: 20px;
+      padding: 10px;
+      border-radius: 5px;
+      border: 1px solid gray;
+    }
+
+    h4 {
+      font-size: 15px;
+      font-weight: 400;
+    }
+
+    button {
+      color: white;
+      background-color: black;
+      margin-top: 25px;
+      padding: 15px;
+      border-radius: 15px;
+      cursor: pointer;
+      font-weight: bolder;
+      border: none;
+    }
+
+    button:hover {
+      color: black;
+      background-color: #e7cc79;
+      border: none;
+    }
+
+    #btn-register {
+      margin: 0;
+    }
+
+    #bottom-text,
+    p {
+      font-size: 12px;
+      color: grey;
+      margin-top: 20px;
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: bold;
+      color: black;
+      cursor: pointer;
+    }
+
+    a:hover {
+      color: #dda600;
+    }
+
+    h4 {
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <header class="logo-container">
+    <img src="/staff/rafael-infante/unsocial/images/users-avatar.png" alt="" class="logo">
+    <h1>unSocial</h1>
+  </header>
+
+  <script>
+
+    var users = [
+      { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+      { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+    ]
+
+    var loggedUser = null
+    // Login section
+    var loginSection = document.createElement('section')
+    var loginParagraph = document.createElement('p')
+    var loginTitle = document.createElement('h2')
+    var loginText = document.createElement('h4')
+    var loginForm = document.createElement('form')
+    var loginUsernameLabel = document.createElement('label')
+    var loginUsernameInput = document.createElement('input')
+    var loginPasswordLabel = document.createElement('label')
+    var loginPasswordInput = document.createElement('input')
+    var loginButton = document.createElement('button')
+    var loginBottomText = document.createElement('p')
+
+    loginParagraph.innerText = 'Welcome !'
+    loginTitle.innerText = 'Sign in to unSocial'
+    loginText.innerText = 'Write username and password to access'
+    loginSection.appendChild(loginParagraph)
+    loginSection.appendChild(loginTitle)
+    loginSection.appendChild(loginText)
+    loginSection.classList.add('section-container')
+    loginSection.appendChild(loginForm)
+    loginForm.classList.add('form-container')
+    loginForm.appendChild(loginUsernameLabel)
+    loginForm.appendChild(loginUsernameInput)
+    loginUsernameLabel.htmlFor = 'login-user'
+    loginUsernameLabel.innerText = 'User name'
+    loginUsernameInput.id = 'login-user'
+    loginUsernameInput.placeholder = 'Enter your user name'
+    loginUsernameInput.required = true
+    loginForm.appendChild(loginPasswordLabel)
+    loginForm.appendChild(loginPasswordInput)
+    loginPasswordLabel.htmlFor = 'login-password'
+    loginPasswordLabel.innerText = 'Password'
+    loginPasswordLabel.id = 'login-password'
+    loginPasswordInput.type = 'password'
+    loginPasswordInput.id = 'login-password'
+    loginPasswordInput.placeholder = 'Enter your Password'
+    loginPasswordInput.required = true
+    loginForm.appendChild(loginButton)
+    loginButton.id = 'btn-login'
+    loginButton.type = 'submit'
+    loginButton.innerText = 'Login'
+    loginSection.appendChild(loginBottomText)
+    loginBottomText.id = 'bottom-text'
+    loginBottomText.innerHTML = `Don't have an account? <a id="registerAnchor" href="">Register</a>`
+
+    var body = document.querySelector('body')
+    body.appendChild(loginSection)
+
+    var registerAnchor = document.getElementById('registerAnchor')
+    // Send user to register section when clicking on register anchor
+    registerAnchor.addEventListener('click', function (event) {
+      event.preventDefault()
+      loginSection.remove()
+      // Register Section
+      var registerSection = document.createElement('section')
+      var registerTitle = document.createElement('h2')
+      var registerText = document.createElement('h4')
+      var registerForm = document.createElement('form')
+      var registerNameLabel = document.createElement('label')
+      var registerNameInput = document.createElement('input')
+      var registerEmailLabel = document.createElement('label')
+      var registerEmailInput = document.createElement('input')
+      var registerUsernameLabel = document.createElement('label')
+      var registerUsernameInput = document.createElement('input')
+      var registerPasswordLabel = document.createElement('label')
+      var registerPasswordInput = document.createElement('input')
+      var registerButton = document.createElement('button')
+
+
+      registerSection.classList.add('section-container')
+      body.appendChild(registerSection)
+      registerTitle.innerText = 'Register to unSocial'
+      registerSection.appendChild(registerTitle)
+      registerText.innerText = 'Enter your details to register'
+      registerSection.appendChild(registerText)
+      registerForm.classList.add('form-container')
+      registerSection.appendChild(registerForm)
+      registerNameLabel.htmlFor = 'name'
+      registerNameLabel.innerText = 'Name'
+      registerEmailLabel.htmlFor = 'email'
+      registerEmailLabel.innerText = 'E-mail'
+      registerUsernameLabel.htmlFor = 'username'
+      registerUsernameLabel.innerText = 'User name'
+      registerPasswordLabel.htmlFor = 'name'
+      registerPasswordLabel.innerText = 'Password'
+
+      registerNameInput.type = 'text'
+      registerNameInput.id = 'name'
+      registerNameInput.placeholder = 'Enter your name'
+      registerNameInput.required = true
+
+      registerEmailInput.type = 'email'
+      registerEmailInput.id = 'email'
+      registerEmailInput.placeholder = 'Enter your E-mail'
+      registerEmailInput.required = true
+
+      registerUsernameInput.type = 'text'
+      registerUsernameInput.id = 'username'
+      registerUsernameInput.placeholder = 'Enter your user name'
+      registerUsernameInput.required = true
+
+      registerPasswordInput.type = 'password'
+      registerPasswordInput.id = 'password'
+      registerPasswordInput.placeholder = 'Enter your password'
+      registerPasswordInput.required = true
+
+      registerForm.appendChild(registerNameLabel)
+      registerForm.appendChild(registerNameInput)
+      registerForm.appendChild(registerEmailLabel)
+      registerForm.appendChild(registerEmailInput)
+      registerForm.appendChild(registerUsernameLabel)
+      registerForm.appendChild(registerUsernameInput)
+      registerForm.appendChild(registerPasswordLabel)
+      registerForm.appendChild(registerPasswordInput)
+
+      registerButton.id = 'btn-register'
+      registerButton.type = 'submit'
+      registerButton.innerText = 'Register'
+      registerForm.appendChild(registerButton)
+
+      var registerAnchorText = document.createElement('p')
+      registerAnchorText.innerText = 'Already have an account? '
+      registerSection.appendChild(registerAnchorText)
+      var registerLoginLink = document.createElement('a')
+      registerLoginLink.id = 'loginAnchor'
+      registerLoginLink.innerText = 'Login'
+      registerLoginLink.href = ''
+      registerAnchorText.appendChild(registerLoginLink)
+      // Send user to login section when clicking on login anchor
+      registerLoginLink.addEventListener('click', function (event) {
+        event.preventDefault();
+        registerSection.remove()
+        body.appendChild(loginSection)
+      })
+      // Save data of new user when clicking on 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
+
+        //TODO add rules
+        // if name.length < 2 -> name too short
+        // email includes @ and .
+        // separate concerns: data, presentation, business logic
+
+        var user = {
+          name: name,
+          email: email,
+          username: username,
+          password: password
+        }
+        users.push(user)
+        registerForm.reset()
+        registerSection.remove()
+        body.appendChild(loginSection)
+      })
+    })
+    // Compare data entered by the user with our users list
+    loginForm.addEventListener('submit', function (event) {
+      event.preventDefault()
+      var loginUsername = loginUsernameInput.value
+      var loginPassword = loginPasswordInput.value
+
+      var user = users.find(function (user) {
+        return user.username === loginUsername && user.password === loginPassword
+      })
+
+      if (user === undefined) {
+        alert('Please enter a valid user name and password')
+        loginForm.reset()
+      } else {
+        loggedUser = user
+        loginForm.reset()
+        loginSection.remove()
+        // Home Section
+        var homeSection = document.createElement('section')
+        var homeTitle = document.createElement('h2')
+        var homeText = document.createElement('h3')
+        var image = document.createElement('img')
+        var logoutButton = document.createElement('button')
+
+        body.appendChild(homeSection)
+        homeSection.appendChild(homeTitle)
+        homeSection.appendChild(homeText)
+        homeSection.appendChild(image)
+        homeSection.appendChild(logoutButton)
+
+        homeSection.id = 'home'
+        homeSection.classList.add('section-container')
+        homeTitle.innerText = 'Home'
+        homeText.innerText = 'Hello, ' + user.name + '!'
+        image.style.height = '300px'
+        image.src = '/staff/rafael-infante/unsocial/images/boy.png'
+        logoutButton.id = 'btn-logout'
+        logoutButton.innerText = 'Logout'
+        // Send user to login page when clicking on logout button
+        logoutButton.addEventListener('click', function (event) {
+          var condition = prompt('Are you sure? (y/n)')
+          if (condition === 'y') {
+            event.preventDefault()
+            loggedUser = null
+            homeSection.remove()
+            body.appendChild(loginSection)
+          }
+        })
+      }
+    })
+
+  </script>
+
+</body>
+
+</html>
diff --git a/staff/rafael-infante/unsocial/data.js b/staff/rafael-infante/unsocial/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' }
+]