mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
c7ec93722b
* delete manifest (vite-plugin-pwa generates it) * fix upper case letter on screen components * fix imports of screens components missing upper case * remove default export from Base.tsx * move RegexPlayground to settings import * replace some relative path imports * remove React and ununsed imports * small alignments on vite.config.ts * move Dashboard and Releases to screens * move filters/index.tsx to filters/index.ts * remove default export from APIKeyAddForm * remove default export from FilterAddForm * organize imports and exports for the router * add .vscode workspace to gitignore * some touchs on .gitignore file * fix some eslint rules
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
/*
|
|
* Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
|
|
* SPDX-License-Identifier: GPL-2.0-or-later
|
|
*/
|
|
|
|
import { Form, Formik } from "formik";
|
|
import { useMutation } from "@tanstack/react-query";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { APIClient } from "@api/APIClient";
|
|
import { TextField, PasswordField } from "@components/inputs";
|
|
import { ReactComponent as Logo } from "@app/logo.svg";
|
|
|
|
interface InputValues {
|
|
username: string;
|
|
password1: string;
|
|
password2: string;
|
|
}
|
|
|
|
export const Onboarding = () => {
|
|
const validate = (values: InputValues) => {
|
|
const obj: Record<string, string> = {};
|
|
|
|
if (!values.username)
|
|
obj.username = "Required";
|
|
|
|
if (!values.password1)
|
|
obj.password1 = "Required";
|
|
|
|
if (!values.password2)
|
|
obj.password2 = "Required";
|
|
|
|
if (values.password1 !== values.password2)
|
|
obj.password2 = "Passwords don't match!";
|
|
|
|
return obj;
|
|
};
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: (data: InputValues) => APIClient.auth.onboard(data.username, data.password1),
|
|
onSuccess: () => navigate("/")
|
|
});
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
|
<div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
|
|
<Logo className="mx-auto h-12" />
|
|
<h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
|
|
autobrr
|
|
</h1>
|
|
</div>
|
|
<div className="sm:mx-auto sm:w-full sm:max-w-md shadow-lg">
|
|
<div className="bg-white dark:bg-gray-800 py-8 px-4 sm:rounded-lg sm:px-10">
|
|
<Formik
|
|
initialValues={{
|
|
username: "",
|
|
password1: "",
|
|
password2: ""
|
|
}}
|
|
onSubmit={(data) => mutation.mutate(data)}
|
|
validate={validate}
|
|
>
|
|
<Form>
|
|
<div className="space-y-6">
|
|
<TextField name="username" label="Username" columns={6} autoComplete="username" />
|
|
<PasswordField name="password1" label="Password" columns={6} autoComplete="current-password" />
|
|
<PasswordField name="password2" label="Confirm password" columns={6} autoComplete="current-password" />
|
|
</div>
|
|
<div className="mt-6">
|
|
<button
|
|
type="submit"
|
|
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
|
|
>
|
|
Create account
|
|
</button>
|
|
</div>
|
|
</Form>
|
|
</Formik>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|