Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-16 16:20:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added dark/light mode (next: custom themes)

Browse Source
This commit is contained in:
grimsi
2024-03-27 18:26:47 +01:00
parent 9424263c4a
commit d30cd9706d
27 changed files with 1479 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/views/LoginView.tsx
+20 -30
View File
@@ -1,8 +1,11 @@
import {useAuth} from "Frontend/util/auth";
import {useState} from "react";
import {Link, useNavigate} from "react-router-dom";
import {Alert, Button, Card, Input, Spinner, Typography} from "@material-tailwind/react";
import {XCircle} from "@phosphor-icons/react";
import {SpinnerGap, XCircle} from "@phosphor-icons/react";
import {Card} from "Frontend/@/components/ui/card";
import {Alert, AlertDescription, AlertTitle} from "Frontend/@/components/ui/alert";
import {Button} from "Frontend/@/components/ui/button";
import {Input} from "Frontend/@/components/ui/input";
export default function LoginView() {
const {state, login} = useAuth();
@@ -19,21 +22,20 @@ export default function LoginView() {
}
return (
<div className="flex h-screen">
<div className="fixed h-full w-full bg-gradient-to-br from-gf-primary to-gf-secondary"></div>
<Card className="m-auto p-12" shadow={true}>
<div className="flex size-full bg-gradient-to-br from-gf-primary to-gf-secondary">
<Card className="m-auto p-12">
<img
className="h-28 w-full content-center"
src="/images/Logo.svg"
/>
<div className="mt-8 mb-2 w-80 max-w-screen-lg sm:w-96">
{hasError &&
<Alert
icon={<XCircle color="white" weight="fill"/>}
className="mb-4 bg-red-500"
>
Wrong username and/or password
</Alert>}
<Alert className="mb-4" variant="destructive">
<XCircle weight="fill" className="size-4"/>
<AlertTitle>Error</AlertTitle>
<AlertDescription>Wrong username and/or password</AlertDescription>
</Alert>
}
<form
className="mb-1 flex flex-col gap-6"
onSubmit={async e => {
@@ -51,44 +53,32 @@ export default function LoginView() {
}}
>
<label htmlFor="username">
<Typography variant="h6" color="blue-gray" className="-mb-3">
<h6 color="blue-gray" className="-mb-3">
Username
</Typography>
</h6>
</label>
<Input
onChange={(event) => {
onChange={(event: any) => {
setUsername(event.target.value);
}}
id="username"
type="text"
autoComplete="username"
placeholder=""
size="lg"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
crossOrigin="" //TODO: see https://github.com/creativetimofficial/material-tailwind/issues/427
/>
<label htmlFor="current-password">
<Typography variant="h6" color="blue-gray" className="-mb-3">
<h6 color="blue-gray" className="-mb-3">
Password
</Typography>
</h6>
</label>
<Input
onChange={(event) => {
onChange={(event: any) => {
setPassword(event.target.value);
}}
id="current-password"
type="password"
autoComplete="current-password"
placeholder=""
size="lg"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
crossOrigin="" //TODO: see https://github.com/creativetimofficial/material-tailwind/issues/427
/>
<div className="flex justify-between items-center">
<Link to="#">Forgot password?</Link>
@@ -98,7 +88,7 @@ export default function LoginView() {
className="w-28 h-12 flex justify-center"
disabled={loading}
>
{loading ? <Spinner className="h-6 w-6"/> : "Log in"}
{loading ? <SpinnerGap className="size-6 animate-spin"/> : "Log in"}
</Button>
</div>
</form>