Commit 1f5ecf91 authored by Timothy Andrew's avatar Timothy Andrew

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
parent 0dff6fd7
...@@ -256,3 +256,8 @@ $calendar-header-color: #b8b8b8; ...@@ -256,3 +256,8 @@ $calendar-header-color: #b8b8b8;
$calendar-hover-bg: #ecf3fe; $calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1); $calendar-border-color: rgba(#000, .1);
$calendar-unselectable-bg: #faf9f9; $calendar-unselectable-bg: #faf9f9;
/*
* Personal Access Tokens
*/
$personal-access-tokens-disabled-label-color: #bbb;
...@@ -192,24 +192,12 @@ ...@@ -192,24 +192,12 @@
} }
} }
.personal-access-tokens-revoked-label {
color: #bbb;
}
.personal-access-tokens-never-expires-label { .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 { .datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
margin: 15px 15px 0 0; text-align: center;
pre {
max-width: 400px;
display: inline;
}
} }
.user-profile { .user-profile {
......
...@@ -10,7 +10,7 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController ...@@ -10,7 +10,7 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
if @personal_access_token.save if @personal_access_token.save
flash[:personal_access_token] = @personal_access_token.token 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 else
load_personal_access_tokens load_personal_access_tokens
render :index render :index
......
...@@ -9,13 +9,16 @@ ...@@ -9,13 +9,16 @@
.col-lg-9 .col-lg-9
- if flash[:personal_access_token] - 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 .created-personal-access-token
%pre= flash[:personal_access_token] %h5.prepend-top-0
= clipboard_button(clipboard_text: flash[:personal_access_token]) 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 %h5.prepend-top-0
Add a Personal Access Token Add a Personal Access Token
...@@ -33,10 +36,10 @@ ...@@ -33,10 +36,10 @@
.form-group .form-group
= f.label :expires_at, class: 'label-light' = f.label :expires_at, class: 'label-light'
= f.hidden_field :expires_at, class: "form-control", required: false = f.hidden_field :expires_at, class: "form-control", required: false
.datepicker .datepicker.personal-access-tokens-expires-at
.prepend-top-default .prepend-top-default
= f.submit 'Add Personal Access Token', class: "btn btn-create" = f.submit 'Create Personal Access Token', class: "btn btn-create"
%hr %hr
...@@ -44,7 +47,7 @@ ...@@ -44,7 +47,7 @@
- if @active_personal_access_tokens.present? - if @active_personal_access_tokens.present?
.table-responsive .table-responsive
%table.table.table-striped.table-hover.active-personal-access-tokens %table.table.active-personal-access-tokens
%thead %thead
%tr %tr
%th Name %th Name
...@@ -61,7 +64,7 @@ ...@@ -61,7 +64,7 @@
= token.expires_at.to_date.to_s(:medium) = token.expires_at.to_date.to_s(:medium)
- else - else
%span.personal-access-tokens-never-expires-label Never %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 - else
.settings-message.text-center .settings-message.text-center
...@@ -73,7 +76,7 @@ ...@@ -73,7 +76,7 @@
- if @inactive_personal_access_tokens.present? - if @inactive_personal_access_tokens.present?
.table-responsive .table-responsive
%table.table.table-striped.table-hover.inactive-personal-access-tokens %table.table.inactive-personal-access-tokens
%thead %thead
%tr %tr
%th Name %th Name
...@@ -90,7 +93,21 @@ ...@@ -90,7 +93,21 @@
:javascript :javascript
$(".datepicker").datepicker({ var date = $('#personal_access_token_expires_at').val();
dateFormat: "yy-mm-dd",
onSelect: function(dateText, inst) { $("#personal_access_token_expires_at").val(dateText) } var datepicker = $(".datepicker").datepicker({
}).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#personal_access_token_expires_at').val())); 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();
});
...@@ -12,7 +12,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do ...@@ -12,7 +12,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
end end
def created_personal_access_token def created_personal_access_token
find(".created-personal-access-token pre") find(".created-personal-access-token input").value
end end
def disallow_personal_access_token_saves! def disallow_personal_access_token_saves!
...@@ -30,8 +30,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do ...@@ -30,8 +30,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
visit profile_personal_access_tokens_path visit profile_personal_access_tokens_path
fill_in "Name", with: FFaker::Product.brand fill_in "Name", with: FFaker::Product.brand
expect {click_on "Add Personal Access Token"}.to change { PersonalAccessToken.count }.by(1) expect {click_on "Create Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
expect(created_personal_access_token).to have_text(PersonalAccessToken.last.token) 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(PersonalAccessToken.last.name)
expect(active_personal_access_tokens).to have_text("Never") expect(active_personal_access_tokens).to have_text("Never")
end end
...@@ -44,8 +44,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do ...@@ -44,8 +44,8 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
find("a[title='Next']").click find("a[title='Next']").click
click_on "1" click_on "1"
expect {click_on "Add Personal Access Token"}.to change { PersonalAccessToken.count }.by(1) expect {click_on "Create Personal Access Token"}.to change { PersonalAccessToken.count }.by(1)
expect(created_personal_access_token).to have_text(PersonalAccessToken.last.token) 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(PersonalAccessToken.last.name)
expect(active_personal_access_tokens).to have_text(Date.today.next_month.at_beginning_of_month.to_s(:medium)) expect(active_personal_access_tokens).to have_text(Date.today.next_month.at_beginning_of_month.to_s(:medium))
end end
...@@ -56,7 +56,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do ...@@ -56,7 +56,7 @@ describe 'Profile > Personal Access Tokens', feature: true, js: true do
visit profile_personal_access_tokens_path visit profile_personal_access_tokens_path
fill_in "Name", with: FFaker::Product.brand 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") expect(page).to have_content("Name cannot be nil")
end end
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment