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 <div
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 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} style={{ "--spin-duration": spinDuration } as React.CSSProperties}
> >
{/*Border Container*/} {/*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"> <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> <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 <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 <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="login-form" id="login-form"
className="flex flex-col space-y-8" className="flex flex-col"
> >
{errors.general && ( {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 && ( {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 <Input
name="username" name="username"
placeholder="Username" placeholder="Username"
value={formData.username} value={formData.username}
onChange={handleInputChange} 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 && ( {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 <Input
name="password" name="password"
type="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 Input from "../Layout/Input";
import Button from "../Layout/Button"; import Button from "../Layout/Button";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
interface RegisterFormData { interface RegisterFormData {
username: string; username: string;
@@ -107,28 +108,38 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
}; };
return ( 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 <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="register-form" id="register-form"
className="h-[100%] flex flex-col justify-evenly items-center" className="flex flex-col"
> >
<div className="relative w-full">
{errors.general && ( {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 && ( {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 <Input
name="username" name="username"
placeholder="Username" placeholder="Username"
value={formData.username} value={formData.username}
onChange={handleInputChange} 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 && ( {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 <Input
name="email" name="email"
@@ -136,11 +147,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email" placeholder="Email"
value={formData.email} value={formData.email}
onChange={handleInputChange} 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 && ( {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 <Input
name="password" name="password"
@@ -148,11 +161,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password" placeholder="Password"
value={formData.password} value={formData.password}
onChange={handleInputChange} 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 && ( {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 <Input
name="confirmPassword" name="confirmPassword"
@@ -160,11 +175,21 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password" placeholder="Confirm Password"
value={formData.confirmPassword} value={formData.confirmPassword}
onChange={handleInputChange} 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> <Button type="submit">Register</Button>
</form> </form>
</div>
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
<GoogleLogin />
</div>
</div>
</div>
</>
); );
}; };