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

REFACTOR: Update style of AuthModal

Browse Source
This commit is contained in:
Chris-1010
2025-02-27 21:11:22 +00:00
parent 00b2a3547e
commit 82e6074d23
5 changed files with 24 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
id="auth-modal" id="auth-modal"
className="fixed inset-0 flex items-start justify-center z-[9000] h-[95vh] m-auto pt-[15vh] 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"
> >
<div className="relative w-full max-w-[300px] min-w-[28vw]"> <div className="relative w-[35vw] min-w-[300px]">
{/* Login/Register Buttons Container */} {/* 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"> <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 */} {/* Login Toggle */}
@@ -75,14 +75,14 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
{/* Form Container */} {/* Form Container */}
<div <div
className="container flex flex-col items-center justify-around z-[9999] className="container flex flex-col items-center justify-around z-[9999]
h-[70vh] max-h-[75vh] m-auto py-[50px] rounded-[5rem] transition-all" h-[70vh] m-auto rounded-[5rem] transition-all"
style={{ "--spin-duration": spinDuration } as React.CSSProperties} style={{ "--spin-duration": spinDuration } as React.CSSProperties}
> >
{/*Border Container*/} {/*Border Container*/}
<div <div
id="border-container" id="border-container"
className="front-content ml-[1px] mt-[0.5px] bg-authForm flex flex-col justify-center className="front-content bg-authForm flex flex-col justify-center
z-50 h-full w-full py-[50px] rounded-[5rem] transition-all" z-50 rounded-[5rem] transition-all"
> >
<button <button
onClick={onClose} onClick={onClose}
@@ -92,7 +92,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</button> </button>
<div <div
id="login-methods" id="login-methods"
className="w-full flex flex-row items-center justify-evenly" className="flex flex-row items-center justify-evenly h-full py-[10%]"
> >
{authSwitch()} {authSwitch()}
</div> </div>

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

@@ -71,7 +71,6 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
const data = await response.json(); const data = await response.json();
if (data.logged_in) { if (data.logged_in) {
//TODO: Handle successful login (e.g., redirect to home page)
console.log("Login successful! Details: ", data); console.log("Login successful! Details: ", data);
setIsLoggedIn(true); setIsLoggedIn(true);
window.location.reload(); window.location.reload();
@@ -101,15 +100,15 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return ( return (
<> <>
<div className="flex flex-col items-center p-10"> <div className="flex flex-col items-center h-full">
<h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]"> <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
Login Login
</h1> </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]"> <div className="flex flex-col justify-evenly flex-grow mt-[4vh] bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="login-form" id="login-form"
className="flex flex-col" className="flex flex-col justify-evenly flex-grow"
> >
{errors.general && ( {errors.general && (
<p className="text-red-500 text-sm text-center text-[0.75em]"> <p className="text-red-500 text-sm text-center text-[0.75em]">
@@ -127,7 +126,7 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
placeholder="Username" placeholder="Username"
value={formData.username} value={formData.username}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[2em] p-3 ${ extraClasses={`w-full focus:w-[120%] p-3 ${
errors.username ? "border-red-500" : "" errors.username ? "border-red-500" : ""
}`} }`}
/> />
@@ -138,43 +137,34 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
</p> </p>
)} )}
<div className="mb-[2em]"> <div className="pb-4">
<Input <Input
name="password" name="password"
type="password" type="password"
placeholder="Password" placeholder="Password"
value={formData.password} value={formData.password}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full p-3 ${ extraClasses={`w-full focus:w-[120%] p-3 ${
errors.password ? "border-red-500" : "" errors.password ? "border-red-500" : ""
}`} }`}
></Input> ></Input>
<div className="flex"> <div className="flex justify-end">
<label className="flex w-full items-center justify-start cursor-pointer w-10px">
<input
type="checkbox"
className="accent-purple-600 w-3 h-3 mr-1"
/>
<span className="text-[0.5em] xl:text-[0.75em]">
Remember me
</span>
</label>
<button <button
type="button" type="button"
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" className="flex items-center w-fit text-white font-semibold hover:scale-105 mt-2 transition-all ease-in"
onClick={onForgotPassword} onClick={onForgotPassword}
> >
<ForgotIcon size={16} className="flex flex-row mr-1" /> <ForgotIcon size={16} className="flex flex-row mr-1" />
<span> Forgot Password </span> <span className="text-[calc((1.5vw+1vh)/2)]">
Forgot Password
</span>
</button> </button>
</div> </div>
</div> </div>
<Button type="submit">Login</Button> <Button type="submit">Login</Button>
</form> </form>
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]"> <GoogleLogin />
<GoogleLogin />
</div>
</div> </div>
</div> </div>
</> </>

4
frontend/src/components/Auth/OAuth.tsx
View File

@@ -6,7 +6,7 @@ export default function GoogleLogin() {
}; };
return ( return (
<div className="w-full"> <div className="mt-4 w-full hover:scale-105 transition-all ease-in">
<div className="flex flex-wrap justify-center w-full"> <div className="flex flex-wrap justify-center w-full">
<button <button
onClick={handleLoginClick} onClick={handleLoginClick}
@@ -20,7 +20,7 @@ export default function GoogleLogin() {
alt="Google logo" alt="Google logo"
className="w-[2em] h-[2em] mr-2" className="w-[2em] h-[2em] mr-2"
/> />
<span className="flex-grow text-[0.6em] lx:text-[0.75em] 2lg:text-[1em]"> <span className="flex-grow text-[calc((1.5vw+1.5vh)/2)]">
Sign in with Google Sign in with Google
</span> </span>
</button> </button>

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

@@ -136,7 +136,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Username" placeholder="Username"
value={formData.username} value={formData.username}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
errors.username ? "border-red-500" : "" errors.username ? "border-red-500" : ""
}`} }`}
/> />
@@ -154,7 +154,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email" placeholder="Email"
value={formData.email} value={formData.email}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
errors.email ? "border-red-500" : "" errors.email ? "border-red-500" : ""
}`} }`}
/> />
@@ -172,7 +172,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password" placeholder="Password"
value={formData.password} value={formData.password}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
errors.password ? "border-red-500" : "" errors.password ? "border-red-500" : ""
}`} }`}
/> />
@@ -189,7 +189,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password" placeholder="Confirm Password"
value={formData.confirmPassword} value={formData.confirmPassword}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
errors.confirmPassword ? "border-red-500" : "" errors.confirmPassword ? "border-red-500" : ""
}`} }`}
/> />

2
web_server/blueprints/authentication.py
View File

@@ -145,7 +145,7 @@ def login():
except ValueError as e: except ValueError as e:
return jsonify({ return jsonify({
"account_created": False, "account_created": False,
"error_fields": [username, password], "error_fields": ["username", "password"],
"message": "Invalid input received" "message": "Invalid input received"
}), 400 }), 400