dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FINISH: Register Page

Browse Source 
Could do more design
This commit is contained in:
EvanLin3141
2025-02-12 01:27:34 +00:00
parent f162c32abd
commit 9d08c5b58f
3 changed files with 86 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -83,7 +83,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
<div
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999]
h-auto max-h-[75vh] m-auto min-w-[31vw] w-fit py-[50px] rounded-[5rem]"
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*/}

14
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -104,33 +104,33 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
<div className="h-[100%] 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] h-[26em] border border-white/10">
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[27.5em] border border-white/10">
<form
onSubmit={handleSubmit}
id="login-form"
className="flex flex-col space-y-8"
className="flex flex-col"
>
{errors.general && (
<p className="text-red-500 text-sm text-center">{errors.general}</p>
<p className="text-red-500 text-sm text-center text-[0.75em]">{errors.general}</p>
)}
{errors.username && (
<p className="text-red-500 text-center">{errors.username}</p>
<p className="text-red-500 text-center text-[0.75em]">{errors.username}</p>
)}
<Input
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`w-full p-3 ${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
/>
{errors.password && (
<p className="text-red-500 mt-3 text-sm">{errors.password}</p>
<p className="text-red-500 text-center text-[0.75em]">{errors.password}</p>
)}
<div className="">
<div className="mb-[2em]">
<Input
name="password"
type="password"

45
frontend/src/components/Auth/RegisterForm.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
interface RegisterFormData {
username: string;
@@ -107,28 +108,38 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
};
return (
<>
<div className="mb-2">
<div className="h-[100%] flex flex-col items-center p-10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
<div className="mt-5 bg-white/10 backdrop-blur-md p-10 md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[31em] border border-white/10">
<form
onSubmit={handleSubmit}
id="register-form"
className="h-[100%] flex flex-col justify-evenly items-center"
className="flex flex-col"
>
<div className="relative w-full">
{errors.general && (
<p className="text-red-500 text-sm text-center">{errors.general}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.general}</p>
)}
{errors.username && (
<p className="text-red-500 mt-3 text-sm">{errors.username}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.username}</p>
)}
<Input
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
/>
</div>
<div className="relative w-full">
{errors.email && (
<p className="text-red-500 mt-3 text-sm">{errors.email}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.email}</p>
)}
<Input
name="email"
@@ -136,11 +147,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email"
value={formData.email}
onChange={handleInputChange}
extraClasses={`${errors.email ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${errors.email ? "border-red-500" : ""}`}
/>
</div>
<div className="relative w-full">
{errors.password && (
<p className="text-red-500 mt-3 text-sm">{errors.password}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.password}</p>
)}
<Input
name="password"
@@ -148,11 +161,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
extraClasses={`${errors.password ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${errors.password ? "border-red-500" : ""}`}
/>
</div>
<div className="relative w-full">
{errors.confirmPassword && (
<p className="text-red-500 mt-3 text-sm">{errors.confirmPassword}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.confirmPassword}</p>
)}
<Input
name="confirmPassword"
@@ -160,11 +175,21 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={handleInputChange}
extraClasses={`${errors.confirmPassword ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${errors.confirmPassword ? "border-red-500" : ""}`}
/>
</div>
<Button type="submit">Register</Button>
</form>
</div>
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
<GoogleLogin />
</div>
</div>
</div>
</>
);
};