Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/726/ccli improvement #737

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Feature/726/ccli improvement #737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
06593f4
add new copy ccli command modal and translations to encryptable show
njaeggi Jul 3, 2023
bec028c
introduce other attributes from custom attrs
njaeggi Jul 3, 2023
dc8a339
add labels for ccli command fields
njaeggi Jul 4, 2023
d6ac1aa
implement new integration test for ccli option modal
njaeggi Jul 4, 2023
ca16937
rename component to CcliOptions
njaeggi Jul 7, 2023
7fd3605
Use more efficient copy method for clipboard service
lkleisa Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions frontend/app/components/encryptable/ccli-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import Component from "@glimmer/component";

export default class CcliOptions extends Component {
@service notify;
@service clipboardService;
@service intl;

constructor() {
super(...arguments);
}

@action
abort() {
if (this.args.onAbort) {
this.args.onAbort();
}
}

@action
copyCommand(command) {
this.clipboardService.copy(command);
this.notify.info(this.intl.t(`flashes.encryptables.ccli_command_copied`));
}
}
8 changes: 8 additions & 0 deletions frontend/app/components/encryptable/show.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export default class ShowComponent extends Component {
@tracked
isFileCreating = false;

@tracked
isCcliOptionsOpen = false;

@tracked
isFile = this.args.encryptable.isFile;

Expand All @@ -38,6 +41,11 @@ export default class ShowComponent extends Component {
this.isFileCreating = !this.isFileCreating;
}

@action
toggleCcliOptions() {
this.isCcliOptionsOpen = !this.isCcliOptionsOpen;
}

get downloadLink() {
return `/api/encryptables/${this.args.encryptable.get("id")}`;
}
Expand Down
12 changes: 1 addition & 11 deletions frontend/app/services/clipboard-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,6 @@ import Service from "@ember/service";

export default class ClipboardService extends Service {
copy(text) {
// Copying to clipboard is not possible in another way. Even libraries do it with a fake element.
// We don't use the addon ember-cli-clipboard, as we need to wait for a async call to finish.
const fakeEl = document.createElement("textarea");
fakeEl.value = text;
fakeEl.setAttribute("readonly", "");
fakeEl.style.position = "absolute";
fakeEl.style.left = "-9999px";
document.body.appendChild(fakeEl);
fakeEl.select();
document.execCommand("copy");
document.body.removeChild(fakeEl);
navigator.clipboard.writeText(text);
}
}
108 changes: 108 additions & 0 deletions frontend/app/templates/components/encryptable/ccli-options.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<BsModal @onHide={{action this.abort}} @renderInPlace="true" @size="md"
as |Modal|>
<Modal.header>
<h3 class="modal-title">{{t "encryptable/credentials.ccli-options.title"}}</h3>
</Modal.header>
<Modal.body>
<div id="encryptable-ccli-label">
{{t "encryptable/credentials.ccli-options.ccli"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id}} />
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id)}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli"}} @delayShow="500" />
</button>
</div>
{{#if @encryptable.cleartextUsername}}
<div id="encryptable-ccli-username-label">
{{t "encryptable/credentials.ccli-options.username"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-username-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id " --username"}} />
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id " --username")}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli-username"}} @delayShow="500" />
</button>
</div>
{{/if}}
{{#if @encryptable.cleartextPassword}}
<div id="encryptable-ccli-password-label">
{{t "encryptable/credentials.ccli-options.password"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-password-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id " --password"}}/>
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id " --password")}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli-password"}} @delayShow="500" />
</button>
</div>
{{/if}}
{{#if @encryptable.cleartextPin}}
<div id="encryptable-ccli-pin-label">
{{t "encryptable/credentials.ccli-options.pin"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-pin-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id " --pin"}}/>
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id " --pin")}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli-pin"}} @delayShow="500" />
</button>
</div>
{{/if}}
{{#if @encryptable.cleartextToken}}
<div id="encryptable-ccli-token-label">
{{t "encryptable/credentials.ccli-options.token"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-token-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id " --token"}}/>
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id " --token")}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli-token"}} @delayShow="500" />
</button>
</div>
{{/if}}
{{#if @encryptable.cleartextEmail}}
<div id="encryptable-ccli-email-label">
{{t "encryptable/credentials.ccli-options.email"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-email-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id " --email"}}/>
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id " --email")}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli-email"}} @delayShow="500" />
</button>
</div>
{{/if}}
{{#if @encryptable.cleartextCustomAttr}}
<div id="encryptable-ccli-custom-attr-label">
{{t "encryptable/credentials.ccli-options.custom-attr"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-custom-attr-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id " --customAttribute"}}/>
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id " --customAttribute")}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli-custom-attr"}} @delayShow="500" />
</button>
</div>
{{/if}}
<div id="encryptable-ccli-yaml-label">
{{t "encryptable/credentials.ccli-options.yaml"}}
</div>
<div class="input-group border-tertiary border-2 border border-radius-4 mb-3">
<Input id="ccli-yaml-input" class="text-truncate d-inline form-control border-0" disabled="true" @value={{concat "cry encryptable " @encryptable.id " > encryptable.yaml"}} />
<button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{action "copyCommand" (concat "cry encryptable " @encryptable.id " > encryptable.yaml")}}>
<img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
<BsTooltip @title={{t "encryptable/credentials.ccli-options.copy-ccli-yaml"}} @delayShow="500" />
</button>
</div>
</Modal.body>
<Modal.footer>
<a id="ccli-options-help" class="mr-auto" href="https://github.com/puzzle/ccli/blob/master/README.md" target="_blank">
{{t "encryptable/credentials.ccli-options.help"}}
</a>
<BsButton id="ccli-options-close-button" @onClick={{action this.abort}} @type="secondary">
{{t "close"}}
</BsButton>
</Modal.footer>
</BsModal>
6 changes: 6 additions & 0 deletions frontend/app/templates/components/encryptable/show.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
{{#if this.isCredentialSharing}}
<CredentialTransfer @onAbort={{this.toggleCredentialSharing}} @title={{t "encryptable/transferring/credential.new.title"}} @encryptableId={{@encryptable.id}} @encryptableName={{@encryptable.name}}/>
{{/if}}
{{#if this.isCcliOptionsOpen}}
<Encryptable::CcliOptions @encryptable={{@encryptable}} @onAbort={{this.toggleCcliOptions}}/>
{{/if}}
{{#if this.isFile}}
<div class="container px-5 pt-4 h-100 bg-white pl-none encryptable-container-smartphone mb-15">
<div class="row mb-3">
Expand Down Expand Up @@ -67,6 +70,9 @@
</a>
</div>
<div class="col-auto d-flex justify-content-between align-items-center">
<a id="ccli-options-button" class="btn btn-secondary edit_button" role="button" {{on "click" this.toggleCcliOptions}}>
<img class="icon-button" src="/assets/images/ccli.svg" alt="ccli">
</a>
<a id="share_credential_button" class="btn btn-secondary edit_button" role="button" {{on "click" this.toggleCredentialSharing}}>
<img class="icon-button" src="/assets/images/share-black.svg" alt="share">
</a>
Expand Down
1 change: 1 addition & 0 deletions frontend/public/assets/images/ccli.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading