RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling refactor

Browse Source
This commit is contained in:
augmentedpotato
2026-04-18 16:12:43 -06:00
committed by Harkamal Randhawa
parent 148b587c05
commit 79c42574f6
21 changed files with 829 additions and 4509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
web/app/register/page.js
View File

@@ -6,6 +6,10 @@ import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/context/AuthContext";
const labelCls = "flex flex-col gap-[0.35rem] text-[0.9rem] font-semibold text-[#444]";
const inputCls = "px-[0.85rem] py-[0.6rem] border border-[#ddd] rounded-lg text-base outline-none transition-all focus:border-[#e68672] focus:shadow-[0_0_0_3px_rgba(230,134,114,0.2)]";
const submitBtnCls = "mt-2 py-3 bg-[#e68672] text-white border-none rounded-lg text-base font-bold cursor-pointer transition-all hover:bg-[#d4705e] active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed";
function resolveNextPath(candidate) {
if (!candidate || !candidate.startsWith("/")) {
return "/";
@@ -58,129 +62,73 @@ function RegisterPage() {
password: form.password,
});
router.push(resolveNextPath(searchParams.get("next")));
}
}
catch (err) {
setError(err.message);
}
}
finally {
setLoading(false);
}
}
return (
<main className="auth-page">
<div className="auth-card">
<h1 className="auth-title">Create Account</h1>
<main className="min-h-[calc(100vh-70px)] flex items-center justify-center py-8 px-4 bg-[#fafafa]">
<div className="bg-white rounded-2xl shadow-[0_4px_24px_rgba(0,0,0,0.1)] p-10 w-full max-w-[440px] max-[480px]:p-6">
<h1 className="text-[1.75rem] font-bold text-[#222] m-0 mb-6 text-center">Create Account</h1>
{error && <p className="auth-error">{error}</p>}
{error && <p className="bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b] rounded-lg px-4 py-[0.65rem] text-[0.9rem] mb-2">{error}</p>}
<form className="auth-form" onSubmit={handleSubmit}>
<label className="auth-label">
<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
<label className={labelCls}>
First Name
<input
className="auth-input"
type="text"
name="firstName"
value={form.firstName}
onChange={handleChange}
required
/>
<input className={inputCls} type="text" name="firstName" value={form.firstName} onChange={handleChange} required />
</label>
<label className="auth-label">
<label className={labelCls}>
Last Name
<input
className="auth-input"
type="text"
name="lastName"
value={form.lastName}
onChange={handleChange}
required
/>
<input className={inputCls} type="text" name="lastName" value={form.lastName} onChange={handleChange} required />
</label>
<label className="auth-label">
<label className={labelCls}>
Username
<input
className="auth-input"
type="text"
name="username"
value={form.username}
onChange={handleChange}
required
minLength={3}
/>
<input className={inputCls} type="text" name="username" value={form.username} onChange={handleChange} required minLength={3} />
</label>
<label className="auth-label">
<label className={labelCls}>
Email
<input
className="auth-input"
type="email"
name="email"
value={form.email}
onChange={handleChange}
required
/>
<input className={inputCls} type="email" name="email" value={form.email} onChange={handleChange} required />
</label>
<label className="auth-label">
<label className={labelCls}>
Phone
<input
className="auth-input"
type="tel"
name="phone"
value={form.phone}
onChange={handleChange}
required
pattern="[0-9\-\+\(\) ]{7,15}"
title="Enter a valid phone number"
/>
<input className={inputCls} type="tel" name="phone" value={form.phone} onChange={handleChange} required pattern="[0-9\-\+\(\) ]{7,15}" title="Enter a valid phone number" />
</label>
<label className="auth-label">
<label className={labelCls}>
Password
<input
className="auth-input"
type="password"
name="password"
value={form.password}
onChange={handleChange}
required
minLength={6}
autoComplete="new-password"
/>
<input className={inputCls} type="password" name="password" value={form.password} onChange={handleChange} required minLength={6} autoComplete="new-password" />
</label>
<label className="auth-label">
<label className={labelCls}>
Confirm Password
<input
className="auth-input"
type="password"
name="confirmPassword"
value={form.confirmPassword}
onChange={handleChange}
required
minLength={6}
autoComplete="new-password"
/>
<input className={inputCls} type="password" name="confirmPassword" value={form.confirmPassword} onChange={handleChange} required minLength={6} autoComplete="new-password" />
</label>
<button className="auth-submit-btn" type="submit" disabled={loading}>
<button className={submitBtnCls} type="submit" disabled={loading}>
{loading ? "Creating account…" : "Register"}
</button>
</form>
<p className="auth-switch">
<p className="text-center text-[0.9rem] text-[#666] mt-5">
Already have an account?{" "}
<Link href={searchParams.get("next") ? `/login?next=${encodeURIComponent(searchParams.get("next"))}` : "/login"} className="auth-switch-link">Log in here</Link>
<Link href={searchParams.get("next") ? `/login?next=${encodeURIComponent(searchParams.get("next"))}` : "/login"} className="text-[#e68672] font-semibold no-underline hover:underline">Log in here</Link>
</p>
<p className="auth-switch">
<p className="text-center text-[0.9rem] text-[#666] mt-5">
Forgot your password?{" "}
<Link href="/forgot-password" className="auth-switch-link">Reset it here</Link>
<Link href="/forgot-password" className="text-[#e68672] font-semibold no-underline hover:underline">Reset it here</Link>
</p>
</div>
</main>