UPDATE: Moved image files

UPDATE: Made AuthModal more responsive
2025-02-19 02:22:10 +00:00
parent 46645b74d7
commit bdaba30cd3
17 changed files with 103 additions and 107 deletions
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -3,7 +3,6 @@ import { ToggleButton } from "../Input/Button";
 import {
  LogIn as LogInIcon,
  User as UserIcon,
-  CircleHelp as ForgotIcon,
 } from "lucide-react";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
@@ -20,7 +19,6 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {

  const handleSubmit = () => {
    setSpinDuration("1s");
-
    setTimeout(() => {
      setSpinDuration("7s");
    }, 3500);
@@ -38,18 +36,6 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
      Forgot: <ForgotPasswordForm onSubmit={handleSubmit} />,
    };
    return formMap[selectedTab] || <div>Please select a valid option</div>;
-    {
-      /*
-    if (selectedTab === "Login") {
-      return  <LoginForm onSubmit={(handleSubmit)}/>
-    } else if (selectedTab === "Register") {
-      return  <RegisterForm onSubmit={(handleSubmit)}/>
-    } else if (selectedTab === "Forgot") {
-      return  <ForgotPasswordForm onSubmit={(handleSubmit)}/>
-    } else
-      return <div> Please select a valid icon</div>
-      */
-    }
  };

  return (
@@ -60,50 +46,46 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
        className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
      ></div>

-      {/*Container*/}
+      {/*Main Container*/}
      <div
        id="auth-modal"
-        className="fixed inset-0 flex flex-col items-center justify-around z-[9000] 
-        h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating "
+        className="fixed inset-0 flex items-start justify-center z-[9000] h-[95vh] m-auto pt-[15vh] rounded-[5rem] transition-all animate-floating"
      >
-        {/* Login/Register Buttons Container */}
-        <div className="fixed top-[1em] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
-          {/* Login Toggle */}
-          <ToggleButton
-            toggled={selectedTab === "Login"}
-            extraClasses={`flex flex-col items-center px-8 "
-              }`}
-            onClick={() => setSelectedTab("Login")}
-          >
-            <LogInIcon className=" w-[3em] sm:w-[1em] mr-1" />
-            Login
-          </ToggleButton>
+        <div className="relative w-full max-w-[300px] min-w-[28vw]">
+          {/* Login/Register Buttons Container */}
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-20 w-[250px] flex justify-center gap-8 transition-transform overflow-visible">
+            {/* Login Toggle */}
+            <ToggleButton
+              toggled={selectedTab === "Login"}
+              extraClasses="flex flex-col items-center px-[1em] sm:px-[1.45em] ml:px-[1.6em] lx:px-[2em]"
+              onClick={() => setSelectedTab("Login")}
+            >
+              <LogInIcon className="w-[2em] sm:w-[2.5em] md:w-[2.75em] lg:w-[3em] mr-1" />
+              Login
+            </ToggleButton>

-          {/* Register Toggle */}
-          <ToggleButton
-            toggled={selectedTab === "Register"}
-            extraClasses="flex flex-col items-center px-8  z-[9001]"
-            onClick={() => setSelectedTab("Register")}
-          >
-            <UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
-            Register
-          </ToggleButton>
-        </div>
+            {/* Register Toggle */}
+            <ToggleButton
+              toggled={selectedTab === "Register"}
+              extraClasses="flex flex-col items-center px-[1em] sm:px-[1.45em] ml:px-[1.6em] lx:px-[2em]"
+              onClick={() => setSelectedTab("Register")}
+            >
+              <UserIcon className="w-[2em] sm:w-[2.5em] md:w-[2.75em] lg:w-[3em] mr-1" />
+              Register
+            </ToggleButton>
+          </div>

-        <div
-          className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
-        h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw]  py-[50px] rounded-[5rem]"
-          style={{ "--spin-duration": spinDuration } as React.CSSProperties}
-        >
-          {/*Border Container*/}
+          {/* Form Container */}
          <div
-            id="border-container"
-            className="front-content fixed ml-[1px] mt-[0.5px] inset-0 bg-authForm flex flex-col justify-center
-          z-50 h-[70vh] min-w-[30vw] w-fit py-[50px] rounded-[2rem] transition-all"
+            className="container flex flex-col items-center justify-around z-[9999] 
+            h-[70vh] max-h-[75vh] m-auto py-[50px] rounded-[5rem] transition-all"
+            style={{ "--spin-duration": spinDuration } as React.CSSProperties}
          >
+            {/*Border Container*/}
            <div
-              id="login-methods"
-              className=" w-full flex flex-row items-center justify-evenly"
+              id="border-container"
+              className="front-content ml-[1px] mt-[0.5px] bg-authForm flex flex-col justify-center
+                z-50 h-full w-full py-[50px] rounded-[5rem] transition-all"
            >
              <button
                onClick={onClose}
@@ -111,8 +93,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
              >
                ✕
              </button>
+              <div id="login-methods" className="w-full flex flex-row items-center justify-evenly">
+                {authSwitch()}
+              </div>
            </div>
-            <>{authSwitch()}</>
          </div>
        </div>
      </div>
@@ -120,4 +104,4 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
  );
 };

-export default AuthModal;
+export default AuthModal;
--- a/frontend/src/components/Auth/ForgotPasswordForm.tsx
+++ b/frontend/src/components/Auth/ForgotPasswordForm.tsx
@@ -51,9 +51,7 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ({ onSubmit }) => {

        if (!response.ok) {
          const data = await response.json();
-          throw new Error(
-            data.message || "An error has occurred while resetting"
-          );
+          throw new Error(data.message || "An error has occurred while resetting");
        } else {
          confirmPasswordReset();
        }
@@ -68,32 +66,39 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ({ onSubmit }) => {
  };

  return (
-    <div className="h-screen flex items-center justify-center">
-      <div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
-        <h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
-        <form
-          onSubmit={handleSubmit}
-          className="flex flex-col items-center space-y-4 w-full m-6"
-        >
-          <Input
-            name="email"
-            type="email"
-            placeholder="Enter your email"
-            value={email}
-            onChange={handleEmailChange}
-            extraClasses={`appearance-none bg-transparent text-black m-5 ${
-              errors.email ? "border-red-500" : ""
-            }`}
-          />
+    <div className="mb-2">
+      <div className="flex flex-col items-center p-[2.5rem]">
+      <h1 className="text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">Forgot Password</h1>
+      <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
+          <form
+            onSubmit={handleSubmit}
+            id="forgot-password-form"
+            className="flex flex-col"
+          >
+            <div className="relative w-full">
+              {errors.general && (
+                <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                  {errors.general}
+                </p>
+              )}

-          {errors.email && (
-            <p className="text-red-500 mt-2 text-sm">{errors.email}</p>
-          )}
-
-          <Button type="submit" extraClasses="text-black">
-            Send Reset Link
-          </Button>
-        </form>
+              {errors.email && (
+                <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                  {errors.email}
+                </p>
+              )}
+              <Input
+                name="email"
+                type="email"
+                placeholder="Enter your email"
+                value={email}
+                onChange={handleEmailChange}
+                extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
+              />
+            </div>
+            <Button type="submit">Send Link</Button>
+          </form>
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -102,9 +102,8 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
  return (
    <>
      <div className="flex flex-col items-center p-10">
-        <h1 className="flex flex-col text-white text-[2.5em] font-[800]">Login</h1>
-        <div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full 
-       md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
+        <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">Login</h1>
+        <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">

          <form
            onSubmit={handleSubmit}
@@ -155,13 +154,13 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
                    type="checkbox"
                    className="accent-purple-600 w-3 h-3 mr-1"
                  />
-                  <span className="sm:text-[0.5em] md:text-[0.8em]">
+                  <span className="text-[0.5em] xl:text-[0.75em]">
                    Remember me
                  </span>
                </label>
                <button
                  type="button"
-                  className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
+                  className="flex w-full justify-end items-center justify-items-end text-[0.5em] xl:text-[0.75em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
                  onClick={onForgotPassword}
                >
                  <ForgotIcon size={16} className="flex flex-row mr-1" />
--- a/frontend/src/components/Auth/OAuth.tsx
+++ b/frontend/src/components/Auth/OAuth.tsx
@@ -20,7 +20,7 @@ export default function GoogleLogin() {
            alt="Google logo"
            className="w-[2em] h-[2em] mr-2"
          />
-          <span className="flex-grow">Sign in with Google</span>
+          <span className="flex-grow text-[0.6em] lx:text-[0.75em] 2lg:text-[1em]">Sign in with Google</span>
        </button>
      </div>
    </div>
--- a/frontend/src/components/Auth/RegisterForm.tsx
+++ b/frontend/src/components/Auth/RegisterForm.tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import Input from "../Input/Input";
 import Button from "../Input/Button";
 import { useAuth } from "../../context/AuthContext";
-import GoogleLogin from "./OAuth";

 interface RegisterFormData {
  username: string;
@@ -111,13 +110,10 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
    <>
      <div className="mb-2">
        <div className="flex flex-col items-center p-[2.5rem]">
-          <h1 className="flex flex-col text-white text-[2.5em] font-[800]">
+          <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
            Register
          </h1>
-          <div
-            className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full 
-          md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10"
-          >
+          <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
            <form
              onSubmit={handleSubmit}
              id="register-form"