feat: add error handling for login flow WD-10252

Signed-off-by: David Edler <david.edler@canonical.com>

ui/components/Flow.tsx

@@ -35,6 +35,7 @@ export interface Props<T> {
 interface State<T> {
   values: T;
   isLoading: boolean;
+  error?: string;
 }
 
 export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
@@ -104,10 +105,8 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
     if (this.state.isLoading) {
       return Promise.resolve();
     }
-    // console.log("State", this.state);
 
     this.setState((state) => {
-      // console.log("Set state", state);
       return {
         ...state,
         isLoading: true,
@@ -118,19 +117,28 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
       ? { ...this.state.values, method }
       : this.state.values;
 
-    return this.props.onSubmit(values).finally(() => {
-      // We wait for reconciliation and update the state after 50ms
-      // Done submitting - update loading status
-      this.setState((state) => ({
-        ...state,
-        isLoading: false,
-      }));
-    });
+    return this.props
+      .onSubmit(values)
+      .catch((e) => {
+        const backendError = e as { response?: { data?: string } };
+        this.setState((state) => ({
+          ...state,
+          error: backendError?.response?.data?.toString(),
+        }));
+      })
+      .finally(() => {
+        // We wait for reconciliation and update the state after 50ms
+        // Done submitting - update loading status
+        this.setState((state) => ({
+          ...state,
+          isLoading: false,
+        }));
+      });
   };
 
   render() {
     const { flow } = this.props;
-    const { values, isLoading } = this.state;
+    const { values, isLoading, error } = this.state;
 
     // Filter the nodes - only show the ones we want
     const nodes = this.filterNodes();
@@ -148,20 +156,20 @@ export class Flow<T extends Values> extends Component<Props<T>, State<T>> {
         action={flow.ui.action}
         method={flow.ui.method}
         onSubmit={void this.handleSubmit}
+        className={error && "is-error"}
       >
         {nodes.map((node, k) => {
           const id = getNodeId(node) as keyof Values;
           return (
             <Node
               key={`${id}-${k}`}
               disabled={isLoading}
+              error={error}
               node={node}
               value={values[id]}
               dispatchSubmit={this.handleSubmit}
               setValue={(value) => {
-                console.log("Value", value);
                 return new Promise((resolve) => {
-                  console.log("NODE ID", getNodeId(node));
                   this.setState(
                     (state) => ({
                       ...state,

ui/components/Node.tsx

@@ -20,6 +20,7 @@ export const Node: FC<Omit<NodeInputProps, "attributes">> = ({
   setValue,
   disabled,
   dispatchSubmit,
+  error,
 }) => {
   if (isUiNodeImageAttributes(node.attributes)) {
     return <NodeImage node={node} attributes={node.attributes} />;
@@ -46,6 +47,7 @@ export const Node: FC<Omit<NodeInputProps, "attributes">> = ({
         node={node}
         disabled={disabled}
         attributes={node.attributes}
+        error={error}
       />
     );
   }

ui/components/NodeInputPassword.tsx

@@ -8,13 +8,15 @@ export const NodeInputPassword: FC<NodeInputProps> = ({
   setValue,
   disabled,
   dispatchSubmit,
+  error,
 }) => {
   return (
     <Input
       type="password"
       label={getNodeLabel(node)}
       disabled={disabled}
       defaultValue={node.messages.map(({ text }) => text).join(" ")}
+      error={error}
       onChange={(e) => void setValue(e.target.value)}
       onKeyDown={(e) => {
         if (e.key === "Enter") {

ui/components/helpers.d.ts

@@ -17,4 +17,5 @@ export interface NodeInputProps {
   disabled: boolean;
   dispatchSubmit: FormDispatcher;
   setValue: ValueSetter;
+  error?: string;
 }

ui/pages/login.tsx

@@ -71,7 +71,6 @@ const Login: NextPage = () => {
   ]);
   const handleSubmit = useCallback(
     (values: UpdateLoginFlowBody) => {
-      console.log("Values", values);
       return kratos
         .updateLoginFlow({
           flow: String(flow?.id),