From 06593f40a888c3b2a2a4515181f88e28f8f2e11a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20J=C3=A4ggi?= <jaeggi@puzzle.ch>
Date: Mon, 3 Jul 2023 11:24:55 +0200
Subject: [PATCH 1/6] add new copy ccli command modal and translations to
 encryptable show

---
 .../components/encryptable/ccli-options.js    | 41 ++++++++++++++++
 frontend/app/components/encryptable/show.js   |  8 ++++
 .../components/encryptable/ccli-options.hbs   | 48 +++++++++++++++++++
 .../templates/components/encryptable/show.hbs |  6 +++
 frontend/public/assets/images/ccli.svg        |  1 +
 frontend/translations/ch_be.yml               |  8 ++++
 frontend/translations/de.yml                  |  8 ++++
 frontend/translations/en.yml                  |  8 ++++
 frontend/translations/fr.yml                  |  8 ++++
 9 files changed, 136 insertions(+)
 create mode 100644 frontend/app/components/encryptable/ccli-options.js
 create mode 100644 frontend/app/templates/components/encryptable/ccli-options.hbs
 create mode 100644 frontend/public/assets/images/ccli.svg

diff --git a/frontend/app/components/encryptable/ccli-options.js b/frontend/app/components/encryptable/ccli-options.js
new file mode 100644
index 000000000..0c25e7eda
--- /dev/null
+++ b/frontend/app/components/encryptable/ccli-options.js
@@ -0,0 +1,41 @@
+import { action } from "@ember/object";
+import AccountValidations from "../../validations/encryptable";
+import lookupValidator from "ember-changeset-validations";
+import Changeset from "ember-changeset";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import BaseFormComponent from "../base-form-component";
+import { isPresent } from "@ember/utils";
+import { isEmpty } from "@ember/utils";
+import { capitalize } from "@ember/string";
+import { A } from "@ember/array";
+import Component from "@glimmer/component";
+
+export default class Form extends Component {
+  @service store;
+  @service router;
+  @service navService;
+  @service userService;
+  @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`)
+    );
+  }
+}
diff --git a/frontend/app/components/encryptable/show.js b/frontend/app/components/encryptable/show.js
index 202b485e2..128586c74 100644
--- a/frontend/app/components/encryptable/show.js
+++ b/frontend/app/components/encryptable/show.js
@@ -19,6 +19,9 @@ export default class ShowComponent extends Component {
   @tracked
   isFileCreating = false;
 
+  @tracked
+  isCcliOptionsOpen = false;
+
   @tracked
   isFile = this.args.encryptable.isFile;
 
@@ -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")}`;
   }
diff --git a/frontend/app/templates/components/encryptable/ccli-options.hbs b/frontend/app/templates/components/encryptable/ccli-options.hbs
new file mode 100644
index 000000000..d3ae3787c
--- /dev/null
+++ b/frontend/app/templates/components/encryptable/ccli-options.hbs
@@ -0,0 +1,48 @@
+<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 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 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 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}}
+    <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">
+      {{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>
\ No newline at end of file
diff --git a/frontend/app/templates/components/encryptable/show.hbs b/frontend/app/templates/components/encryptable/show.hbs
index a29c8786f..4c5adcdfd 100644
--- a/frontend/app/templates/components/encryptable/show.hbs
+++ b/frontend/app/templates/components/encryptable/show.hbs
@@ -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">
@@ -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>
diff --git a/frontend/public/assets/images/ccli.svg b/frontend/public/assets/images/ccli.svg
new file mode 100644
index 000000000..bc28e35e5
--- /dev/null
+++ b/frontend/public/assets/images/ccli.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M320-242 80-482l242-242 43 43-199 199 197 197-43 43Zm318 2-43-43 199-199-197-197 43-43 240 240-242 242Z"/></svg>
\ No newline at end of file
diff --git a/frontend/translations/ch_be.yml b/frontend/translations/ch_be.yml
index d39b95db2..3f9c90e74 100644
--- a/frontend/translations/ch_be.yml
+++ b/frontend/translations/ch_be.yml
@@ -116,6 +116,13 @@ ch_be:
       clickToSeeAttrs: Klick wenn aui Attribut möchtisch gseh
     share:
       title: Datei teilä
+    ccli-options:
+      title: CCLI Commands kopierä
+      help: Bruchsch meh Informationä?
+      copy-ccli: CCLI Command kopierä
+      copy-ccli-username: CCLI Command füre Benutzername kopierä
+      copy-ccli-password: CCLI Command fürs Passwort kopierä
+      copy-ccli-yaml: CCLI Yaml Command kopierä
 
   encryptable/transferring/file:
     new:
@@ -325,6 +332,7 @@ ch_be:
       token_copied: Dr Token isch kopiert worde
       email_copied: D Email isch kopiert worde
       customAttr_copied: Z individuellä Attribut isch kopiert worde
+      ccli_command_copied: CCLI Command isch kopiert worde
       selectAdditionalField: Du muäsch es Fäld uswähle
 
     encryptable-credentials:
diff --git a/frontend/translations/de.yml b/frontend/translations/de.yml
index bd8d4ea85..00aec08d9 100644
--- a/frontend/translations/de.yml
+++ b/frontend/translations/de.yml
@@ -116,6 +116,13 @@ de:
       clickToSeeAttrs: Klicke um alle Attribute zu sehen
     share:
       title: Datei teilen
+    ccli-options:
+      title: CCLI Commands kopieren
+      help: Brauchst du mehr Informationen?
+      copy-ccli: CCLI Command kopieren
+      copy-ccli-username: CCLI Command für Benutzername kopieren
+      copy-ccli-password: CCLI Command für Passwort kopieren
+      copy-ccli-yaml: CCLI Yaml Command kopieren
 
   encryptable/transferring/file:
     new:
@@ -325,6 +332,7 @@ de:
       token_copied: Token wurde kopiert
       email_copied: Email wurde kopiert
       customAttr_copied: Individuelles Attribut wurde kopiert
+      ccli_command_copied: CCLI Command wurde kopiert
       selectAdditionalField: Du musst ein Feld auswählen
 
     encryptable-credentials:
diff --git a/frontend/translations/en.yml b/frontend/translations/en.yml
index fc7826ee8..9f0d4aedb 100644
--- a/frontend/translations/en.yml
+++ b/frontend/translations/en.yml
@@ -117,6 +117,13 @@ en:
       clickToSeeAttrs: Click to see all attributes
     share:
       title: Share File
+    ccli-options:
+      title: Copy CCLI Commands
+      help: You need more information?
+      copy-ccli: Copy CCLI Command
+      copy-ccli-username: Copy CCLI Command for username
+      copy-ccli-password: Copy CCLI Command for password
+      copy-ccli-yaml: Copy CCLI Yaml Command
 
   encryptable/transferring/file:
     new:
@@ -325,6 +332,7 @@ en:
       token_copied: Token was copied
       email_copied: Email was copied
       customAttr_copied: Custom Attribute was copied
+      ccli_command_copied: CCLI Command was copied
       selectAdditionalField: You have to choose a field
 
     encryptable-credentials:
diff --git a/frontend/translations/fr.yml b/frontend/translations/fr.yml
index 5370cc929..a79300614 100644
--- a/frontend/translations/fr.yml
+++ b/frontend/translations/fr.yml
@@ -117,6 +117,13 @@ fr:
       clickToSeeAttrs: Cliquez pour voir tous les attributs
     share:
       title: Partage fichier
+    ccli-options:
+      title: Copier les commandes CCLI
+      help: Avez-vous besoin de plus d'informations?
+      copy-ccli: Copier la commande CCLI
+      copy-ccli-username: Copier la commande CCLI pour le nom d'utilisateur
+      copy-ccli-password: Copier la commande CCLI pour le mot de passe
+      copy-ccli-yaml: Copier la commande CCLI Yaml
 
   encryptable/transferring/file:
     new:
@@ -326,6 +333,7 @@ fr:
       token_copied: Le jeton a été copié
       email_copied: L'e-mail a été copié
       customAttr_copied: L'attribut personnalisé a été copié
+      ccli_command_copied: La commande CCLI a été copiée
       selectAdditionalField: Tu dois sélectionner un champ
 
     encryptable-credentials:

From bec028c3ecfd4d308036a27fa627f87b37893bcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20J=C3=A4ggi?= <jaeggi@puzzle.ch>
Date: Mon, 3 Jul 2023 16:48:31 +0200
Subject: [PATCH 2/6] introduce other attributes from custom attrs

---
 .../components/encryptable/ccli-options.js    | 17 +--------
 .../components/encryptable/ccli-options.hbs   | 36 +++++++++++++++++++
 frontend/translations/ch_be.yml               |  4 +++
 frontend/translations/de.yml                  |  4 +++
 frontend/translations/en.yml                  |  4 +++
 frontend/translations/fr.yml                  |  4 +++
 6 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/encryptable/ccli-options.js b/frontend/app/components/encryptable/ccli-options.js
index 0c25e7eda..dc5142790 100644
--- a/frontend/app/components/encryptable/ccli-options.js
+++ b/frontend/app/components/encryptable/ccli-options.js
@@ -1,21 +1,8 @@
 import { action } from "@ember/object";
-import AccountValidations from "../../validations/encryptable";
-import lookupValidator from "ember-changeset-validations";
-import Changeset from "ember-changeset";
 import { inject as service } from "@ember/service";
-import { tracked } from "@glimmer/tracking";
-import BaseFormComponent from "../base-form-component";
-import { isPresent } from "@ember/utils";
-import { isEmpty } from "@ember/utils";
-import { capitalize } from "@ember/string";
-import { A } from "@ember/array";
 import Component from "@glimmer/component";
 
 export default class Form extends Component {
-  @service store;
-  @service router;
-  @service navService;
-  @service userService;
   @service notify;
   @service clipboardService;
   @service intl;
@@ -34,8 +21,6 @@ export default class Form extends Component {
   @action
   copyCommand(command) {
     this.clipboardService.copy(command);
-    this.notify.info(
-      this.intl.t(`flashes.encryptables.ccli_command_copied`)
-    );
+    this.notify.info(this.intl.t(`flashes.encryptables.ccli_command_copied`));
   }
 }
diff --git a/frontend/app/templates/components/encryptable/ccli-options.hbs b/frontend/app/templates/components/encryptable/ccli-options.hbs
index d3ae3787c..045933c15 100644
--- a/frontend/app/templates/components/encryptable/ccli-options.hbs
+++ b/frontend/app/templates/components/encryptable/ccli-options.hbs
@@ -29,6 +29,42 @@
         </button>
       </div>
     {{/if}}
+    {{#if @encryptable.cleartextPin}}
+      <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 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 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 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 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")}}>
diff --git a/frontend/translations/ch_be.yml b/frontend/translations/ch_be.yml
index 3f9c90e74..6d507d97a 100644
--- a/frontend/translations/ch_be.yml
+++ b/frontend/translations/ch_be.yml
@@ -122,6 +122,10 @@ ch_be:
       copy-ccli: CCLI Command kopierä
       copy-ccli-username: CCLI Command füre Benutzername kopierä
       copy-ccli-password: CCLI Command fürs Passwort kopierä
+      copy-ccli-pin: CCLI Command füre Pin kopierä
+      copy-ccli-token: CCLI Command fürs Token kopierä
+      copy-ccli-email: CCLI Command für d Email kopierä
+      copy-ccli-custom-attr: CCLI Command fürs inidviduellä Attribut kopierä
       copy-ccli-yaml: CCLI Yaml Command kopierä
 
   encryptable/transferring/file:
diff --git a/frontend/translations/de.yml b/frontend/translations/de.yml
index 00aec08d9..583e5ed54 100644
--- a/frontend/translations/de.yml
+++ b/frontend/translations/de.yml
@@ -122,6 +122,10 @@ de:
       copy-ccli: CCLI Command kopieren
       copy-ccli-username: CCLI Command für Benutzername kopieren
       copy-ccli-password: CCLI Command für Passwort kopieren
+      copy-ccli-pin: CCLI Command für Pin kopieren
+      copy-ccli-token: CCLI Command für Token kopieren
+      copy-ccli-email: CCLI Command für Email kopieren
+      copy-ccli-custom-attr: CCLI Command für Individuelles Attribut kopieren
       copy-ccli-yaml: CCLI Yaml Command kopieren
 
   encryptable/transferring/file:
diff --git a/frontend/translations/en.yml b/frontend/translations/en.yml
index 9f0d4aedb..53766a5d8 100644
--- a/frontend/translations/en.yml
+++ b/frontend/translations/en.yml
@@ -123,6 +123,10 @@ en:
       copy-ccli: Copy CCLI Command
       copy-ccli-username: Copy CCLI Command for username
       copy-ccli-password: Copy CCLI Command for password
+      copy-ccli-pin: Copy CCLI Command for pin
+      copy-ccli-token: Copy CCLI Command for token
+      copy-ccli-email: Copy CCLI Command for email
+      copy-ccli-custom-attr: Copy CCLI Command for custom attribute
       copy-ccli-yaml: Copy CCLI Yaml Command
 
   encryptable/transferring/file:
diff --git a/frontend/translations/fr.yml b/frontend/translations/fr.yml
index a79300614..789451403 100644
--- a/frontend/translations/fr.yml
+++ b/frontend/translations/fr.yml
@@ -123,6 +123,10 @@ fr:
       copy-ccli: Copier la commande CCLI
       copy-ccli-username: Copier la commande CCLI pour le nom d'utilisateur
       copy-ccli-password: Copier la commande CCLI pour le mot de passe
+      copy-ccli-pin: Copier la commande CCLI pour la broche
+      copy-ccli-token: Copier la commande CCLI pour le jeton
+      copy-ccli-email: Copier la commande CCLI pour le courrier électronique
+      copy-ccli-custom-attr: Copier la commande CCLI pour l'attribut personnalisé
       copy-ccli-yaml: Copier la commande CCLI Yaml
 
   encryptable/transferring/file:

From dc8a339e5d0380c477f8f4e45eea5a94ed550961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20J=C3=A4ggi?= <jaeggi@puzzle.ch>
Date: Tue, 4 Jul 2023 08:20:06 +0200
Subject: [PATCH 3/6] add labels for ccli command fields

---
 .../components/encryptable/ccli-options.hbs   | 26 ++++++++++++++++++-
 frontend/translations/ch_be.yml               |  8 ++++++
 frontend/translations/de.yml                  |  8 ++++++
 frontend/translations/en.yml                  |  8 ++++++
 frontend/translations/fr.yml                  |  8 ++++++
 5 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/frontend/app/templates/components/encryptable/ccli-options.hbs b/frontend/app/templates/components/encryptable/ccli-options.hbs
index 045933c15..5d61d1026 100644
--- a/frontend/app/templates/components/encryptable/ccli-options.hbs
+++ b/frontend/app/templates/components/encryptable/ccli-options.hbs
@@ -4,6 +4,9 @@
     <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)}}>
@@ -12,6 +15,9 @@
       </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")}}>
@@ -21,6 +27,9 @@
       </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")}}>
@@ -30,6 +39,9 @@
       </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")}}>
@@ -39,6 +51,9 @@
       </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")}}>
@@ -48,6 +63,9 @@
       </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")}}>
@@ -57,6 +75,9 @@
       </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")}}>
@@ -65,6 +86,9 @@
         </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")}}>
@@ -74,7 +98,7 @@
     </div>
   </Modal.body>
   <Modal.footer>
-    <a id="ccli-options-help" class="mr-auto" href="https://github.com/puzzle/ccli/blob/master/README.md">
+    <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">
diff --git a/frontend/translations/ch_be.yml b/frontend/translations/ch_be.yml
index 6d507d97a..6f71158b3 100644
--- a/frontend/translations/ch_be.yml
+++ b/frontend/translations/ch_be.yml
@@ -119,6 +119,14 @@ ch_be:
     ccli-options:
       title: CCLI Commands kopierä
       help: Bruchsch meh Informationä?
+      ccli: Encryptable ahzeigä mit CCLI
+      username: Benutzername ahzeigä mit CCLI
+      password: Passwort ahzeigä mit CCLI
+      pin: Pin ahzeigä mit CCLI
+      token: Token ahzeigä mit CCLI
+      email: Email ahzeigä mit CCLI
+      custom-attr: Individuells Attribut ahzeigä mit CCLI
+      yaml: Encryptable als yaml ahzeigä mit CCLI
       copy-ccli: CCLI Command kopierä
       copy-ccli-username: CCLI Command füre Benutzername kopierä
       copy-ccli-password: CCLI Command fürs Passwort kopierä
diff --git a/frontend/translations/de.yml b/frontend/translations/de.yml
index 583e5ed54..2c88bad43 100644
--- a/frontend/translations/de.yml
+++ b/frontend/translations/de.yml
@@ -119,6 +119,14 @@ de:
     ccli-options:
       title: CCLI Commands kopieren
       help: Brauchst du mehr Informationen?
+      ccli: Encryptable anzeigen mit CCLI
+      username: Benutzername anzeigen mit CCLI
+      password: Passwort anzeigen mit CCLI
+      pin: Pin anzeigen mit CCLI
+      token: Token anzeigen mit CCLI
+      email: Email anzeigen mit CCLI
+      custom-attr: Individuelles Attribut anzeigen mit CCLI
+      yaml: Encryptable als yaml anzeigen mit CCLI
       copy-ccli: CCLI Command kopieren
       copy-ccli-username: CCLI Command für Benutzername kopieren
       copy-ccli-password: CCLI Command für Passwort kopieren
diff --git a/frontend/translations/en.yml b/frontend/translations/en.yml
index 53766a5d8..e0ba08cd0 100644
--- a/frontend/translations/en.yml
+++ b/frontend/translations/en.yml
@@ -120,6 +120,14 @@ en:
     ccli-options:
       title: Copy CCLI Commands
       help: You need more information?
+      ccli: Get encryptable with CCLI
+      username: Get username with ccli
+      password: Get password with CCLI
+      pin: Get pin with CCLI
+      token: Get token with CCLI
+      email: Get email with CCLI
+      custom-attr: Get custom attribute with CCLI
+      yaml: Get encryptable with CCLI as yaml
       copy-ccli: Copy CCLI Command
       copy-ccli-username: Copy CCLI Command for username
       copy-ccli-password: Copy CCLI Command for password
diff --git a/frontend/translations/fr.yml b/frontend/translations/fr.yml
index 789451403..edc6288db 100644
--- a/frontend/translations/fr.yml
+++ b/frontend/translations/fr.yml
@@ -120,6 +120,14 @@ fr:
     ccli-options:
       title: Copier les commandes CCLI
       help: Avez-vous besoin de plus d'informations?
+      ccli: Soyez cryptable avec CCLI
+      username: Obtenir le nom d'utilisateur avec ccli
+      password: Obtenir un mot de passe avec CCLI
+      pin: Obtenez l'épingle avec CCLI
+      token: Obtenez un jeton avec CCLI
+      email: Recevoir des e-mails avec CCLI
+      custom-attr: Obtenir un attribut personnalisé avec CCLI
+      yaml: Devenez cryptable avec CCLI en tant que yaml
       copy-ccli: Copier la commande CCLI
       copy-ccli-username: Copier la commande CCLI pour le nom d'utilisateur
       copy-ccli-password: Copier la commande CCLI pour le mot de passe

From d6ac1aa188040aff05db3761ee33fd458d72210d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20J=C3=A4ggi?= <jaeggi@puzzle.ch>
Date: Tue, 4 Jul 2023 09:29:17 +0200
Subject: [PATCH 4/6] implement new integration test for ccli option modal

---
 .../encryptable/ccli-options-test.js          | 402 ++++++++++++++++++
 frontend/translations/en.yml                  |   2 +-
 2 files changed, 403 insertions(+), 1 deletion(-)
 create mode 100644 frontend/tests/integration/components/encryptable/ccli-options-test.js

diff --git a/frontend/tests/integration/components/encryptable/ccli-options-test.js b/frontend/tests/integration/components/encryptable/ccli-options-test.js
new file mode 100644
index 000000000..ec3e29ec8
--- /dev/null
+++ b/frontend/tests/integration/components/encryptable/ccli-options-test.js
@@ -0,0 +1,402 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setLocale } from "ember-intl/test-support";
+
+module("Integration | Component | encryptable/ccli-options", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders without any set attribute", async function (assert) {
+    setLocale("en");
+    this.set("encryptable", {
+      id: 1,
+      name: "Ninjas test encryptable"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-label").innerText,
+      "Get encryptable with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-input").value,
+      "cry encryptable 1"
+    );
+    assert
+      .dom(this.element.querySelector("#encryptable-ccli-username-label"))
+      .doesNotExist();
+    assert
+      .dom(this.element.querySelector("#ccli-username-input"))
+      .doesNotExist();
+    assert
+      .dom(this.element.querySelector("#encryptable-ccli-password-label"))
+      .doesNotExist();
+    assert
+      .dom(this.element.querySelector("#ccli-password-input"))
+      .doesNotExist();
+    assert
+      .dom(this.element.querySelector("#encryptable-ccli-pin-label"))
+      .doesNotExist();
+    assert.dom(this.element.querySelector("#ccli-pin-input")).doesNotExist();
+    assert
+      .dom(this.element.querySelector("#encryptable-ccli-token-label"))
+      .doesNotExist();
+    assert.dom(this.element.querySelector("#ccli-token-input")).doesNotExist();
+    assert
+      .dom(this.element.querySelector("#encryptable-ccli-email-label"))
+      .doesNotExist();
+    assert.dom(this.element.querySelector("#ccli-email-input")).doesNotExist();
+    assert
+      .dom(this.element.querySelector("#encryptable-ccli-custom-attr-label"))
+      .doesNotExist();
+    assert
+      .dom(this.element.querySelector("#ccli-custom-attr-input"))
+      .doesNotExist();
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-yaml-label").innerText,
+      "Get encryptable with CCLI as yaml"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-yaml-input").value,
+      "cry encryptable 1 > encryptable.yaml"
+    );
+  });
+
+  test("it renders with username and password commands", async function (assert) {
+    setLocale("en");
+    this.set("encryptable", {
+      id: 9817,
+      name: "Ninjas test encryptable",
+      cleartextUsername: "yanickegli123",
+      cleartextPassword: "findableongithub"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-username-label").innerText,
+      "Get username with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-username-input").value,
+      "cry encryptable 9817 --username"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-password-label").innerText,
+      "Get password with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-password-input").value,
+      "cry encryptable 9817 --password"
+    );
+  });
+
+  test("it renders with pin and email commands", async function (assert) {
+    setLocale("en");
+    this.set("encryptable", {
+      id: 6110,
+      name: "Ninjas test encryptable",
+      cleartextPin: "123456",
+      cleartextEmail: "email@email.com"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-email-label").innerText,
+      "Get email with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-email-input").value,
+      "cry encryptable 6110 --email"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-pin-label").innerText,
+      "Get pin with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-pin-input").value,
+      "cry encryptable 6110 --pin"
+    );
+  });
+
+  test("it renders with token and custom attribute commands", async function (assert) {
+    setLocale("en");
+    this.set("encryptable", {
+      id: 6110,
+      name: "Ninjas test encryptable",
+      cleartextToken: "yoanXiTa",
+      cleartextCustomAttr: "wow"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-token-label").innerText,
+      "Get token with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-token-input").value,
+      "cry encryptable 6110 --token"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-custom-attr-label")
+        .innerText,
+      "Get custom attribute with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-custom-attr-input").value,
+      "cry encryptable 6110 --customAttribute"
+    );
+  });
+
+  test("should render all english translations with every command", async function (assert) {
+    setLocale("en");
+    this.set("encryptable", {
+      id: 1,
+      name: "Ninjas test encryptable",
+      cleartextUsername: "mail",
+      cleartextPassword: "e2jd2rh4g5io7",
+      cleartextToken: "token",
+      cleartextPin: "pin",
+      cleartextEmail: "email",
+      cleartextCustomAttr: "customAttr"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-label").innerText,
+      "Get encryptable with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-username-label").innerText,
+      "Get username with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-password-label").innerText,
+      "Get password with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-email-label").innerText,
+      "Get email with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-pin-label").innerText,
+      "Get pin with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-token-label").innerText,
+      "Get token with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-custom-attr-label")
+        .innerText,
+      "Get custom attribute with CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-yaml-label").innerText,
+      "Get encryptable with CCLI as yaml"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-close-button").innerText,
+      "Close"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-help").innerText,
+      "You need more information?"
+    );
+  });
+
+  test("should render all german translations with every command", async function (assert) {
+    setLocale("de");
+    this.set("encryptable", {
+      id: 1,
+      name: "Ninjas test encryptable",
+      cleartextUsername: "mail",
+      cleartextPassword: "e2jd2rh4g5io7",
+      cleartextToken: "token",
+      cleartextPin: "pin",
+      cleartextEmail: "email",
+      cleartextCustomAttr: "customAttr"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-label").innerText,
+      "Encryptable anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-username-label").innerText,
+      "Benutzername anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-password-label").innerText,
+      "Passwort anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-email-label").innerText,
+      "Email anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-pin-label").innerText,
+      "Pin anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-token-label").innerText,
+      "Token anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-custom-attr-label")
+        .innerText,
+      "Individuelles Attribut anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-yaml-label").innerText,
+      "Encryptable als yaml anzeigen mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-close-button").innerText,
+      "Schliessen"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-help").innerText,
+      "Brauchst du mehr Informationen?"
+    );
+  });
+
+  test("should render all swiss german translations with every command", async function (assert) {
+    setLocale("ch-be");
+    this.set("encryptable", {
+      id: 1,
+      name: "Ninjas test encryptable",
+      cleartextUsername: "mail",
+      cleartextPassword: "e2jd2rh4g5io7",
+      cleartextToken: "token",
+      cleartextPin: "pin",
+      cleartextEmail: "email",
+      cleartextCustomAttr: "customAttr"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-label").innerText,
+      "Encryptable ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-username-label").innerText,
+      "Benutzername ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-password-label").innerText,
+      "Passwort ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-email-label").innerText,
+      "Email ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-pin-label").innerText,
+      "Pin ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-token-label").innerText,
+      "Token ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-custom-attr-label")
+        .innerText,
+      "Individuells Attribut ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-yaml-label").innerText,
+      "Encryptable als yaml ahzeigä mit CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-close-button").innerText,
+      "Schliessä"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-help").innerText,
+      "Bruchsch meh Informationä?"
+    );
+  });
+
+  test("should render all french translations with every command", async function (assert) {
+    setLocale("fr");
+    this.set("encryptable", {
+      id: 1,
+      name: "Ninjas test encryptable",
+      cleartextUsername: "mail",
+      cleartextPassword: "e2jd2rh4g5io7",
+      cleartextToken: "token",
+      cleartextPin: "pin",
+      cleartextEmail: "email",
+      cleartextCustomAttr: "customAttr"
+    });
+
+    await render(
+      hbs`<Encryptable::CcliOptions @encryptable={{this.encryptable}}/>`
+    );
+
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-label").innerText,
+      "Soyez cryptable avec CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-username-label").innerText,
+      "Obtenir le nom d'utilisateur avec ccli"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-password-label").innerText,
+      "Obtenir un mot de passe avec CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-email-label").innerText,
+      "Recevoir des e-mails avec CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-pin-label").innerText,
+      "Obtenez l'épingle avec CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-token-label").innerText,
+      "Obtenez un jeton avec CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-custom-attr-label")
+        .innerText,
+      "Obtenir un attribut personnalisé avec CCLI"
+    );
+    assert.equal(
+      this.element.querySelector("#encryptable-ccli-yaml-label").innerText,
+      "Devenez cryptable avec CCLI en tant que yaml"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-close-button").innerText,
+      "Fermer"
+    );
+    assert.equal(
+      this.element.querySelector("#ccli-options-help").innerText,
+      "Avez-vous besoin de plus d'informations?"
+    );
+  });
+});
diff --git a/frontend/translations/en.yml b/frontend/translations/en.yml
index e0ba08cd0..57e278491 100644
--- a/frontend/translations/en.yml
+++ b/frontend/translations/en.yml
@@ -121,7 +121,7 @@ en:
       title: Copy CCLI Commands
       help: You need more information?
       ccli: Get encryptable with CCLI
-      username: Get username with ccli
+      username: Get username with CCLI
       password: Get password with CCLI
       pin: Get pin with CCLI
       token: Get token with CCLI

From ca169371ebfef9a076e4031a9db7591add0cba9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20J=C3=A4ggi?= <jaeggi@puzzle.ch>
Date: Fri, 7 Jul 2023 15:08:26 +0200
Subject: [PATCH 5/6] rename component to CcliOptions

---
 frontend/app/components/encryptable/ccli-options.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/components/encryptable/ccli-options.js b/frontend/app/components/encryptable/ccli-options.js
index dc5142790..d2cb81d80 100644
--- a/frontend/app/components/encryptable/ccli-options.js
+++ b/frontend/app/components/encryptable/ccli-options.js
@@ -2,7 +2,7 @@ import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 
-export default class Form extends Component {
+export default class CcliOptions extends Component {
   @service notify;
   @service clipboardService;
   @service intl;

From 7fd3605adcaaf62a74fac554fa5e930a4f84d0dc Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Wed, 12 Jul 2023 15:55:57 +0200
Subject: [PATCH 6/6] Use more efficient copy method for clipboard service

---
 frontend/app/services/clipboard-service.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/frontend/app/services/clipboard-service.js b/frontend/app/services/clipboard-service.js
index c41030c5c..93973f4c1 100644
--- a/frontend/app/services/clipboard-service.js
+++ b/frontend/app/services/clipboard-service.js
@@ -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);
   }
 }