From 6f62b59ecc565e460098f0d46295b07725a1164a Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Wed, 28 Jun 2023 22:26:03 +0300 Subject: [PATCH 01/15] in progress --- src/pages/settings/PasswordPage.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js index ab352851c76b..48ad18ac529c 100755 --- a/src/pages/settings/PasswordPage.js +++ b/src/pages/settings/PasswordPage.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {useState} from 'react'; import {View, ScrollView} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -43,12 +43,21 @@ const propTypes = { const defaultProps = { account: {}, }; -class PasswordPage extends Component { - constructor(props) { - super(props); - this.state = { - currentPassword: '', +function PasswordPage(props) { + const [currentPassword, setCurrentPassword] = useState('') + const [newPassword, setNewPassword] = useState(''), + const [errors, setErrors] = ({ + + }) + +} +// class PasswordPage extends Component { + // constructor(props) { + // super(props); + + // this.state = { + // currentPassword: '', newPassword: '', errors: { currentPassword: false, From d18d3656dc894b567fb60237d5a31c5a9f243c0c Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Thu, 29 Jun 2023 17:02:33 +0300 Subject: [PATCH 02/15] in progress --- src/pages/settings/PasswordPage.js | 101 ++++++++++++++++++++--------- 1 file changed, 70 insertions(+), 31 deletions(-) diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js index 48ad18ac529c..1f99b65550a8 100755 --- a/src/pages/settings/PasswordPage.js +++ b/src/pages/settings/PasswordPage.js @@ -45,11 +45,50 @@ const defaultProps = { }; function PasswordPage(props) { - const [currentPassword, setCurrentPassword] = useState('') - const [newPassword, setNewPassword] = useState(''), - const [errors, setErrors] = ({ + const [currentPassword, setCurrentPassword] = useState(''); + const [newPassword, setNewPassword] = useState(''); + const [errors, setErrors] = useState({ + currentPassword: false, + newPassword: false, + newPasswordSameAsOld: false, + }); + + errorKeysMap = { + currentPassword: 'passwordPage.errors.currentPassword', + newPasswordSameAsOld: 'passwordPage.errors.newPasswordSameAsOld', + newPassword: 'passwordPage.errors.newPassword', + } + + useEffect(() => { + return () => { + Session.clearAccountMessages(); + } + }, []) + + /** + * @param {String} field + * @returns {String} + */ + const getErrorText = (field) => { + return errors[field] ? errorKeysMap[field] : '' + } + + /** + * @param {String} field + * @param {String} value + * @param {String[]} additionalErrorsToClear + */ + const clearErrorAndSetValue = (field, value, additionalErrorsToClear) => { + const errorsToReset = { + [field]: false + } + if (additionalErrorsToClear) { + _.each(additionalErrorsToClear, (errorFlag) => { + errorsToReset[errorFlag] = false; + }); + } - }) + } } // class PasswordPage extends Component { @@ -58,37 +97,37 @@ function PasswordPage(props) { // this.state = { // currentPassword: '', - newPassword: '', - errors: { - currentPassword: false, - newPassword: false, - newPasswordSameAsOld: false, - }, - }; + // newPassword: '', + // errors: { + // currentPassword: false, + // newPassword: false, + // newPasswordSameAsOld: false, + // }, + // }; - this.submit = this.submit.bind(this); - this.getErrorText = this.getErrorText.bind(this); - this.validate = this.validate.bind(this); - this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this); + // this.submit = this.submit.bind(this); + // this.getErrorText = this.getErrorText.bind(this); + // this.validate = this.validate.bind(this); + // this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this); - this.errorKeysMap = { - currentPassword: 'passwordPage.errors.currentPassword', - newPasswordSameAsOld: 'passwordPage.errors.newPasswordSameAsOld', - newPassword: 'passwordPage.errors.newPassword', - }; - } + // this.errorKeysMap = { + // currentPassword: 'passwordPage.errors.currentPassword', + // newPasswordSameAsOld: 'passwordPage.errors.newPasswordSameAsOld', + // newPassword: 'passwordPage.errors.newPassword', + // }; + // } - componentWillUnmount() { - Session.clearAccountMessages(); - } + // componentWillUnmount() { + // Session.clearAccountMessages(); + // } - /** - * @param {String} field - * @returns {String} - */ - getErrorText(field) { - return this.state.errors[field] ? this.errorKeysMap[field] : ''; - } + // /** + // * @param {String} field + // * @returns {String} + // */ + // getErrorText(field) { + // return this.state.errors[field] ? this.errorKeysMap[field] : ''; + // } /** * @param {String} field From 2661e38ee053acd9cc51db8a9c7cc8f42ae79cb7 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Thu, 29 Jun 2023 19:41:17 +0300 Subject: [PATCH 03/15] almost finished --- src/pages/settings/PasswordPage.js | 399 +++++++++++++++++++---------- 1 file changed, 265 insertions(+), 134 deletions(-) diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js index 1f99b65550a8..d18dff3d71fe 100755 --- a/src/pages/settings/PasswordPage.js +++ b/src/pages/settings/PasswordPage.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useState, useEffect, useRef, useCallback} from 'react'; import {View, ScrollView} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -44,20 +44,28 @@ const defaultProps = { account: {}, }; +const errorKeysMap = { + currentPassword: 'passwordPage.errors.currentPassword', + newPasswordSameAsOld: 'passwordPage.errors.newPasswordSameAsOld', + newPassword: 'passwordPage.errors.newPassword', +} + function PasswordPage(props) { - const [currentPassword, setCurrentPassword] = useState(''); - const [newPassword, setNewPassword] = useState(''); + const [password, setPassword] = useState({ + currentPassword: '', + newPassword: '' + }) + // const [currentPassword, setCurrentPassword] = useState(''); + // const [newPassword, setNewPassword] = useState(''); const [errors, setErrors] = useState({ currentPassword: false, newPassword: false, newPasswordSameAsOld: false, }); - errorKeysMap = { - currentPassword: 'passwordPage.errors.currentPassword', - newPasswordSameAsOld: 'passwordPage.errors.newPasswordSameAsOld', - newPassword: 'passwordPage.errors.newPassword', - } + // console.log('values ', password); + + let currentPasswordInputRef = useRef(); useEffect(() => { return () => { @@ -87,9 +95,132 @@ function PasswordPage(props) { errorsToReset[errorFlag] = false; }); } + setPassword((prev) => { + return { ...prev, [field]: value} + }) + setErrors((prev) => { + return { ...prev, ...errorsToReset} + }) + } + + /** + * @returns {Boolean} + */ + const validate = useCallback(() => { + const errors = {} + console.log('validating'); + + if (!password.currentPassword) { + errors.currentPassword = true; + } + + if (!password.newPassword || !ValidationUtils.isValidPassword(password.newPassword)) { + errors.newPassword = true; + } + + if (password.currentPassword && password.newPassword && _.isEqual(password.currentPassword, password.newPassword)) { + errors.newPasswordSameAsOld = true; + } + console.log('validating234'); + + setErrors({errors}); + return _.size(errors) === 0; + }, [password, errors]) + + /** + * Submit the form + */ + const submit = () => { + if (!validate()) { + return; + } + User.updatePassword(password.currentPassword, password.newPassword); } + const shouldShowNewPasswordPrompt = !errors.newPassword && !errors.newPasswordSameAsOld; + return ( + { + if (!currentPasswordInputRef) { + return; + } + + currentPasswordInputRef.focus(); + }} + > + Navigation.goBack(ROUTES.SETTINGS_SECURITY)} + /> + {!_.isEmpty(props.account.success) ? ( + + ) : ( + <> + + {props.translate('passwordPage.changingYourPasswordPrompt')} + + (currentPasswordInputRef = el)} + secureTextEntry + autoCompleteType="password" + textContentType="password" + value={password.currentPassword} + onChangeText={(text) => clearErrorAndSetValue('currentPassword', text)} + returnKeyType="done" + hasError={errors.currentPassword} + errorText={getErrorText('currentPassword')} + onSubmitEditing={submit} + /> + + + clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])} + onSubmitEditing={submit} + /> + {shouldShowNewPasswordPrompt && {props.translate('passwordPage.newPasswordPrompt')}} + + {_.every(errors, (error) => !error) && !_.isEmpty(props.account.errors) && ( + + )} + + +