vault/ui/app/components/transit-key-actions.js
malinac02 79b2f09715
UI: HDS adoption replace <CopyButton> component (#22333)
* Part 1: Upgrade HDS to 2.9.0 (#22311)

* UI: HDS adoption replace <CopyButton> part 2 (#22356)

* certificate-card.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* scope-form.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* fix tests caused by changing certificate-card. change hds copy button in certificate-card.hbs

* json-editor.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* masked-input.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* fix error with certificate-card.hbs copy button

* fix tests that deal with certificate-card.hbs

* add class to hds copy buttons to maintain similar styling to curent UI

* info-table-row.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* undo change that should instead by merged in from main

* change tooltip copy button to white. cleanup

* add extra tet for oidc scope form. edit css class for the white icon copy button

* fix tests

* UI: HDS adoption replace <CopyButton> part 3 (#22614)

* encrypt.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* decrypt.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* datakey.hbs. replace 6 <CopyButton> with <Hds::Copy::Button>

* rewrap.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* hmac.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* fix typo

* add copy-close class to copy & close buttons

* export.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>. fix styling

* sign.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* fix test caused by changing <pre> tag to <code> in export.hbs

* rename class

* add extra style to class needed for part 4 of copy button replacement

* UI: HDS adoption replace <CopyButton> part 4 (#22749)

* user-menu.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* transit-form-show.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* configure-ssh-secret.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* tool-hash.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* tool-random.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* tool-rewrap.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* tool-unwrap.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* tool-wrap.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* paths.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* code-snippet.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* cleanup css for code-snippet. add comments for getting rid of code-snippet and replacing with <Hds::Copy::Snippet

* change code-snippet copy icon to gray to match original design

* change code-snippet class

* accounts.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* hover-copy-button.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* add.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* show.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* copy-secret-dropdown.hbs: replace 1 <CopyButton> with <Hds::Copy::Button>

* change styling of 'link' copy buttons

* generate-credentials.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* transform-show-transformation.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* sign.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* hide some copy buttons' icons and use original flash message

* undo cleanup of scss file so that I can put cleanup all into one PR to be more organized

* update code snippet copy button

* UI: HDS adoption replace <CopyButton> part 5: Cleanup (#22884)

* remove unecessary code-snippet.scssn class

* remove copy classes from masked-input.scss

* remove copy button class from text-file.scss

* uninstall ember-cli-clipboard 0.16.0 since there is no longer structure <CopyButton>

* remove copyright message from code-snippet.scss to avoid merge conflicts with main, where the file is deleted

* replace 2 classes with one

* remove unecessary class from copy button

* cleanup classes

* revert changes to avoid merge conflicts

* remove is-block class

* conditionally render private key

* add more info to comment

* remove HoverCopyButton

* add missing selector

* fix control group padding

---------

Co-authored-by: clairebontempo@gmail.com <clairebontempo@gmail.com>
Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

* rename class to transparent background

* remove unused test selectors

* replace transit actions with Copy::Snippet

* replace transfrom code blocks with code snippet component

* revert extra css fiddling

* misc cleanup, unused action

* remove copy & close buttons from transit modals

* remove is- from class naming

* remove hds-copy-button class

* add other grey class

* more small cleanup

* add -top to margin

* add changelog

---------

Co-authored-by: clairebontempo@gmail.com <clairebontempo@gmail.com>
Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
2023-09-15 23:46:10 +00:00

248 lines
6.7 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import { assign } from '@ember/polyfills';
import { copy } from 'ember-copy';
import { assert } from '@ember/debug';
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import { set, get, computed } from '@ember/object';
import { encodeString } from 'vault/utils/b64';
const TRANSIT_PARAMS = {
hash_algorithm: 'sha2-256',
algorithm: 'sha2-256',
signature_algorithm: 'pss',
bits: 256,
bytes: 32,
ciphertext: null,
context: null,
format: 'base64',
hmac: null,
input: null,
key_version: 0,
keys: null,
nonce: null,
param: 'wrapped',
prehashed: false,
plaintext: null,
random_bytes: null,
signature: null,
sum: null,
encodedBase64: false,
exportKeyType: null,
exportKeyVersion: null,
wrappedToken: null,
valid: null,
plaintextOriginal: null,
didDecode: false,
verification: 'Signature',
};
const PARAMS_FOR_ACTION = {
sign: ['input', 'hash_algorithm', 'key_version', 'prehashed', 'signature_algorithm'],
verify: ['input', 'hmac', 'signature', 'hash_algorithm', 'prehashed'],
hmac: ['input', 'algorithm', 'key_version'],
encrypt: ['plaintext', 'context', 'nonce', 'key_version'],
decrypt: ['ciphertext', 'context', 'nonce'],
rewrap: ['ciphertext', 'context', 'nonce', 'key_version'],
};
const SUCCESS_MESSAGE_FOR_ACTION = {
sign: 'Signed your data',
// the verify action doesn't trigger a success message
hmac: 'Created your hash output',
encrypt: 'Created a wrapped token for your data',
decrypt: 'Decrypted the data from your token',
rewrap: 'Created a new token for your data',
datakey: 'Generated your key',
export: 'Exported your key',
};
export default Component.extend(TRANSIT_PARAMS, {
store: service(),
flashMessages: service(),
// public attrs
selectedAction: null,
key: null,
isModalActive: false,
onRefresh() {},
init() {
this._super(...arguments);
// TODO figure out why get is needed here Ember Upgrade
// eslint-disable-next-line ember/no-get
if (this.selectedAction) {
return;
}
// eslint-disable-next-line ember/no-get
set(this, 'selectedAction', get(this, 'key.supportedActions.firstObject'));
assert('`key` is required for `' + this.toString() + '`.', this.getModelInfo());
},
didReceiveAttrs() {
this._super(...arguments);
this.checkAction();
if (this.selectedAction === 'export') {
this.setExportKeyDefaults();
}
},
setExportKeyDefaults() {
const exportKeyType = this.key.exportKeyTypes.firstObject;
const exportKeyVersion = this.key.validKeyVersions.lastObject;
this.setProperties({
exportKeyType,
exportKeyVersion,
});
},
keyIsRSA: computed('key.type', function () {
const type = this.key.type;
return type === 'rsa-2048' || type === 'rsa-3072' || type === 'rsa-4096';
}),
getModelInfo() {
const model = this.key || this.backend;
if (!model) {
return null;
}
const backend = model.backend || model.id;
const id = model.id;
return {
backend,
id,
};
},
checkAction() {
const currentAction = this.selectedAction;
const oldAction = this.oldSelectedAction;
this.resetParams(oldAction, currentAction);
set(this, 'oldSelectedAction', currentAction);
},
resetParams(oldAction, action) {
const params = copy(TRANSIT_PARAMS);
let paramsToKeep;
const clearWithoutCheck =
!oldAction ||
// don't save values from datakey
oldAction === 'datakey' ||
// can rewrap signatures — using that as a ciphertext later would be problematic
(oldAction === 'rewrap' && !this.key.supportsEncryption);
if (!clearWithoutCheck && action) {
paramsToKeep = PARAMS_FOR_ACTION[action];
}
if (paramsToKeep) {
paramsToKeep.forEach((param) => delete params[param]);
}
//resets params still left in the object to defaults
this.clearErrors();
this.setProperties(params);
if (action === 'export') {
this.setExportKeyDefaults();
}
},
handleError(e) {
this.set('errors', e.errors);
},
clearErrors() {
this.set('errors', null);
},
triggerSuccessMessage(action) {
const message = SUCCESS_MESSAGE_FOR_ACTION[action];
if (!message) return;
this.flashMessages.success(message);
},
handleSuccess(resp, options, action) {
let props = {};
if (resp && resp.data) {
if (action === 'export' && resp.data.keys) {
const { keys, type, name } = resp.data;
resp.data.keys = { keys, type, name };
}
props = assign({}, props, resp.data);
}
if (options.wrapTTL) {
props = assign({}, props, { wrappedToken: resp.wrap_info.token });
}
if (!this.isDestroyed && !this.isDestroying) {
this.toggleProperty('isModalActive');
this.setProperties(props);
}
if (action === 'rotate') {
this.onRefresh();
}
this.triggerSuccessMessage(action);
},
compactData(data) {
const type = this.key.type;
const isRSA = type === 'rsa-2048' || type === 'rsa-3072' || type === 'rsa-4096';
return Object.keys(data).reduce((result, key) => {
if (key === 'signature_algorithm' && !isRSA) {
return result;
}
if (data[key]) {
result[key] = data[key];
}
return result;
}, {});
},
actions: {
onActionChange(action) {
set(this, 'selectedAction', action);
this.checkAction();
},
onClear() {
this.resetParams(null, this.selectedAction);
},
clearParams(params) {
const arr = Array.isArray(params) ? params : [params];
arr.forEach((param) => this.set(param, null));
},
doSubmit(data, options = {}, maybeEvent) {
const event = options.type === 'submit' ? options : maybeEvent;
if (event) {
event.preventDefault();
}
const { backend, id } = this.getModelInfo();
const action = this.selectedAction;
const { encodedBase64, ...formData } = data || {};
if (!encodedBase64) {
if (action === 'encrypt' && !!formData.plaintext) {
formData.plaintext = encodeString(formData.plaintext);
}
if ((action === 'hmac' || action === 'verify' || action === 'sign') && !!formData.input) {
formData.input = encodeString(formData.input);
}
}
const payload = formData ? this.compactData(formData) : null;
this.setProperties({
errors: null,
result: null,
});
this.store
.adapterFor('transit-key')
.keyAction(action, { backend, id, payload }, options)
.then(
(resp) => this.handleSuccess(resp, options, action),
(...errArgs) => this.handleError(...errArgs)
);
},
},
});