diff options
author | Luke Bennett <lbennett@gitlab.com> | 2018-07-06 17:36:02 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-07-06 17:36:02 +0300 |
commit | 02ad729308307a107ca930485e4b5b7dae10e5dc (patch) | |
tree | 7427f9e9dd58c2f7befd821b1b9d871c8733cb12 /app | |
parent | 3033e019247a599bcf22167c04e7bc41211cbe90 (diff) |
(Part 2) Resolve "Recognise when a user is trying to validate a private SSH key"
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/pages/profiles/keys/index.js | 16 | ||||
-rw-r--r-- | app/assets/javascripts/profile/add_ssh_key_validation.js | 43 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/forms.scss | 5 | ||||
-rw-r--r-- | app/views/profiles/keys/_form.html.haml | 13 |
4 files changed, 74 insertions, 3 deletions
diff --git a/app/assets/javascripts/pages/profiles/keys/index.js b/app/assets/javascripts/pages/profiles/keys/index.js new file mode 100644 index 00000000000..1cd3ee1dfdb --- /dev/null +++ b/app/assets/javascripts/pages/profiles/keys/index.js @@ -0,0 +1,16 @@ +import AddSshKeyValidation from '~/profile/add_ssh_key_validation'; + +document.addEventListener('DOMContentLoaded', () => { + const input = document.querySelector('.js-add-ssh-key-validation-input'); + const warning = document.querySelector('.js-add-ssh-key-validation-warning'); + const originalSubmit = input.form.querySelector('.js-add-ssh-key-validation-original-submit'); + const confirmSubmit = warning.querySelector('.js-add-ssh-key-validation-confirm-submit'); + + const addSshKeyValidation = new AddSshKeyValidation( + input, + warning, + originalSubmit, + confirmSubmit, + ); + addSshKeyValidation.register(); +}); diff --git a/app/assets/javascripts/profile/add_ssh_key_validation.js b/app/assets/javascripts/profile/add_ssh_key_validation.js new file mode 100644 index 00000000000..ab6a6c1896c --- /dev/null +++ b/app/assets/javascripts/profile/add_ssh_key_validation.js @@ -0,0 +1,43 @@ +export default class AddSshKeyValidation { + constructor(inputElement, warningElement, originalSubmitElement, confirmSubmitElement) { + this.inputElement = inputElement; + this.form = inputElement.form; + + this.warningElement = warningElement; + + this.originalSubmitElement = originalSubmitElement; + this.confirmSubmitElement = confirmSubmitElement; + + this.isValid = false; + } + + register() { + this.form.addEventListener('submit', event => this.submit(event)); + + this.confirmSubmitElement.addEventListener('click', () => { + this.isValid = true; + this.form.submit(); + }); + + this.inputElement.addEventListener('input', () => this.toggleWarning(false)); + } + + submit(event) { + this.isValid = AddSshKeyValidation.isPublicKey(this.inputElement.value); + + if (this.isValid) return true; + + event.preventDefault(); + this.toggleWarning(true); + return false; + } + + toggleWarning(isVisible) { + this.warningElement.classList.toggle('hide', !isVisible); + this.originalSubmitElement.classList.toggle('hide', isVisible); + } + + static isPublicKey(value) { + return /^(ssh|ecdsa-sha2)-/.test(value); + } +} diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 282e424fc38..a22454c24e2 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -255,3 +255,8 @@ label { color: $theme-gray-600; } } + +.input-lg { + max-width: 320px; + width: 100%; +} diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml index c14700794ce..43a2d53b84d 100644 --- a/app/views/profiles/keys/_form.html.haml +++ b/app/views/profiles/keys/_form.html.haml @@ -5,11 +5,18 @@ .form-group = f.label :key, class: 'label-light' %p= _("Paste your public SSH key, which is usually contained in the file '~/.ssh/id_rsa.pub' and begins with 'ssh-rsa'. Don't use your private SSH key.") - = f.text_area :key, class: "form-control", rows: 8, required: true, placeholder: 'Typically starts with "ssh-rsa …"' + = f.text_area :key, class: "form-control js-add-ssh-key-validation-input", rows: 8, required: true, placeholder: s_('Profiles|Typically starts with "ssh-rsa …"') .form-group = f.label :title, class: 'label-light' - = f.text_field :title, class: "form-control", required: true, placeholder: 'e.g. My MacBook key' + = f.text_field :title, class: "form-control input-lg", required: true, placeholder: s_('Profiles|e.g. My MacBook key') %p.form-text.text-muted= _('Name your individual key via a title') + .js-add-ssh-key-validation-warning.hide + .bs-callout.bs-callout-warning{ role: 'alert', aria_live: 'assertive' } + %strong= _('Oops, are you sure?') + %p= s_("Profiles|This doesn't look like a public SSH key, are you sure you want to add it?") + + %button.btn.btn-create.js-add-ssh-key-validation-confirm-submit= _("Yes, add it") + .prepend-top-default - = f.submit 'Add key', class: "btn btn-create" + = f.submit s_('Profiles|Add key'), class: "btn btn-create js-add-ssh-key-validation-original-submit" |