colors

packages/dashboard/src/components/Form/Message.js

@@ -1,27 +1,47 @@
+const types = {
+  error: {
+    color: "red",
+    icon: (
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+        clipRule="evenodd"
+      />
+    ),
+  },
+  info: {
+    color: "blue",
+    icon: (
+      <path
+        fillRule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+        clipRule="evenodd"
+      />
+    ),
+  },
+};
+
 export default function Message({ type, title, items = [] }) {
+  const { color, icon } = types[type];
+
   return (
-    <div className="rounded-md bg-red-50 p-4">
+    <div className={`rounded-md bg-${color}-50 p-4`}>
       <div className="flex">
         <div className="flex-shrink-0">
-          {/* Heroicon name: solid/x-circle */}
           <svg
-            className="h-5 w-5 text-red-400"
+            className={`h-5 w-5 text-${color}-400`}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"
             aria-hidden="true"
           >
-            <path
+            {icon}
-              fillRule="evenodd"
-              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-              clipRule="evenodd"
-            />
           </svg>
         </div>
         <div className="ml-3">
-          {title && <h3 className="text-sm font-medium text-red-800">{title}</h3>}
+          {title && <h3 className={`text-sm font-medium text-${color}-800`}>{title}</h3>}
           {items.length > 0 && (
-            <div className={`${title ? "mt-2" : ""} text-sm text-red-700`}>
+            <div className={`${title ? "mt-2" : ""} text-sm text-${color}-700`}>
               <ul className={`${items.length > 1 ? "list-disc pl-5 space-y-1" : ""}`}>
                 {items.map((item, index) => (
                   <li key={index}>{item}</li>

packages/dashboard/src/pages/recovery.js

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Configuration, PublicApi } from "@ory/kratos-client";
 import config from "../config";
+import Message from "../../components/Form/Message";
 
 const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public }));
 
@@ -102,6 +103,12 @@ export default function Recovery({ flow }) {
                     className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
                   />
                 </div>
+
+                {Boolean(field.messages?.length) && (
+                  <div className="mt-2">
+                    <Message items={field.messages.map(({ text }) => text)} />
+                  </div>
+                )}
               </div>
             ))}
             <div>
@@ -112,6 +119,11 @@ export default function Recovery({ flow }) {
                 Send recovery link
               </button>
             </div>
+
+            {Boolean(flow.methods.password.config.messages?.length) &&
+              flow.methods.password.config.messages.map((message) => (
+                <Message type={message.type} title={message.text} />
+              ))}
           </form>
         </div>
       </div>