Home Explore Help
Sign In
Liontix
/
Scheduler-Backend
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

auth page added

Liontix 1 year ago
parent
136b6c8138
commit
66400d40a5
10 changed files with 351 additions and 1 deletions
Split View Show Diff Stats
  1. 10 0
      public/html/appointments.html
  2. 10 0
      public/html/appointmentscreator.html
  3. 31 0
      public/html/auth.html
  4. 10 0
      public/html/bookings.html
  5. 44 0
      public/html/schedule.html
  6. 10 0
      public/index.html
  7. 59 0
      public/javascripts/auth.js
  8. 95 0
      public/stylesheets/auth.css
  9. 81 0
      public/stylesheets/schedule.css
  10. 1 1
      routes/auth.js

+ 10 - 0
public/html/appointments.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+
 
+</body>
 
+</html>

+ 10 - 0
public/html/appointmentscreator.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+
 
+</body>
 
+</html>

+ 31 - 0
public/html/auth.html
View File 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Authorization</title>
 
+    <link rel="stylesheet" href="../stylesheets/auth.css">
 
+    <script src="../javascripts/auth.js" async></script>
 
+</head>
 
+<body>
 
+<div class="container">
 
+    <div id="login-form" class="form">
 
+        <h2>Authorization</h2>
 
+        <div>
 
+            <div class="input-group">
 
+                <label for="login-email">Email</label>
 
+                <input type="email" id="login-email" placeholder="Enter your email" required>
 
+            </div>
 
+            <div class="input-group">
 
+                <label for="login-password">Password</label>
 
+                <input type="password" id="login-password" placeholder="Enter your password" required>
 
+            </div>
 
+            <button class="btn" id="btn-login">Login</button>
 
+            <button class="btn" id="btn-register">Register</button>
 
+            <p id="login-error"></p>
 
+
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 10 - 0
public/html/bookings.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+
 
+</body>
 
+</html>

+ 44 - 0
public/html/schedule.html
View File 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Attending Appointment</title>
 
+    <link rel="stylesheet" href="../stylesheets/schedule.css">
 
+</head>
 
+<body>
 
+<div class="container">
 
+    <h1>Attending an appointment</h1>
 
+    <form id="schedule-form">
 
+        <div class="input-group">
 
+            <label for="email">Email</label>
 
+            <input type="email" id="email" name="email" placeholder="johndoe@example.com" required>
 
+        </div>
 
+        <div class="input-group">
 
+            <label for="firstname">First Name</label>
 
+            <input type="text" id="firstname" name="firstname" placeholder="John" required>
 
+        </div>
 
+        <div class="input-group">
 
+            <label for="lastname">Last Name</label>
 
+            <input type="text" id="lastname" name="lastname" placeholder="Doe" required>
 
+        </div>
 
+        <!-- Preset Due Date -->
 
+        <div class="input-group">
 
+            <label for="due-date">Due Date</label>
 
+            <input type="text" id="due-date" name="dueDate" value="2024-12-20" readonly>
 
+        </div>
 
+        <!-- Preset Appointment Date -->
 
+        <div class="input-group">
 
+            <label for="appointment-date">Appointment Date</label>
 
+            <input type="text" id="appointment-date" name="appointmentDate" value="2024-12-25" readonly>
 
+        </div>
 
+        <!-- Preset Time Span -->
 
+        <div class="input-group">
 
+            <label for="time-span">Time Span</label>
 
+            <input type="text" id="time-span" name="timeSpan" value="10:00 AM to 12:00 PM" readonly>
 
+        </div>
 
+        <button type="submit" class="btn-submit">Attend</button>
 
+    </form>
 
+</div>
 
+</body>
 
+</html>

+ 10 - 0
public/index.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+
 
+</body>
 
+</html>

+ 59 - 0
public/javascripts/auth.js
View File 

@@ -0,0 +1,59 @@
 
+"use strict";
 
+
 
+const emailInput = document.getElementById("login-email");
 
+const passwordInput = document.getElementById("login-password");
 
+const errorMessageParagraph = document.getElementById("login-error");
 
+const submitButtonLogin = document.getElementById("btn-login");
 
+const submitButtonRegister = document.getElementById("btn-register");
 
+
 
+window.onload = function () {
 
+    submitButtonLogin.addEventListener("click", async function () {
 
+        await login();
 
+    })
 
+
 
+    submitButtonRegister.addEventListener("click", async function () {
 
+        await register();
 
+    })
 
+}
 
+
 
+async function sendAuthRequest(type) {
 
+    console.log(emailInput.value);
 
+    console.log(passwordInput.value);
 
+    const response = await fetch(
 
+        "/api/auth/" + type,
 
+        {
 
+            method: "POST",
 
+            headers: {
 
+                "Content-Type": "application/json", // Set the content type to JSON
 
+            },
 
+            body: JSON.stringify(
 
+                {
 
+                    email: emailInput.value,
 
+                    password: passwordInput.value,
 
+                }
 
+            ),
 
+        }
 
+    )
 
+    const response_json = await response.json();
 
+
 
+    if (response.status === 200) {
 
+        localStorage.setItem("token", response_json["token"]);
 
+        window.location.replace("/");
 
+    } else {
 
+        if (response_json["error"]) {
 
+            errorMessageParagraph.innerText = response_json["error"];
 
+        } else {
 
+            errorMessageParagraph.innerText = response_json["message"];
 
+        }
 
+    }
 
+
 
+
 
+}
 
+
 
+async function login() {
 
+    await sendAuthRequest("login");
 
+}
 
+
 
+async function register() {
 
+    await sendAuthRequest("register");
 
+}

+ 95 - 0
public/stylesheets/auth.css
View File 

@@ -0,0 +1,95 @@
 
+/* General Reset */
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+    font-family: Arial, sans-serif;
 
+}
 
+
 
+body {
 
+    display: grid;
 
+    place-items: center;
 
+    min-height: 100vh;
 
+    background-color: #f4f4f9;
 
+    margin: 0;
 
+}
 
+
 
+.container {
 
+    background: white;
 
+    padding: 20px;
 
+    border-radius: 8px;
 
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+    width: 100%;
 
+    max-width: 400px;
 
+    display: grid;
 
+    grid-template-rows: auto 1fr;
 
+    gap: 20px;
 
+}
 
+
 
+.form {
 
+    display: grid;
 
+    grid-template-rows: repeat(4, auto);
 
+    gap: 15px;
 
+}
 
+
 
+h2 {
 
+    text-align: center;
 
+    color: #333;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+.input-group {
 
+    display: grid;
 
+    grid-template-rows: auto auto;
 
+    gap: 10px;
 
+    margin-top: 10px;
 
+}
 
+
 
+.input-group label {
 
+    font-size: 14px;
 
+    color: #555;
 
+}
 
+
 
+.input-group input {
 
+    padding: 10px;
 
+    border: 1px solid #ccc;
 
+    border-radius: 4px;
 
+    font-size: 14px;
 
+    transition: border-color 0.3s;
 
+}
 
+
 
+.input-group input:focus {
 
+    border-color: #6c63ff;
 
+    outline: none;
 
+}
 
+
 
+button {
 
+    margin-top: 40px;
 
+    padding: 10px;
 
+    border: none;
 
+    background: #6c63ff;
 
+    color: white;
 
+    font-size: 16px;
 
+    cursor: pointer;
 
+    border-radius: 4px;
 
+    transition: background 0.3s;
 
+}
 
+
 
+button:hover {
 
+    background: #5750d9;
 
+}
 
+
 
+#btn-register {
 
+    background: #e0e0e0;
 
+    color: #333;
 
+    margin-top: -10px; /* Adjust spacing between buttons */
 
+}
 
+
 
+#btn-register:hover {
 
+    background: #cacaca;
 
+}
 
+
 
+#login-error {
 
+    margin-top: 10px;
 
+    color: red;
 
+}

+ 81 - 0
public/stylesheets/schedule.css
View File 

@@ -0,0 +1,81 @@
 
+/* General Reset */
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+    font-family: Arial, sans-serif;
 
+}
 
+
 
+body {
 
+    display: grid;
 
+    place-items: center;
 
+    min-height: 100vh;
 
+    background-color: #f4f4f9;
 
+    margin: 0;
 
+}
 
+
 
+.container {
 
+    background: white;
 
+    padding: 20px 30px;
 
+    border-radius: 8px;
 
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+    width: 100%;
 
+    max-width: 500px;
 
+    display: grid;
 
+    gap: 20px;
 
+}
 
+
 
+h1 {
 
+    text-align: center;
 
+    color: #333;
 
+}
 
+
 
+form {
 
+    display: grid;
 
+    gap: 15px;
 
+}
 
+
 
+.input-group {
 
+    display: grid;
 
+    gap: 5px;
 
+}
 
+
 
+.input-group label {
 
+    font-size: 14px;
 
+    color: #555;
 
+}
 
+
 
+.input-group input {
 
+    width: 100%;
 
+    padding: 10px;
 
+    border: 1px solid #ccc;
 
+    border-radius: 4px;
 
+    font-size: 14px;
 
+    transition: border-color 0.3s;
 
+}
 
+
 
+/* For readonly inputs */
 
+.input-group input[readonly] {
 
+    background-color: #f9f9f9;
 
+    cursor: not-allowed;
 
+}
 
+
 
+.input-group input:focus {
 
+    border-color: #6c63ff;
 
+    outline: none;
 
+}
 
+
 
+.btn-submit {
 
+    padding: 12px 0;
 
+    border: none;
 
+    background: #6c63ff;
 
+    color: white;
 
+    font-size: 16px;
 
+    cursor: pointer;
 
+    border-radius: 4px;
 
+    transition: background 0.3s;
 
+}
 
+
 
+.btn-submit:hover {
 
+    background: #5750d9;
 
+}

+ 1 - 1
routes/auth.js
View File 

@@ -44,7 +44,7 @@ router.post('/login', function (req, res) {
 
     User.findOne({ email: email })
 
         .then(user => {
 
             if (!user) {
 
-                return res.status(422).json({ message: 'no user found' });
 
+                return res.status(422).json({ message: 'user not found' });
 
             }
 
 
             bcrypt.compare(password, user.password, function (err, result) {