dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- minor UI improvements with the captcha form field

Browse Source
This commit is contained in:
Mark Friedrich
2018-09-08 01:13:11 +02:00
parent bf8945c42c
commit 827e2aae5d
9 changed files with 75 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
composer-dev.json
View File

@@ -22,6 +22,8 @@
"require": {
"php-64bit": ">=7.0",
"ext-curl": "*",
"ext-json": "*",
"ext-ctype": "*",
"ext-zmq": ">=1.1.3",
"react/zmq": "0.3.*",
"monolog/monolog": "1.*",

2
composer.json
View File

@@ -22,6 +22,8 @@
"require": {
"php-64bit": ">=7.0",
"ext-curl": "*",
"ext-json": "*",
"ext-ctype": "*",
"ext-zmq": ">=1.1.3",
"react/zmq": "0.3.*",
"monolog/monolog": "1.*",

17
js/app/ui/dialog/account_settings.js
View File

@@ -62,6 +62,7 @@ define([
let accountSettingsDialog = bootbox.dialog({
title: 'Account settings',
message: content,
show: false,
buttons: {
close: {
label: 'cancel',
@@ -170,12 +171,7 @@ define([
}
});
// after modal is shown =======================================================================
accountSettingsDialog.on('shown.bs.modal', function(e) {
let dialogElement = $(this);
let form = dialogElement.find('form');
accountSettingsDialog.on('show.bs.modal', function(e){
// request captcha image and show
let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId);
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount);
@@ -184,14 +180,21 @@ define([
captchaImageWrapperContainer.find('i').on('click', function(){
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount);
});
});
// after modal is shown =======================================================================
accountSettingsDialog.on('shown.bs.modal', function(e) {
let dialogElement = $(this);
let form = dialogElement.find('form');
// init dialog tooltips
dialogElement.initTooltips();
form.initFormValidation();
});
// show dialog
accountSettingsDialog.modal('show');
// events for tab change
accountSettingsDialog.find('.navbar a').on('shown.bs.tab', function(e){

30
js/app/ui/dialog/delete_account.js
View File

@@ -7,7 +7,7 @@ define([
'app/init',
'app/util',
'bootbox'
], function($, Init, Util, bootbox) {
], ($, Init, Util, bootbox) => {
'use strict';
let config = {
@@ -24,8 +24,7 @@ define([
*/
$.fn.showDeleteAccountDialog = function(){
requirejs(['text!templates/dialog/delete_account.html', 'mustache'], function(template, Mustache) {
requirejs(['text!templates/dialog/delete_account.html', 'mustache'], (template, Mustache) => {
let data = {
deleteAccountId: config.deleteAccountId,
@@ -39,6 +38,7 @@ define([
let deleteAccountDialog = bootbox.dialog({
title: 'Delete account',
message: content,
show: false,
buttons: {
close: {
label: 'cancel',
@@ -47,7 +47,7 @@ define([
success: {
label: '<i class="fas fa-user-times fa-fw"></i>&nbsp;delete account',
className: 'btn-danger',
callback: function() {
callback: function(){
let dialogElement = $(this);
let form = dialogElement.find('form');
@@ -88,7 +88,7 @@ define([
});
}
}).fail(function( jqXHR, status, error) {
}).fail(function( jqXHR, status, error){
dialogElement.find('.modal-content').hideLoadingAnimation();
let reason = status + ' ' + error;
@@ -104,12 +104,26 @@ define([
}
});
// after modal is shown =======================================================================
deleteAccountDialog.on('shown.bs.modal', function(e) {
deleteAccountDialog.on('show.bs.modal', function(e){
// request captcha image and show
$('#' + config.captchaImageWrapperId).showCaptchaImage(config.captchaKeyDeleteAccount);
let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId);
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount);
// init captcha refresh button
captchaImageWrapperContainer.find('i').on('click', function(){
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount);
});
});
// after modal is shown =======================================================================
deleteAccountDialog.on('shown.bs.modal', function(e){
let dialogElement = $(this);
dialogElement.initTooltips();
});
// show dialog
deleteAccountDialog.modal('show');
});
};

17
public/js/v1.4.1/app/ui/dialog/account_settings.js
View File

@@ -62,6 +62,7 @@ define([
let accountSettingsDialog = bootbox.dialog({
title: 'Account settings',
message: content,
show: false,
buttons: {
close: {
label: 'cancel',
@@ -170,12 +171,7 @@ define([
}
});
// after modal is shown =======================================================================
accountSettingsDialog.on('shown.bs.modal', function(e) {
let dialogElement = $(this);
let form = dialogElement.find('form');
accountSettingsDialog.on('show.bs.modal', function(e){
// request captcha image and show
let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId);
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount);
@@ -184,14 +180,21 @@ define([
captchaImageWrapperContainer.find('i').on('click', function(){
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyUpdateAccount);
});
});
// after modal is shown =======================================================================
accountSettingsDialog.on('shown.bs.modal', function(e) {
let dialogElement = $(this);
let form = dialogElement.find('form');
// init dialog tooltips
dialogElement.initTooltips();
form.initFormValidation();
});
// show dialog
accountSettingsDialog.modal('show');
// events for tab change
accountSettingsDialog.find('.navbar a').on('shown.bs.tab', function(e){

30
public/js/v1.4.1/app/ui/dialog/delete_account.js
View File

@@ -7,7 +7,7 @@ define([
'app/init',
'app/util',
'bootbox'
], function($, Init, Util, bootbox) {
], ($, Init, Util, bootbox) => {
'use strict';
let config = {
@@ -24,8 +24,7 @@ define([
*/
$.fn.showDeleteAccountDialog = function(){
requirejs(['text!templates/dialog/delete_account.html', 'mustache'], function(template, Mustache) {
requirejs(['text!templates/dialog/delete_account.html', 'mustache'], (template, Mustache) => {
let data = {
deleteAccountId: config.deleteAccountId,
@@ -39,6 +38,7 @@ define([
let deleteAccountDialog = bootbox.dialog({
title: 'Delete account',
message: content,
show: false,
buttons: {
close: {
label: 'cancel',
@@ -47,7 +47,7 @@ define([
success: {
label: '<i class="fas fa-user-times fa-fw"></i>&nbsp;delete account',
className: 'btn-danger',
callback: function() {
callback: function(){
let dialogElement = $(this);
let form = dialogElement.find('form');
@@ -88,7 +88,7 @@ define([
});
}
}).fail(function( jqXHR, status, error) {
}).fail(function( jqXHR, status, error){
dialogElement.find('.modal-content').hideLoadingAnimation();
let reason = status + ' ' + error;
@@ -104,12 +104,26 @@ define([
}
});
// after modal is shown =======================================================================
deleteAccountDialog.on('shown.bs.modal', function(e) {
deleteAccountDialog.on('show.bs.modal', function(e){
// request captcha image and show
$('#' + config.captchaImageWrapperId).showCaptchaImage(config.captchaKeyDeleteAccount);
let captchaImageWrapperContainer = $('#' + config.captchaImageWrapperId);
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount);
// init captcha refresh button
captchaImageWrapperContainer.find('i').on('click', function(){
captchaImageWrapperContainer.showCaptchaImage(config.captchaKeyDeleteAccount);
});
});
// after modal is shown =======================================================================
deleteAccountDialog.on('shown.bs.modal', function(e){
let dialogElement = $(this);
dialogElement.initTooltips();
});
// show dialog
deleteAccountDialog.modal('show');
});
};

146
public/js/v1.4.1/lib/pnotify/pnotify.confirm.js
View File

@@ -1,146 +0,0 @@
// Confirm
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as a module.
define('pnotify.confirm', ['jquery', 'pnotify'], factory);
} else if (typeof exports === 'object' && typeof module !== 'undefined') {
// CommonJS
module.exports = factory(require('jquery'), require('./pnotify'));
} else {
// Browser globals
factory(root.jQuery, root.PNotify);
}
}(typeof window !== "undefined" ? window : this, function($, PNotify){
PNotify.prototype.options.confirm = {
// Make a confirmation box.
confirm: false,
// Make a prompt.
prompt: false,
// Classes to add to the input element of the prompt.
prompt_class: "",
// The default value of the prompt.
prompt_default: "",
// Whether the prompt should accept multiple lines of text.
prompt_multi_line: false,
// Where to align the buttons. (right, center, left, justify)
align: "right",
// The buttons to display, and their callbacks.
buttons: [
{
text: "Ok",
addClass: "",
// Whether to trigger this button when the user hits enter in a single line prompt.
promptTrigger: true,
click: function(notice, value){
notice.remove();
notice.get().trigger("pnotify.confirm", [notice, value]);
}
},
{
text: "Cancel",
addClass: "",
click: function(notice){
notice.remove();
notice.get().trigger("pnotify.cancel", notice);
}
}
]
};
PNotify.prototype.modules.confirm = {
init: function(notice, options){
// The div that contains the buttons.
this.container = $('<div class="ui-pnotify-action-bar" style="margin-top:5px;clear:both;" />').css('text-align', options.align).appendTo(notice.container);
if (options.confirm || options.prompt)
this.makeDialog(notice, options);
else
this.container.hide();
},
update: function(notice, options){
if (options.confirm) {
this.makeDialog(notice, options);
this.container.show();
} else {
this.container.hide().empty();
}
},
afterOpen: function(notice, options){
if (options.prompt) {
this.prompt.focus();
}
},
makeDialog: function(notice, options) {
var already = false, that = this, btn, elem;
this.container.empty();
if (options.prompt) {
// The input element of a prompt.
this.prompt = $('<'+(options.prompt_multi_line ? 'textarea rows="5"' : 'input type="text"')+' style="margin-bottom:5px;clear:both;" />')
.addClass((typeof notice.styles.input === "undefined" ? "" : notice.styles.input)+" "+(typeof options.prompt_class === "undefined" ? "" : options.prompt_class))
.val(options.prompt_default)
.appendTo(this.container);
}
var customButtons = (options.buttons[0] && options.buttons[0] !== PNotify.prototype.options.confirm.buttons[0]);
for (var i = 0; i < options.buttons.length; i++) {
if (options.buttons[i] === null || (customButtons && PNotify.prototype.options.confirm.buttons[i] && PNotify.prototype.options.confirm.buttons[i] === options.buttons[i])) {
continue;
}
btn = options.buttons[i];
if (already) {
this.container.append(' ');
} else {
already = true;
}
elem = $('<button type="button" class="ui-pnotify-action-button" />')
.addClass((typeof notice.styles.btn === "undefined" ? "" : notice.styles.btn)+" "+(typeof btn.addClass === "undefined" ? "" : btn.addClass))
.text(btn.text)
.appendTo(this.container)
.on("click", (function(btn){ return function(){
if (typeof btn.click == "function") {
btn.click(notice, options.prompt ? that.prompt.val() : null);
}
}})(btn));
if (options.prompt && !options.prompt_multi_line && btn.promptTrigger)
this.prompt.keypress((function(elem){ return function(e){
if (e.keyCode == 13)
elem.click();
}})(elem));
if (notice.styles.text) {
elem.wrapInner('<span class="'+notice.styles.text+'"></span>');
}
if (notice.styles.btnhover) {
elem.hover((function(elem){ return function(){
elem.addClass(notice.styles.btnhover);
}})(elem), (function(elem){ return function(){
elem.removeClass(notice.styles.btnhover);
}})(elem));
}
if (notice.styles.btnactive) {
elem.on("mousedown", (function(elem){ return function(){
elem.addClass(notice.styles.btnactive);
}})(elem)).on("mouseup", (function(elem){ return function(){
elem.removeClass(notice.styles.btnactive);
}})(elem));
}
if (notice.styles.btnfocus) {
elem.on("focus", (function(elem){ return function(){
elem.addClass(notice.styles.btnfocus);
}})(elem)).on("blur", (function(elem){ return function(){
elem.removeClass(notice.styles.btnfocus);
}})(elem));
}
}
}
};
$.extend(PNotify.styling.bootstrap3, {
btn: "btn btn-default",
input: "form-control"
});
$.extend(PNotify.styling.fontawesome, {
btn: "btn btn-default",
input: "form-control"
});
return PNotify;
}));

9
public/templates/dialog/delete_account.html
View File

@@ -19,8 +19,9 @@
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
<p id="{{captchaImageWrapperId}}">
<div class="col-sm-9">
<p id="{{captchaImageWrapperId}}" class="form-control-static">
<i class="fas fa-fw fa-lg fa-sync pull-right pf-dialog-icon-button collapsed"></i>
<img src="" />
</p>
</div>
@@ -34,8 +35,8 @@
<div class="form-group">
<label for="captcha" class="col-sm-3 control-label">Captcha</label>
<div class="col-sm-6">
<div class="input-group" title="Enter the characters seen above" data-placement="right">
<input name="captcha" type="text" class="form-control" id="captcha" placeholder="" data-minlength="6" data-minlength-error="Min. of 6 characters" data-error="Field is required" autocomplete="off" required>
<div class="input-group" title="Enter Captcha" data-placement="right">
<input name="captcha" type="text" class="form-control" id="captcha" data-minlength-error="Min. of 6 characters" placeholder="" data-error="Captcha required" data-minlength="6" maxlength="6" autocomplete="off" required>
<span class="input-group-addon"><i class="fas fa-fw fa-sync"></i></span>
</div>
<div class="help-block with-errors"></div>

4
public/templates/dialog/map.html
View File

@@ -157,11 +157,11 @@
<div class="input-icon-left input-icon-right">
<span class="fa-stack">
<i class="fas fa-fw fa-lg fa-ellipsis-v fa-stack-1x"></i>
<i class="fas fa-fw fa-lg fa-minus fa-stack-1x"></i>
<i class="fas fa-fw fa-2x fa-minus fa-stack-1x"></i>
</span>
<span class="fa-stack">
<i class="fas fa-fw fa-lg fa-ellipsis-v fa-stack-1x"></i>
<i class="fas fa-fw fa-lg fa-minus fa-stack-1x"></i>
<i class="fas fa-fw fa-2x fa-minus fa-stack-1x"></i>
</span>
<input name="slackIcon" type="text" class="form-control text-center" id="{{slackIconId}}" value="{{slackIcon}}" placeholder="slack" pattern="^[_\-A-z0-9]{1,}$" data-error="Allowed chars (A-z, 0-9, _, -)">