fixes wrong styling on recover page

l3montree-dev · Jan 31, 2025 · 2fc921d · 2fc921d
1 parent b5f6c7a
commit 2fc921d
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 53 deletions.
diff --git a/src/components/kratos/Flow.tsx b/src/components/kratos/Flow.tsx
@@ -19,6 +19,7 @@ import {
   RegistrationFlow,
   SettingsFlow,
   UiNode,
+  UiText,
   UpdateLoginFlowBody,
   UpdateRecoveryFlowBody,
   UpdateRegistrationFlowBody,
@@ -31,6 +32,7 @@ import { Component, FormEvent, MouseEvent } from "react";
 
 import { Messages } from "./Messages";
 import { Node } from "./Node";
+import Callout from "../common/Callout";
 
 export type Values = Partial<
   | UpdateLoginFlowBody
@@ -136,7 +138,6 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
 
   // Handles form submission
   handleSubmit = (event: FormEvent<HTMLFormElement> | MouseEvent) => {
-    console.log("SUBMIT CALLED", event);
     // Prevent all native handlers
     event.stopPropagation();
     event.preventDefault();
@@ -202,6 +203,26 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
       return null;
     }
 
+    const typeToIntent = (
+      messages?: UiText[],
+    ): "info" | "success" | "danger" => {
+      // If there are no messages, its info
+      if (!messages) {
+        return "info";
+      }
+
+      // If there are messages, we need to find the most severe one
+      return messages.reduce<"info" | "success" | "danger">((acc, message) => {
+        if (message.type === "error") {
+          return "danger";
+        }
+        if (message.type === "success") {
+          return "success";
+        }
+        return acc;
+      }, "info");
+    };
+
     return (
       <form
         action={flow.ui.action}
@@ -210,9 +231,9 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
         onSubmit={this.handleSubmit}
       >
         {!hideGlobalMessages && Boolean(flow.ui.messages) ? (
-          <div>
+          <Callout intent={typeToIntent(flow.ui.messages)}>
             <Messages messages={flow.ui.messages} />
-          </div>
+          </Callout>
         ) : null}
         {nodes.map((node, k) => {
           const id = getNodeId(node) as keyof Values;

diff --git a/src/components/kratos/Messages.tsx b/src/components/kratos/Messages.tsx
@@ -27,10 +27,7 @@ const messageType2Intent = {
 };
 export const Message = ({ message }: MessageProps) => {
   return (
-    <p
-      className="text-sm text-muted-foreground"
-      data-testid={`ui/message/${message.id}`}
-    >
+    <p className="text-sm" data-testid={`ui/message/${message.id}`}>
       {message.text}
     </p>
   );

diff --git a/src/components/kratos/NodeAnchor.tsx b/src/components/kratos/NodeAnchor.tsx
@@ -14,6 +14,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { UiNode, UiNodeAnchorAttributes } from "@ory/client";
+import { Button } from "../ui/button";
 
 interface Props {
   node: UiNode;
@@ -22,15 +23,17 @@ interface Props {
 
 export const NodeAnchor = ({ node, attributes }: Props) => {
   return (
-    <button
-      data-testid={`node/anchor/${attributes.id}`}
-      onClick={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        window.location.href = attributes.href;
-      }}
-    >
-      {attributes.title.text}
-    </button>
+    <div className="flex flex-row justify-end">
+      <Button
+        data-testid={`node/anchor/${attributes.id}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          window.location.href = attributes.href;
+        }}
+      >
+        {attributes.title.text}
+      </Button>
+    </div>
   );
 };
diff --git a/src/pages/recovery.tsx b/src/pages/recovery.tsx
@@ -22,8 +22,14 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Flow } from "../components/kratos/Flow";
-import { ory, handleFlowError } from "../services/ory";
-import Image from "next/image";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../components/ui/card";
+import { handleFlowError, ory } from "../services/ory";
+import { Button } from "../components/ui/button";
 
 const Recovery: NextPage = () => {
   const [flow, setFlow] = useState<RecoveryFlow>();
@@ -106,40 +112,23 @@ const Recovery: NextPage = () => {
         <title>Recover your account - Ory NextJS Integration Example</title>
         <meta name="description" content="NextJS + React + Vercel + Ory" />
       </Head>
-      <div className="flex min-h-screen flex-1 flex-col justify-center bg-gray-200 px-6 py-32 dark:bg-gray-950 max-sm:py-16 lg:px-8">
-        <div className="rounded-lg p-5 dark:bg-gray-900 sm:mx-auto sm:w-full sm:max-w-lg">
-          <div>
-            <Image
-              className="mx-auto hidden h-20 w-auto dark:block"
-              src="/logo_inverse_horizontal.svg"
-              alt="DevGuard by l3montree Logo"
-              width={300}
-              height={300}
-            />
-            <Image
-              className="mx-auto h-20 w-auto dark:hidden"
-              src="/logo_horizontal.svg"
-              alt="DevGuard by l3montree Logo"
-              width={300}
-              height={300}
-            />
-            <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-white">
-              Recover your account
-            </h2>
-          </div>
-          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-lg">
-            <Flow onSubmit={onSubmit} flow={flow} />
-          </div>
-          <p className="mt-2 text-right text-sm">
-            <Link
-              href="/"
-              passHref
-              className="font-semibold leading-6 text-blue-500 hover:text-blue-400 hover:underline"
-            >
-              Go back
-            </Link>
-          </p>
-        </div>
+      <div className="flex min-h-screen flex-1 flex-col justify-center bg-card px-6 py-32 max-sm:py-16 lg:px-8">
+        <Card className="bg-background sm:mx-auto sm:w-full sm:max-w-lg">
+          <CardHeader>
+            <CardTitle>Recover your account</CardTitle>
+          </CardHeader>
+
+          <CardContent>
+            <div className="sm:mx-auto sm:w-full sm:max-w-lg">
+              <Flow onSubmit={onSubmit} flow={flow} />
+            </div>
+            <div className="mt-4 flex flex-row justify-end text-sm">
+              <Link href="/">
+                <Button variant={"secondary"}>Go back</Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </>
   );