REFACTOR: Update style of AuthModal
This commit is contained in:
Chris-1010
@@ -48,7 +48,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
|
||||
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"
|
||||
>
|
||||
<div className="relative w-full max-w-[300px] min-w-[28vw]">
|
||||
<div className="relative w-[35vw] min-w-[300px]">
|
||||
{/* 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 */}
|
||||
@@ -75,14 +75,14 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
|
||||
{/* Form Container */}
|
||||
<div
|
||||
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}
|
||||
>
|
||||
{/*Border Container*/}
|
||||
<div
|
||||
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"
|
||||
className="front-content bg-authForm flex flex-col justify-center
|
||||
z-50 rounded-[5rem] transition-all"
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
@@ -92,7 +92,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
|
||||
</button>
|
||||
<div
|
||||
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()}
|
||||
</div>
|
||||
|
||||
@@ -71,7 +71,6 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
|
||||
const data = await response.json();
|
||||
|
||||
if (data.logged_in) {
|
||||
//TODO: Handle successful login (e.g., redirect to home page)
|
||||
console.log("Login successful! Details: ", data);
|
||||
setIsLoggedIn(true);
|
||||
window.location.reload();
|
||||
@@ -101,15 +100,15 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
|
||||
|
||||
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]">
|
||||
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]">
|
||||
<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
|
||||
onSubmit={handleSubmit}
|
||||
id="login-form"
|
||||
className="flex flex-col"
|
||||
className="flex flex-col justify-evenly flex-grow"
|
||||
>
|
||||
{errors.general && (
|
||||
<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"
|
||||
value={formData.username}
|
||||
onChange={handleInputChange}
|
||||
extraClasses={`w-full mb-[2em] p-3 ${
|
||||
extraClasses={`w-full focus:w-[120%] p-3 ${
|
||||
errors.username ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
@@ -138,45 +137,36 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mb-[2em]">
|
||||
<div className="pb-4">
|
||||
<Input
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
extraClasses={`w-full p-3 ${
|
||||
extraClasses={`w-full focus:w-[120%] p-3 ${
|
||||
errors.password ? "border-red-500" : ""
|
||||
}`}
|
||||
></Input>
|
||||
<div className="flex">
|
||||
<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>
|
||||
<div className="flex justify-end">
|
||||
<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}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit">Login</Button>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
|
||||
<GoogleLogin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ export default function GoogleLogin() {
|
||||
};
|
||||
|
||||
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">
|
||||
<button
|
||||
onClick={handleLoginClick}
|
||||
@@ -20,7 +20,7 @@ export default function GoogleLogin() {
|
||||
alt="Google logo"
|
||||
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
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -136,7 +136,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
|
||||
placeholder="Username"
|
||||
value={formData.username}
|
||||
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" : ""
|
||||
}`}
|
||||
/>
|
||||
@@ -154,7 +154,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
|
||||
placeholder="Email"
|
||||
value={formData.email}
|
||||
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" : ""
|
||||
}`}
|
||||
/>
|
||||
@@ -172,7 +172,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
|
||||
placeholder="Password"
|
||||
value={formData.password}
|
||||
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" : ""
|
||||
}`}
|
||||
/>
|
||||
@@ -189,7 +189,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
|
||||
placeholder="Confirm Password"
|
||||
value={formData.confirmPassword}
|
||||
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" : ""
|
||||
}`}
|
||||
/>
|
||||
|
||||
@@ -145,7 +145,7 @@ def login():
|
||||
except ValueError as e:
|
||||
return jsonify({
|
||||
"account_created": False,
|
||||
"error_fields": [username, password],
|
||||
"error_fields": ["username", "password"],
|
||||
"message": "Invalid input received"
|
||||
}), 400
|
||||
|
||||
|
||||
Reference in New Issue
Block a user