Improved token create dialog.

This commit is contained in:
Martin Edenhofer 2016-08-21 01:34:05 +02:00
parent b3b060e561
commit ea9c5a12b8
4 changed files with 114 additions and 67 deletions

View file

@ -2,7 +2,7 @@ class Index extends App.ControllerContent
requiredPermission: 'user_preferences.access_token' requiredPermission: 'user_preferences.access_token'
events: events:
'click .js-delete': 'delete' 'click .js-delete': 'delete'
'submit form.js-create': 'create' 'click .js-create': 'create'
constructor: -> constructor: ->
super super
@ -36,10 +36,56 @@ class Index extends App.ControllerContent
render: => render: =>
@html App.view('profile/token_access')( @html App.view('profile/token_access')(
tokens: @tokens tokens: @tokens
permissions: @permissions
) )
create: (e) => 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() e.preventDefault()
params = @formParam(e.target) params = @formParam(e.target)
@ -63,41 +109,33 @@ class Index extends App.ControllerContent
show: (data) => show: (data) =>
@load() @load()
@newToken = data
@close()
onClosed: =>
return if !@newToken
ui = @ ui = @
new App.ControllerModal( new App.ControllerModal(
head: 'Your New Personal Access Token' head: 'Your New Personal Access Token'
buttonSubmit: 'OK, I\'ve copied my token' buttonSubmit: 'OK, I\'ve copied my token'
content: -> content: ->
App.view('profile/token_access_created')( App.view('profile/token_access_created')(
name: data.name name: ui.newToken.name
) )
post: -> post: ->
@el.find('.js-select').on('click', ui.selectAll) @$('.js-select').on('click', ui.selectAll)
onCancel: -> onCancel: ->
@close() @close()
onSubmit: -> onSubmit: ->
@close() @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) => error: (xhr, status, error) =>
data = JSON.parse(xhr.responseText) data = JSON.parse(xhr.responseText)
@notify( @notify(
type: 'error' 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.Config.set('Token Access', { prio: 3200, name: 'Token Access', parent: '#profile', target: '#profile/token_access', controller: Index, permission: ['user_preferences.access_token'] }, 'NavBarProfile')

View file

@ -1,48 +1,11 @@
<div class="page-header"> <div class="page-header">
<div class="page-header-title"><h1><%- @T('Token Access') %></h1></div> <div class="page-header-title"><h1><%- @T('Token Access') %></h1></div>
</div> </div>
<p><%- @T('You can generate a personal access token for each application you use that needs access to the Zammad API.') %></p> <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> <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> <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> <hr>
@ -83,4 +46,3 @@
<% end %> <% end %>
</tbody> </tbody>
</table> </table>

View file

@ -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>

View file

@ -2,6 +2,7 @@
require 'browser_test_helper' require 'browser_test_helper'
class PreferencesTest < TestCase class PreferencesTest < TestCase
def test_permission_agent def test_permission_agent
@browser = browser_instance @browser = browser_instance
login( login(
@ -406,12 +407,18 @@ class PreferencesTest < TestCase
click(css: 'a[href="#profile"]') click(css: 'a[href="#profile"]')
click(css: 'a[href="#profile/token_access"]') 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( set(
css: '#content .js-create .js-input', css: '#content .modal .js-input',
value: 'Some App#1', 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( watch_for(
css: '.modal .modal-title', css: '.modal .modal-title',
value: 'Your New Personal Access Token' value: 'Your New Personal Access Token'
@ -422,12 +429,18 @@ class PreferencesTest < TestCase
value: 'Some App#1' value: 'Some App#1'
) )
click(css: '#content .js-create')
watch_for(
css: '.modal .modal-title',
value: 'Add a Personal Access Token'
)
set( set(
css: '#content .js-create .js-input', css: '#content .modal .js-input',
value: 'Some App#2', 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( watch_for(
css: '.modal .modal-title', css: '.modal .modal-title',
value: 'Your New Personal Access Token' value: 'Your New Personal Access Token'
@ -439,9 +452,13 @@ class PreferencesTest < TestCase
) )
click(css: '#content .js-tokenList a') 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( watch_for_disappear(
css: '#content .js-tokenList', css: '#content .js-tokenList',
value: 'Some App#2' value: 'Some App#2'