generated from muhtadeetaron/nextjs-template
initial commit
This commit is contained in:
shafin-r
109
app/(auth)/login/page.tsx
Normal file
109
app/(auth)/login/page.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
import FormField from "@/components/FormField";
|
||||
import { login } from "@/lib/auth";
|
||||
import DestructibleAlert from "@/components/DestructibleAlert";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
const page = () => {
|
||||
const router = useRouter();
|
||||
const { setToken } = useAuth();
|
||||
const [form, setForm] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
});
|
||||
const [error, setError] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// For Rafeed
|
||||
// Function to login a user. I've kept it in a barebones form right now, but you can just call the login function from /lib/auth.ts and pass on the form.
|
||||
const loginUser = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
await login(form, setToken); // Call the login function
|
||||
router.push("/home"); // Redirect on successful login
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setError(error.message); // Handle error messages
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div className="flex-1 min-h-screen">
|
||||
<div className="min-h-screen overflow-y-auto">
|
||||
<div className="min-h-full flex flex-col justify-center gap-10 mt-7 mx-6 py-8">
|
||||
{/* Logo Container */}
|
||||
<div
|
||||
className="w-full self-center mt-7"
|
||||
style={{ aspectRatio: "368/89" }}
|
||||
>
|
||||
<Image
|
||||
src="/images/logo/logo.png"
|
||||
alt="Logo"
|
||||
width={368}
|
||||
height={89}
|
||||
className="w-full h-full object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Form Container */}
|
||||
<div className="flex flex-col justify-between gap-10">
|
||||
<div className="flex flex-col w-full gap-5">
|
||||
<FormField
|
||||
title="Email Address"
|
||||
value={form.email}
|
||||
placeholder="Enter your email address..."
|
||||
handleChangeText={(e) => setForm({ ...form, email: e })}
|
||||
/>
|
||||
<FormField
|
||||
title="Password"
|
||||
value={form.password}
|
||||
placeholder="Enter a password"
|
||||
handleChangeText={(e) => setForm({ ...form, password: e })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <DestructibleAlert text={error} extraStyles="" />}
|
||||
|
||||
<button
|
||||
onClick={() => router.push("/home")}
|
||||
disabled={isLoading}
|
||||
className="w-full h-14 flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span
|
||||
className="font-medium"
|
||||
style={{ fontFamily: "Montserrat, sans-serif" }}
|
||||
>
|
||||
{isLoading ? "Logging in..." : "Login"}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Register Link */}
|
||||
<p
|
||||
className="text-center mb-[70px]"
|
||||
style={{ fontFamily: "Montserrat, sans-serif" }}
|
||||
>
|
||||
Don't have an account?{" "}
|
||||
<Link href="/register" className="text-[#276ac0] hover:underline">
|
||||
Register here.
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
166
app/(auth)/register/page.tsx
Normal file
166
app/(auth)/register/page.tsx
Normal file
@ -0,0 +1,166 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { register } from "@/lib/auth";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
import FormField from "@/components/FormField";
|
||||
import DestructibleAlert from "@/components/DestructibleAlert";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const { setToken } = useAuth();
|
||||
const router = useRouter();
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
institution: "",
|
||||
sscRoll: "",
|
||||
hscRoll: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
password: "",
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleError = (error: any) => {
|
||||
if (error?.detail) {
|
||||
const match = error.detail.match(/Key \((.*?)\)=\((.*?)\)/);
|
||||
if (match) {
|
||||
const field = match[1];
|
||||
const value = match[2];
|
||||
return `The ${field} already exists. Please use a different value.`;
|
||||
}
|
||||
}
|
||||
return "An unexpected error occurred. Please try again.";
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const { sscRoll, hscRoll, password } = form;
|
||||
if (sscRoll === hscRoll) {
|
||||
return "SSC Roll and HSC Roll must be unique.";
|
||||
}
|
||||
const passwordRegex =
|
||||
/^(?=.*[A-Z])(?=.*[!@#$%^&*(),.?":{}|<>])[A-Za-z\d!@#$%^&*(),.?":{}|<>]{8,16}$/;
|
||||
if (!passwordRegex.test(password)) {
|
||||
return "Password must be 8-16 characters long, include at least one uppercase letter and one special character.";
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const createUser = async () => {
|
||||
const validationError = validateForm();
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await register(form, setToken);
|
||||
router.push("/tabs/home");
|
||||
} catch (error: any) {
|
||||
console.error("Error:", error.response || error.message);
|
||||
if (error.response?.detail) {
|
||||
const decodedError = handleError({ detail: error.response.detail });
|
||||
setError(decodedError);
|
||||
} else {
|
||||
setError(error.message || "An unexpected error occurred.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div className="min-h-screen flex flex-col items-center justify-center px-4 py-10">
|
||||
<div className="w-full max-w-md space-y-6">
|
||||
<div className="w-full aspect-[368/89] mx-auto">
|
||||
<Image
|
||||
src="/images/logo/logo.png"
|
||||
alt="Logo"
|
||||
width={368}
|
||||
height={89}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-10">
|
||||
<div className="space-y-6">
|
||||
<FormField
|
||||
title="Full name"
|
||||
value={form.name}
|
||||
handleChangeText={(e) =>
|
||||
setForm({ ...form, name: e.target.value })
|
||||
}
|
||||
/>
|
||||
<FormField
|
||||
title="Institution"
|
||||
placeholder="Enter a institution"
|
||||
value={form.institution}
|
||||
handleChangeText={(e) =>
|
||||
setForm({ ...form, institution: e.target.value })
|
||||
}
|
||||
/>
|
||||
<FormField
|
||||
title="SSC Roll No."
|
||||
placeholder="Enter your SSC Roll No."
|
||||
value={form.sscRoll}
|
||||
handleChangeText={(e) =>
|
||||
setForm({ ...form, sscRoll: e.target.value })
|
||||
}
|
||||
/>
|
||||
<FormField
|
||||
title="HSC Roll No."
|
||||
placeholder="Enter your HSC Roll No."
|
||||
value={form.hscRoll}
|
||||
handleChangeText={(e) =>
|
||||
setForm({ ...form, hscRoll: e.target.value })
|
||||
}
|
||||
/>
|
||||
<FormField
|
||||
title="Email Address"
|
||||
placeholder="Enter your email address..."
|
||||
value={form.email}
|
||||
handleChangeText={(e) =>
|
||||
setForm({ ...form, email: e.target.value })
|
||||
}
|
||||
/>
|
||||
<FormField
|
||||
title="Phone Number"
|
||||
placeholder="Enter your phone number.."
|
||||
value={form.phone}
|
||||
handleChangeText={(e) =>
|
||||
setForm({ ...form, phone: e.target.value })
|
||||
}
|
||||
/>
|
||||
<FormField
|
||||
title="Password"
|
||||
placeholder="Enter a password"
|
||||
value={form.password}
|
||||
handleChangeText={(e) =>
|
||||
setForm({ ...form, password: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <DestructibleAlert text={error} />}
|
||||
|
||||
<button
|
||||
onClick={createUser}
|
||||
className="w-full h-14 rounded-full border border-blue-900 text-center text-base font-medium"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
|
||||
<p className="text-center text-sm">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-blue-600">
|
||||
Login here
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user