Error messages display correctly (#4)

* Error messages display correctly

* Helper function on flow and demoflow

* First and last name required fix on settings page

* Removed unused code

* Smaller changes

* Use submodule in entry

* Drone build for submodules

* removed submodules

* Drone

* Removed submodules

* Comment for submodules

Author: lumburovskalina

pages/login.tsx

@@ -141,7 +141,7 @@ const Login: NextPage = () => {
                 </span>
               </fieldset>
               <p className="text-description" id="description">
-                {selectedRole === 'engineer' ? 'Administers the project and works on programmatic tasks such as labeling automation or filter settings.' : selectedRole === 'expert' ? 'Working on reference manual labels, which can be used by the engineering team to estimate the data quality.' : 'Working on manual labels as if they were heuristics. They can be switched on/off by the engineering team, so that the engineers can in- or exclude them during weak supervision.'}
+                {selectedRole === 'engineer' ? 'Administers the project and works on programmatic tasks such as labeling automation or filter settings.' : selectedRole === 'expert' ? 'Working on reference manual labels, which can be used by the engineering team to estimate the data quality.' : 'Working on manual labels as if they were heuristics. They can be switched on/off by the engineering team, so that the engineers can in - or exclude them during weak supervision.'}
               </p>
               <p className="text-description" id="sub-description">
                 {selectedRole === 'engineer' ? 'They have access to all features of the application, including the Python SDK.' : selectedRole === 'expert' ? 'They have access to the labeling view only.' : 'They have access to a task-minimized labeling view only. Engineers can revoke their access to the labeling view.'}

pages/registration.tsx

@@ -9,6 +9,7 @@ import ory from "@/pkg/sdk"
 import { handleFlowError } from "@/pkg/errors"
 import { Flow } from "@/pkg"
 import { MiscInfo } from "@/services/basic-fetch/misc"
+import { prepareFirstLastNameAsRequired } from "@/util/helper-functions"
 
 // Renders the registration page
 const Registration: NextPage = () => {
@@ -17,6 +18,7 @@ const Registration: NextPage = () => {
   // The "flow" represents a registration process and contains
   // information about the form we need to render (e.g. username + password)
   const [initialFlow, setInitialFlow]: any = useState<RegistrationFlow>()
+  const [changedFlow, setChangedFlow]: any = useState<RegistrationFlow>()
 
   // Get ?flow=... from the URL
   const { flow: flowId, return_to: returnTo } = router.query;
@@ -56,21 +58,11 @@ const Registration: NextPage = () => {
     if (initialFlow.ui.nodes[1].meta.label) {
       initialFlow.ui.nodes[1].meta.label.text = "Email address"
     }
-    if (initialFlow.ui.nodes[3].attributes.name === "traits.name.first") {
-      initialFlow.ui.nodes[3].attributes.required = true
-    }
-    if (initialFlow.ui.nodes[4].attributes.name === "traits.name.last") {
-      initialFlow.ui.nodes[4].attributes.required = true
-    }
-    setInitialFlow(initialFlow);
+    initialFlow.ui.nodes = prepareFirstLastNameAsRequired(3, 4, initialFlow);
+    setChangedFlow(initialFlow);
   }, [initialFlow])
 
   const onSubmit = async (values: UpdateRegistrationFlowBody) => {
-    await router
-      // On submission, add the flow ID to the URL but do not navigate. This prevents the user loosing
-      // his data when she/he reloads the page.
-      .push(`/registration?flow=${initialFlow?.id}`, undefined, { shallow: true })
-
     ory
       .updateRegistrationFlow({
         flow: String(initialFlow?.id),
@@ -103,7 +95,7 @@ const Registration: NextPage = () => {
         <KernLogo />
         <div id="signup">
           <h2 className="title">{MiscInfo.isManaged ? 'Start your 14-day free trial' : 'Sign up for a local account'}</h2>
-          <Flow onSubmit={onSubmit} flow={initialFlow} />
+          <Flow onSubmit={onSubmit} flow={changedFlow} />
           <div className="link-container">
             <a className="link" data-testid="forgot-password" href="/auth/login">Go back to login</a>
           </div>

pages/settings.tsx

@@ -1,4 +1,4 @@
-import { SettingsFlow, UpdateSettingsFlowBody } from "@ory/client"
+import { SettingsFlow, UiNode, UpdateSettingsFlowBody } from "@ory/client"
 import { AxiosError } from "axios"
 import type { NextPage } from "next"
 import Head from "next/head"
@@ -9,10 +9,11 @@ import { Flow, Messages } from "../pkg"
 import { handleFlowError } from "../pkg/errors"
 import ory from "../pkg/sdk"
 import { KernLogo } from "@/pkg/ui/Icons"
+import { prepareFirstLastNameAsRequired } from "@/util/helper-functions"
 
 const Settings: NextPage = () => {
-  const [initialFlow, setInitialFlow] = useState<SettingsFlow>()
-  const [changedFlow, setChangedFlow] = useState<SettingsFlow>()
+  const [initialFlow, setInitialFlow]: any = useState<SettingsFlow>()
+  const [changedFlow, setChangedFlow]: any = useState<SettingsFlow>()
   const [containsTotp, setContainsTotp] = useState<boolean>(false)
   const [containsBackupCodes, setContainsBackupCodes] = useState<boolean>(false)
 
@@ -53,8 +54,9 @@ const Settings: NextPage = () => {
     if (initialFlow.ui.nodes[1].meta.label) {
       initialFlow.ui.nodes[1].meta.label.text = "Email address";
     }
-    const checkIfTotp = initialFlow.ui.nodes.find((node) => node.group === "totp");
-    const checkIfBackupCodes = initialFlow.ui.nodes.find((node) => node.group === "lookup_secret");
+    initialFlow.ui.nodes = prepareFirstLastNameAsRequired(2, 3, initialFlow);
+    const checkIfTotp = initialFlow.ui.nodes.find((node: UiNode) => node.group === "totp");
+    const checkIfBackupCodes = initialFlow.ui.nodes.find((node: UiNode) => node.group === "lookup_secret");
     if (checkIfTotp) {
       setContainsTotp(true);
     }
@@ -65,33 +67,26 @@ const Settings: NextPage = () => {
   }, [initialFlow])
 
   const onSubmit = (values: UpdateSettingsFlowBody) =>
-    router
-      // On submission, add the flow ID to the URL but do not navigate. This prevents the user loosing
-      // his data when she/he reloads the page.
-      .push(`/settings?flow=${initialFlow?.id}`, undefined, { shallow: true })
-      .then(() =>
-        ory
-          .updateSettingsFlow({
-            flow: String(initialFlow?.id),
-            updateSettingsFlowBody: values,
-          })
-          .then(({ data }) => {
-            // The settings have been saved and the flow was updated. Let's show it to the user!
-            setInitialFlow(data)
-          })
-          .catch(handleFlowError(router, "settings", setInitialFlow))
-          .catch(async (err: AxiosError) => {
-            // If the previous handler did not catch the error it's most likely a form validation error
-            if (err.response?.status === 400) {
-              // Yup, it is!
-              setInitialFlow(err.response?.data)
-              return
-            }
-
-            return Promise.reject(err)
-          }),
-      )
+    ory
+      .updateSettingsFlow({
+        flow: String(initialFlow?.id),
+        updateSettingsFlowBody: values,
+      })
+      .then(({ data }) => {
+        // The settings have been saved and the flow was updated. Let's show it to the user!
+        setInitialFlow(data)
+      })
+      .catch(handleFlowError(router, "settings", setInitialFlow))
+      .catch(async (err: AxiosError) => {
+        // If the previous handler did not catch the error it's most likely a form validation error
+        if (err.response?.status === 400) {
+          // Yup, it is!
+          setInitialFlow(err.response?.data)
+          return
+        }
 
+        return Promise.reject(err)
+      })
   return (
     <>
       <Head>

pkg/ui/DemoFlow.tsx

@@ -16,6 +16,7 @@ import { Component, FormEvent, MouseEvent } from "react"
 
 import { Messages } from "./Messages"
 import { Node } from "./Node"
+import { refactorFlowWithMoreMessages } from "@/util/helper-functions"
 
 export type Values = Partial<
     | UpdateLoginFlowBody
@@ -168,8 +169,8 @@ export class DemoFlow<T extends Values> extends Component<Props<T>, State<T>> {
     }
 
     render() {
-        const { hideGlobalMessages, flow } = this.props
         const { values, isLoading } = this.state
+        const flow = refactorFlowWithMoreMessages(this.props.flow)
 
         // Filter the nodes - only show the ones we want
         const nodes = this.filterNodes()
@@ -188,7 +189,7 @@ export class DemoFlow<T extends Values> extends Component<Props<T>, State<T>> {
                 method={flow.ui.method}
                 onSubmit={this.handleSubmit}
             >
-                {!hideGlobalMessages ? <Messages messages={flow.ui.messages} /> : null}
+                {!this.props.hideGlobalMessages ? <Messages messages={flow.ui.messages} /> : null}
                 {nodes.map((node, k) => {
 
 

pkg/ui/Flow.tsx

@@ -16,6 +16,7 @@ import { Component, FormEvent, MouseEvent } from "react"
 
 import { Messages } from "./Messages"
 import { Node } from "./Node"
+import { refactorFlowWithMoreMessages } from "@/util/helper-functions"
 
 export type Values = Partial<
   | UpdateLoginFlowBody
@@ -168,8 +169,8 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
   }
 
   render() {
-    const { hideGlobalMessages, flow } = this.props
     const { values, isLoading } = this.state
+    const flow = refactorFlowWithMoreMessages(this.props.flow)
 
     // Filter the nodes - only show the ones we want
     const nodes = this.filterNodes()
@@ -187,7 +188,7 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
         method={flow.ui.method}
         onSubmit={this.handleSubmit}
       >
-        {!hideGlobalMessages ? <Messages messages={flow.ui.messages} /> : null}
+        {!this.props.hideGlobalMessages ? <Messages messages={flow.ui.messages} /> : null}
         {nodes.map((node, k) => {
           const id = getNodeId(node) as keyof Values
           return <Node

pkg/ui/NodeInputDefault.tsx

@@ -2,6 +2,7 @@ import { TextInput } from "@ory/themes"
 
 import { NodeInputProps } from "./helpers"
 import { getNodeLabel } from "@ory/integrations/ui"
+import { Message } from "./Messages"
 
 export function NodeInputDefault<T>(props: NodeInputProps) {
   const { node, attributes, value = "", setValue, disabled } = props
@@ -37,10 +38,8 @@ export function NodeInputDefault<T>(props: NodeInputProps) {
       }
       subtitle={
         <>
-          {node.messages.map(({ text, id }, k) => (
-            <span key={`${id}-${k}`} data-testid={`ui/message/${id}`}>
-              {text}
-            </span>
+          {node.messages.forEach((message: any) => (
+            <Message message={message} />
           ))}
         </>
       }

services/basic-fetch/util.ts

@@ -13,6 +13,7 @@ export function jsonFetchWrapper(url: string, fetchType: FetchType, onResult?: (
         alertUser();
         return;
     }
+    // can't use submodule because of drone build issues. Copied instead
     if (!headers) headers = {};
     headers["Content-Type"] = "application/json";
 
@@ -31,8 +32,6 @@ export function jsonFetchWrapper(url: string, fetchType: FetchType, onResult?: (
     });
 
     if (onResult && !hasError) myFetch.then(result => onResult(result));
-
-
 }
 
 

util/helper-functions.ts

@@ -20,4 +20,29 @@ export function getValuePassword(selectedRole: any) {
         value = 'c34540903b9f';
     }
     return value;
+}
+
+export function refactorFlowWithMoreMessages(flow: any) {
+    if (flow !== undefined && flow.ui.messages == undefined) {
+        const messages: any[] = [];
+        flow.ui.nodes.forEach((node: any) => {
+            if (node.messages.length > 0) {
+                node.messages.forEach((message: any) => {
+                    messages.push(message);
+                });
+            }
+        });
+        flow.ui = { ...flow?.ui, messages: messages };
+    }
+    return flow;
+}
+
+export function prepareFirstLastNameAsRequired(firstNameIdx: number, lastNameIdx: number, initialFlow: any) {
+    if (initialFlow.ui.nodes[firstNameIdx].attributes.name === "traits.name.first") {
+        initialFlow.ui.nodes[firstNameIdx].attributes.required = true
+    }
+    if (initialFlow.ui.nodes[lastNameIdx].attributes.name === "traits.name.last") {
+        initialFlow.ui.nodes[lastNameIdx].attributes.required = true
+    }
+    return initialFlow.ui.nodes;
 }