Implement @jschatz1's comments.

- No hardcoded colors in any SCSS file except `variables.scss`
- Don't allow choosing a date in the past
- Use the same table as in the "Applications" tab
- The button should say "Create Personal Access Token"
- Float the revoke button to the right of the table cell
- Change the revocation message to be more explicit.
- Date shouldn't look selected on page load
- Don't use a panel for the created token
    - Use a normal flash for "Your new personal access token has been created"
    - Show the input (with the token) below it full width.
    - Put the "Make sure you save it - you won't be able to access it again." message near the input
- Have the created token's input highlight all on single click
This commit is contained in:
Timothy Andrew 2016-06-09 14:08:49 +05:30
parent 0dff6fd714
commit 1f5ecf916e
5 changed files with 48 additions and 38 deletions

View file

@ -256,3 +256,8 @@ $calendar-header-color: #b8b8b8;
$calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1);
$calendar-unselectable-bg: #faf9f9;
/*
* Personal Access Tokens
*/
$personal-access-tokens-disabled-label-color: #bbb;

View file

@ -192,24 +192,12 @@
}
}
.personal-access-tokens-revoked-label {
color: #bbb;
}
.personal-access-tokens-never-expires-label {
color: #bbb;
color: $personal-access-tokens-disabled-label-color;
}
.personal-access-tokens-token-column {
max-width: 500px
}
.created-personal-access-token {
margin: 15px 15px 0 0;
pre {
max-width: 400px;
display: inline;
}
.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
text-align: center;
}
.user-profile {

View file

@ -10,7 +10,7 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
if @personal_access_token.save
flash[:personal_access_token] = @personal_access_token.token
redirect_to profile_personal_access_tokens_path
redirect_to profile_personal_access_tokens_path, notice: "Your new personal access token has been created."
else
load_personal_access_tokens
render :index

View file

@ -9,13 +9,16 @@
.col-lg-9
- if flash[:personal_access_token]
.panel.panel-success
.panel-heading Success!
.panel-body
Your new personal access token has been created. Make sure to save it - you can't see it again on this page.
.created-personal-access-token
%pre= flash[:personal_access_token]
= clipboard_button(clipboard_text: flash[:personal_access_token])
%h5.prepend-top-0
Your New Personal Access Token
.form-group
.input-group
= text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
.input-group-addon= clipboard_button(clipboard_text: flash[:personal_access_token])
%span#created-personal-access-token-help-block.help-block Make sure you save it - you won't be able to access it again.
%hr
%h5.prepend-top-0
Add a Personal Access Token
@ -33,10 +36,10 @@
.form-group
= f.label :expires_at, class: 'label-light'
= f.hidden_field :expires_at, class: "form-control", required: false
.datepicker
.datepicker.personal-access-tokens-expires-at
.prepend-top-default
= f.submit 'Add Personal Access Token', class: "btn btn-create"
= f.submit 'Create Personal Access Token', class: "btn btn-create"
%hr
@ -44,7 +47,7 @@
- if @active_personal_access_tokens.present?
.table-responsive
%table.table.table-striped.table-hover.active-personal-access-tokens
%table.table.active-personal-access-tokens
%thead
%tr
%th Name
@ -61,7 +64,7 @@
= token.expires_at.to_date.to_s(:medium)
- else
%span.personal-access-tokens-never-expires-label Never
%td= link_to "Revoke", revoke_profile_personal_access_token_path(token), method: :put, class: "btn btn-danger", data: { confirm: "Are you sure? This cannot be undone." }
%td= link_to "Revoke", revoke_profile_personal_access_token_path(token), method: :put, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to revoke this certificate? This action cannot be undone." }
- else
.settings-message.text-center
@ -73,7 +76,7 @@
- if @inactive_personal_access_tokens.present?
.table-responsive
%table.table.table-striped.table-hover.inactive-personal-access-tokens
%table.table.inactive-personal-access-tokens
%thead
%tr
%th Name
@ -90,7 +93,21 @@
:javascript
$(".datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) { $("#personal_access_token_expires_at").val(dateText) }
}).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#personal_access_token_expires_at').val()));
var date = $('#personal_access_token_expires_at').val();
var datepicker = $(".datepicker").datepicker({
altFormat: "yy-mm-dd",
altField: "#personal_access_token_expires_at",
minDate: 0
});
if (date) {
datepicker.datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', date));
}
else {
datepicker.datepicker("setDate", null);
}
$("#created-personal-access-token").click(function() {
this.select();
});

View file

@ -12,7 +12,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
end
def created_personal_access_token
find(".created-personal-access-token pre")
find(".created-personal-access-token input").value
end
def disallow_personal_access_token_saves!
@ -30,8 +30,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
visit profile_personal_access_tokens_path
fill_in "Name", with: FFaker::Product.brand
expect {click_on "Add Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
expect(created_personal_access_token).to have_text(PersonalAccessToken.last.token)
expect {click_on "Create Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
expect(created_personal_access_token).to eq(PersonalAccessToken.last.token)
expect(active_personal_access_tokens).to have_text(PersonalAccessToken.last.name)
expect(active_personal_access_tokens).to have_text("Never")
end
@ -44,8 +44,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
find("a[title='Next']").click
click_on "1"
expect {click_on "Add Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
expect(created_personal_access_token).to have_text(PersonalAccessToken.last.token)
expect {click_on "Create Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
expect(created_personal_access_token).to eq(PersonalAccessToken.last.token)
expect(active_personal_access_tokens).to have_text(PersonalAccessToken.last.name)
expect(active_personal_access_tokens).to have_text(Date.today.next_month.at_beginning_of_month.to_s(:medium))
end
@ -56,7 +56,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
visit profile_personal_access_tokens_path
fill_in "Name", with: FFaker::Product.brand
expect { click_on "Add Personal Access Token" }.not_to change { PersonalAccessToken.count }
expect { click_on "Create Personal Access Token" }.not_to change { PersonalAccessToken.count }
expect(page).to have_content("Name cannot be nil")
end
end