Merge commit 'bf2d5449402f25fcee86b7592cd6e5b5a759cb3a' into feature/…

…TAS-18-toast

# Conflicts:
#	src/routes/shared/TestPage.tsx

.github/workflows/autoupdate.yml

@@ -0,0 +1,18 @@
+name: autoupdate
+on:
+  # This will trigger on all pushes to all branches.
+  push:
+  # Alternatively, you can only trigger if commits are pushed to certain branches, e.g.:
+   branches:
+     - main
+
+jobs:
+  autoupdate:
+    name: autoupdate
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: docker://chinthakagodawita/autoupdate-action:v1
+        env:
+          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+          PR_FILTER: "labelled"
+          PR_LABELS: "epic"

package.json

@@ -13,12 +13,20 @@
   "dependencies": {
     "@tanstack/react-query": "^5.18.0",
     "@tanstack/react-query-devtools": "^5.18.0",
+    "@types/js-cookie": "^3.0.6",
+    "@uidotdev/usehooks": "^2.4.1",
     "date-fns": "^3.3.1",
+    "js-cookie": "^3.0.5",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.4",
     "msw": "^2.1.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "sort-by": "^1.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.13",
     "@types/react": "^18.2.43",
@@ -31,8 +39,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "jsdom": "^24.0.0",
-    "typescript": "^5.2.2",
+    "tsc-alias": "^1.8.8",
+    "typescript": "^5.4.2",
     "vite": "^5.0.8",
+    "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.2.2"
   },
   "msw": {

src/api/authentication.ts

@@ -0,0 +1,47 @@
+import resolveURL from "./fetch";
+import Cookies from "js-cookie";
+
+const LOGIN_URL = resolveURL('/auth/login');
+const LOGOUT_URL = resolveURL('/auth/logout');
+const GET_CSRF_URL = resolveURL('/auth/csrf');
+
+export const signIn = async (username: string, password: string) => {
+  const csrfmiddlewaretoken = Cookies.get("csrftoken");
+  if (csrfmiddlewaretoken === undefined) throw new Error("No CSRF Token Present")
+  return await fetch(LOGIN_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    credentials: 'include',
+    body: JSON.stringify({username, password, csrfmiddlewaretoken}),
+  });
+};
+
+
+export const signOut = async (): Promise<Response> => {
+  const csrfmiddlewaretoken = Cookies.get("csrftoken");
+  if (csrfmiddlewaretoken === undefined) throw new Error("No CSRF Token Present")
+  const response = await fetch(LOGOUT_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    credentials: 'include',
+    body: JSON.stringify({ csrfmiddlewaretoken })
+  });
+
+  Cookies.remove("csrftoken")
+
+  return response;
+};
+
+export const getCSRF = async (): Promise<Response> => {
+  return await fetch(GET_CSRF_URL, {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json"
+    },
+  });
+};

src/api/fetch.ts

@@ -1,3 +1,4 @@
+
 const setApiURL = () => {
   if (import.meta.env.DEV) {
     return import.meta.env.VITE_IGNORE_MSW.toLowerCase() === "true" ? "http://localhost:8000" : "http://localhost:5173"

src/assets/css/authentication/MobileLoginContainer.module.css

@@ -0,0 +1,50 @@
+/* MobileLoginContainer.module.css */
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Example to fill the screen */
+    padding: 20px; /* Padding for smaller screens */
+    background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
+    border: 1px black solid;
+  }
+
+
+
+/* For small mobile phones */
+@media (max-width: 480px) {
+    /* styles for screens smaller than 600px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        min-width: 320px; /* But not too small */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+      }
+}
+
+/* For large mobile phones */
+@media (min-width: 481px) and (max-width: 768px) {
+    /* styles for screens smaller than 600px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+      }
+}
+
+/* For tablets */
+@media (min-width: 768px) and (max-width: 1024px) {
+    /* styles for screens between 601px and 1024px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+    }
+}
+

src/assets/css/authentication/WebLoginContainer.module.css

@@ -0,0 +1,22 @@
+/* WebLoginContainer.module.css */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Example to fill the screen */
+  background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
+  border: 1px black solid;
+  }
+
+  /* For desktops */
+@media (min-width: 1025px) {
+  /* styles for screens larger than 1024px */
+}
+  .loginForm {
+    width: 100%; /* Full width on mobile */
+    max-width: 1280px; /* But not too wide */
+    padding: 20px;
+    background-color: white;
+    border-radius: 4px;
+    /* Add more styling as needed */
+  }

src/assets/css/events/EventTag.module.css

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 10px;
+}
+
+.container:hover {
+  cursor: pointer;
+}
+
+.font {
+  font-family: "DM Sans";
+  font-size: 10px;
+  font-style: normal;
+  font-weight: bold;
+  line-height: normal;
+}
+
+.fontBlack {
+  color: #151515;
+
+}
+
+.fontWhite {
+  color: #ffffff;
+}

src/components/authentication/MobileLoginContainer.tsx

@@ -0,0 +1,13 @@
+import styles from '../../assets/css/authentication/MobileLoginContainer.module.css'; // Import mobile-specific CSS
+
+const MobileLoginContainer = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.loginForm}>
+        {/* Your login form goes here */}
+      </div>
+    </div>
+  );
+}
+
+export default MobileLoginContainer;

src/components/authentication/WebLoginContainer.tsx

@@ -0,0 +1,13 @@
+import styles from '../../assets/css/authentication/WebLoginContainer.module.css'; // Import web-specific CSS
+
+const WebLoginContainer = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.loginForm}>
+        {/* Your login form goes here */}
+      </div>
+    </div>
+  );
+}
+
+export default WebLoginContainer;

src/components/constants.tsx

@@ -0,0 +1,18 @@
+export const BREAKPOINTS = {
+  XS: 0,
+  SM: 576,
+  MD: 768,
+  LG: 992,
+  XL: 1200,
+  XXL: 1400
+}
+
+export const EVENT_TAG_COLORS = {
+  SD: '#528EE8',
+  ML: '#8BCA80',
+  BC: '#EA5959',
+  Q: '#C179B9',
+  IA: '#7DCACF',
+  ER: '#FDCE55',
+  PC: '#0C1747',
+}