Improve mock and stories

stories/login/pages/Login.stories.tsx

@@ -17,6 +17,36 @@ export const Default: Story = {
     render: () => <KcPageStory />
 };
 
+export const WithInvalidCredential: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Invalid username or password.",
+                    type: "error"
+                },
+                login: {
+                    username: "johndoe"
+                },
+                messagesPerField: {
+                    // NOTE: The other functions of messagesPerField are derived from get() and
+                    // existsError() so they are the only ones that need to mock.
+                    existsError: (fieldName: string, ...otherFieldNames: string[]) => {
+                        const fieldNames = [fieldName, ...otherFieldNames];
+                        return fieldNames.includes("username") || fieldNames.includes("password");
+                    },
+                    get: (fieldName: string) => {
+                        if (fieldName === "username" || fieldName === "password") {
+                            return "Invalid username or password.";
+                        }
+                        return "";
+                    }
+                }
+            }}
+        />
+    )
+};
+
 export const WithoutRegistration: Story = {
     render: () => (
         <KcPageStory
@@ -180,3 +210,16 @@ export const WithoutPasswordField: Story = {
         />
     )
 };
+
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Please restart the login process.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};

stories/login/pages/Register.stories.tsx

@@ -17,22 +17,31 @@ export const Default: Story = {
     render: () => <KcPageStory />
 };
 
-export const WithFieldError: Story = {
+export const WithEmailAlreadyExists: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
                 profile: {
                     attributesByName: {
+                        username: {
+                            value: "johndoe"
+                        },
                         email: {
-                            value: "max.mustermann@gmail.com"
+                            value: "jhon.doe@gmail.com"
+                        },
+                        firstName: {
+                            value: "John"
+                        },
+                        lastName: {
+                            value: "Doe"
                         }
                     }
                 },
                 messagesPerField: {
-                    existsError: (fieldName: string) => fieldName === "email",
-                    exists: (fieldName: string) => fieldName === "email",
-                    get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined),
-                    printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "email" ? x : undefined)
+                    // NOTE: The other functions of messagesPerField are derived from get() and
+                    // existsError() so they are the only ones that need to mock.
+                    existsError: (fieldName: string, ...otherFieldNames: string[]) => [fieldName, ...otherFieldNames].includes("email"),
+                    get: (fieldName: string) => (fieldName === "email" ? "Email already exists." : undefined)
                 }
             }}
         />