Improve UX of token creation

ligoj · Dec 30, 2023 · 4ead4ab · 4ead4ab
1 parent 5041c9d
commit 4ead4ab
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/src/main/resources/META-INF/resources/webjars/api/token/token.html b/src/main/resources/META-INF/resources/webjars/api/token/token.html
@@ -75,6 +75,31 @@ <h4>Mode script Unix/Linux</h4>
 	</div>
 </div>
 
+<form id="popup-new" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-title">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="{{cancel}}">
+					<span aria-hidden="true">&times;</span>
+				</button>
+				<h4 class="modal-title">{{token}}</h4>
+			</div>
+			<div class="modal-body">
+				<div class="form-group required label-floating">
+					<label class="control-label" for="new-name">{{name}}</label>
+					<input type="text" id="new-name" class="form-control" required maxlength="250" autocomplete="off">
+				</div>
+			</div>
+			<div class="modal-footer">
+				<input type="submit" class="btn btn-primary btn-raised" id="confirmCreate" value="{{create}}" data-loading-text="{{create}} ..." data-complete-text="{{create}}" />
+				<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">
+					{{cancel}}
+				</button>
+			</div>
+		</div>
+	</div>
+</form>
+
 <form id="popup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-title">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">

diff --git a/src/main/resources/META-INF/resources/webjars/api/token/token.js b/src/main/resources/META-INF/resources/webjars/api/token/token.js
@@ -43,6 +43,7 @@ define([
 				contentType: 'application/json',
 				success: function (tokenData) {
 					notifyManager.notify(Handlebars.compile(current.$messages.created)(name));
+					_('popup-new').modal('hide');
 					_('popup').modal('show', {
 						name: name,
 						token: tokenData.id || tokenData
@@ -122,6 +123,17 @@ define([
 				notifyManager.notify(current.$messages.copied);
 			});
 
+			_('popup-new').on('shown.bs.modal', function () {
+				_('new-name').focus();
+			}).on('show.bs.modal', function (event) {
+				validationManager.reset($(this));
+				_('new-name').val(null);
+			}).on('submit', function (event) {
+                event.preventDefault();
+                validationManager.reset($(this));
+                current.create(_('new-name').val());
+                return false;
+            });
 			// Setup table
 			current.table = _('table').dataTable({
 				dom: '<"row"<"col-sm-6"B><"col-sm-6"f>r>t',
@@ -156,7 +168,7 @@ define([
 					{
 						extend: 'create',
 						action: function () {
-							bootbox.prompt(current.$messages.name, current.create);
+						_('popup-new').modal("show")
 						}
 					}
 				]