Improve password generator

frontend/app/components/encryptable/form.js

@@ -1,13 +1,14 @@
-import {action} from "@ember/object";
+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 { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
 import BaseFormComponent from "../base-form-component";
-import {isPresent} from "@ember/utils";
-import {capitalize} from "@ember/string";
-import {A} from "@ember/array";
+import { capitalize } from "@ember/string";
+import { A } from "@ember/array";
+import { addObserver } from "@ember/object/observers";
+import { isEmpty, isPresent } from "@ember/utils";
 
 export default class Form extends BaseFormComponent {
   @service store;
@@ -24,6 +25,11 @@ export default class Form extends BaseFormComponent {
 
   @tracked errors;
 
+  @tracked withSymbols = true;
+  @tracked passwordLength = 14;
+
+  @tracked isGenExpanded = false;
+
   AccountValidations = AccountValidations;
 
   //create array proxy that ember checks the changes in each loop for dropdown, ember's rendering engine
@@ -79,6 +85,8 @@ export default class Form extends BaseFormComponent {
       AccountValidations
     );
 
+    this.presetTeamAndFolder();
+
     this.store.findAll("team").then((teams) => {
       this.assignableTeams = teams;
     });
@@ -89,13 +97,25 @@ export default class Form extends BaseFormComponent {
       this.store.findRecord("encryptable-credential", this.record.id);
   }
 
+  presetTeamAndFolder() {
+    let selectedFolder = this.args.folder || this.navService.selectedFolder;
+    let selectedTeam =
+      selectedFolder?.get("team") || this.navService.selectedTeam;
+
+    if (!isEmpty(selectedTeam)) {
+      this.selectedTeam = selectedTeam;
+    }
+    if (!isEmpty(selectedFolder)) {
+      this.selectedFolder = selectedFolder;
+    }
+  }
   get availableFolders() {
     return isPresent(this.selectedTeam)
       ? this.store
-        .peekAll("folder")
-        .filter(
-          (folder) => folder.team.get("id") === this.selectedTeam.get("id")
-        )
+          .peekAll("folder")
+          .filter(
+            (folder) => folder.team.get("id") === this.selectedTeam.get("id")
+          )
       : [];
   }
 
@@ -105,17 +125,24 @@ export default class Form extends BaseFormComponent {
       this.args.onAbort();
     }
   }
-
+  @action
+  togglePwGen() {
+    this.isGenExpanded = !this.isGenExpanded;
+  }
   @action
   setRandomPassword() {
     let pass = "";
+    const array = new Uint32Array(1);
     const PASSWORD_CHARS =
-      "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";
-    for (let i = 0; i < 14; i++) {
-      let r = Math.floor(Math.random() * PASSWORD_CHARS.length);
+      "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOP1234567890".concat(
+        this.withSymbols ? "!@#$%^&*()-+<>" : ""
+      );
+    for (let i = 0; i < this.passwordLength; i++) {
+      window.crypto.getRandomValues(array);
+      let r = array[0] % PASSWORD_CHARS.length;
       pass += PASSWORD_CHARS.charAt(r);
     }
-    this.changeset.cleartextPassword = pass;
+    this.changeset.set("cleartextPassword", pass);
   }
 
   @action

frontend/app/styles/app.scss

@@ -48,10 +48,6 @@ $font-family-sans-serif: var(--pzsh-font-family) !default;
   flex-direction: row;
 }
 
-.float-right {
-  float: right !important;
-}
-
 .pt-10 {
   padding-top: 10%;
 }
@@ -71,13 +67,6 @@ $font-family-sans-serif: var(--pzsh-font-family) !default;
   margin-top: 1%;
 }
 
-.ml-2 {
-  margin-left: 2%;
-}
-.ml-5 {
-  margin-left: 5%;
-}
-
 .mb-2 {
   margin-bottom: 2%;
 }
@@ -122,24 +111,10 @@ li a {
   margin-bottom: 5px !important;
 }
 
-.ml-5 {
-  margin-left: 5%;
-}
-
 .mt-32 {
   margin-top: 32px;
 }
 
-.ml-15 {
-  margin-left: 15px;
-}
-
-.ml-254 {
-  margin-left: 254px !important;
-}
-.ml-238 {
-  margin-left: 238px !important;
-}
 .mt-60 {
   margin-top: 54px !important;
 }
@@ -298,10 +273,6 @@ li a {
   background-color: #f8f8f8;
 }
 
-.pl-none {
-  padding-left: 0 !important;
-}
-
 .search-badge {
   padding: 5px 10px 3px 8px !important;
   margin-left: 10px;
@@ -498,6 +469,9 @@ h5, h6 {
   text-align: center;
 }
 
+#cleartext-password{
+  margin-bottom: 0.5em;
+}
 .changelog-container h2 {
   font-size: 1.5rem;
 }
@@ -517,3 +491,32 @@ h5, h6 {
   color: white !important;
 }
 
+
+.x-toggle:checked + label > .x-toggle-material.x-toggle-btn::after{
+  background-color: #1b8dc6;
+}
+
+.x-toggle:not(:checked) + label > .x-toggle-material.x-toggle-btn::after {
+  border: lightslategray solid 1px;
+}
+
+.x-toggle-component.x-toggle-focused .x-toggle-btn:not(.x-toggle-disabled) {
+  &::after, &::before {
+    box-shadow: none;
+  }
+}
+
+
+.password-range {
+  &::-moz-range-progress{
+    background-color: #1e5a96;
+  }
+}
+
+.password-length {
+  -moz-appearance: textfield;
+  &::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}

frontend/app/styles/custom-bootstrap.scss

@@ -0,0 +1,2 @@
+$btn-color:  #ff0000;
+$btn-color:  #ff0000

frontend/app/styles/encryptable-form.scss

@@ -58,7 +58,6 @@
   width: 100%;
   max-width: 100%;
   height: 35px;
-  margin-left: 5%;
 }
 
 .d-flex .ember-basic-dropdown {

frontend/app/styles/nav-bar.scss

@@ -121,10 +121,6 @@
     padding-left: 32px !important;
   }
 
-  .ml-238 {
-    margin-left: 238px !important;
-  }
-
   .side-nav-bar-teams-list .list-group-item:hover {
     cursor: pointer;
     background-color: #1E5A96 !important;

frontend/app/styles/password-strength-meter.scss

@@ -24,3 +24,6 @@
   width: 100% !important;
   background-color: #4dd100 !important;
 }
+.progress-height{
+  height: 0.3rem;
+}

frontend/app/styles/side-nav-bar.scss

@@ -16,7 +16,7 @@
   background-color: white;
 }
 
-.toggle-button.active {
+.toggle-button-active {
   background-color: white !important;
   border-color: #238BCA !important;
 }
@@ -142,7 +142,7 @@
     background-color: rgba(0, 0, 0, 0.12) !important;
   }
 
-  .toggle-button.active {
+  .toggle-button-active {
     background-color: rgba(0, 0, 0, 0.12) !important;
     border-color: #116289 !important;
   }
@@ -169,7 +169,6 @@
     border-bottom-right-radius: 0;
     border-color: rgba(167, 167, 167, 0.44) !important;
   }
-
 }
 
 @media screen and (min-width: 1501px) {
@@ -189,15 +188,14 @@
     border-bottom-right-radius: 0;
     border-color: rgba(167, 167, 167, 0.44) !important;
   }
-
 }
 
 @media screen and (min-width: 992px) {
   .sidebar {
     background-color: #ffffff;
   }
 
-  .toggle-button.active {
+  .toggle-button-active {
     background-color: #fff !important;
     border-color: #238BCA !important;
   }

frontend/app/templates/components/admin/user/table.hbs

@@ -4,37 +4,37 @@
       <th>
         {{t "admin.users.index.username"}}
         <span role="button" {{action "sortBy" "username"}} id="sort-username">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.name"}}
         <span role="button" {{action "sortBy" "givenname"}} id="sort-name">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.last_login_at"}}
         <span role="button" {{action "sortBy" "last_login_at"}} id="sort-login-at">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.last_login_from"}}
         <span role="button" {{action "sortBy" "last_login_from"}} id="sort-login-from">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>
         {{t "admin.users.index.auth"}} {{t "admin.users.index.provider_uid"}}
         <span role="button" {{action "sortBy" "auth"}} id="sort-auth">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th width="200">
         {{t "admin.users.index.role"}}
         <span role="button" {{action "sortBy" "role"}} id="sort-role">
-          <img class="icon-big-button float-right" src="/assets/images/angle-down-blue.svg" alt="v">
+          <img class="icon-big-button float-end" src="/assets/images/angle-down-blue.svg" alt="v">
         </span>
       </th>
       <th>{{t "admin.users.index.action"}}</th>

frontend/app/templates/components/encryptable/card-show.hbs

@@ -11,7 +11,7 @@
           </div>
         </div>
         <div class="col-auto">
-          <img class="img d-inline w-30 float-left icon-big-button" src="/assets/images/key.svg" alt="key">
+          <img class="img d-inline w-30 float-start icon-big-button" src="/assets/images/key.svg" alt="key">
         </div>
       </div>
     </div>
@@ -22,12 +22,12 @@
 {{else}}
   <div class="card encryptable-card encryptable-detail">
     <div role="button" class="card-header" {{on "click" this.swapToPreview}}>
-      <img class="img d-inline mr-2 icon-button" src="/assets/images/key.svg" alt="key">
+      <img class="img d-inline me-2 icon-button" src="/assets/images/key.svg" alt="key">
       <p class="d-inline">{{@encryptable.name}}</p>
     </div>
     <div class="card-body">
       <div class="row mb-2">
-        <div class="col-sm-8 pr-0">
+        <div class="col-sm-8 pe-0">
           <Input class="d-inline form-control" disabled="true" @value={{@encryptable.cleartextUsername}} />
         </div>
         <div class="col-sm-3">
@@ -37,7 +37,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-8 pr-0">
+        <div class="col-sm-8 pe-0">
           <div class="password-wrapper">
             <Input class="d-inline form-control" disabled="true" @value={{@encryptable.cleartextPassword}} />
             <div role="button" class="show-password-link show-password-link-sm {{if this.isPasswordVisible "visibility-hidden"}}" {{on "click" this.showPassword}} href="#">{{t "encryptable/credentials.show.show_password"}}</div>