Backend Integration PR ( #52 )

Completed routes in frontend and server setup for login and register functionality

Author: 4darsh-Dev

Diff for: .gitignore

@@ -0,0 +1,2 @@
+/server/node_modules
+/server/.env

Diff for: src/assets/fonts/dittem_datum.ttf renamed to client/src/assets/fonts/dittem_datum.ttf

@@ -0,0 +1,63 @@
+#custom-alert {
+  position: fixed;
+  top: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 15px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  border: 2px solid #6c6ceb;
+  background: #000042;
+  color: #6c6ceb;
+  border-radius: 9px;
+  transition: all 0.5s ease;
+}
+
+#custom-alert-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+#custom-alert-close {
+  color: #6c6ceb;
+  background: none;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+.animated-element {
+  animation-name: alert;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-delay: 0s;
+}
+@keyframes alert {
+  0% {
+    transform: translateX(-50%) scale(0.5);
+  }
+  10% {
+    transform: translateX(-50%) scale(0.5);
+  }
+  20% {
+    transform: translateX(-50%) scale(1);
+  }
+  30% {
+    transform: translateX(-50%) scale(0.5);
+  }
+  40% {
+    transform: translateX(-50%) scale(1);
+  }
+  50% {
+    transform: translateX(-50%) scale(0.5);
+  }
+  60% {
+    transform: translateX(-50%) scale(1);
+  }
+  70% {
+    transform: translateX(-50%) scale(0.5);
+  }
+  100% {
+    transform: translateX(-50%) scale(0);
+  }
+}

Diff for: src/assets/fonts/hyper_helix.ttf renamed to client/src/assets/fonts/hyper_helix.ttf

@@ -8,6 +8,7 @@
   --color-primary: black;
   --color-secondary: white;
 }
+
 .main-container {
   color: var(--color-secondary);
   display: flex;

Diff for: src/assets/fonts/hyper_helix_italic.ttf renamed to client/src/assets/fonts/hyper_helix_italic.ttf

@@ -15,6 +15,9 @@
   --font-small: 1.25rem;
   --font-ex-small: 0.8rem;
 }
+a {
+  text-decoration: none;
+}
 .material-symbols-outlined {
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
   color: var(--color-secondary);
@@ -51,6 +54,7 @@
   font-size: var(--font-large);
 }
 .blue-btn {
+  border-color: var(--color-primary);
   padding: 20px;
   height: 10vh;
   background-color: var(--color-primary);

Diff for: src/assets/fonts/vermins_vibes.otf renamed to client/src/assets/fonts/vermins_vibes.otf

@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', () => {
+  fetch('alert.html')
+    .then((response) => response.text())
+    .then((data) => {
+      document.body.insertAdjacentHTML('beforeend', data)
+      setupCustomAlert()
+    })
+})
+
+function setupCustomAlert() {
+  const alertBox = document.getElementById('custom-alert')
+  const alertClose = document.getElementById('custom-alert-close')
+
+  alertClose.addEventListener('click', () => {
+    alertBox.classList.add('animated-element')
+  })
+}
+// function to show the alert message
+export function showCustomAlert(message) {
+  const alertMessage = document.getElementById('custom-alert-message')
+  const alertBox = document.getElementById('custom-alert')
+  alertMessage.textContent = message
+}

Diff for: src/assets/img/community-fullsize-min(2).png renamed to client/src/assets/img/community-fullsize-min(2).png

@@ -0,0 +1,107 @@
+import { CONFIG } from '../../../config.js'
+
+export async function sendUserData(userData) {
+  try {
+    const response = await fetch(`${CONFIG.API_ENDPOINT}/api/register`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(userData)
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json()
+      alert(errorData.message || 'Network response was not ok')
+      throw new Error(errorData.message || 'Network response was not ok')
+    }
+
+    const data = await response.json()
+    return data
+  } catch (error) {
+    console.error(
+      'There was a problem with the fetch operation:',
+      error.message
+    )
+    throw error
+  }
+}
+
+export async function login(userData) {
+  try {
+    const response = await fetch(`${CONFIG.API_ENDPOINT}/api/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(userData)
+    })
+
+    const data = await response.json()
+    if (response.ok) {
+      localStorage.setItem('accessToken', data.accessToken)
+      document.cookie = `refreshToken=${data.refreshToken}; HttpOnly`
+      alert('Login successful!')
+    } else {
+      alert(data.message)
+    }
+  } catch (e) {
+    console.error(
+      'There was a problem with the fetch operation:',
+      error.message
+    )
+    throw error
+  }
+}
+
+async function fetchProtectedData() {
+  let accessToken = localStorage.getItem('accessToken')
+  const response = await fetch(`${CONFIG.API_ENDPOINT}/api/protected`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`
+    }
+  })
+
+  if (response.status === 401) {
+    // Access token expired, try to refresh it
+    const refreshToken = document.cookie
+      .split('; ')
+      .find((row) => row.startsWith('refreshToken'))
+      .split('=')[1]
+    const tokenResponse = await fetch(`${CONFIG.API_ENDPOINT}/api/token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ token: refreshToken })
+    })
+
+    if (tokenResponse.ok) {
+      const tokenData = await tokenResponse.json()
+      accessToken = tokenData.accessToken
+      localStorage.setItem('accessToken', accessToken)
+
+      // Retry the original request with the new access token
+      const retryResponse = await fetch(
+        `${CONFIG.API_ENDPOINT}/api/protected`,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`
+          }
+        }
+      )
+
+      if (retryResponse.ok) {
+        const data = await retryResponse.json()
+      } else {
+        alert('Failed to fetch protected data')
+      }
+    } else {
+      alert('Failed to refresh token')
+    }
+  } else if (response.ok) {
+    const data = await response.json()
+  } else {
+    alert('Failed to fetch protected data')
+  }
+}