From 09a4af49f35f750ecb66021e35c0540ec227d018 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 14 May 2020 18:49:55 +0100 Subject: [PATCH] Consolidate zxcvbn progress bars into a component and add dynamic colour Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_components.scss | 1 + res/css/views/auth/_AuthBody.scss | 18 ------- .../views/elements/_ZxcvbnProgressBar.scss | 52 +++++++++++++++++++ .../keybackup/CreateKeyBackupDialog.js | 3 +- .../CreateSecretStorageDialog.js | 3 +- src/components/views/auth/RegistrationForm.js | 7 +-- .../views/elements/ZxcvbnProgressBar.tsx | 30 +++++++++++ 7 files changed, 89 insertions(+), 25 deletions(-) create mode 100644 res/css/views/elements/_ZxcvbnProgressBar.scss create mode 100644 src/components/views/elements/ZxcvbnProgressBar.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 428a28ac3a..671e156585 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -120,6 +120,7 @@ @import "./views/elements/_Tooltip.scss"; @import "./views/elements/_TooltipButton.scss"; @import "./views/elements/_Validation.scss"; +@import "./views/elements/_ZxcvbnProgressBar.scss"; @import "./views/emojipicker/_EmojiPicker.scss"; @import "./views/globals/_MatrixToolbar.scss"; @import "./views/groups/_GroupPublicityToggle.scss"; diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 4b2d6b1bf1..f4967ce202 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -148,25 +148,7 @@ limitations under the License. } .mx_AuthBody_passwordScore { - width: 100%; - appearance: none; height: 4px; - border: 0; - border-radius: 2px; position: absolute; top: -12px; - - &::-moz-progress-bar { - border-radius: 2px; - background-color: $accent-color; - } - - &::-webkit-progress-bar, - &::-webkit-progress-value { - border-radius: 2px; - } - - &::-webkit-progress-value { - background-color: $accent-color; - } } diff --git a/res/css/views/elements/_ZxcvbnProgressBar.scss b/res/css/views/elements/_ZxcvbnProgressBar.scss new file mode 100644 index 0000000000..f7786348db --- /dev/null +++ b/res/css/views/elements/_ZxcvbnProgressBar.scss @@ -0,0 +1,52 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +$PassphraseStrengthHigh: $accent-color; +$PassphraseStrengthMedium: $username-variant5-color; +$PassphraseStrengthLow: $notice-primary-color; + +@define-mixin ProgressBarColour $colour { + color: $colour; + &::-moz-progress-bar { + background-color: $colour; + } + &::-webkit-progress-value { + background-color: $colour; + } +} + +progress.mx_ZxcvbnProgressBar { + appearance: none; + width: 100%; + border: 0; + + border-radius: 2px; + &::-moz-progress-bar { + border-radius: 2px; + } + &::-webkit-progress-bar, + &::-webkit-progress-value { + border-radius: 2px; + } + + @mixin ProgressBarColour $PassphraseStrengthLow; + &[value="2"], &[value="3"] { + @mixin ProgressBarColour $PassphraseStrengthMedium; + } + &[value="4"] { + @mixin ProgressBarColour $PassphraseStrengthHigh; + } +} diff --git a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js index e4e39400f6..df2a81263d 100644 --- a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js +++ b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js @@ -26,6 +26,7 @@ import { accessSecretStorage } from '../../../../CrossSigningManager'; import SettingsStore from '../../../../settings/SettingsStore'; import AccessibleButton from "../../../../components/views/elements/AccessibleButton"; import {copyNode} from "../../../../utils/strings"; +import ZxcvbnProgressBar from "../../../../components/views/elements/ZxcvbnProgressBar"; const PHASE_PASSPHRASE = 0; const PHASE_PASSPHRASE_CONFIRM = 1; @@ -276,7 +277,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent { ; } strengthMeter =
- +
; } diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js index c24623e30e..4c1faa3e6a 100644 --- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js +++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js @@ -26,6 +26,7 @@ import Modal from '../../../../Modal'; import { promptForBackupPassphrase } from '../../../../CrossSigningManager'; import {copyNode} from "../../../../utils/strings"; import {SSOAuthEntry} from "../../../../components/views/auth/InteractiveAuthEntryComponents"; +import ZxcvbnProgressBar from "../../../../components/views/elements/ZxcvbnProgressBar"; const PHASE_LOADING = 0; const PHASE_LOADERROR = 1; @@ -529,7 +530,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { ; } strengthMeter =
- +
; } diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js index 2a79bb8588..663e30d44d 100644 --- a/src/components/views/auth/RegistrationForm.js +++ b/src/components/views/auth/RegistrationForm.js @@ -29,6 +29,7 @@ import SdkConfig from '../../../SdkConfig'; import { SAFE_LOCALPART_REGEX } from '../../../Registration'; import withValidation from '../elements/Validation'; import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils"; +import ZxcvbnProgressBar from "../elements/ZxcvbnProgressBar"; const FIELD_EMAIL = 'field_email'; const FIELD_PHONE_NUMBER = 'field_phone_number'; @@ -274,11 +275,7 @@ export default createReactClass({ description: function() { const complexity = this.state.passwordComplexity; const score = complexity ? complexity.score : 0; - return ; + return ; }, rules: [ { diff --git a/src/components/views/elements/ZxcvbnProgressBar.tsx b/src/components/views/elements/ZxcvbnProgressBar.tsx new file mode 100644 index 0000000000..339149b400 --- /dev/null +++ b/src/components/views/elements/ZxcvbnProgressBar.tsx @@ -0,0 +1,30 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import classNames from "classnames"; + +interface IProps { + value: 0 | 1 | 2 | 3 | 4; + className?: string; +} + +const ZxcvbnProgressBar: React.FC = ({value, className}) => { + const classes = classNames("mx_ZxcvbnProgressBar", className); + return ; +}; + +export default ZxcvbnProgressBar;