mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-11 13:45:25 +03:00
add login page
This commit is contained in:
Blake Blackshear
parent
fca92811e7
commit
0f658c6327
@ -43,6 +43,14 @@ module.exports = {
|
|||||||
"error",
|
"error",
|
||||||
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
|
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
|
||||||
],
|
],
|
||||||
|
"@typescript-eslint/no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_",
|
||||||
|
caughtErrorsIgnorePattern: "^_",
|
||||||
|
},
|
||||||
|
],
|
||||||
"no-console": "error",
|
"no-console": "error",
|
||||||
"prettier/prettier": [
|
"prettier/prettier": [
|
||||||
"warn",
|
"warn",
|
||||||
|
|||||||
36
web/login.html
Normal file
36
web/login.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/images/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Frigate</title>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="/images/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="/images/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
||||||
|
<link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials" />
|
||||||
|
<link rel="mask-icon" href="/images/favicon.svg" color="#3b82f7" />
|
||||||
|
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
|
||||||
|
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<script type="module" src="/src/login.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
web/src/LoginPage.tsx
Normal file
22
web/src/LoginPage.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { UserAuthForm } from "@/components/AuthForm";
|
||||||
|
import Logo from "./components/Logo";
|
||||||
|
import { ThemeProvider } from "./context/theme-provider";
|
||||||
|
|
||||||
|
function LoginPage() {
|
||||||
|
return (
|
||||||
|
<ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
|
||||||
|
<div className="size-full overflow-hidden">
|
||||||
|
<div className="p-8">
|
||||||
|
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||||
|
<div className="flex flex-col space-y-2 items-center">
|
||||||
|
<Logo className="w-8 h-8 mb-6" />
|
||||||
|
</div>
|
||||||
|
<UserAuthForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoginPage;
|
||||||
114
web/src/components/AuthForm.tsx
Normal file
114
web/src/components/AuthForm.tsx
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Input } from "./ui/input";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
import ActivityIndicator from "./indicators/activity-indicator";
|
||||||
|
import axios from "axios";
|
||||||
|
import { Toaster } from "./ui/sonner";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||||
|
|
||||||
|
export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
|
||||||
|
const [isLoading, setIsLoading] = React.useState<boolean>(false);
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
user: z.string(),
|
||||||
|
password: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
mode: "onChange",
|
||||||
|
defaultValues: {
|
||||||
|
user: "",
|
||||||
|
password: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
await axios.post(
|
||||||
|
"/api/login",
|
||||||
|
{
|
||||||
|
user: values.user,
|
||||||
|
password: values.password,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
"X-CSRF-TOKEN": 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
window.location.href = "/";
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Login failed", {
|
||||||
|
position: "top-center",
|
||||||
|
});
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("grid gap-6", className)} {...props}>
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||||
|
<FormField
|
||||||
|
name="user"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>User</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
|
||||||
|
type="password"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row gap-2 pt-5">
|
||||||
|
<Button
|
||||||
|
variant="select"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="flex flex-1"
|
||||||
|
>
|
||||||
|
{isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
<Toaster />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
web/src/login.tsx
Normal file
10
web/src/login.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import LoginPage from "./LoginPage.tsx";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<LoginPage />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
Loading…
Reference in New Issue
Block a user