administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

add login page

Browse Source
This commit is contained in:
Blake Blackshear 2024-05-05 11:25:26 -05:00
parent fca92811e7
commit 0f658c6327
5 changed files with 190 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/.eslintrc.cjs
View File

@ -43,6 +43,14 @@ module.exports = {
"error",
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
],
"@typescript-eslint/no-unused-vars": [
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
caughtErrorsIgnorePattern: "^_",
},
],
"no-console": "error",
"prettier/prettier": [
"warn",

36
web/login.html Normal file
View 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
View 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
View 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
View 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>,
);