Improved token create dialog.

app/assets/javascripts/app/controllers/_profile/token_access.coffee

@@ -2,7 +2,7 @@ class Index extends App.ControllerContent
   requiredPermission: 'user_preferences.access_token'
   events:
     'click .js-delete': 'delete'
-    'submit form.js-create': 'create'
+    'click .js-create': 'create'
 
   constructor: ->
     super
@@ -36,10 +36,56 @@ class Index extends App.ControllerContent
   render: =>
     @html App.view('profile/token_access')(
       tokens: @tokens
-      permissions: @permissions
     )
 
   create: (e) =>
+    e.preventDefault()
+    new Create(
+      container: @el.closest('.content')
+      permissions: @permissions
+      load: @load
+    )
+
+  delete: (e) =>
+    e.preventDefault()
+
+    callback = =>
+      id = $(e.target).closest('a').data('token-id')
+      @ajax(
+        id:          'user_access_token_delete'
+        type:        'DELETE'
+        url:         "#{@apiPath}/user_access_token/#{id}"
+        processData: true
+        success: =>
+          @load(true)
+        error: @error
+      )
+
+    new App.ControllerConfirm(
+      message: 'Sure?'
+      callback: callback
+      container: @el.closest('.content')
+    )
+
+  error: (xhr, status, error) =>
+    data = JSON.parse(xhr.responseText)
+    @notify(
+      type: 'error'
+      msg:  App.i18n.translateContent(data.message || data.error)
+    )
+
+class Create extends App.ControllerModal
+  head: 'Add a Personal Access Token'
+  buttonSubmit: 'Create'
+  buttonCancel: true
+  shown: true
+
+  content: ->
+    App.view('profile/token_access_create')(
+      permissions: @permissions
+    )
+
+  onSubmit: (e) =>
     e.preventDefault()
     params = @formParam(e.target)
 
@@ -63,41 +109,33 @@ class Index extends App.ControllerContent
 
   show: (data) =>
     @load()
+    @newToken = data
+    @close()
+
+  onClosed: =>
+    return if !@newToken
     ui = @
     new App.ControllerModal(
       head: 'Your New Personal Access Token'
       buttonSubmit: 'OK, I\'ve copied my token'
       content: ->
         App.view('profile/token_access_created')(
-          name: data.name
+          name: ui.newToken.name
         )
       post: ->
-        @el.find('.js-select').on('click', ui.selectAll)
+        @$('.js-select').on('click', ui.selectAll)
       onCancel: ->
         @close()
       onSubmit: ->
         @close()
-    )
+      container: @container
-
-  delete: (e) =>
-    e.preventDefault()
-    return if !confirm(App.i18n.translateInline('Sure?'))
-    id = $(e.target).closest('a').data('token-id')
-    @ajax(
-      id:          'user_access_token_delete'
-      type:        'DELETE'
-      url:         "#{@apiPath}/user_access_token/#{id}"
-      processData: true
-      success: =>
-        @load(true)
-      error: @error
     )
 
   error: (xhr, status, error) =>
     data = JSON.parse(xhr.responseText)
     @notify(
       type: 'error'
-      msg:  App.i18n.translateContent(data.message)
+      msg:  App.i18n.translateContent(data.message || data.error)
     )
 
 App.Config.set('Token Access', { prio: 3200, name: 'Token Access', parent: '#profile', target: '#profile/token_access', controller: Index, permission: ['user_preferences.access_token']  }, 'NavBarProfile')

app/assets/javascripts/app/views/profile/token_access.jst.eco

@@ -1,48 +1,11 @@
 <div class="page-header">
   <div class="page-header-title"><h1><%- @T('Token Access') %></h1></div>
 </div>
-
 <p><%- @T('You can generate a personal access token for each application you use that needs access to the Zammad API.') %></p>
 
 <h2><%- @T('Add a Personal Access Token') %></h2>
-
 <p><%- @T('Pick a name for the application, and we\'ll give you a unique token.') %></p>
-<form class="page-content js-create">
+<a class="btn btn--primary js-create"><%- @T('Create') %></a>
-  <div class="input form-group">
-    <div class="formGroup-label">
-      <label for="token-label"><%- @T('Name') %></label>
-    </div>
-    <div class="controls"><input id="token-label" type="text" name="label" value="" class="form-control js-input" required></div>
-  </div>
-
-  <div class="permission form-group checkbox">
-
-    <div class="checkbox">
-    <% for permission in @permissions: %>
-      <% if !permission.name.match(/\./): %>
-      <label class="inline-label checkbox-replacement">
-        <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
-        <%- @Icon('checkbox', 'icon-unchecked') %>
-        <%- @Icon('checkbox-checked', 'icon-checked') %>
-        <span class="label-text"><%= permission.name %> - <span class="help-text"><%- @T(permission.note) %></span></span>
-      </label>
-      <% else: %>
-        <div style="padding-left: 20px;" class="js-subPermissionList">
-          <label class="inline-label checkbox-replacement">
-            <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
-            <%- @Icon('checkbox', 'icon-unchecked') %>
-            <%- @Icon('checkbox-checked', 'icon-checked') %>
-            <span class="label-text"><%= permission.name.replace(/^.+?\./, '') %> - <span class="help-text"><%- @T(permission.note) %></span></span>
-          </label>
-        </div>
-      <% end %>
-    <% end %>
-    </div>
-
-  </div>
-
-  <button class="btn btn--primary js-submit"><%- @T('Create') %></button>
-</form>
 
 <hr>
 
@@ -83,4 +46,3 @@
   <% end %>
   </tbody>
 </table>
-

app/assets/javascripts/app/views/profile/token_access_create.jst.eco

@@ -0,0 +1,30 @@
+<div class="input form-group">
+  <div class="formGroup-label">
+    <label for="token-label"><%- @T('Name') %> *</label>
+  </div>
+  <div class="controls"><input id="token-label" type="text" name="label" value="" class="form-control js-input" required></div>
+</div>
+
+<div class="permission form-group checkbox">
+  <div class="checkbox">
+  <% for permission in @permissions: %>
+    <% if !permission.name.match(/\./): %>
+    <label class="inline-label checkbox-replacement">
+      <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
+      <%- @Icon('checkbox', 'icon-unchecked') %>
+      <%- @Icon('checkbox-checked', 'icon-checked') %>
+      <span class="label-text"><%= permission.name %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span>
+    </label>
+    <% else: %>
+      <div style="padding-left: 20px;" class="js-subPermissionList">
+        <label class="inline-label checkbox-replacement">
+          <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
+          <%- @Icon('checkbox', 'icon-unchecked') %>
+          <%- @Icon('checkbox-checked', 'icon-checked') %>
+          <span class="label-text"><%= permission.name.replace(/^.+?\./, '') %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span></span>
+        </label>
+      </div>
+    <% end %>
+  <% end %>
+  </div>
+</div>

test/browser/preferences_test.rb

@@ -2,6 +2,7 @@
 require 'browser_test_helper'
 
 class PreferencesTest < TestCase
+
   def test_permission_agent
     @browser = browser_instance
     login(
@@ -406,12 +407,18 @@ class PreferencesTest < TestCase
     click(css: 'a[href="#profile"]')
     click(css: 'a[href="#profile/token_access"]')
 
+    click(css: '#content .js-create')
+    watch_for(
+      css: '.modal .modal-title',
+      value: 'Add a Personal Access Token'
+    )
+
     set(
-      css:   '#content .js-create .js-input',
+      css:   '#content .modal .js-input',
       value: 'Some App#1',
     )
-    click(css: '#content input[value="ticket.agent"] ~ .label-text')
+    click(css: '#content .modal input[value="ticket.agent"] ~ .label-text')
-    click(css: '#content .js-create .js-submit')
+    click(css: '#content .modal .js-submit')
     watch_for(
       css: '.modal .modal-title',
       value: 'Your New Personal Access Token'
@@ -422,12 +429,18 @@ class PreferencesTest < TestCase
       value: 'Some App#1'
     )
 
+    click(css: '#content .js-create')
+    watch_for(
+      css: '.modal .modal-title',
+      value: 'Add a Personal Access Token'
+    )
     set(
-      css:   '#content .js-create .js-input',
+      css:   '#content .modal .js-input',
       value: 'Some App#2',
     )
-    click(css: '#content input[value="ticket.agent"] ~ .label-text')
+    click(css: '#content .modal input[value="ticket.agent"] ~ .label-text')
-    click(css: '#content .js-create .js-submit')
+    click(css: '#content .modal .js-submit')
+
     watch_for(
       css: '.modal .modal-title',
       value: 'Your New Personal Access Token'
@@ -439,9 +452,13 @@ class PreferencesTest < TestCase
     )
 
     click(css: '#content .js-tokenList a')
-    sleep 1
+    watch_for(
-    alert = @browser.switch_to.alert
+      css: '#content .modal .modal-header',
-    alert.accept()
+      value: 'confirm',
+    )
+    click(
+      css: '#content .modal .js-submit',
+    )
     watch_for_disappear(
       css: '#content .js-tokenList',
       value: 'Some App#2'