✨ OAuth2 Support

view/src/index.tsx

@@ -21,6 +21,8 @@ render(() => (
         <Route path="/" component={lazy(() => import("./pages/dashboard.tsx"))} />
         <Route path="/auth/login" component={lazy(() => import("./pages/auth/login.tsx"))} />
         <Route path="/auth/register" component={lazy(() => import("./pages/auth/register.tsx"))} />
+        <Route path="/auth/oauth/connect" component={lazy(() => import("./pages/auth/connect.tsx"))} />
+        <Route path="/auth/oauth/callback" component={lazy(() => import("./pages/auth/callback.tsx"))} />
         <Route path="/users/me/confirm" component={lazy(() => import("./pages/users/confirm.tsx"))} />
       </Router>
     </UserinfoProvider>

view/src/pages/auth/callback.tsx

@@ -0,0 +1,30 @@
+import { useSearchParams } from "@solidjs/router";
+
+export default function DefaultCallbackPage() {
+  const [searchParams] = useSearchParams();
+
+  return (
+    <div class="w-full h-full flex justify-center items-center">
+      <div class="card w-[480px] max-w-screen shadow-xl">
+        <div class="card-body">
+          <div id="header" class="text-center mb-5">
+            {/* Just Kidding */}
+            <h1 class="text-xl font-bold">Default Callback</h1>
+            <p>
+              If you see this page, it means some genius developer forgot to set the redirect address, so you visited
+              this default callback address.
+              General Douglas MacArthur, a five-star general in the United States, commented on this: "If I let my
+              soldiers use default callbacks, they'd rather die."
+              The large documentary film "Callback Legend" is currently in theaters.
+            </p>
+          </div>
+
+          <div class="text-center">
+            <p>Authorization Code</p>
+            <code>{searchParams["code"]}</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

view/src/pages/auth/connect.tsx

@@ -0,0 +1,140 @@
+import { createSignal, Show } from "solid-js";
+import { useLocation, useSearchParams } from "@solidjs/router";
+import { getAtk, useUserinfo } from "../../stores/userinfo.tsx";
+
+export default function OauthConnectPage() {
+  const [title, setTitle] = createSignal("Connect Third-party");
+  const [subtitle, setSubtitle] = createSignal("Via your Goatpass account");
+
+  const [error, setError] = createSignal<string | null>(null);
+  const [status, setStatus] = createSignal("Handshaking...");
+  const [loading, setLoading] = createSignal(true);
+
+  const [client, setClient] = createSignal<any>(null);
+
+  const [searchParams] = useSearchParams();
+
+  const userinfo = useUserinfo();
+  const location = useLocation();
+
+  async function preConnect() {
+    const res = await fetch(`/api/auth/oauth/connect${location.search}`, {
+      headers: { "Authorization": `Bearer ${getAtk()}` }
+    });
+
+    if (res.status !== 200) {
+      setError(await res.text());
+    } else {
+      const data = await res.json();
+
+      if (data["session"]) {
+        setStatus("Redirecting...");
+        redirect(data["session"]);
+      } else {
+        setTitle(`Connect ${data["client"].name}`);
+        setSubtitle(`Via ${userinfo?.displayName}`);
+        setClient(data["client"]);
+        setLoading(false);
+      }
+    }
+  }
+
+  function decline() {
+    if (window.history.length > 0) {
+      window.history.back();
+    } else {
+      window.close();
+    }
+  }
+
+  async function approve() {
+    setLoading(true);
+    setStatus("Approving...");
+
+    const res = await fetch("/api/auth/oauth/connect?" + new URLSearchParams({
+      client_id: searchParams["client_id"] as string,
+      redirect_uri: encodeURIComponent(searchParams["redirect_uri"] as string),
+      response_type: "code",
+      scope: searchParams["scope"] as string
+    }), {
+      method: "POST",
+      headers: { "Authorization": `Bearer ${getAtk()}` }
+    });
+
+    if (res.status !== 200) {
+      setError(await res.text());
+      setLoading(false);
+    } else {
+      const data = await res.json();
+      setStatus("Redirecting...");
+      setTimeout(() => redirect(data["session"]), 1850);
+    }
+  }
+
+  function redirect(session: any) {
+    const url = `${searchParams["redirect_uri"]}?code=${session["grant_token"]}&state=${searchParams["state"]}`;
+    window.open(url, "_self");
+  }
+
+  preConnect();
+
+  return (
+    <div class="w-full h-full flex justify-center items-center">
+      <div class="card w-[480px] max-w-screen shadow-xl">
+        <div class="card-body">
+          <div id="header" class="text-center mb-5">
+            <h1 class="text-xl font-bold">{title()}</h1>
+            <p>{subtitle()}</p>
+          </div>
+
+          <Show when={error()}>
+            <div id="alerts" class="mt-1">
+              <div role="alert" class="alert alert-error">
+                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none"
+                     viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span class="capitalize">{error()}</span>
+              </div>
+            </div>
+          </Show>
+
+          <Show when={loading()}>
+            <div class="py-16 text-center">
+              <div class="text-center">
+                <div>
+                  <span class="loading loading-lg loading-bars"></span>
+                </div>
+                <span>{status()}</span>
+              </div>
+            </div>
+          </Show>
+
+          <Show when={!loading()}>
+            <div class="mb-3">
+              <h2 class="font-bold">About who you connecting to</h2>
+              <p>{client().description}</p>
+            </div>
+            <div class="mb-3">
+              <h2 class="font-bold">Make sure you trust them</h2>
+              <p>You may share your personal information after connect them. Learn about their privacy policy and user
+                agreement to keep your personal information in safe.</p>
+            </div>
+            <div class="mb-5">
+              <h2 class="font-bold">After approve this request</h2>
+              <p>
+                You will be redirect to{" "}
+                <span class="link link-primary cursor-not-allowed">{searchParams["redirect_uri"]}</span>
+              </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2">
+              <button class="btn btn-accent" onClick={() => decline()}>Decline</button>
+              <button class="btn btn-primary" onClick={() => approve()}>Approve</button>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+}

view/src/pages/auth/login.tsx

@@ -108,7 +108,7 @@ export default function LoginPage() {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         code: tk,
-        grant_type: "authorization_code"
+        grant_type: "grant_token"
       })
     });
     if (res.status !== 200) {

view/src/pages/dashboard.tsx

@@ -5,7 +5,7 @@ export default function DashboardPage() {
   const userinfo = useUserinfo();
 
   return (
-    <div class="container mx-auto pt-12">
+    <div class="max-w-[720px] mx-auto px-5 pt-12">
       <h1 class="text-2xl font-bold">Welcome, {userinfo?.displayName}</h1>
       <p>What's a nice day!</p>