diff --git a/package.json b/package.json index 92d228a812..797b57d306 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ "@types/classnames": "^2.2.10", "@types/modernizr": "^3.5.3", "@types/react": "16.9", + "@types/zxcvbn": "^4.4.0", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", "chokidar": "^3.3.1", diff --git a/res/css/_components.scss b/res/css/_components.scss index 671e156585..b871045fa1 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -41,6 +41,7 @@ @import "./views/auth/_CountryDropdown.scss"; @import "./views/auth/_InteractiveAuthEntryComponents.scss"; @import "./views/auth/_LanguageSelector.scss"; +@import "./views/auth/_PassphraseField.scss"; @import "./views/auth/_ServerConfig.scss"; @import "./views/auth/_ServerTypeSelector.scss"; @import "./views/auth/_Welcome.scss"; diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index f4967ce202..120da4c4f1 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -146,9 +146,3 @@ limitations under the License. .mx_AuthBody_spinner { margin: 1em 0; } - -.mx_AuthBody_passwordScore { - height: 4px; - position: absolute; - top: -12px; -} diff --git a/res/css/views/elements/_ZxcvbnProgressBar.scss b/res/css/views/auth/_PassphraseField.scss similarity index 92% rename from res/css/views/elements/_ZxcvbnProgressBar.scss rename to res/css/views/auth/_PassphraseField.scss index f7786348db..d810198213 100644 --- a/res/css/views/elements/_ZxcvbnProgressBar.scss +++ b/res/css/views/auth/_PassphraseField.scss @@ -18,6 +18,8 @@ $PassphraseStrengthHigh: $accent-color; $PassphraseStrengthMedium: $username-variant5-color; $PassphraseStrengthLow: $notice-primary-color; +.mx_PassphraseField {} + @define-mixin ProgressBarColour $colour { color: $colour; &::-moz-progress-bar { @@ -28,10 +30,13 @@ $PassphraseStrengthLow: $notice-primary-color; } } -progress.mx_ZxcvbnProgressBar { +progress.mx_PassphraseField_progress { appearance: none; width: 100%; border: 0; + height: 4px; + position: absolute; + top: -12px; border-radius: 2px; &::-moz-progress-bar { diff --git a/src/components/views/auth/PassphraseField.tsx b/src/components/views/auth/PassphraseField.tsx new file mode 100644 index 0000000000..425921cd7c --- /dev/null +++ b/src/components/views/auth/PassphraseField.tsx @@ -0,0 +1,121 @@ +/* +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, {PureComponent, RefCallback, RefObject} from "react"; +import classNames from "classnames"; +import zxcvbn from "zxcvbn"; + +import SdkConfig from "../../../SdkConfig"; +import withValidation, {IFieldState, IValidationResult} from "../elements/Validation"; +import {_t, _td} from "../../../languageHandler"; +import Field from "../elements/Field"; + +interface IProps { + id?: string; + className?: string; + minScore: 0 | 1 | 2 | 3 | 4; + value: string; + fieldRef: RefCallback | RefObject; + + label?: string; + labelEnterPassword?: string; + labelStrongPassword?: string; + labelAllowedButUnsafe?: string; + + onChange(ev: KeyboardEvent); + onValidate(result: IValidationResult); +} + +interface IState { + complexity: zxcvbn.ZXCVBNResult; +} + +class PassphraseField extends PureComponent { + static defaultProps = { + label: _td("Password"), + labelEnterPassword: _td("Enter password"), + labelStrongPassword: _td("Nice, strong password!"), + labelAllowedButUnsafe: _td("Password is allowed, but unsafe"), + }; + + public readonly validate = withValidation({ + description: function() { + const complexity = this.state.complexity; + const score = complexity ? complexity.score : 0; + return ; + }, + rules: [ + { + key: "required", + test: ({ value, allowEmpty }) => allowEmpty || !!value, + invalid: () => _t(this.props.labelEnterPassword), + }, + { + key: "complexity", + test: async function({ value }) { + if (!value) { + return false; + } + const { scorePassword } = await import('../../../utils/PasswordScorer'); + const complexity = scorePassword(value); + this.setState({ complexity }); + const safe = complexity.score >= this.props.minScore; + const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"]; + return allowUnsafe || safe; + }, + valid: function() { + // Unsafe passwords that are valid are only possible through a + // configuration flag. We'll print some helper text to signal + // to the user that their password is allowed, but unsafe. + if (this.state.complexity.score >= this.props.minScore) { + return _t(this.props.labelStrongPassword); + } + return _t(this.props.labelAllowedButUnsafe); + }, + invalid: function() { + const complexity = this.state.complexity; + if (!complexity) { + return null; + } + const { feedback } = complexity; + return feedback.warning || feedback.suggestions[0] || _t("Keep going..."); + }, + }, + ], + }); + + onValidate = async (fieldState: IFieldState) => { + const result = await this.validate(fieldState); + this.props.onValidate(result); + return result; + }; + + render() { + return + } +} + +export default PassphraseField; diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js index 4e2860c0cf..7bbd15d8d3 100644 --- a/src/components/views/auth/RegistrationForm.js +++ b/src/components/views/auth/RegistrationForm.js @@ -29,7 +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"; +import PassphraseField from "./PassphraseField"; const FIELD_EMAIL = 'field_email'; const FIELD_PHONE_NUMBER = 'field_phone_number'; @@ -264,60 +264,10 @@ export default createReactClass({ }); }, - async onPasswordValidate(fieldState) { - const result = await this.validatePasswordRules(fieldState); + onPasswordValidate(result) { this.markFieldValid(FIELD_PASSWORD, result.valid); - return result; }, - validatePasswordRules: withValidation({ - description: function() { - const complexity = this.state.passwordComplexity; - const score = complexity ? complexity.score : 0; - return ; - }, - rules: [ - { - key: "required", - test: ({ value, allowEmpty }) => allowEmpty || !!value, - invalid: () => _t("Enter password"), - }, - { - key: "complexity", - test: async function({ value }) { - if (!value) { - return false; - } - const { scorePassword } = await import('../../../utils/PasswordScorer'); - const complexity = scorePassword(value); - this.setState({ - passwordComplexity: complexity, - }); - const safe = complexity.score >= PASSWORD_MIN_SCORE; - const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"]; - return allowUnsafe || safe; - }, - valid: function() { - // Unsafe passwords that are valid are only possible through a - // configuration flag. We'll print some helper text to signal - // to the user that their password is allowed, but unsafe. - if (this.state.passwordComplexity.score >= PASSWORD_MIN_SCORE) { - return _t("Nice, strong password!"); - } - return _t("Password is allowed, but unsafe"); - }, - invalid: function() { - const complexity = this.state.passwordComplexity; - if (!complexity) { - return null; - } - const { feedback } = complexity; - return feedback.warning || feedback.suggestions[0] || _t("Keep going..."); - }, - }, - ], - }), - onPasswordConfirmChange(ev) { this.setState({ passwordConfirm: ev.target.value, @@ -479,13 +429,10 @@ export default createReactClass({ }, renderPassword() { - const Field = sdk.getComponent('elements.Field'); - return this[FIELD_PASSWORD] = field} - type="password" - autoComplete="new-password" - label={_t("Password")} + fieldRef={field => this[FIELD_PASSWORD] = field} + minScore={PASSWORD_MIN_SCORE} value={this.state.password} onChange={this.onPasswordChange} onValidate={this.onPasswordValidate} diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index 09d6ec12f7..50544c9f51 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.tsx @@ -19,7 +19,7 @@ limitations under the License. import React from "react"; import classNames from "classnames"; -type Data = Pick; +type Data = Pick; interface IRule { key: string; @@ -32,15 +32,20 @@ interface IRule { interface IArgs { rules: IRule[]; - description(): React.ReactChild; + description(this: T): React.ReactChild; } -interface IValidateArgs { +export interface IFieldState { value: string; focused: boolean; allowEmpty: boolean; } +export interface IValidationResult { + valid?: boolean; + feedback?: React.ReactChild; +} + /** * Creates a validation function from a set of rules describing what to validate. * Generic T is the "this" type passed to the rule methods @@ -62,7 +67,7 @@ interface IValidateArgs { * the overall validity and a feedback UI that can be rendered for more detail. */ export default function withValidation({ description, rules }: IArgs) { - return async function onValidate({ value, focused, allowEmpty = true }: IValidateArgs) { + return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise { if (!value && allowEmpty) { return { valid: null, diff --git a/yarn.lock b/yarn.lock index 520e976b17..b2c703c0d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1318,6 +1318,11 @@ dependencies: "@types/yargs-parser" "*" +"@types/zxcvbn@^4.4.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/zxcvbn/-/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609" + integrity sha512-GQLOT+SN20a+AI51y3fAimhyTF4Y0RG+YP3gf91OibIZ7CJmPFgoZi+ZR5a+vRbS01LbQosITWum4ATmJ1Z6Pg== + "@typescript-eslint/experimental-utils@^2.5.0": version "2.27.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.27.0.tgz#801a952c10b58e486c9a0b36cf21e2aab1e9e01a"