idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 09:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add ability to create an account via the webui (#223)

Browse source 
* feat: add ability to create an account via the webui without the need for autobrrctl

* refactor redundant code block.

* fix: early return and 0 value
This commit is contained in:
stacksmash76 2022-04-10 18:26:14 +02:00 • committed by GitHub
parent 982eddc269
commit 1a4f3cf55d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 337 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

85
web/src/screens/auth/onboarding.tsx Normal file
View file

@ -0,0 +1,85 @@
import { Form, Formik } from "formik";
import { useMutation } from "react-query";
import { useHistory } from "react-router-dom";
import { APIClient } from "../../api/APIClient";
import { TextField, PasswordField } from "../../components/inputs";
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 history = useHistory();
const mutation = useMutation(
(data: InputValues) => APIClient.auth.onboard(data.username, data.password1),
{
onSuccess: () => {
history.push("/login");
},
}
);
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">
<h1
className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4"
>
Create a new user
</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-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
Create an account!
</button>
</div>
</Form>
</Formik>
</div>
</div>
</div>
);
}