Upload files to "/"
This commit is contained in:
228
sign_up.tsx
Normal file
228
sign_up.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { useToast } from "./hooks/use-toast";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { validate_password, open_website } from "./global";
|
||||
import { TermsConditions } from "./terms";
|
||||
import { PrivacyPolicy } from "./privacy";
|
||||
import { Dialog, DialogTrigger, DialogOverlay } from "@/components/ui/dialog";
|
||||
|
||||
async function validate_license(license: string): Promise<boolean> {
|
||||
const isValid: boolean = await invoke("validate_license", {
|
||||
license: license,
|
||||
});
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(isValid);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
async function validate_username(username: string): Promise<boolean> {
|
||||
const isValid: boolean = await invoke("validate_username", {
|
||||
username: username,
|
||||
});
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(isValid);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
const formSchema = z.object({
|
||||
license: z
|
||||
.string()
|
||||
.refine(async (license) => await validate_license(license), {
|
||||
message: "Invalid license. Please provide a valid license key.",
|
||||
}),
|
||||
username: z
|
||||
.string()
|
||||
.min(3, {
|
||||
message: "Username must be at least 3 characters long.",
|
||||
})
|
||||
.refine(async (username) => await validate_username(username), {
|
||||
message: "Username is already in use. Please choose a different one.",
|
||||
}),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, {
|
||||
message: "Password must be at least 8 characters long.",
|
||||
})
|
||||
.refine(async (password) => await validate_password(password), {
|
||||
message:
|
||||
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
|
||||
}),
|
||||
terms: z.boolean().refine((val) => val === true, {
|
||||
message: "You must accept the Terms and Conditions.",
|
||||
}),
|
||||
});
|
||||
|
||||
const Sign_up = () => {
|
||||
const nav = useNavigate();
|
||||
const form = useForm({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
license: "",
|
||||
terms: false,
|
||||
},
|
||||
});
|
||||
const { toast } = useToast();
|
||||
|
||||
async function onSubmit(_values: any) {
|
||||
const version: string = await invoke("get_app_version");
|
||||
toast({
|
||||
title: "Success: Signed up",
|
||||
description: `Loading Angel Panel v${version}...`,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
nav("/dash");
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center login-box">
|
||||
<div className="bg-white shadow-lg p-8 rounded-lg w-full">
|
||||
<h2 className="text-2xl font-bold mb-6 text-center">
|
||||
Create an account
|
||||
</h2>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="username"
|
||||
placeholder="Enter your desired username"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your unique password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="license"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>License</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="license"
|
||||
placeholder="1E838829-5117-4AaA-8727-B15Ab178D0e5"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center space-x-2 sign-in-meow mr-2 text-sm">
|
||||
<button
|
||||
onClick={() => nav("/sign_in")}
|
||||
className="text-black hover:bg-gray-300 hover:bg-opacity-50 px-1 rounded transition"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<span className="mx-1">-</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
open_website("https://hentaihaven.xxx/");
|
||||
}}
|
||||
className="text-black hover:bg-gray-300 hover:bg-opacity-50 px-1 rounded transition"
|
||||
>
|
||||
Purchase
|
||||
</button>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="terms"
|
||||
render={({ field }) => (
|
||||
<div className="flex items-center space-x-2 sign-in-meow mr-2 text-sm">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
I accept the{" "}
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<button className="text-black hover:bg-gray-300 hover:bg-opacity-50 px-1 rounded transition hover:no-underline underline">
|
||||
Terms and Conditions
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay className="dialog-overlay" />
|
||||
<TermsConditions />
|
||||
</Dialog>{" "}
|
||||
and acknowledge the{" "}
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<button className="text-black hover:bg-gray-300 hover:bg-opacity-50 px-1 rounded transition hover:no-underline underline">
|
||||
Privacy Policy
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay className="dialog-overlay" />
|
||||
<PrivacyPolicy />
|
||||
</Dialog>
|
||||
.
|
||||
</label>
|
||||
<FormMessage />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" className="w-full">
|
||||
Continue
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sign_up;
|
||||
Reference in New Issue
Block a user