mirror of
https://github.com/BrenBroZAYT/gameyfin.git
synced 2026-06-15 16:20:03 +00:00
Added dark/light mode (next: custom themes)
This commit is contained in:
grimsi
@@ -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>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import {useRouteMetadata} from 'Frontend/util/routing.js';
|
||||
import {useEffect} from 'react';
|
||||
import {Navbar} from "@material-tailwind/react";
|
||||
import ProfileMenu from "Frontend/components/ProfileMenu";
|
||||
import {Outlet} from "react-router-dom";
|
||||
import {Card} from "Frontend/@/components/ui/card";
|
||||
|
||||
export default function MainLayout() {
|
||||
const currentTitle = `Gameyfin - ${useRouteMetadata()?.title}` ?? 'Gameyfin';
|
||||
@@ -12,7 +12,7 @@ export default function MainLayout() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2">
|
||||
<Card className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2">
|
||||
<div className="flex items-center justify-end text-blue-gray-900">
|
||||
<img
|
||||
className="absolute w-full content-center h-8"
|
||||
@@ -21,7 +21,7 @@ export default function MainLayout() {
|
||||
/>
|
||||
<ProfileMenu/>
|
||||
</div>
|
||||
</Navbar>
|
||||
</Card>
|
||||
|
||||
<Outlet/>
|
||||
</>
|
||||
|
||||
@@ -2,11 +2,11 @@ import React from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import Wizard from "Frontend/components/wizard/Wizard";
|
||||
import WizardStep from "Frontend/components/wizard/WizardStep";
|
||||
import {Card, Typography} from "@material-tailwind/react";
|
||||
import Input from "Frontend/components/Input";
|
||||
import {GearFine, HandWaving, Palette, User} from "@phosphor-icons/react";
|
||||
import {Themes} from "Frontend/components/theming/Themes";
|
||||
import ThemePreview from "Frontend/components/theming/ThemePreview";
|
||||
import {Theme, themes} from "Frontend/@/registry/themes";
|
||||
import {Card} from "Frontend/@/components/ui/card";
|
||||
|
||||
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
@@ -14,7 +14,7 @@ function WelcomeStep() {
|
||||
return (
|
||||
<div className="flex flex-col size-full items-center">
|
||||
<div className="flex flex-col w-1/2 min-w-[468px] gap-12 items-center">
|
||||
<Typography variant="h4">Welcome to Gameyfin 👋</Typography>
|
||||
<h4>Welcome to Gameyfin 👋</h4>
|
||||
<p className="place-content-center text-justify">
|
||||
Gameyfin is a cutting-edge software tailored for gamers seeking efficient management of their
|
||||
video
|
||||
@@ -28,7 +28,7 @@ function WelcomeStep() {
|
||||
user-friendly
|
||||
design and adaptability, offering ample customization options to meet diverse user preferences.
|
||||
</p>
|
||||
<Typography variant="h5">Let's get started!</Typography>
|
||||
<h5>Let's get started!</h5>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -38,7 +38,7 @@ function ThemeStep() {
|
||||
return (
|
||||
<div className="flex flex-col size-full items-center">
|
||||
<div className="size-full grid grid-cols-3 grid-rows-2 w-1/2 min-w-[468px] gap-12 items-center">
|
||||
{Themes.all.map((theme => (
|
||||
{themes.map(((theme: Theme) => (
|
||||
<ThemePreview key={theme.name} theme={theme}/>
|
||||
)))}
|
||||
</div>
|
||||
@@ -50,9 +50,9 @@ function UserStep() {
|
||||
return (
|
||||
<div className="flex flex-col size-full items-center">
|
||||
<div className="flex flex-col w-1/2 min-w-[468px] gap-12 items-center">
|
||||
<Typography variant="h4">Create your account</Typography>
|
||||
<Typography className="-mt-8">This will set up the initial admin user account.</Typography>
|
||||
<div className="mb-1 flex flex-col w-full gap-6">
|
||||
<h4>Create your account</h4>
|
||||
<p className="-mt-8">This will set up the initial admin user account.</p>
|
||||
<div className="mb-1 flex flex-col w-full gap-6 items-center">
|
||||
<Input
|
||||
label="Username"
|
||||
name="username"
|
||||
@@ -78,17 +78,16 @@ function SettingsStep() {
|
||||
return (
|
||||
<div className="flex flex-col size-full items-center">
|
||||
<div className="flex flex-col w-1/2 min-w-[468px] gap-12 items-center">
|
||||
<Typography variant="h4">Settings</Typography>
|
||||
<Typography>Configure your settings</Typography>
|
||||
<h4>Settings</h4>
|
||||
<p>Configure your settings</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SetupView = () => (
|
||||
<div className="flex h-screen">
|
||||
<div className="fixed size-full bg-gradient-to-br from-gf-primary to-gf-secondary"></div>
|
||||
<Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8" shadow={true}>
|
||||
<div className="flex size-full bg-gradient-to-br from-gf-primary to-gf-secondary">
|
||||
<Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8">
|
||||
<Wizard
|
||||
initialValues={{username: '', password: '', passwordRepeat: ''}}
|
||||
onSubmit={async (values: any) =>
|
||||
|
||||
Reference in New Issue
Block a user