Add the home page

fonts/fonts.ts

@@ -1,6 +1,8 @@
-import { Inter as inter, Roboto_Mono as roboto } from "next/font/google";
+import { Inter as inter, Lora as lora, Roboto_Mono as roboto } from "next/font/google";
 
 const Inter = inter({ subsets: ["latin"] });
 const Roboto = roboto({ weight: ["400", "700"], subsets: ["latin"] });
+const Lora = lora({ weight: ["400", ], subsets: ["latin"] });
+
+export { Inter, Lora, Roboto };
 
-export { Inter, Roboto };

src/app/components/Button/Button.tsx

@@ -8,14 +8,17 @@ export default function Button({
   children,
   className,
   variant = "secondary",
+  block = false,
   ...props
 }: ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode;
   variant?: "primary" | "secondary";
+  block?: boolean;
 }) {
 
-  const buttonClassname = cn("button", className, {
+  const buttonClassname = cn("btn", className, {
     [`${variant}`]: variant,
+    block,
   });
 
   return (

src/app/components/Button/button.scss

@@ -1,4 +1,4 @@
-button.button {
+.btn {
   color: var(--text-color);
   padding: 8px 16px;
   border: 2px solid var(--text-color);
@@ -7,7 +7,7 @@ button.button {
   font-size: 1rem;
   font-weight: 700;
   background: var(--bg-color);
-  width: 100%;
+  width: fit-content;
   box-shadow: none;
   transition: all 0.2s ease-in-out;
 
@@ -20,4 +20,8 @@ button.button {
     box-shadow: 3px 3px 0 1px var(--text-color);
   }
 
+  &.block {
+    width: 100%;
+  }
+
 }

src/app/components/Footer/Footer.tsx

@@ -1,13 +1,15 @@
-import React from "react";
+"use server";
 
+import React from "react";
+import { Lora, Roboto } from "../../../../fonts/fonts";
 import "./footer.scss";
 
-export default function Footer() {
+export default async function Footer() {
   return (
     <footer
-      className="footer"
+      className={`footer ${Lora.className}`}
     >
-      developed by <a href="https://github.com/ieeah" target="_blank">Ieeah</a> @ U1P1 ®
+      Developed by <small><a href="https://github.com/ieeah" target="_blank" className={Roboto.className}>Ieeah</a></small> @U1P1 ®
     </footer>
   )
 };

src/app/components/Footer/footer.scss

@@ -4,5 +4,10 @@ footer.footer {
   width: 100%;
   text-align: center;
   padding-block: 1rem;
-  border-top: 1px solid #eaeaea;
+  background: var(--primary-btn-bg);
+
+  a {
+    text-decoration: underline;
+  }
+
 }

src/app/components/Input/input.scss

@@ -50,12 +50,12 @@
         border-radius: 8px;
       }
 
-      &:user-invalid {
+      &:not(:placeholder-shown):user-invalid {
         border-color: var(--danger-color);
         box-shadow: 3px 3px 0 1px var(--danger-color);
       }
 
-      &:user-valid {
+      &:not(:placeholder-shown):user-valid {
         border-color: var(--success-color);
         box-shadow: 3px 3px 0 1px var(--success-color);
       }

src/app/login/page.tsx → src/app/components/LoginBox/LoginBox.tsx

@@ -3,22 +3,13 @@
 import { useRouter } from "next/navigation";
 import React from "react";
 
-import Button from "../components/Button/Button";
-import Input from "../components/Input/Input";
-
-import { supabaseAuth } from "../../../supabaseClient";
+import Button from "../Button/Button";
+import Input from "../Input/Input";
 
+import { supabaseAuth } from "../../../../supabaseClient";
 import "./login.scss";
 
-const arr: Array<"xs" | "sm" | "md" | "lg" | "xl"> = [
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-];
-
-export default function Login() {
+export default function LoginBox() {
   const [email, setEmail] = React.useState("");
   const [password, setPassword] = React.useState("");
   const router = useRouter();
@@ -39,18 +30,25 @@ export default function Login() {
     console.log("Sign up response:", { error, data });
   };
 
+  const handleLogout = async () => {
+    const [error, data] = await supabaseAuth.signOut();
+    console.log("Logout response:", { error, data });
+  };
+
   const handleSubmit = async (action: string) => {
     if (action === "login") {
       handleLogin();
-    } else {
+    } else if (action === "signup") {
       handleSignUp();
+    } else {
+      handleLogout();
     }
   };
 
   return (
-    <main className="main">
+    <div className="login-wrapper">
       <form className="login-box" onSubmit={(e) => e.preventDefault()}>
-        <h2>Login</h2>
+        <h3 className="mb-15">Login</h3>
         <Input
           label="Email"
           type="email"
@@ -59,6 +57,8 @@ export default function Login() {
           name="email"
           className="mb-2"
           required
+          placeholder=""
+          aria-placeholder="Email"
         />
         <Input
           label="Password"
@@ -67,20 +67,36 @@ export default function Login() {
           onChange={handleChange}
           name="pwd"
           required
+          placeholder=""
+          aria-placeholder="Password"
+          minLength={8}
         />
         <div className="login-divider"></div>
         <div className="actions-wrapper">
           <Button
-            className="mb-1"
             variant="primary"
             onClick={() => handleSubmit("login")}
             type="submit"
+            block
           >
             Accedi
           </Button>
-          <Button onClick={() => handleSubmit("signup")}>Registrati</Button>
+          <Button
+            onClick={() => handleSubmit("signup")}
+            block
+            type="submit"
+          >
+            Registrati
+          </Button>
+          <Button
+            onClick={() => handleSubmit("logout")}
+            block
+            type="submit"
+          >
+            Esci
+          </Button>
         </div>
       </form>
-    </main>
+    </div>
   );
 }

src/app/login/login.scss → src/app/components/LoginBox/login.scss

@@ -1,24 +1,31 @@
-.main {
+.login-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  flex-grow: 1;
+  width: 100%;
 
   .login-box {
-    width: 400px;
+    min-width: 400px;
     border: 2px solid black;
     box-shadow: 4px 4px 0 black;
     border-radius: 20px;
     padding: 1.5rem;
 
-    h2 {
-      margin-bottom: 3rem;
-    }
-
     .input-wrapper {
       width: 100%;
     }
 
+    .error-message {
+      color: var(--danger-color);
+      font-size: 0.875rem;
+      padding: 0.5rem;
+      border: 1px solid var(--danger-color);
+      border-radius: 4px;
+      margin-bottom: 1rem;
+      background-color: var(--danger-bg-color);
+    }
+
     .login-divider {
       width: 100%;
       border-bottom: 2px solid;
@@ -41,5 +48,11 @@
         right: 0;
       }
     }
+
+    .actions-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
   }
 }

src/app/components/PageTitle/PageTitle.tsx

@@ -0,0 +1,18 @@
+"use server";
+import cn from "classnames";
+export default async function PageTitle({
+  subtitle,
+  className
+}: Readonly<{ subtitle?: string, className?: string }>) {
+
+  const headClassName = cn("page-title heading", {
+    [`${className}`]: className,
+  });
+
+  return (
+    <>
+      <h1 className={headClassName}>Timetables</h1>
+      {!!subtitle && <h2 className="subheading">{subtitle}</h2>}
+    </>
+  );
+}

src/app/components/TicTac.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+const TicTac: React.FC = () => {
+  const [text, setText] = useState<string>('');
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const randomText = text === 'tic' ? 'tac' : 'tic';
+      const x = Math.random() * 100;
+      const y = Math.random() * 100;
+      setText(randomText);
+      const ticTacElement = document.getElementById('tic-tac');
+      if (ticTacElement) {
+        ticTacElement.style.left = `${x}vw`;
+        ticTacElement.style.top = `${y}vh`;
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      id="tic-tac"
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        fontSize: '2rem',
+        opacity: 0.7,
+      }}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default TicTac;