starred/komodo
1
0
Fork 0
mirror of https://github.com/moghtech/komodo.git synced 2026-09-12 00:01:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

add theme toggle to header

Browse Source
This commit is contained in:
karamvir
2023-08-08 02:32:41 -07:00
parent 2dbce8f695
commit 1b30a8edd4
1 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/auth/login.tsx
+45 -39
View File
@@ -12,6 +12,7 @@ import { useInvalidate } from "@hooks";
import { useEffect, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { client } from "@main";
import { ThemeToggle } from "@components/util";
type LoginCredentials = { username: string; password: string };
@@ -45,45 +46,50 @@ export const Login = () => {
const { mutate, isLoading } = useLogin(creds);
return (
<div className="w-full flex justify-center min-h-screen items-center">
<Card className="w-full max-w-[500px] place-self-center">
<CardHeader>
<CardTitle>Monitor</CardTitle>
<CardDescription>Log In</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-4">
<div>
<Label htmlFor="username">Username</Label>
<Input
id="username"
value={creds.username}
onChange={({ target }) =>
set((c) => ({ ...c, username: target.value }))
}
/>
</div>
<div>
<Label htmlFor="password">Password</Label>
<Input
id="password"
type="password"
value={creds.password}
onChange={({ target }) =>
set((c) => ({ ...c, password: target.value }))
}
/>
</div>
<div className="flex w-full justify-end">
<Button
variant="outline"
onClick={() => mutate(creds)}
disabled={isLoading}
>
Login
</Button>
</div>
</CardContent>
</Card>
<div className="flex flex-col min-h-screen">
<div className="container flex justify-end items-center h-16">
<ThemeToggle />
</div>
<div className="flex justify-center items-center container mt-32">
<Card className="w-full max-w-[500px] place-self-center">
<CardHeader>
<CardTitle>Monitor</CardTitle>
<CardDescription>Log In</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-4">
<div>
<Label htmlFor="username">Username</Label>
<Input
id="username"
value={creds.username}
onChange={({ target }) =>
set((c) => ({ ...c, username: target.value }))
}
/>
</div>
<div>
<Label htmlFor="password">Password</Label>
<Input
id="password"
type="password"
value={creds.password}
onChange={({ target }) =>
set((c) => ({ ...c, password: target.value }))
}
/>
</div>
<div className="flex w-full justify-end">
<Button
variant="outline"
onClick={() => mutate(creds)}
disabled={isLoading}
>
Login
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
);
};