adds alert component

wmalarski · Oct 29, 2023 · 156755b · 156755b
1 parent cdfc3d8
commit 156755b
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 50 deletions.
diff --git a/.marko-run/routes.d.ts b/.marko-run/routes.d.ts
@@ -14,11 +14,7 @@ declare module "@marko/run" {
 			"/api/auth/callback": Routes["/api/auth/callback"];
 			"/api/auth/sign-out": Routes["/api/auth/sign-out"];
 			"/sign-in": Routes["/sign-in"];
-			"/sign-in/api/magic-link": Routes["/sign-in/api/magic-link"];
-			"/sign-in/api/oauth": Routes["/sign-in/api/oauth"];
-			"/sign-in/api/password": Routes["/sign-in/api/password"];
 			"/sign-up": Routes["/sign-up"];
-			"/sign-up/api": Routes["/sign-up/api"];
 			"/todos": Routes["/todos"];
 			"/todos/active": Routes["/todos/active"];
 			"/todos/finished": Routes["/todos/finished"];
@@ -56,40 +52,10 @@ declare module "../src/routes/sign-in/+handler" {
   }
 }
 
-declare module "../src/routes/sign-in/api/magic-link/+handler" {
+declare module "../src/routes/sign-up/+handler" {
   namespace MarkoRun {
     export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform };
-    export type Route = Run.Routes["/sign-in/api/magic-link"];
-    export type Context = Run.MultiRouteContext<Route>;
-    export type Handler = Run.HandlerLike<Route>;
-    export const route: Run.HandlerTypeFn<Route>;
-  }
-}
-
-declare module "../src/routes/sign-in/api/oauth/+handler" {
-  namespace MarkoRun {
-    export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform };
-    export type Route = Run.Routes["/sign-in/api/oauth"];
-    export type Context = Run.MultiRouteContext<Route>;
-    export type Handler = Run.HandlerLike<Route>;
-    export const route: Run.HandlerTypeFn<Route>;
-  }
-}
-
-declare module "../src/routes/sign-in/api/password/+handler" {
-  namespace MarkoRun {
-    export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform };
-    export type Route = Run.Routes["/sign-in/api/password"];
-    export type Context = Run.MultiRouteContext<Route>;
-    export type Handler = Run.HandlerLike<Route>;
-    export const route: Run.HandlerTypeFn<Route>;
-  }
-}
-
-declare module "../src/routes/sign-up/api/+handler" {
-  namespace MarkoRun {
-    export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform };
-    export type Route = Run.Routes["/sign-up/api"];
+    export type Route = Run.Routes["/sign-up"];
     export type Context = Run.MultiRouteContext<Route>;
     export type Handler = Run.HandlerLike<Route>;
     export const route: Run.HandlerTypeFn<Route>;
@@ -99,7 +65,7 @@ declare module "../src/routes/sign-up/api/+handler" {
 declare module "../src/routes/+middleware" {
   namespace MarkoRun {
     export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform };
-    export type Route = Run.Routes["/" | "/api/auth/callback" | "/api/auth/sign-out" | "/sign-in" | "/sign-in/api/magic-link" | "/sign-in/api/oauth" | "/sign-in/api/password" | "/sign-up" | "/sign-up/api" | "/todos" | "/todos/active" | "/todos/finished"];
+    export type Route = Run.Routes["/" | "/api/auth/callback" | "/api/auth/sign-out" | "/sign-in" | "/sign-up" | "/todos" | "/todos/active" | "/todos/finished"];
     export type Context = Run.MultiRouteContext<Route>;
     export type Handler = Run.HandlerLike<Route>;
     export const route: Run.HandlerTypeFn<Route>;
@@ -174,11 +140,7 @@ type Routes = {
 	"/api/auth/callback": { verb: "get"; };
 	"/api/auth/sign-out": { verb: "get"; };
 	"/sign-in": { verb: "get" | "post"; meta: typeof import("../src/routes/sign-in/+meta.json"); };
-	"/sign-in/api/magic-link": { verb: "post"; };
-	"/sign-in/api/oauth": { verb: "post"; };
-	"/sign-in/api/password": { verb: "post"; };
-	"/sign-up": { verb: "get"; meta: typeof import("../src/routes/sign-up/+meta.json"); };
-	"/sign-up/api": { verb: "post"; };
+	"/sign-up": { verb: "get" | "post"; meta: typeof import("../src/routes/sign-up/+meta.json"); };
 	"/todos": { verb: "get"; meta: typeof import("../src/routes/todos/(active,finished,)/+meta.json"); };
 	"/todos/active": { verb: "get"; meta: typeof import("../src/routes/todos/(active,finished,)/+meta.json"); };
 	"/todos/finished": { verb: "get"; meta: typeof import("../src/routes/todos/(active,finished,)/+meta.json"); };

diff --git a/src/components/app-alert/index.marko b/src/components/app-alert/index.marko
@@ -0,0 +1,10 @@
+import { alertClass, type AlertClassProps } from "./recipes";
+export type Input = Marko.Input<"span"> & AlertClassProps;
+
+<const/{ variant, class: className, ...rest }=input/>
+
+<const/recipeResult=alertClass({ className, variant })/>
+
+<span role="alert" ...rest class=recipeResult>
+  <${input.renderBody}/>
+</span>
diff --git a/src/components/app-alert/recipes.ts b/src/components/app-alert/recipes.ts
@@ -0,0 +1,18 @@
+import type { VariantProps } from "class-variance-authority";
+import { twCva } from "../../utils/twCva";
+
+export const alertClass = twCva("alert justify-start", {
+  defaultVariants: {
+    variant: null,
+  },
+  variants: {
+    variant: {
+      error: "alert-error",
+      info: "alert-info",
+      success: "alert-success",
+      warning: "alert-warning",
+    },
+  },
+});
+
+export type AlertClassProps = VariantProps<typeof alertClass>;
diff --git a/src/routes/sign-in/+handler.ts b/src/routes/sign-in/+handler.ts
@@ -90,12 +90,6 @@ const passwordSignIn = async ({ context, decoded }: SignInArgs) => {
   return redirectToPath("/todos", {});
 };
 
-const handlers = {
-  password: passwordSignIn,
-  oauth: oauthSignIn,
-  "magic-link": magicLinkSignIn,
-};
-
 export const POST: MarkoRun.Handler = async (context) => {
   const decoded = decode(await context.request.formData());
 

diff --git a/src/routes/sign-in/+page.marko b/src/routes/sign-in/+page.marko
@@ -1,5 +1,12 @@
 <anon-navbar/>
 <main class="flex flex-col gap-8 max-w-md justify-center w-full mx-auto">
+  <const/message=$global.url.searchParams.get("message")/>
+  <if=message>
+    <app-alert variant="error">
+      ${message}
+    </app-alert>
+  </if>
+
   <magic-link-form/>
   <password-form/>
   <oauth-form/>

diff --git a/src/routes/sign-up/api/+handler.ts → src/routes/sign-up/+handler.ts b/src/routes/sign-up/api/+handler.ts → src/routes/sign-up/+handler.ts
@@ -1,6 +1,6 @@
 import { decode } from "decode-formdata";
 import { email, object, safeParseAsync, string } from "valibot";
-import { invalidRequestError } from "../../../server/errors";
+import { invalidRequestError } from "../../server/errors";
 
 export const POST: MarkoRun.Handler = async (context) => {
   const parsed = await safeParseAsync(

diff --git a/src/routes/sign-up/+page.marko b/src/routes/sign-up/+page.marko
@@ -1,4 +1,11 @@
 <anon-navbar/>
 <main class="flex flex-col gap-8 max-w-md justify-center w-full mx-auto">
+  <const/message=$global.url.searchParams.get("message")/>
+  <if=message>
+    <app-alert variant="error">
+      ${message}
+    </app-alert>
+  </if>
+
   <sign-up-form/>
 </main>
diff --git a/src/routes/sign-up/components/sign-up-form.marko b/src/routes/sign-up/components/sign-up-form.marko
@@ -1,4 +1,4 @@
-<form class="flex flex-col gap-6" action="/sign-up/api" method="POST">
+<form class="flex flex-col gap-6" method="POST">
   <h2 class="text-xl">
     Sign in with password
   </h2>