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:
parent
0dff6fd714
commit
1f5ecf916e
5 changed files with 48 additions and 38 deletions
|
@ -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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
|
||||||
max-width: 500px
|
text-align: center;
|
||||||
}
|
|
||||||
|
|
||||||
.created-personal-access-token {
|
|
||||||
margin: 15px 15px 0 0;
|
|
||||||
pre {
|
|
||||||
max-width: 400px;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-profile {
|
.user-profile {
|
||||||
|
|
|
@ -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 @@
|
||||||
.col-lg-9
|
.col-lg-9
|
||||||
|
|
||||||
- if flash[:personal_access_token]
|
- if flash[:personal_access_token]
|
||||||
.panel.panel-success
|
.created-personal-access-token
|
||||||
.panel-heading Success!
|
%h5.prepend-top-0
|
||||||
.panel-body
|
Your New Personal Access Token
|
||||||
Your new personal access token has been created. Make sure to save it - you can't see it again on this page.
|
.form-group
|
||||||
.created-personal-access-token
|
.input-group
|
||||||
%pre= flash[:personal_access_token]
|
= text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
|
||||||
= clipboard_button(clipboard_text: flash[:personal_access_token])
|
.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 @@
|
||||||
.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 @@
|
||||||
|
|
||||||
- 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 @@
|
||||||
= 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 @@
|
||||||
|
|
||||||
- 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 @@
|
||||||
|
|
||||||
|
|
||||||
: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
|
||||||
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
|
||||||
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
|
||||||
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
|
||||||
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
|
||||||
|
|
Loading…
Reference in a new issue