feat: add error handling for unaccepted passwords, add kratos error page

web/static/base.js

@@ -56,8 +56,8 @@ function flow_login() {
         url: uri,
         success: function(data) {
 
-            // Render login form (group: profile)
-            var html = render_form(data, 'profile');
+            // Render login form (group: password)
+            var html = render_form(data, 'password');
             $("#contentLogin").html(html);
 
         },
@@ -94,11 +94,15 @@ function flow_settings_validate() {
                 window.location.href = 'settings';
             }
             else {
+                // There was an error, Kratos does not specify what is
+                // wrong. So we just show the general error message and
+                // let the user figure it out. We can re-use the flow-id
+                $("#contentProfileSaveFailed").show();
 
-                 // There was an error, Kratos does not specify what is
-                 // wrong. So we just show the general error message and
-                 // let the user figure it out. We can re-use the flow-id
-                 $("#contentProfileSaveFailed").show();
+                // For now, this code assumes that only the password can fail
+                // validation. Other forms might need to be added in the future.
+                html = render_form(data, 'password')
+                $("#contentPassword").html(html)
             }
         }
     });
@@ -134,12 +138,10 @@ function flow_settings() {
             }
 
 
-            // FIXME: This seems to be not necessary anymore in kratos 0.9.0
-            // because they moved the password field to the profile group
             // Render the password & profile form based on the fields we got
             // from the API
-            // var html = render_form(data, 'profile');
-            // $("#contentPassword").html(html);
+            var html = render_form(data, 'password');
+            $("#contentPassword").html(html);
 
             html = render_form(data, 'profile');
             $("#contentProfile").html(html);
@@ -251,9 +253,10 @@ function render_form(data, group) {
         var name = node.attributes.name;
         var type = node.attributes.type;
         var value = node.attributes.value;
+        var messages = node.messages
 
         if (node.group == 'default' || node.group == group) {
-            var elm = getFormElement(type, name, value);
+            var elm = getFormElement(type, name, value, messages);
             form += elm;
         }
     }
@@ -271,11 +274,18 @@ function render_form(data, group) {
 //                   like "email" are also supported
 // name: name of the field. Used when posting data
 // value: If there is already a value known, show it
-function getFormElement(type, name, value) {
+// messages: error messages related to the field
+function getFormElement(type, name, value, messages) {
+    console.log("Getting form element", type, name, value, messages)
 
     if (value == undefined) {
             value = '';
     }
+
+    if (typeof(messages) == "undefined") {
+        messages = []
+    }
+
     if (name == 'email' || name == 'traits.email') {
         return getFormInput(
                 'email',
@@ -285,6 +295,7 @@ function getFormElement(type, name, value) {
                 'Please enter your e-mail address here',
                 'Please provide your e-mail address. We will send a recovery ' +
                 'link to that e-mail address.',
+                messages,
                 );
     }
 
@@ -295,7 +306,8 @@ function getFormElement(type, name, value) {
                 value,
                 'Username',
                 'Please provide an username',
-                null
+                null,
+                messages,
                 );
     }
 
@@ -306,7 +318,8 @@ function getFormElement(type, name, value) {
                 value,
                 'Full name',
                 'Please provide your full name',
-                null
+                null,
+                messages,
                 );
     }
 
@@ -317,8 +330,9 @@ function getFormElement(type, name, value) {
                 name,
                 value,
                 'E-mail address',
-                'Please provide your e-mail address to login',
-                null
+                'Please provide your e-mail address to log in',
+                null,
+                messages,
                 );
     }
 
@@ -329,7 +343,8 @@ function getFormElement(type, name, value) {
                 value,
                 'Password',
                 'Please provide your password',
-                null
+                null,
+                messages,
                 );
     }
 
@@ -350,7 +365,7 @@ function getFormElement(type, name, value) {
     }
 
 
-    return getFormInput('input', name, value, name, null,null);
+    return getFormInput('input', name, value, name, null,null, messages);
 
 
 }
@@ -363,7 +378,12 @@ function getFormElement(type, name, value) {
 // param label: Label to display above field
 // param placeHolder: Label to display in field if empty
 // param help: Additional help text, displayed below the field in small font
-function getFormInput(type, name, value, label, placeHolder, help) {
+// param messages: Message about failed input
+function getFormInput(type, name, value, label, placeHolder, help, messages) {
+    if (typeof(help) == "undefined" || help == null) {
+        help = ""
+    }
+    console.log("Messages: ", messages);
 
     // Id field for help element
     var nameHelp = name + "Help";
@@ -372,6 +392,14 @@ function getFormInput(type, name, value, label, placeHolder, help) {
     element += '<label for="'+name+'">'+label+'</label>';
     element += '<input type="'+type+'" class="form-control" id="'+name+'" name="'+name+'" ';
 
+    // messages get appended to help info
+    if (messages.length) {
+        for (message in messages) {
+            console.log("adding message", messages[message])
+            help += messages[message]['text']
+        }
+    }
+
     // If we are a password field, add a eye icon to reveal password
     if (value) {
         element += 'value="'+value+'" ';