Consolidate zxcvbn progress bars into a component and add dynamic colour

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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";

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;
-    }
 }

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;
+    }
+}

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 {
                 </div>;
             }
             strengthMeter = <div>
-                <progress max={PASSWORD_MIN_SCORE} value={this.state.zxcvbnResult.score} />
+                <ZxcvbnProgressBar value={this.state.zxcvbnResult.score} />
             </div>;
         }
 

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 {
                 </div>;
             }
             strengthMeter = <div>
-                <progress max={PASSWORD_MIN_SCORE} value={this.state.zxcvbnResult.score} />
+                <ZxcvbnProgressBar value={this.state.zxcvbnResult.score} />
             </div>;
         }
 

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 <progress
+            return <ZxcvbnProgressBar value={score} className="mx_AuthBody_passwordScore" />;
-                className="mx_AuthBody_passwordScore"
-                max={PASSWORD_MIN_SCORE}
-                value={score}
-            />;
         },
         rules: [
             {

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<IProps> = ({value, className}) => {
+    const classes = classNames("mx_ZxcvbnProgressBar", className);
+    return <progress className={classes} max={4} value={value} />;
+};
+
+export default ZxcvbnProgressBar;