Frontend Code

  1. The code starts with the basic HTML structure, including the necessary CSS styles for the sign-up page.

  2. Inside the div class="container" element, there is an h1 heading and a

    with an id attribute set to "signupForm".</p> </li>

  3. The form includes three input fields: name, username, and password. Each input field has an id attribute assigned to it.

  4. There is a "Sign Up" button with an id attribute set to "signupBtn". The button has an onclick event handler that calls the create_user() function.

  5. Below the form, there is a "Login" button with an id attribute set to "LoginBtn". The button has an onclick event handler that calls the redirect() function.

    6. </ol> </div> </div> </div> 
    <head>
   <title>ALAAT Sign Up 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>
 <body>
   <div class="container">
     <h1>Sign Up</h1>
     <form id="signupForm">
       <input type="text" id="nameInput" placeholder="Name">
       <input type="text" id="uidInput" placeholder="Username">
       <input type="password" id="passwordInput" placeholder="Password">
       <button id="signupBtn" onclick="create_user()">Sign Up</button>
    </form>
       <button onclick="redirect()" id="LoginBtn">Login</button>
   </div>

    1. The JavaScript code begins with the redirect() function, which redirects the user to the login page when the "Login" button is clicked. It uses window.location.href to change the page URL.

    2. The code defines a base URL for the API requests, which is "https://alaat.duckdns.org/api/users". This URL is used to construct different API endpoints for CRUD operations.

    3. The create_user() function is defined. It is called when the "Sign Up" button is clicked. Inside this function, the user's input values for name, username, and password are retrieved.

    <script>
   function redirect(){
   window.location.href = '{{ site.baseurl }}/login.html';
   }
   //const resultContainer = document.getElementById("result");
     // set up base URL to make it easier to use and implement
     const url = "https://alaat.duckdns.org/api/users"
   
     const create_fetch = url + '/';
     const read_fetch = url + '/';
     const delete_fetch = url + '/delete';
     const patch_fetch = url + '/update';
    // const read_button = document.getElementById("read_button");
     // const criteria = document.getElementById("criteria")
     // Display a fact pair
   
   function create_user(){
       const body = {
           name: document.getElementById("nameInput").value,
           uid: document.getElementById("uidInput").value,
           password: document.getElementById("passwordInput").value,
       };
       const requestOptions = {
           method: 'POST',
           body: JSON.stringify(body),
           mode: 'cors', // headers for cors policy
           cache: 'default', // cahe header
           credentials: 'omit', // header for credentials
           headers: {
               "content-type": "application/json",
               'Authorization': 'Bearer my-token',
           },
       };
       fetch(create_fetch, requestOptions)
         .then(response => {
           // check if errors
           if (response.status !== 200) {
             const errorMsg = 'Database create error: ' + response.status;
             console.log(errorMsg);
             const tr = document.createElement("tr");
             const td = document.createElement("td");
             td.innerHTML = errorMsg;
             tr.appendChild(td);
             resultContainer.appendChild(tr);
             return;
           }
       })
     }
   </script>
   </html>

    Backend

    1. The user data is stored in the body object. Then, the fetch() function is used to make a POST request to the API endpoint for creating a user. The request includes the necessary headers, request options, and the user data in the request body.

    2. The response from the API is checked to see if any errors occurred. If the response status is not 200 (OK), an error message is logged to the console. Otherwise, if the response is successful, the user is created.

    API

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

    </div>