style: login button (#83)

* style: login button

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>
This commit is contained in:
仓鼠
2024-12-30 20:45:11 +08:00
committed by GitHub
parent 01add8b160
commit aaa8baff8f
4 changed files with 45 additions and 8 deletions
+23 -3
View File
@@ -8,7 +8,9 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { GitHubIcon } from "@/components/ui/icon"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { useAuth } from "@/hooks/useAuth"
import useSetting from "@/hooks/useSetting"
import { zodResolver } from "@hookform/resolvers/zod"
@@ -99,12 +101,30 @@ function Login() {
</FormItem>
)}
/>
<Button type="submit">{t("Login")}</Button>
<Button
type="submit"
className="w-full rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]"
>
{t("Login")}
</Button>
</form>
<section className="flex items-center my-3 w-full">
<Separator className="flex-1" />
<div className="flex justify-center text-xs text-muted-foreground w-full max-w-[100px]">
OAuth2
</div>
<Separator className="flex-1" />
</section>
</Form>
<div className="mt-4">
<div className="mt-3">
{settingData?.config?.oauth2_providers?.map((p: string) => (
<Button onClick={() => loginWith(p)}>{p}</Button>
<Button
className="w-full rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] bg-muted text-primary hover:bg-muted/80 hover:text-primary/80"
onClick={() => loginWith(p)}
>
{p === "GitHub" && <GitHubIcon className="-mt-[1px] size-4" />}
{p}
</Button>
))}
</div>
</div>
+14 -3
View File
@@ -118,10 +118,21 @@ export default function ProfilePage() {
</CardHeader>
<CardContent className="text-lg font-semibold">
{settingData?.config?.oauth2_providers?.map((provider) => (
<div>
{provider}: {profile.oauth2_bind?.[provider.toLowerCase()]}{" "}
<div className="flex justify-between items-center flex-wrap gap-2">
<section className="flex gap-2 items-center">
<p>{provider}: </p>
{profile.oauth2_bind?.[provider.toLowerCase()] && (
<p className=" bg-muted px-1.5 py-0.5 text-sm rounded-full">
{profile.oauth2_bind?.[provider.toLowerCase()]}
</p>
)}
</section>
{profile.oauth2_bind?.[provider.toLowerCase()] ? (
<Button size="sm" onClick={() => unbindO2(provider)}>
<Button
className="w-fit bg-red-600 hover:bg-red-500 dark:text-white rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]"
size="sm"
onClick={() => unbindO2(provider)}
>
Unbind
</Button>
) : (