ok les go

qwik/package.json

@@ -29,6 +29,7 @@
     "qwik": "qwik"
   },
   "devDependencies": {
+    "@auth/qwik": "0.2.2",
     "@builder.io/qwik": "^1.9.1",
     "@builder.io/qwik-city": "^1.9.1",
     "@types/compression": "^1.7.2",
@@ -45,9 +46,12 @@
     "typescript": "5.4.5",
     "undici": "*",
     "vite": "5.3.5",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "@qwikest/icons": "^0.0.13"
   },
   "dependencies": {
-    "express": "4.20.0"
+    "@auth/firebase-adapter": "^2.7.2",
+    "express": "4.20.0",
+    "firebase-admin": "^12.7.0"
   }
 }

qwik/src/components/404/404.module.css

@@ -0,0 +1,13 @@
+.card {
+    background-color: rgba(70, 70, 70, 0.435);
+    max-width: 80;
+    width: fit-content;
+    border-radius: 50px;
+    margin-top: 50px !important;
+    color: white;
+}
+
+.icon {
+    margin-top: 50px;
+    font-size: 50px;
+}

qwik/src/components/404/404.tsx

@@ -0,0 +1,16 @@
+import { component$} from "@builder.io/qwik";
+import { BsEmojiFrownFill } from "@qwikest/icons/bootstrap"
+import styles404 from "./404.module.css"
+export default component$(() => {
+    return (
+        <div class={`container container-center ${styles404.card}`}>
+            <h1>404 - Page Not Found</h1>
+            <div class={styles404.icon}><BsEmojiFrownFill/></div>
+            <div class="container">
+                <p>Sorry, the page you are looking for does not exist.</p>
+                <br />
+                <p>Please check the URL or return to the homepage.</p>
+            </div>
+        </div>
+  );
+});

qwik/src/components/auth/session/session.module.css

@@ -0,0 +1,113 @@
+.container {
+  position: sticky;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 15px;
+  padding: 10px;
+  backdrop-filter: blur(10px);
+  box-shadow: #FFF8E1;
+  width: 100%;
+  max-width: 300px;
+  margin: auto 0 auto 30px;
+  text-align: center;
+  background-color: #1919198a;
+  height: fit-content;
+  margin-right: 0;
+  z-index: 100;
+  top: 60px;
+}
+
+.imgContainer {
+  background-color: transparent;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 10px;
+  flex-shrink: 0;
+  transition: border 0.3s ease;
+  height: min-content;
+  width: fit-content;
+}
+
+.img {
+  border-radius: 50%;
+  padding: 0;
+  margin: 0;
+  width: 50px;
+  height: 50px;
+  margin: 0;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  color: rgb(255, 253, 253) !important;
+  flex-grow: 1;
+  padding: 0 10px; 
+  font-size: small;
+}
+
+.userInfo p {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  color: rgb(255, 253, 253) !important;
+  max-width: 85%;
+}
+
+.email {
+  font-size: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+}
+
+.form {
+  font-size: 2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+.button {
+  padding: 10px 15px;
+  margin: 3%;
+  color:#FFF8E1;
+  background-color: #0a539b;
+  border: solid black;
+  border-radius: 30px;
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #216ab3;
+}
+
+.iconButton {
+  background-color:#2457c5;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s ease;
+  padding: 10px;
+  width: 60px;
+  height: 60px;
+}
+
+.iconButton:hover {
+  transform: scale(1.1);
+}
+
+.iconButton svg {
+  width: 34px;
+  height: 34px;
+  fill: rgb(247, 244, 244);
+}

qwik/src/components/auth/session/session.tsx

@@ -0,0 +1,45 @@
+import { component$ } from '@builder.io/qwik';
+import { useSession, useSignIn } from '~/routes/plugin@auth';
+import sessionStyles from "./session.module.css";
+import { Form } from '@builder.io/qwik-city';
+import { BsGoogle } from "@qwikest/icons/bootstrap";
+import unknownPerson from "../../../media/authentication/unknown-person.png";
+
+export default component$(() => {
+  const session = useSession();
+  const signIn = useSignIn();
+  const isSignedIn = session.value?.user;
+
+  return (
+    <>
+      {isSignedIn ? (
+        <div class={sessionStyles.container}>
+          <a href="/profile">
+            <div class={sessionStyles.imgContainer}>
+              <img
+                class={sessionStyles.img}
+                src={session.value.user?.image ?? unknownPerson}
+                loading="lazy"
+                alt={session.value.user?.name ?? 'User Icon'}
+                width="80"
+                height="80"
+              />
+            </div>
+          </a>
+          <div class={sessionStyles.userInfo}>
+            <p class={sessionStyles.name}>{session.value.user?.name}</p>
+            <p class={sessionStyles.email}>{session.value.user?.email}</p>
+          </div>
+        </div>
+      ) : (
+        <Form action={signIn} class={sessionStyles.form}>
+          <input type="hidden" name="providerId" value="google" />
+          <input type="hidden" name="options.redirectTo" value="/a/signedin" />
+          <button class={sessionStyles.iconButton}>
+            <BsGoogle />
+          </button>
+        </Form>
+      )}
+    </>
+  );
+});

qwik/src/components/footer/footer.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap');
+
+.footer {
+    color: #f1f1f1;
+    padding: 20px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'Red Hat Display', sans-serif;
+    cursor: default;
+}
+
+.footer-copy {
+    margin-top: 20px;
+    font-size: 14px;
+    font-family: 'Red Hat Display', sans-serif;
+}

qwik/src/components/footer/footer.tsx

@@ -0,0 +1,14 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import footerStyles from './footer.css?inline';
+import SocialMediaIcons from "../social-media/personal/personal";
+
+export default component$(() => {
+    useStylesScoped$(footerStyles);
+
+    return (
+        <footer class="footer">
+            <SocialMediaIcons/>
+            <p class="footer-copy">&copy; {new Date().getFullYear()} Upayan</p>
+        </footer>
+    );
+});

qwik/src/components/header/header.css

@@ -0,0 +1,82 @@
+.header {
+    color: #f1f1f1;
+    padding: 20px;
+    text-align: center;
+    background-color: var(--header-background-color);
+    backdrop-filter: blur(10px);
+    cursor: default;
+}
+
+.header img {
+    border-radius: 50%;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    width: 100px;
+    height: 100px;
+}
+
+.header img:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 10px #3877b4;
+}
+
+.title {
+    font-size: 2.5em;
+    margin: 10px 0;
+    color: #3877b4;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    padding: 0;
+    margin: 20px 0 0 0;
+    flex-wrap: wrap;
+}
+
+nav li {
+    margin: 0 15px;
+}
+
+@media (max-width: 768px) {
+    .header {
+        padding: 15px;
+    }
+
+    .header img {
+        width: 80px;
+        height: 80px;
+    }
+
+    .title {
+        font-size: 2em;
+    }
+
+    nav li {
+        margin: 0 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        padding: 10px;
+    }
+
+    .header img {
+        width: 60px;
+        height: 60px;
+    }
+
+    .title {
+        font-size: 1.5em;
+    }
+
+    nav ul {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    nav li {
+        margin: 10px 0;
+    }
+}

qwik/src/components/header/header.tsx

@@ -0,0 +1,16 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import headerStyles from './header.css?inline';
+import FS from "../../media/upayan.svg";
+
+export default component$(() => {
+    const title = 'File Server';
+
+    useStylesScoped$(headerStyles);
+
+    return (
+        <header class="header">
+            <img src={FS} alt={title} width="100" height="100"/>
+            <h1 class="title">{title}</h1>
+        </header>
+    );
+});

qwik/src/components/infobox/infobox.module.css

@@ -0,0 +1,23 @@
+.infobox {
+  color: white;
+  font-size: 0.8rem;
+  line-height: 2;
+  margin: 0 0 40px;
+}
+
+.infobox h3 {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+.infobox li {
+  line-height: 2.5;
+}
+
+@media screen and (min-width: 600px) {
+  .infobox {
+    margin: 0;
+  }
+}

qwik/src/components/infobox/infobox.tsx

@@ -0,0 +1,13 @@
+import { Slot, component$ } from "@builder.io/qwik";
+import styles from "./infobox.module.css";
+
+export default component$(() => {
+  return (
+    <div class={styles.infobox}>
+      <h3>
+        <Slot name="title" />
+      </h3>
+      <Slot />
+    </div>
+  );
+});