mirror of
https://github.com/idanoo/autobrr
synced 2025-07-24 17:29:12 +00:00
feat: add ability to create an account via the webui (#223)
* 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
GitHub
parent
982eddc269
commit
1a4f3cf55d
11 changed files with 337 additions and 109 deletions
|
|
@ -7,68 +7,72 @@ import { TextField, PasswordField } from "../../components/inputs";
|
|||
|
||||
import logo from "../../logo.png";
|
||||
import { AuthContext } from "../../utils/Context";
|
||||
import { useEffect } from "react";
|
||||
|
||||
interface LoginData {
|
||||
username: string;
|
||||
password: string;
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
function Login() {
|
||||
const history = useHistory();
|
||||
const [, setAuthContext] = AuthContext.use();
|
||||
export const Login = () => {
|
||||
const history = useHistory();
|
||||
const [, setAuthContext] = AuthContext.use();
|
||||
|
||||
const mutation = useMutation(
|
||||
(data: LoginData) => APIClient.auth.login(data.username, data.password),
|
||||
{
|
||||
onSuccess: (_, variables: LoginData) => {
|
||||
setAuthContext({
|
||||
username: variables.username,
|
||||
isLoggedIn: true
|
||||
});
|
||||
history.push("/");
|
||||
},
|
||||
}
|
||||
);
|
||||
useEffect(() => {
|
||||
// Check if onboarding is available for this instance
|
||||
// and redirect if needed
|
||||
APIClient.auth.canOnboard()
|
||||
.then(() => history.push("/onboard"));
|
||||
}, [history]);
|
||||
|
||||
const handleSubmit = (data: any) => mutation.mutate(data);
|
||||
const mutation = useMutation(
|
||||
(data: LoginData) => APIClient.auth.login(data.username, data.password),
|
||||
{
|
||||
onSuccess: (_, variables: LoginData) => {
|
||||
setAuthContext({
|
||||
username: variables.username,
|
||||
isLoggedIn: true
|
||||
});
|
||||
history.push("/");
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
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">
|
||||
<img
|
||||
className="mx-auto h-12 w-auto"
|
||||
src={logo}
|
||||
alt="logo"
|
||||
/>
|
||||
</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">
|
||||
const handleSubmit = (data: any) => mutation.mutate(data);
|
||||
|
||||
<Formik
|
||||
initialValues={{ username: "", password: "" }}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{() => (
|
||||
<Form>
|
||||
<div className="space-y-6">
|
||||
<TextField name="username" label="Username" columns={6} autoComplete="username" />
|
||||
<PasswordField name="password" label="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"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
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">
|
||||
<img
|
||||
className="mx-auto h-12 w-auto"
|
||||
src={logo}
|
||||
alt="logo"
|
||||
/>
|
||||
</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: "", password: "" }}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Form>
|
||||
<div className="space-y-6">
|
||||
<TextField name="username" label="Username" columns={6} autoComplete="username" />
|
||||
<PasswordField name="password" label="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"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Login;
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
import {useEffect} from "react";
|
||||
import {useCookies} from "react-cookie";
|
||||
import {useHistory} from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { useCookies } from "react-cookie";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { AuthContext } from "../../utils/Context";
|
||||
|
||||
function Logout() {
|
||||
const history = useHistory();
|
||||
export const Logout = () => {
|
||||
const history = useHistory();
|
||||
|
||||
const [, setAuthContext] = AuthContext.use();
|
||||
const [,, removeCookie] = useCookies(['user_session']);
|
||||
const [, setAuthContext] = AuthContext.use();
|
||||
const [,, removeCookie] = useCookies(["user_session"]);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
APIClient.auth.logout().then(() => {
|
||||
setAuthContext({ username: "", isLoggedIn: false });
|
||||
removeCookie("user_session");
|
||||
history.push('/login');
|
||||
})
|
||||
},
|
||||
[history, removeCookie, setAuthContext]
|
||||
);
|
||||
useEffect(
|
||||
() => {
|
||||
APIClient.auth.logout()
|
||||
.then(() => {
|
||||
setAuthContext({ username: "", isLoggedIn: false });
|
||||
removeCookie("user_session");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-800 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<p>Logged out</p>
|
||||
</div>
|
||||
)
|
||||
history.push("/login");
|
||||
});
|
||||
},
|
||||
[history, removeCookie, setAuthContext]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-800 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<p>Logged out</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Logout;
|
||||
85
web/src/screens/auth/onboarding.tsx
Normal file
85
web/src/screens/auth/onboarding.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue