adjust styling of generate secure password button

puzzle · May 30, 2023 · 7a6fb3f · 7a6fb3f
1 parent 3088355
commit 7a6fb3f
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/frontend/app/templates/components/encryptable/form.hbs b/frontend/app/templates/components/encryptable/form.hbs
@@ -72,22 +72,25 @@
                 </form.element>
                 <PasswordStrengthMeter class="col-12 px-0 mb-2 mb-md-0" @password={{this.changeset.cleartextPassword}}/>
                 <div class="d-flex flex-column border border-mute border-radius-4 p-2">
-                  <label>
-                    Symbols
-                    <Input
-                      id="withSymbols"
-                      @type="checkbox"
-                      @checked={{this.withSymbols}}></Input>
-                  </label>
+                  <div class="ml-2 mt-1">{{t "encryptable/credentials.form.passwordLength"}} </div>
                   <label for="formControlRange">
                     {{this.passwordLength}}
                     <Input @type="range" class="custom-range" id="formControlRange" @value={{this.passwordLength}} min="14" max="32">
                     </Input>
                   </label>
-                  <button id="password-generate-button" class="btn btn-secondary btn-block col-lg-7 mb-md-4" {{on "click" this.setRandomPassword}}
-                          tabindex="4">
-                    {{t "encryptable/credentials.edit.random_password"}}
-                  </button>
+                  <div class="d-flex flex-row justify-content-around">
+                    <label>
+                      Symbols
+                      <Input
+                        id="withSymbols"
+                        @type="checkbox"
+                        @checked={{this.withSymbols}}></Input>
+                    </label>
+                    <button id="password-generate-button" class="btn btn-secondary w-50 btn-sm col-lg-7 mb-md-4" {{on "click" this.setRandomPassword}}
+                            tabindex="4">
+                      {{t "encryptable/credentials.edit.random_password"}}
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>

diff --git a/frontend/translations/ch_be.yml b/frontend/translations/ch_be.yml
@@ -92,6 +92,8 @@ ch_be:
       blank: Läär
     new:
       title: Nöi Zuägangsdate
+    form:
+      passwordLength: "Password Längi: "
     share:
       title: Datei teilä
 

diff --git a/frontend/translations/de.yml b/frontend/translations/de.yml
@@ -93,6 +93,8 @@ de:
       blank: Leer
     new:
       title: Neue Zugangsdaten
+    form:
+      passwordLength: "Passwortlänge: "
     share:
       title: Datei teilen
 

diff --git a/frontend/translations/en.yml b/frontend/translations/en.yml
@@ -93,6 +93,8 @@ en:
       blank: none
     new:
       title: New Credentials
+    form:
+      passwordLength: "Password Length: "
     share:
       title: Share File
 

diff --git a/frontend/translations/fr.yml b/frontend/translations/fr.yml
@@ -93,6 +93,8 @@ fr:
       blank: Vide
     new:
       title: Nouveau compte
+    form:
+      passwordLength: "Longueur du mot de passe: "
     share:
       title: Partage fichier