From aaa8baff8f7b4393487c5fe4fbc1f0cf4ecc17cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=93=E9=BC=A0?=
 <71394853+hamster1963@users.noreply.github.com>
Date: Mon, 30 Dec 2024 20:45:11 +0800
Subject: [PATCH] style: login button (#83)

* style: login button

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>
---
 src/api/oauth2.ts          |  3 +--
 src/components/ui/icon.tsx |  7 +++++++
 src/routes/login.tsx       | 26 +++++++++++++++++++++++---
 src/routes/profile.tsx     | 17 ++++++++++++++---
 4 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ui/icon.tsx

diff --git a/src/api/oauth2.ts b/src/api/oauth2.ts
index 89dedc8..7ca7973 100644
--- a/src/api/oauth2.ts
+++ b/src/api/oauth2.ts
@@ -11,9 +11,8 @@ export const getOauth2RedirectURL = async (
     provider: string,
     rType: Oauth2RequestType,
 ): Promise<ModelOauth2LoginResponse> => {
-    const sType = "type"
     return fetcher<ModelOauth2LoginResponse>(FetcherMethod.GET, `/api/v1/oauth2/${provider}`, {
-        sType: rType,
+        type: rType,
     })
 }
 
diff --git a/src/components/ui/icon.tsx b/src/components/ui/icon.tsx
new file mode 100644
index 0000000..12445aa
--- /dev/null
+++ b/src/components/ui/icon.tsx
@@ -0,0 +1,7 @@
+export function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+    return (
+        <svg viewBox="0 0 496 512" fill="currentColor" {...props}>
+            <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+        </svg>
+    )
+}
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index 5e97578..8666531 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -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>
diff --git a/src/routes/profile.tsx b/src/routes/profile.tsx
index 6d62616..819213c 100644
--- a/src/routes/profile.tsx
+++ b/src/routes/profile.tsx
@@ -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>
                                         ) : (