diff --git a/frontend/app/components/encryptable/form.js b/frontend/app/components/encryptable/form.js index 9cbc6c522..7ebed8881 100644 --- a/frontend/app/components/encryptable/form.js +++ b/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 diff --git a/frontend/app/styles/app.scss b/frontend/app/styles/app.scss index 74f20ffef..0ae79a4be 100644 --- a/frontend/app/styles/app.scss +++ b/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; + } +} diff --git a/frontend/app/styles/custom-bootstrap.scss b/frontend/app/styles/custom-bootstrap.scss new file mode 100644 index 000000000..78f2e1cb3 --- /dev/null +++ b/frontend/app/styles/custom-bootstrap.scss @@ -0,0 +1,2 @@ +$btn-color: #ff0000; +$btn-color: #ff0000 diff --git a/frontend/app/styles/encryptable-form.scss b/frontend/app/styles/encryptable-form.scss index 3619d5735..1188caabc 100644 --- a/frontend/app/styles/encryptable-form.scss +++ b/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 { diff --git a/frontend/app/styles/nav-bar.scss b/frontend/app/styles/nav-bar.scss index 914fb3e0e..a9223c208 100644 --- a/frontend/app/styles/nav-bar.scss +++ b/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; diff --git a/frontend/app/styles/password-strength-meter.scss b/frontend/app/styles/password-strength-meter.scss index 790e2e2ad..797979a86 100644 --- a/frontend/app/styles/password-strength-meter.scss +++ b/frontend/app/styles/password-strength-meter.scss @@ -24,3 +24,6 @@ width: 100% !important; background-color: #4dd100 !important; } +.progress-height{ + height: 0.3rem; +} diff --git a/frontend/app/styles/side-nav-bar.scss b/frontend/app/styles/side-nav-bar.scss index 3bcff55bf..5acd69d76 100644 --- a/frontend/app/styles/side-nav-bar.scss +++ b/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,7 +188,6 @@ border-bottom-right-radius: 0; border-color: rgba(167, 167, 167, 0.44) !important; } - } @media screen and (min-width: 992px) { @@ -197,7 +195,7 @@ background-color: #ffffff; } - .toggle-button.active { + .toggle-button-active { background-color: #fff !important; border-color: #238BCA !important; } diff --git a/frontend/app/templates/components/admin/user/table.hbs b/frontend/app/templates/components/admin/user/table.hbs index 9f59da2b9..76d68017f 100644 --- a/frontend/app/templates/components/admin/user/table.hbs +++ b/frontend/app/templates/components/admin/user/table.hbs @@ -4,37 +4,37 @@ {{t "admin.users.index.username"}} - v + v {{t "admin.users.index.name"}} - v + v {{t "admin.users.index.last_login_at"}} - v + v {{t "admin.users.index.last_login_from"}} - v + v {{t "admin.users.index.auth"}} {{t "admin.users.index.provider_uid"}} - v + v {{t "admin.users.index.role"}} - v + v {{t "admin.users.index.action"}} diff --git a/frontend/app/templates/components/encryptable/card-show.hbs b/frontend/app/templates/components/encryptable/card-show.hbs index e8b4ee02a..3db78605d 100644 --- a/frontend/app/templates/components/encryptable/card-show.hbs +++ b/frontend/app/templates/components/encryptable/card-show.hbs @@ -11,7 +11,7 @@
- key + key
@@ -22,12 +22,12 @@ {{else}}
- key + key

{{@encryptable.name}}

-
+
@@ -37,7 +37,7 @@
-
+
{{t "encryptable/credentials.show.show_password"}}
diff --git a/frontend/app/templates/components/encryptable/form.hbs b/frontend/app/templates/components/encryptable/form.hbs index d8fecb68e..2408ef8e6 100644 --- a/frontend/app/templates/components/encryptable/form.hbs +++ b/frontend/app/templates/components/encryptable/form.hbs @@ -82,36 +82,41 @@
{{#each this.activeFields as |attribute|}} -
+
{{#if (eq attribute "customAttr")}} -
- -
- - +
+ +
+ + {{!-- Bind Popper to modal with viewportSelector, more information: https://www.ember-bootstrap.com/api/classes/Components.Tooltip.html#property_viewportPadding--}} - + not encrypted value -
- +
+

{{/if}}
+ (validation-error-key (get (get this.changeset.error (concat "cleartext" (capitalize attribute))) "validation"))}} + as |el|>
{{!-- Bind Popper to modal with viewportSelector, more information: https://www.ember-bootstrap.com/api/classes/Components.Tooltip.html#property_viewportPadding--}} - + encrypted value @@ -119,18 +124,61 @@
{{#if (eq attribute "password")}} +
-
- + + + + + {{t "encryptable/credentials.edit.password_generator"}} + +
+ {{#if this.isGenExpanded}} + + {{else}} + + {{/if}} +
+ + + +
+
+ + {{t "encryptable/credentials.form.passwordLength"}} + + + + +
+ +
+ {{t "encryptable/credentials.form.symbols"}} + +
+ +
+ + + +
{{/if}}
{{/each}} @@ -166,4 +214,4 @@ -{{/if}} \ No newline at end of file +{{/if}} diff --git a/frontend/app/templates/components/encryptable/row.hbs b/frontend/app/templates/components/encryptable/row.hbs index 96e5bb6ea..6e6c816d9 100644 --- a/frontend/app/templates/components/encryptable/row.hbs +++ b/frontend/app/templates/components/encryptable/row.hbs @@ -116,4 +116,4 @@
{{/if}} -{{/if}} \ No newline at end of file +{{/if}} diff --git a/frontend/app/templates/components/encryptable/show.hbs b/frontend/app/templates/components/encryptable/show.hbs index a29c8786f..2cb1c4e1c 100644 --- a/frontend/app/templates/components/encryptable/show.hbs +++ b/frontend/app/templates/components/encryptable/show.hbs @@ -8,7 +8,7 @@ {{/if}} {{#if this.isFile}} -
+
@@ -57,7 +57,7 @@
{{else}} -
+
diff --git a/frontend/app/templates/components/folder/show.hbs b/frontend/app/templates/components/folder/show.hbs index fa92aac35..d65e65800 100644 --- a/frontend/app/templates/components/folder/show.hbs +++ b/frontend/app/templates/components/folder/show.hbs @@ -4,9 +4,9 @@ {{#if this.isNewEncryptable}} {{/if}} -
+
-
+
@@ -28,12 +28,12 @@ {{/unless}}
-
+
{{#if this.isExpanded}} - v + v {{else}} - < + < {{/if}}
diff --git a/frontend/app/templates/components/password-strength-meter.hbs b/frontend/app/templates/components/password-strength-meter.hbs index 7a2db2c4b..633c9a0fa 100644 --- a/frontend/app/templates/components/password-strength-meter.hbs +++ b/frontend/app/templates/components/password-strength-meter.hbs @@ -1,5 +1,5 @@ -{{#if this.password}}{{t "encryptable/credentials.edit.password_strength"}} : {{/if}} {{if this.scoreRanking (t (concat "encryptable/credentials.edit.password_strengths." this.scoreRanking))}}
+{{#if this.password}}{{t "encryptable/credentials.edit.password_strength"}} : {{/if}} {{if this.scoreRanking (t (concat "encryptable/credentials.edit.password_strengths." this.scoreRanking))}} diff --git a/frontend/app/templates/components/side-nav-bar.hbs b/frontend/app/templates/components/side-nav-bar.hbs index f0179c061..94e7ef809 100644 --- a/frontend/app/templates/components/side-nav-bar.hbs +++ b/frontend/app/templates/components/side-nav-bar.hbs @@ -3,16 +3,23 @@