Skip to content

Refactor frontend components for improved maintainability #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nitinmohan18 merged 1 commit into from
Jun 27, 2026
Merged

Refactor frontend components for improved maintainability #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 18 additions & 53 deletions app/(auth)/sign-in/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { AuthInput } from "@/components/auth/auth-input";
import { OAuthButton } from "@/components/auth/oauth-button";

export default function SignInPage() {
return (
<div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
Expand All @@ -14,45 +17,27 @@ export default function SignInPage() {
</div>

<form className="flex flex-col gap-5 mt-2">
<div className="flex flex-col gap-1.5">
<label
htmlFor="email"
className="text-sm font-medium text-foreground"
>
Email address
</label>
<input
id="email"
type="email"
placeholder="name@student.university.edu"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>
<AuthInput
id="email"
type="email"
label="Email address"
placeholder="name@student.university.edu"
/>

<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between">
<label
htmlFor="password"
className="text-sm font-medium text-foreground"
>
Password
</label>
<AuthInput
id="password"
type="password"
label="Password"
placeholder="••••••••"
rightElement={
<Link
href="#"
className="text-xs font-medium text-[#1D4ED8] transition-colors hover:text-[#1E40AF] dark:text-blue-400 dark:hover:text-blue-300"
>
Forgot password?
</Link>
</div>
<input
id="password"
type="password"
placeholder="••••••••"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>
}
/>

<button
type="button"
Expand All @@ -74,27 +59,7 @@ export default function SignInPage() {
</div>
</div>

<button
type="button"
className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-5 w-5"
>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
GitHub
</button>
<OAuthButton />

<p className="text-center text-sm text-muted-foreground mt-2">
Don&apos;t have an account?{" "}
Expand Down
113 changes: 29 additions & 84 deletions app/(auth)/sign-up/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { AuthInput } from "@/components/auth/auth-input";
import { OAuthButton } from "@/components/auth/oauth-button";

export default function SignUpPage() {
return (
<div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
Expand All @@ -15,73 +18,35 @@ export default function SignUpPage() {

<form className="flex flex-col gap-5 mt-2">
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-1.5">
<label
htmlFor="firstName"
className="text-sm font-medium text-foreground"
>
First name
</label>
<input
id="firstName"
type="text"
placeholder="John"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>
<div className="flex flex-col gap-1.5">
<label
htmlFor="lastName"
className="text-sm font-medium text-foreground"
>
Last name
</label>
<input
id="lastName"
type="text"
placeholder="Doe"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>
</div>

<div className="flex flex-col gap-1.5">
<label
htmlFor="email"
className="text-sm font-medium text-foreground"
>
Email address
</label>
<input
id="email"
type="email"
placeholder="name@student.university.edu"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
<AuthInput
id="firstName"
type="text"
label="First name"
placeholder="John"
/>
</div>

<div className="flex flex-col gap-1.5">
<label
htmlFor="password"
className="text-sm font-medium text-foreground"
>
Password
</label>
<input
id="password"
type="password"
placeholder="••••••••"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
<AuthInput
id="lastName"
type="text"
label="Last name"
placeholder="Doe"
/>
<p className="text-xs text-muted-foreground mt-1">
Must be at least 8 characters long.
</p>
</div>

<AuthInput
id="email"
type="email"
label="Email address"
placeholder="name@student.university.edu"
/>

<AuthInput
id="password"
type="password"
label="Password"
placeholder="••••••••"
hint="Must be at least 8 characters long."
/>

<button
type="button"
className="group mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-[#1D4ED8] px-4 py-3.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#1E40AF] hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 dark:bg-blue-600 dark:hover:bg-blue-700"
Expand All @@ -102,27 +67,7 @@ export default function SignUpPage() {
</div>
</div>

<button
type="button"
className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-5 w-5"
>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
GitHub
</button>
<OAuthButton />

<p className="text-center text-sm text-muted-foreground mt-2">
Already have an account?{" "}
Expand Down
Loading
Loading