Improved token create dialog.
This commit is contained in:
Martin Edenhofer
parent
b3b060e561
commit
ea9c5a12b8
4 changed files with 114 additions and 67 deletions
|
|
@ -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()
|
||||
)
|
||||
|
||||
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
|
||||
container: @container
|
||||
)
|
||||
|
||||
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')
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
<a class="btn btn--primary js-create"><%- @T('Create') %></a>
|
||||
|
||||
<hr>
|
||||
|
||||
|
|
@ -83,4 +46,3 @@
|
|||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 .js-create .js-submit')
|
||||
click(css: '#content .modal input[value="ticket.agent"] ~ .label-text')
|
||||
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 .js-create .js-submit')
|
||||
click(css: '#content .modal input[value="ticket.agent"] ~ .label-text')
|
||||
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
|
||||
alert = @browser.switch_to.alert
|
||||
alert.accept()
|
||||
watch_for(
|
||||
css: '#content .modal .modal-header',
|
||||
value: 'confirm',
|
||||
)
|
||||
click(
|
||||
css: '#content .modal .js-submit',
|
||||
)
|
||||
watch_for_disappear(
|
||||
css: '#content .js-tokenList',
|
||||
value: 'Some App#2'
|
||||
|
|
|
|||
Loading…
Reference in a new issue