Issue 33: Create admin login page draft

[Patrickodrat]

Change Summary

Create the login page for admin. Use cookie to store JWT token.

Related issue

• Resolve Create admin login page #33

[Copilot]

Pull request overview

This PR creates an admin login page that authenticates users via JWT tokens. The implementation posts credentials to a backend endpoint, stores the access token in memory, and sets a refresh token via HTTP-only cookies.

Key changes:

• New login page with username/email and password fields
• JWT token management using in-memory storage for access tokens
• UI component updates including input field styling changes and new input-field component with date/time support

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
client/src/app/login/page.tsx	New login page with form handling, authentication logic, and error management
client/src/components/ui/input.tsx	Updated input styling to use standardized border and height properties
client/src/components/ui/input-field.tsx	New comprehensive input field component supporting text, number, select, badge, date, and time inputs
client/src/components/ui/input_old.tsx	Previous version of input-field component preserved for reference

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The "Forgot Password?" button doesn't have any functionality or navigation. It should either be removed if not implemented yet, or implement the forgot password functionality, or at least provide a disabled state or proper link to indicate it's not yet available.

Suggested change

	className="text-xs text-slate-500 underline-offset-2 hover:underline"
	disabled
	aria-disabled="true"
	title="Forgot password functionality is not available yet"
	className="text-xs text-slate-400 cursor-not-allowed"

[Copilot]

The state variable is named 'username' (line 21) but the input is using an undefined variable 'email'. This will cause a runtime error. The value and onChange handler should reference 'username' instead of 'email', or the state variable should be renamed to 'email'.

Suggested change

	value={email}
	onChange={(e) => setEmail(e.target.value)}
	value={username}
	onChange={(e) => setUsername(e.target.value)}

[Copilot]

There's an inconsistency in spacing. The placeholder should either be "Enter Username/Email" (no space before slash) or "Enter Username / Email" (spaces around slash) for consistency.

Suggested change

	placeholder="Enter Username/ Email"
	placeholder="Enter Username / Email"

[Copilot]

The function 'setAccessToken' is imported from '@/lib/api' but doesn't appear to be exported from that module. This will cause an import error and the login functionality will not work. You need to implement and export this function in the api module.

[Copilot]

The label says "Username / Email" (with spaces around the slash) but the placeholder says "Enter Username/ Email" (with inconsistent spacing). These should be consistent for better user experience.

[Copilot]

Unused variable setUsername.

Suggested change

	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [error, setError] = useState<string | null>(null);
	async function handleSubmit(e: FormEvent) {
	e.preventDefault();
	setError(null);
	const [password, setPassword] = useState("");
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [error, setError] = useState<string | null>(null);
	async function handleSubmit(e: FormEvent<HTMLFormElement>) {
	e.preventDefault();
	setError(null);
	const form = e.currentTarget;
	const formData = new FormData(form);
	const username =
	String(
	formData.get("username") ??
	formData.get("email") ??
	""
	).trim();

[ErikaKK]

you have added two input field file. The old input file has been moved to components/. Pls update that one instead of adding in components/ui/

[ErikaKK]

please use zod and react-hook-form library instead of useState for the form field