Newer
Older
/* base.js
This is the base JS file to render the user interfaces of kratos and provide
the end user with flows for login, recovery etc.
check_flow_*():
These functions check the status of the flow and based on the status do some
action to get a better experience for the end user. Usually this is a
redirect based on the state
flow_*():
execute / render all UI elements in a flow. Kratos expects you to work on
to query kratos which provides you with the UI elements needed to be
rendered. This querying and rendering is done exectly by those function.
Based on what kratos provides or the state of the flow, elements are maybe
hidden or shown
*/
// Check if an auth flow is configured and redirect to auth page in that
// case.
function check_flow_auth() {

Maarten de Waard
committed
var state = Cookies.get('flow_state');
var url = Cookies.get('auth_url');

Maarten de Waard
committed
if (state == 'auth') {
Cookies.set('flow_state', '');
window.location.href = url;
}
}
// Check if there if the flow is expired, if so, reset the cookie
function check_flow_expired() {

Maarten de Waard
committed
var state = Cookies.get('flow_state');

Maarten de Waard
committed
if (state == 'flow_expired') {
Cookies.set('flow_state', '');
$('#contentFlowExpired').show();
}
}
// The script executed on login flows
function flow_login() {

Maarten de Waard
committed
var flow = $.urlParam('flow');
var uri = api_url + 'self-service/login/flows?id=' + flow;
// Query the Kratos backend to know what fields to render for the
// current flow
$.ajax({
type: 'GET',
url: uri,
success: function (data) {
// Determine which groups to show.
var groups = scrape_groups(data);
for (const group of groups) {
// Render login form (group: password)
var form_html = render_form(data, group, 'login');
$('#contentLogin_' + group).html(form_html);
}

Maarten de Waard
committed
var messages_html = render_messages(data);
$('#contentMessages').html(messages_html);
},
complete: function (obj) {
// If we get a 410, the flow is expired, need to refresh the flow
if (obj.status == 410) {
Cookies.set('flow_state', 'flow_expired');
// If we call the page without arguments, we get a new flow
window.location.href = 'login';
}
},
});

Maarten de Waard
committed
// This is called after a POST on settings. It tells if the save was
// successful and display / handles based on that outcome
function flow_settings_validate() {

Maarten de Waard
committed
var flow = $.urlParam('flow');
var uri = api_url + 'self-service/settings/flows?id=' + flow;
$.ajax({
type: 'GET',
url: uri,
success: function (data) {
// We had success. We save that fact in our flow_state
// cookie and regenerate a new flow
if (data.state == 'success') {
Cookies.set('flow_state', 'settings_saved');
// Redirect to generate new flow ID
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();
// For now, this code assumes that only the password can fail
// validation. Other forms might need to be added in the future.

Maarten de Waard
committed
$('#contentPassword').html(html);
}
},
});
}
// Render the settings flow, this is where users can change their personal
// settings, like name, password and totp (second factor). The form contents
// are defined by Kratos.
function flow_settings() {

Maarten de Waard
committed
// Get the details from the current flow from kratos
var flow = $.urlParam('flow');
var uri = api_url + 'self-service/settings/flows?id=' + flow;
$.ajax({
type: 'GET',
url: uri,
success: function (data) {
var state = Cookies.get('flow_state');
// If we have confirmation the settings are saved, show the
// notification
if (state == 'settings_saved') {
$('#contentProfileSaved').show();
Cookies.set('flow_state', 'settings');
}
// Hide everything except password section if we are in recovery state,

Maarten de Waard
committed
// so the user is not confused by other fields. The user

Maarten de Waard
committed
if (state == 'recovery') {
$('#contentProfile').hide();

Maarten de Waard
committed
}
// Render the forms (password, profile, totp) based on the fields we got
// from the API.
var html = render_form(data, 'password', 'settings');
$('#pills-password').html(html);
html = render_form(data, 'profile', 'settings');
$('#pills-profile').html(html);

Maarten de Waard
committed
html = render_form(data, 'totp', 'settings');
$('#pills-totp').html(html);

Maarten de Waard
committed
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
// If the submit button is hit, execute the POST with Ajax.
$('#formpassword').submit(function (e) {
// avoid to execute the actual submit of the form.
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: 'POST',
url: url,
data: form.serialize(),
complete: function (obj) {
// Validate the settings
flow_settings_validate();
},
});
});
},
complete: function (obj) {
// If we get a 410, the flow is expired, need to refresh the flow
if (obj.status == 410) {
Cookies.set('flow_state', 'flow_expired');
window.location.href = 'settings';
}
},
});
}
function flow_recover() {

Maarten de Waard
committed
var flow = $.urlParam('flow');
var uri = api_url + 'self-service/recovery/flows?id=' + flow;
$.ajax({
type: 'GET',
url: uri,
success: function (data) {
// Render the recover form, method 'link'

Maarten de Waard
committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
$('#contentRecover').html(html);
// Do form post as an AJAX call
$('#formlink').submit(function (e) {
// avoid to execute the actual submit of the form.
e.preventDefault();
var form = $(this);
var url = form.attr('action');
// keep stat we are in recovery
Cookies.set('flow_state', 'recovery');
$.ajax({
type: 'POST',
url: url,
data: form.serialize(), // serializes the form's elements.
success: function (data) {
// Show the request is sent out
$('#contentRecover').hide();
$('#contentRecoverRequested').show();
},
});
});
},
complete: function (obj) {
// If we get a 410, the flow is expired, need to refresh the flow
if (obj.status == 410) {
Cookies.set('flow_state', 'flow_expired');
window.location.href = 'recovery';
}
},
});
// Based on Kratos UI data, decide which node groups to process.
function scrape_groups(data) {
var nodes = new Set();
for (const node of data.ui.nodes) {
if (node.group != 'default') {
nodes.add(node.group);
}
}
return nodes;
}
// Based on Kratos UI data and a group name, get the full form for that group.

Maarten de Waard
committed
// kratos groups elements which belongs together in a group and should be posted
// at once. The elements in the default group should be part of all other
// groups.
//
// data: data object as returned form the API
// group: group to render
// context: string to specify the context of this form. We need this because
// the Kratos UI data is not sufficient in some cases to decide things like
// texts and button labels.
function render_form(data, group, context) {

Maarten de Waard
committed
// Create form
var action = data.ui.action;
var method = data.ui.method;
var form = "<form id='form" + group + "' method='" + method + "' action='" + action + "'>";
for (const node of data.ui.nodes) {
if (node.group == 'default' || node.group == group) {

Maarten de Waard
committed
form += elm;

Maarten de Waard
committed
}
form += '</form>';
return form;
}

Maarten de Waard
committed
// Check if there are any general messages to show to the user and render them
function render_messages(data) {
var messages = data.ui.messages;

Maarten de Waard
committed
return '';
}
var html = '<ul>';
messages.forEach((message) => {
html += '<li>';
html += message.text;
html += '</li>';
});
html += '</ul>';
return html;
}
// Return form element based on name, including help text (sub), placeholder etc.
// Kratos give us form names and types and specifies what to render. However
// it does not provide labels or translations. This function returns a HTML

Maarten de Waard
committed
// form element based on the fields provided by Kratos with proper names and
// labels
// type: input type, usual "input", "hidden" or "submit". But bootstrap types
// like "email" are also supported
// name: name of the field. Used when posting data
// value: If there is already a value known, show it
// messages: error messages related to the field
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
function getFormElement(node, context) {
console.log('Getting form element', node);
if (node.type == 'img') {
return (
`
<img id="` +
node.attributes.id +
`" src='` +
node.attributes.src +
`'>`
);
}
if (node.type == 'text') {
return (
`
<span id="` +
node.attributes.id +
`" class="form-display form-display-` +
node.attributes.text.type +
`">` +
node.attributes.text.text +
`</span>`
);
}
var name = node.attributes.name;
var type = node.attributes.type;
var value = node.attributes.value;
var messages = node.messages;

Maarten de Waard
committed
if (value == undefined) {
value = '';
}
if (typeof messages == 'undefined') {
messages = [];
}
if (name == 'email' || name == 'traits.email') {
return getFormInput(
'email',
name,
value,
'E-mail address',
'Please enter your e-mail address here',
'Please provide your e-mail address. We will send a recovery link to that e-mail address.',

Maarten de Waard
committed
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
messages,
);
}
if (name == 'traits.username') {
return getFormInput('name', name, value, 'Username', 'Please provide an username', null, messages);
}
if (name == 'traits.name') {
return getFormInput('name', name, value, 'Full name', 'Please provide your full name', null, messages);
}
if (name == 'identifier') {
return getFormInput(
'email',
name,
value,
'E-mail address',
'Please provide your e-mail address to log in',
null,
messages,
);
}
if (name == 'password') {
return getFormInput('password', name, value, 'Password', 'Please provide your password', null, messages);
}
if (type == 'hidden' || name == 'traits.uuid') {
return (
`
<input type="hidden" class="form-control" id="` +
name +
`"
name="` +
name +
`" value='` +
value +
`'>`
);
}
if (name == 'totp_code') {
return getFormInput(
'totp_code',
name,
value,
'TOTP code',
'Please enter the code from your TOTP/authenticator app.',
null,
messages,
);
}

Maarten de Waard
committed
if (type == 'submit') {
var label = 'Save';
if (name == 'totp_unlink') {
label = 'Forget saved TOTP device';
}
else if (node.group == 'totp') {
if (context == 'settings') {
label = 'Enroll TOTP device';
}
else {
label = 'Verify';
}
}
if (name == 'method' && value == 'password') {
if (context == 'settings') {
label = 'Update password';
}
else {
label = 'Log in';
}
}
if (context == 'recovery') {
label = 'Send recovery link';
}

Maarten de Waard
committed
return (
`<div class="form-group">
<input type="hidden" name="` +
name +
`" value="` +
value +
`">
<button type="submit" class="btn btn-primary">` + label + `</button>

Maarten de Waard
committed
</div>`
);
}

Maarten de Waard
committed
return getFormInput('input', name, value, name, null, null, messages);
}
// Usually called by getFormElement, generic function to generate an
// input box.
// param type: type of input, like 'input', 'email', 'password'
// param name: name of form field, used when posting the form
// param value: preset value of the field
// 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
// param messages: Message about failed input
function getFormInput(type, name, value, label, placeHolder, help, messages) {

Maarten de Waard
committed
if (typeof help == 'undefined' || help == null) {
help = '';
}
console.log('Messages: ', messages);
// Id field for help element
var nameHelp = name + 'Help';
var element = '<div class="form-group">';
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'];
}

Maarten de Waard
committed
}
// If we are a password field, add a eye icon to reveal password
if (value) {
element += 'value="' + value + '" ';
}
if (help) {
element += 'aria-describedby="' + nameHelp + '" ';
}
if (placeHolder) {
element += 'placeholder="' + placeHolder + '" ';
}
element += '>';
if (help) {
element +=
`<small id="` +
nameHelp +
`" class="form-text text-muted">` +
help +
`

Maarten de Waard
committed
}

Maarten de Waard
committed
element += '</div>';

Maarten de Waard
committed
return element;
}
// $.urlParam get parameters from the URI. Example: id = $.urlParam('id');

Maarten de Waard
committed
$.urlParam = function (name) {
var results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results == null) {
return null;
}
return decodeURI(results[1]) || 0;