oidc-lib/src/wallet/jsonForm.js

A library for creating OIDC Service Providers

module.exports = {
	loadFormValues: loadFormValues,
	formToJson: formToJson,
	createInputDiv: createInputDiv,
	displayError: displayError,
	clearError: clearError,
	postJsonData: postJsonData
}

function loadFormValues(formTemplate, formValues){
	clearError();

	for (var parameter in formTemplate){
		var definition = formTemplate[parameter];
		var value = '';
		var id = '';
		var el;

		if (formValues[parameter] === undefined){
			if (definition.default === 'suppress!'){
				continue;
			}
			if (definition.default !== undefined){
				value = definition.default;
			}
		}
		else{
			value = formValues[parameter];
		}

		if (value === undefined){
			continue;
		}

		switch (definition.input){
			case 'text':
				// text may be a simple text placed into a text box
				// or an array of text placed into a textarea
				// or an array of text placed into a text box... (e.g. scope)
				el = document.getElementById(parameter);

				if (typeof value === 'string'){
					el.value = value;
				}
				else if (Array.isArray(value)){
					if (value.length === undefined){
						continue;
					}

					var valueSeparator = ' ';
					if (definition.type  === 'array')
						valueSeparator = '\n';

					var content = '';
					var separator = '';
					for (var i=0; i<value.length; i++){
						var line = value[i].trim();
						if (line.length > 0){
							content += separator + line;
							separator = valueSeparator;
						}
					}								
					el.value = content;
				}
				else {
					el.value = JSON.stringify(value);
				}
				break;

			case 'select':
				el = document.getElementById(parameter);
				el.value = value;
				break;

			case 'boolean':
			case 'radio':
				if (value){
					id = parameter + '_' + value;
					el = document.getElementById(id);
					el.checked = true;							
				}
				break;

			case 'checkboxes':
				if (value && value.length > 0){
					for (var i=0; i < value.length; i++){
						id = parameter + '_' + value[i];
						el = document.getElementById(id);
						el.checked = true;
					}
				}
				break;

			case 'checkbox':
				if (value){
					el = document.getElementById(parameter);
					el.checked = true;
				}
				break;

			case 'fieldset':
				loadFormValues(definition.content, formValues);
				break;

			case 'hidden':
					el = document.getElementById(parameter);
					el.value = value;

			default:
				break;
		}
	}
}

function flattenTemplates(result, template)
{
	var definition;
	for (var parameter in template){
		definition = template[parameter];
		if (definition.input === 'fieldset'){
			flattenTemplates(result, definition.content);
		}
		else{
			result[parameter] = definition;
		}
	}
}

function formToJson(formId, formTemplate){
	var flatTemplate = {};
	flattenTemplates(flatTemplate, formTemplate);
	var formEl = document.getElementById(formId);
	var formInputs = formEl.getElementsByTagName('input');
	var formTextAreas = formEl.getElementsByTagName('textarea');
	var formSelects = formEl.getElementsByTagName('select');
	var result = {};

	for (var i=0; i < formInputs.length; i++){
		var input_el = formInputs[i];
		var name = input_el.name;
		var definition = flatTemplate[name];
		if (definition === undefined)
			continue;

		switch (input_el.type){
			case 'hidden':
			case 'text':
			case 'select':
				if (input_el.value.length !== 0)
					result[name] = input_el.value;
				break;

			case 'boolean':
			case 'radio':
				if (input_el.checked){
					var prefix = name + '_';
					value = input_el.id.substring(prefix.length);
					result[name] = value;
				}							
				break;

			case 'checkbox':
				if (input_el.checked){
					var prefix = name + '_';
					if (input_el.id.startsWith(prefix)){
						if (result[name] === undefined){
							result[name] = [];
						}
						value = input_el.id.substring(prefix.length);
						result[name].push(value);
					}
					else{
						result[name] = true;
					}								
				}
				break;

			default:
				break;
		}
	}

	for (var i=0; i < formSelects.length; i++){
		var select_el = formSelects[i];
		var name = select_el.name;
		var definition = flatTemplate[name];
		if (definition === undefined)
			continue;

		if (select_el.value.length !== 0)
			result[name] = select_el.value;
	}

	for (var i=0; i < formTextAreas.length; i++){
		var textArea_el = formTextAreas[i];
		var name = textArea_el.name;
		var definition = flatTemplate[name];
		if (definition === undefined)
			continue;

		if (textArea_el.value.length !== 0){
			if (definition.type === 'array'){
				var valueArray = [];
				var text = textArea_el.value;
				var textArray = text.split('\n');
				for (var j=0; j < textArray.length; j++){
					if (textArray[j].length === 0)
						continue;
					valueArray.push(textArray[j]);
				}
				result[name] = valueArray;
			}
			else{
				result[name] = textArea_el.value;						
			}
		}
	}

	return result;
}

function createInputDiv(formDivId, formTemplate, formValues, scopes){
	form_html = generateInputGroupingHtml(formTemplate, formValues);

	var form_el = document.getElementById(formDivId);
	form_el.innerHTML = form_html;
}

function generateInputGroupingHtml(formTemplate, formValues, scopes){
	var label, formGroup, panel, value, id;
	var grouping_html = '';

	for (var parameter in formTemplate){
		var param_html = '';
		var definition = formTemplate[parameter];
		if (formValues[parameter] === undefined){
			if (definition.default === 'suppress!'){
				continue;
			}
		}

		switch (definition.input){
			case 'text':
			case 'email':
				formGroup = createFormGroup(definition, parameter);
				if (definition.type === undefined || definition.type === 'string'){
					param_html = formGroup + '<input type="text" id="' + parameter +
						'" name="' + parameter + '" class="form-control"/>\r\n';					
				}
				else{
					param_html = formGroup + '<textarea rows="2" cols="60" wrap="hard" id="' + parameter +
						'" name="' + parameter + '" style="height: auto;"></textarea>\r\n';							
				}

				param_html += closeFormGroup(formGroup);
				break;

			case 'radio':
				checkValuesExist(parameter, definition);
				var divId = 'radio_' + parameter;
				formGroup = createFormGroup(definition, divId);
				param_html = formGroup + '<div id="' + divId + '">'; 
				for (var i=0; i < definition.values.length; i++){
					value = definition.values[i];
					id = parameter + '_' + value;
					param_html += '<label class="radio-inline"><input type="radio" name="' 
						+ parameter + '" id="' + id + '" />' + value + '</label>';
				}
				param_html += '</div>' + closeFormGroup(formGroup);
				break;

			case 'select':
				checkValuesExist(parameter, definition);
				label = createLabel(definition, parameter);
				param_html = label + '<select id="' + parameter + '" name="' + parameter + '" >\r\n';
				for (var i=0; i < definition.values.length; i++){
					value = definition.values[i];
					param_html += '<option value="' + value + '">' + value + '</option>\r\n';
				}
				param_html += "</select>\r\n";
				break;

//        <div class="form-group form-check">
//          <label class="form-check-label">
//            <input class="form-check-input" type="checkbox"> Remember me
//          </label>
//        </div>

			case 'checkboxes':
				checkValuesExist(parameter, definition);
				panel = createPanelWithHeading(definition, parameter);
				param_html = panel + '<div class="form-group form-check">\r\n';
				for (var i=0; i < definition.values.length; i++){
					value = definition.values[i];
					id = parameter + '_' + value;
					param_html += '<label class="form-check-label"><input class="form-check-input" id="'
						+ id + '" name="' + parameter + '" type="checkbox">' + value + '</label>\r\n';
				}
				param_html += closePanel(panel);
				break;

			case 'checkbox':
				label = createLabel(definition, parameter);
				param_html = '<label class="form-check-label"><input class="form-check-input" id="'
						+ parameter + '" name="' + parameter + '" type="checkbox">' + label + '</label>\r\n';
				break;

			case 'boolean':
				panel = createPanelWithHeading(definition, parameter);
				var bool_values = ['true', 'false'];
				for (var i=0; i < bool_values.length; i++){
					value = bool_values[i];
					id = parameter + '_' + value;
					param_html += '<input type="radio" name="' + parameter +
						'" id="' + id + '" />\r\n' +
						'<label for="' + id + '" class="inline">' + value + '&nbsp;&nbsp;</label>\r\n';
				}
				param_html += closePanel(panel);
				break;

			case 'fieldset':
				if (scopes !== undefined && definition.scope !== undefined){
					if (scopes.indexOf(definition.scope) < 0){
						param_html = '';
						break;
					}
				}
				param_html = generateInputGroupingHtml(definition.content, formValues);
				if (param_html.length > 0){
					if (definition.legend !== undefined){
						panel = createPanelWithHeading(definition, parameter);
						param_html = panel + param_html + closePanel(panel);
					}
				}
				break;

			case 'button':
				label = 'Submit';
				if (definition.label !== undefined){
					label = definition.label;
				}
				param_html = '<div class="col_3"><input type="button" value="' + label + 
					'" onclick="' + definition.method + '" /></div>\r\n';

				break;

			case 'hidden':
				param_html = '<input type="hidden" id="' + parameter + '" name="' + parameter + '"/>';
				break;

			default:
				// throw 'undefined input type in reg_parameters: ' + definition.input
				break;
		}

		grouping_html += param_html;
	}

	return grouping_html;
}

function checkValuesExist(parameter, definition){
	if (definition.values === undefined){
		alert('formTemplate ' + definition.input + ' "values" for "' + parameter + '" is not defined');
		throw 'error: values missing';
	}
}

function createLabel(definition, parameter){
	var text = parameter;
	if (definition.label !== undefined)
		text = definition.label;
	var label_class = '';
	if (definition.label_class !== undefined)
		label_class = ' class="' + definition.label_class + '"';
	return '<label for="' + parameter + '"' + label_class + '>' + text + '</label>\r\n';
}

function createPanelWithHeading(definition, parameter){
	var text = '';
	if (definition.legend !== undefined)
		text = '<div class="panel panel-default">\r\n<div class="panel-heading">'
			+ definition.legend + '</div>\r\n<div class="panel-body">';
	return text;
}

function closePanel(panel){
	var text = '';
	if (panel !== '')
		text = '</div>\r\n</div>\r\n';
	return text;
}

function createFormGroup(definition, parameter){
	var label = createLabel(definition, parameter);
	return '<div class="form-group">' + label;
}

function closeFormGroup(formGroup){
	return '</div>'
}

function postJsonData(options, jsonData, callback){
	var xhr = new XMLHttpRequest();
	var url = options.url;
	xhr.open(options.method, options.url, true);
	if (options.headers !== undefined){
		for (var i=0; i < options.headers.length; i++){
			var header = options.headers[i];
			xhr.setRequestHeader(header.name, header.value);
		}
	}
	xhr.onreadystatechange = function () {
	    if (xhr.readyState === 4 && xhr.status === 200) {
	        var json = JSON.parse(xhr.responseText);
	        callback(json);
	    }
	};

	var data = JSON.stringify(jsonData);
	xhr.send(data);		 	
}

function displayError(content){
	var warning_text_el = document.getElementById("warning_text");
	var warning_div_el = document.getElementById("warning_div");
	if (warning_text_el !== undefined)
		warning_text_el.innerHTML = content;
	if (warning_div_el !== undefined)
		warning_div_el.style.visibility = "visible";	
}

function clearError(content){
	var warning_text_el = document.getElementById("warning_text");
	var warning_div_el = document.getElementById("warning_div");
	if (warning_text_el !== undefined)
		warning_text_el.innerHTML = '';
	if (warning_div_el !== undefined)
		warning_div_el.style.visibility = "hidden";	
}

function isset(param){
	if (typeof param !== 'object'){
		if (param === undefined || param === null || param.length === 0)
			return false;
	}
	return true;
}