✨ Account confirm

view/src/index.tsx

@@ -5,19 +5,18 @@ import { render } from "solid-js/web";
 
 import "./index.css";
 import "./assets/fonts/fonts.css";
+import { lazy } from "solid-js";
 import { Route, Router } from "@solidjs/router";
 
 import RootLayout from "./layouts/RootLayout.tsx";
-import DashboardPage from "./pages/dashboard.tsx";
-import LoginPage from "./pages/auth/login.tsx";
-import RegisterPage from "./pages/auth/register.tsx";
 
 const root = document.getElementById("root");
 
 render(() => (
   <Router root={RootLayout}>
-    <Route path="/" component={DashboardPage} />
-    <Route path="/auth/login" component={LoginPage} />
-    <Route path="/auth/register" component={RegisterPage} />
+    <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="/users/me/confirm" component={lazy(() => import("./pages/users/confirm.tsx"))} />
   </Router>
 ), root!);

view/src/pages/auth/register.tsx

@@ -110,6 +110,10 @@ export default function RegisterPage() {
             </div>
           </Show>
         </div>
+
+        <div class="text-sm text-center mt-3">
+          <a href="/auth/login" class="link">Already had an account? Login now!</a>
+        </div>
       </div>
     </div>
   );

view/src/pages/dashboard.tsx

@@ -1,4 +1,5 @@
 import { useUserinfo } from "../stores/userinfo.tsx";
+import { Show } from "solid-js";
 
 export default function DashboardPage() {
   const userinfo = useUserinfo();
@@ -7,6 +8,22 @@ export default function DashboardPage() {
     <div class="container mx-auto pt-12">
       <h1 class="text-2xl font-bold">Welcome, {userinfo?.displayName}</h1>
       <p>What's a nice day!</p>
+
+      <div id="alerts">
+        <Show when={!userinfo?.meta?.confirmed_at}>
+          <div role="alert" class="alert alert-warning mt-5">
+            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <div>
+              <span>Your account isn't confirmed yet. Please check your inbox and confirm your account.</span> <br />
+              <span>Otherwise your account will be deactivate after 48 hours.</span>
+            </div>
+          </div>
+        </Show>
+      </div>
     </div>
   );
 }

view/src/pages/users/confirm.tsx

@@ -0,0 +1,65 @@
+import { createSignal, Show } from "solid-js";
+import { useSearchParams } from "@solidjs/router";
+
+export default function ConfirmRegistrationPage() {
+  const [error, setError] = createSignal<string | null>(null);
+  const [status, setStatus] = createSignal("Confirming your account...");
+
+  const [searchParams] = useSearchParams();
+
+  async function doConfirm() {
+    if (!searchParams["tk"]) {
+      setError("Bad Request: Code was not exists");
+    }
+
+    const res = await fetch("/api/users/me/confirm", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        code: searchParams["tk"]
+      })
+    });
+    if (res.status !== 200) {
+      setError(await res.text());
+    } else {
+      setStatus("Confirmed. Redirecting to dashboard...");
+    }
+  }
+
+  doConfirm();
+
+  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">Confirm your account</h1>
+            <p>Hold on, we are working on it. Almost finished.</p>
+          </div>
+
+          <div class="pt-16 text-center">
+            <div class="text-center">
+              <div>
+                <span class="loading loading-lg loading-bars"></span>
+              </div>
+              <span>{status()}</span>
+            </div>
+          </div>
+
+          <Show when={error()} fallback={<div class="mt-16"></div>}>
+            <div id="alerts" class="mt-16">
+              <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>
+        </div>
+      </div>
+    </div>
+  );
+}