1. HTML Structure: 30 mins

The code begins with <!DOCTYPE html>, which declares the document type as HTML. The html tags enclose the entire HTML content. Inside the html tags, we have the head and body sections.

2. head Section:

The head section contains metadata and external resources. The title element sets the title of the web page, which will be displayed on the browser's title bar.

3. CSS Styling: 1 hour with trial and error

The code includes a style block to define CSS styles for the login page. The .container class sets up a container div with flexbox properties to center the content both vertically and horizontally. The h1 tag styles the login heading with a color of 333. The CSS rules for input[type="text"] and input[type="password"] specify the width, padding, margin, border, and border-radius for the input fields. The button selector defines styles for the login button.

4. body Section:

The body section contains the visible content of the web page. The login page is wrapped within a div element with a class of "container". Inside the container, there is an h1 element displaying the heading "Login". A form element with an id of "loginForm" wraps the login inputs and the submit button.

<html>
<head>
  <title>ALAAT Login Page</title>
  <style>
    /* CSS styles for the login page */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    h1 {
      color: #333;
    }
    input[type="text"],
    input[type="password"] {
      width: 300px;
      padding: 10px;
      margin: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button {
      padding: 10px 20px;
      background-color: #333;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
  </head>

HTML and CSS Example

5.Form Inputs: 30 mins

Inside the form, there are two input fields: The first input field has type="text" and an id of "usernameInput". It is used for entering the username. The second input field has type="password" and an id of "passwordInput". It is used for entering the password. Both input fields have a placeholder attribute that provides a hint to the user about what to enter.

The code includes a button element with an id of "loginBtn". It represents the login button.

<body>
   <div class="container">
     <h1>Login</h1>
     <form id="loginForm">
       <input type="text" id="usernameInput" placeholder="Username">
       <input type="password" id="passwordInput" placeholder="Password">
       <button id="loginBtn">Login</button>
     </form>
   </div>

7. JavaScript Section: 1 hour

The script block contains JavaScript code that adds interactivity to the login page. The JavaScript code is executed when the DOMContentLoaded event is fired, which ensures that the page has finished loading before the script runs.

8. User Dictionary:

The code declares a JavaScript variable named users which is a dictionary object. The users object stores username-password pairs as key-value pairs. In this example, the usernames and passwords are defined as group members first and last names.

9. Event Listeners and Handling:

The code attaches an event listener to the login form using the addEventListener method. When the form is submitted, the event listener callback function is executed. The callback function prevents the default form submission behavior using event.preventDefault(). It retrieves the values of the username and password input fields. It checks if the entered username exists in the users dictionary and if the associated password matches. If the credentials are valid, the page is redirected to YouTube (https://www.youtube.com) using window.location.href. If the credentials are invalid, an alert is displayed to the user.

<script>
   // Dictionary to store username-password pairs
   var users = {
     "amay": "advani",
     "arnav": "kanekar",
     "taiyo": "iwazaki",
     "adi": "nawandhar",
     "liav": "bar"
   };
   document.addEventListener('DOMContentLoaded', function() {
     var loginForm = document.getElementById('loginForm');
     var usernameInput = document.getElementById('usernameInput');
     var passwordInput = document.getElementById('passwordInput');

     loginForm.addEventListener('submit', function(event) {
       event.preventDefault(); // Prevent form submission

       var username = usernameInput.value;
       var password = passwordInput.value;

       // Check if the username and password match
       if (users.hasOwnProperty(username) && users[username] === password) {
         window.location.href = 'https://www.youtube.com'; // Redirect to YouTube
       } else {
         alert("Your username or password is wrong. Do better next time!");
       }
     });
   });
 </script>

The code is enclosed within the DOMContentLoaded event listener, which ensures that the JavaScript code runs after the HTML document has finished loading.
It starts by getting references to the login form and input fields for username, password, and name using their respective id attributes.
An event listener is added to the login form's submit event using the addEventListener method. This event listener will execute the provided callback function when the form is submitted.
Within the callback function, event.preventDefault() is called to prevent the default form submission behavior, which would cause the page to reload.
The values entered by the user in the username, password, and name input fields are retrieved and stored in the respective variables.
A GET request is made using the fetch function to retrieve user data from the specified API endpoint, "https://alaat.duckdns.org/api/users".
The response from the API is converted to JSON format using the response.json() method.
In the following then block, a variable userFound is initialized as false to track whether a matching user is found.
A loop is used to iterate over each user object in the data array obtained from the API response.
Within the loop, the name property of each user object is compared to the name variable entered by the user.
If a matching user is found (the name values match), the userFound variable is set to true, and the loop is terminated using the break statement.
After the loop, an if-else statement checks the value of userFound.
If userFound is true, it means a matching user was found, and the page is redirected to the desired page (in this case, imagedrop.html) using window.location.href.
If userFound is false, an alert is displayed indicating that the username, password, or name is incorrect.
The code also includes a catch block to handle any errors that may occur during the fetch request or response handling. If an error occurs, it is logged to the console, and an alert is displayed to the user indicating that an error occurred while logging in.

<script>
   document.addEventListener('DOMContentLoaded', function() {
     var loginForm = document.getElementById('loginForm');
     var usernameInput = document.getElementById('usernameInput');
     var passwordInput = document.getElementById('passwordInput');
     var nameInput = document.getElementById('nameInput');

     loginForm.addEventListener('submit', function(event) {
       event.preventDefault(); // Prevent form submission

       var username = usernameInput.value;
       var password = passwordInput.value;
       var name = nameInput.value;

       // Make the GET request to retrieve user data
       fetch("https://alaat.duckdns.org/api/users")
         .then(response => response.json())
         .then(data => {
           var userFound = false;

           // Iterate over the array of users
           for (var i = 0; i < data.length; i++) {
             var user = data[i];

             // Check if the username, password, and name match for the current user
             if (user.username === username && user.password === password && user.name === name) {
               userFound = true;
               break;
             }
           }

           if (userFound) {
             window.location.href = '{{ site.baseurl }}/imagedrop.html'; // Redirect to the desired page
           } else {
             alert("Your username, password, or name is incorrect. Please try again.");
           }
         })
         .catch(error => {
           console.error(error);
           alert("An error occurred while logging in. Please try again later.");
         });
     });
   });
 </script>

Challenges + Changes 1 hour

Intially, when I started to code this feature, I was planning on encorperating a backend function to let different users create their owne accounts and login using an API. But as our group thought through this, we realized that only admin logins were needed for the photo upload and tagging.

A solution I came up with is to replace the use of an API with regular dictionary that used usernames as keys, and passwords as values. This soulution also decreased complexity and helps with the effiency of our program as a whole.

API

It should be known that to be able to get this from an API you must have a backend that hosts a dictionary of these users, otherwise this type of sign up wouldnt be possible.