feat: authentication integration
This commit is contained in:
@ -3,8 +3,11 @@ import { type FC } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { ArrowLeftRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from "@/store/auth";
|
||||
|
||||
const AgreementPage: FC = () => {
|
||||
const profile = useAuth((state) => state.profile);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]`}
|
||||
@ -22,8 +25,8 @@ const AgreementPage: FC = () => {
|
||||
<div className="w-12 h-12 overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500">
|
||||
{/* <User size={32} /> */}
|
||||
<img
|
||||
src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
|
||||
className="w-full h-full flex-1"
|
||||
src={profile?.profile_picture?.toString()}
|
||||
className="w-full h-full flex-1 object-cover"
|
||||
alt="profile"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -13,44 +13,37 @@ const IndexPage: FC = () => {
|
||||
const [tab, setTab] = useState<string>("home");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]`}
|
||||
>
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="overflow-y-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md sm:rounded-none">
|
||||
<div className="flex flex-col items-center sm:pt-0 relative">
|
||||
<div className="flex flex-row items-center absolute left-4 top-4">
|
||||
<img src="/icon.png" alt="icon" className="w-6 h-6" />
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="overflow-y-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md sm:rounded-none">
|
||||
<div className="flex flex-col items-center sm:pt-0 relative">
|
||||
<div className="flex flex-row items-center absolute left-4 top-4">
|
||||
<img src="/icon.png" alt="icon" className="w-6 h-6" />
|
||||
|
||||
<div className="ml-2">
|
||||
<p className="text-sm text-gray-600 text-left dark:text-gray-500">
|
||||
Home Guard
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-2">
|
||||
<p className="text-sm text-gray-600 text-left dark:text-gray-500">
|
||||
Home Guard
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
|
||||
<CardContent className="w-full space-y-4 flex-1" spacing={false}>
|
||||
<div className="flex flex-row">
|
||||
<Sidebar activeTab={tab} onChangeTab={(tab) => setTab(tab)} />
|
||||
<div className="sm:p-4 max-w-full flex-1">
|
||||
<div className="flex flex-col w-full items-center gap-2">
|
||||
<TopBar
|
||||
activeTab={tab}
|
||||
onChangeTab={(tab) => setTab(tab)}
|
||||
/>
|
||||
{tab === "home" && <Home />}
|
||||
{/* {tab === "personal-info" && <PersonalInfo />} */}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{tab === "personal-info" && <PersonalInfo />}
|
||||
</div>
|
||||
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
|
||||
<CardContent className="w-full space-y-4 flex-1" spacing={false}>
|
||||
<div className="flex flex-row">
|
||||
<Sidebar activeTab={tab} onChangeTab={(tab) => setTab(tab)} />
|
||||
<div className="sm:p-4 max-w-full flex-1">
|
||||
<div className="flex flex-col w-full items-center gap-2">
|
||||
<TopBar activeTab={tab} onChangeTab={(tab) => setTab(tab)} />
|
||||
{tab === "home" && <Home />}
|
||||
{/* {tab === "personal-info" && <PersonalInfo />} */}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{tab === "personal-info" && <PersonalInfo />}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -10,6 +10,7 @@ import { useCallback, useState } from "react";
|
||||
import { loginApi } from "@/api/login";
|
||||
import { useAccountRepo } from "@/repository/account";
|
||||
import { useOAuthContext } from "@/context/oauth";
|
||||
import { useAuth } from "@/store/auth";
|
||||
|
||||
interface LoginForm {
|
||||
email: string;
|
||||
@ -32,6 +33,8 @@ export default function LoginPage() {
|
||||
|
||||
const repo = useAccountRepo();
|
||||
|
||||
const updateActiveAccount = useAuth((state) => state.updateActiveAccount);
|
||||
|
||||
const onSubmit: SubmitHandler<LoginForm> = useCallback(
|
||||
async (data) => {
|
||||
console.log({ data });
|
||||
@ -48,7 +51,7 @@ export default function LoginPage() {
|
||||
|
||||
console.log(response);
|
||||
|
||||
await repo.save({
|
||||
const account = await repo.save({
|
||||
accountId: response.id,
|
||||
label: response.full_name,
|
||||
email: response.email,
|
||||
@ -61,6 +64,7 @@ export default function LoginPage() {
|
||||
reset();
|
||||
|
||||
oauth.selectSession(response.access);
|
||||
updateActiveAccount(account);
|
||||
} catch (err: any) {
|
||||
console.log(err);
|
||||
setError(
|
||||
@ -71,110 +75,105 @@ export default function LoginPage() {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[oauth, repo, reset]
|
||||
[oauth, repo, reset, updateActiveAccount]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]">
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/70 backdrop-blur-md">
|
||||
<div className="flex flex-col items-center pt-16 sm:pt-0">
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="icon"
|
||||
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
||||
/>
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/70 backdrop-blur-md">
|
||||
<div className="flex flex-col items-center pt-16 sm:pt-0">
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="icon"
|
||||
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
||||
/>
|
||||
|
||||
<div className="px-4 sm:mt-4 mt-8">
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 text-left w-full">
|
||||
Sign In
|
||||
</h2>
|
||||
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
|
||||
Enter your credentials to access home services and tools.
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<CardContent className="w-full space-y-4">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
className="pl-10"
|
||||
{...register("email", {
|
||||
required: true,
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message: "Invalid email",
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.email ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.email && (
|
||||
<p className="text-red-500">
|
||||
{errors.email.message ?? "Email is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="pl-10"
|
||||
{...register("password", {
|
||||
required: true,
|
||||
})}
|
||||
aria-invalid={errors.password ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.password && (
|
||||
<p className="text-red-500">
|
||||
{errors.password.message ?? "Password is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{success.length > 0 && (
|
||||
<div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error.length > 0 && (
|
||||
<div className="border border-red-400 p-2 rounded bg-red-200 dark:border-red-600 dark:bg-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className="w-full mt-2 mb-4"
|
||||
type="submit"
|
||||
loading={isLoading}
|
||||
>
|
||||
Log In
|
||||
</Button>
|
||||
<div className="text-sm text-center text-gray-600">
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
to="/register"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<div className="px-4 sm:mt-4 mt-8">
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 text-left w-full">
|
||||
Sign In
|
||||
</h2>
|
||||
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
|
||||
Enter your credentials to access home services and tools.
|
||||
</h4>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<CardContent className="w-full space-y-4">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
className="pl-10"
|
||||
{...register("email", {
|
||||
required: true,
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message: "Invalid email",
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.email ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.email && (
|
||||
<p className="text-red-500">
|
||||
{errors.email.message ?? "Email is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="pl-10"
|
||||
{...register("password", {
|
||||
required: true,
|
||||
})}
|
||||
aria-invalid={errors.password ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.password && (
|
||||
<p className="text-red-500">
|
||||
{errors.password.message ?? "Password is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{success.length > 0 && (
|
||||
<div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error.length > 0 && (
|
||||
<div className="border border-red-400 p-2 rounded bg-red-200 dark:border-red-600 dark:bg-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className="w-full mt-2 mb-4"
|
||||
type="submit"
|
||||
loading={isLoading}
|
||||
>
|
||||
Log In
|
||||
</Button>
|
||||
<div className="text-sm text-center text-gray-600">
|
||||
Don't have an account?{" "}
|
||||
<Link to="/register" className="text-blue-600 hover:underline">
|
||||
Register
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -35,38 +35,33 @@ const OAuthAuthorizePage: FC = () => {
|
||||
]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]`}
|
||||
// style={{ backgroundImage: `url(${overlay})` }}
|
||||
>
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
|
||||
<div className="flex sm:flex-row flex-col sm:items-stretch items-center pt-16 sm:pt-0">
|
||||
<div className="flex flex-col items-center flex-1">
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="icon"
|
||||
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
||||
/>
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
|
||||
<div className="flex sm:flex-row flex-col sm:items-stretch items-center pt-16 sm:pt-0">
|
||||
<div className="flex flex-col items-center flex-1">
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="icon"
|
||||
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
||||
/>
|
||||
|
||||
<div className="px-4 sm:mt-4 mt-8">
|
||||
<h2 className="text-2xl font-bold text-gray-800 text-left w-full dark:text-gray-100">
|
||||
Select Account
|
||||
</h2>
|
||||
<h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
|
||||
Choose one of the accounts below in order to proceed to home
|
||||
lab services and tools.
|
||||
</h4>
|
||||
</div>
|
||||
<div className="px-4 sm:mt-4 mt-8">
|
||||
<h2 className="text-2xl font-bold text-gray-800 text-left w-full dark:text-gray-100">
|
||||
Select Account
|
||||
</h2>
|
||||
<h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
|
||||
Choose one of the accounts below in order to proceed to home lab
|
||||
services and tools.
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
|
||||
<CardContent className="w-full space-y-4 flex-1">
|
||||
<AccountList />
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
|
||||
<CardContent className="w-full space-y-4 flex-1">
|
||||
<AccountList />
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -73,185 +73,179 @@ export default function RegisterPage() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]`}
|
||||
>
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
|
||||
<div className="flex flex-col items-center pt-16 sm:pt-0">
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="icon"
|
||||
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
||||
/>
|
||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||
<Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
|
||||
<div className="flex flex-col items-center pt-16 sm:pt-0">
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="icon"
|
||||
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
||||
/>
|
||||
|
||||
<div className="px-4 sm:mt-4 mt-8">
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 text-left w-full">
|
||||
Sign Up
|
||||
</h2>
|
||||
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-600 text-left">
|
||||
Fill up this form to start using homelab services and tools.
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<CardContent className="w-full space-y-4">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="full_name"
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
className="pl-10"
|
||||
{...register("fullName", { required: true })}
|
||||
aria-invalid={errors.fullName ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.fullName && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.fullName.message ?? "Full Name is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
className="pl-10"
|
||||
{...register("email", {
|
||||
required: true,
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message: "Invalid email",
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.email ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.email && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.email.message ?? "Email is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="phone_number"
|
||||
type="tel"
|
||||
placeholder="Phone Number"
|
||||
className="pl-10"
|
||||
{...register("phoneNumber", {
|
||||
required: false,
|
||||
})}
|
||||
aria-invalid={errors.phoneNumber ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.phoneNumber && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.phoneNumber.message ?? "Phone Number is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="pl-10"
|
||||
{...register("password", {
|
||||
required: true,
|
||||
validate: (password) => {
|
||||
if (password.length < 8) {
|
||||
return "Password must be at least 8 characters long";
|
||||
}
|
||||
if (!password.match(/[a-zA-Z]+/gi)) {
|
||||
return "Password must contain characters";
|
||||
}
|
||||
if (
|
||||
password
|
||||
.split("")
|
||||
.every((c) => c.toLowerCase() == c)
|
||||
) {
|
||||
return "Password should contain at least 1 uppercase character";
|
||||
}
|
||||
if (!password.match(/\d+/gi)) {
|
||||
return "Password should contain at least 1 digit";
|
||||
}
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.password ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.password && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.password.message ?? "Password is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="repeat_password"
|
||||
type="password"
|
||||
placeholder="Repeat Password"
|
||||
className="pl-10"
|
||||
{...register("repeatPassword", {
|
||||
required: true,
|
||||
validate: (repeatPassword, { password }) => {
|
||||
if (repeatPassword != password) {
|
||||
return "Password does not match";
|
||||
}
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.repeatPassword ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.repeatPassword && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.repeatPassword.message ?? "Password is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{success.length > 0 && (
|
||||
<div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error.length > 0 && (
|
||||
<div className="border border-red-400 p-2 rounded bg-red-200 dark:border-red-600 dark:bg-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button className="w-full mt-2 mb-4" loading={isLoading}>
|
||||
Register
|
||||
</Button>
|
||||
<div className="text-sm text-center text-gray-600">
|
||||
Already have an account?{" "}
|
||||
<Link to="/login" className="text-blue-600 hover:underline">
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<div className="px-4 sm:mt-4 mt-8">
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 text-left w-full">
|
||||
Sign Up
|
||||
</h2>
|
||||
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-600 text-left">
|
||||
Fill up this form to start using homelab services and tools.
|
||||
</h4>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<CardContent className="w-full space-y-4">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="full_name"
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
className="pl-10"
|
||||
{...register("fullName", { required: true })}
|
||||
aria-invalid={errors.fullName ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.fullName && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.fullName.message ?? "Full Name is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
className="pl-10"
|
||||
{...register("email", {
|
||||
required: true,
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message: "Invalid email",
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.email ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.email && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.email.message ?? "Email is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="phone_number"
|
||||
type="tel"
|
||||
placeholder="Phone Number"
|
||||
className="pl-10"
|
||||
{...register("phoneNumber", {
|
||||
required: false,
|
||||
})}
|
||||
aria-invalid={errors.phoneNumber ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.phoneNumber && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.phoneNumber.message ?? "Phone Number is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="pl-10"
|
||||
{...register("password", {
|
||||
required: true,
|
||||
validate: (password) => {
|
||||
if (password.length < 8) {
|
||||
return "Password must be at least 8 characters long";
|
||||
}
|
||||
if (!password.match(/[a-zA-Z]+/gi)) {
|
||||
return "Password must contain characters";
|
||||
}
|
||||
if (
|
||||
password.split("").every((c) => c.toLowerCase() == c)
|
||||
) {
|
||||
return "Password should contain at least 1 uppercase character";
|
||||
}
|
||||
if (!password.match(/\d+/gi)) {
|
||||
return "Password should contain at least 1 digit";
|
||||
}
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.password ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.password && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.password.message ?? "Password is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="repeat_password"
|
||||
type="password"
|
||||
placeholder="Repeat Password"
|
||||
className="pl-10"
|
||||
{...register("repeatPassword", {
|
||||
required: true,
|
||||
validate: (repeatPassword, { password }) => {
|
||||
if (repeatPassword != password) {
|
||||
return "Password does not match";
|
||||
}
|
||||
},
|
||||
})}
|
||||
aria-invalid={errors.repeatPassword ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
{!!errors.repeatPassword && (
|
||||
<p className="text-red-600 opacity-70 text-sm">
|
||||
{errors.repeatPassword.message ?? "Password is required"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{success.length > 0 && (
|
||||
<div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error.length > 0 && (
|
||||
<div className="border border-red-400 p-2 rounded bg-red-200 dark:border-red-600 dark:bg-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button className="w-full mt-2 mb-4" loading={isLoading}>
|
||||
Register
|
||||
</Button>
|
||||
<div className="text-sm text-center text-gray-600">
|
||||
Already have an account?{" "}
|
||||
<Link to="/login" className="text-blue-600 hover:underline">
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user