feat(2877): add reset password button in personal info page

public/images/success-icon.svg

@@ -0,0 +1,17 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_32505_286930)">
+<rect x="1" width="88" height="88" rx="44" fill="white"/>
+<path d="M39.8572 51.8614L30.7836 42.7878C30.1142 42.1183 29.0288 42.1183 28.3593 42.7878C27.6898 43.4573 27.6898 44.5427 28.3593 45.2122L38.645 55.4979C39.3145 56.1674 40.3999 56.1674 41.0694 55.4979L61.6408 34.9265C62.3103 34.257 62.3103 33.1716 61.6408 32.5021C60.9713 31.8326 59.8859 31.8326 59.2164 32.5021L39.8572 51.8614Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_d_32505_286930" x="0" y="0" width="90" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_32505_286930"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_32505_286930" result="shape"/>
+</filter>
+</defs>
+</svg>

src/features/AuthServiceApp/components/ChangePassword/hooks.tsx

@@ -15,6 +15,7 @@ export const useChangePasswordForm = () => {
   const { client_id } = useParamsUrl()
   const history = useHistory()
   const [error, setError] = useState('')
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
   const [isFetching, setIsFetching] = useState(false)
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
@@ -29,13 +30,17 @@ export const useChangePasswordForm = () => {
       await changePassword(client_id, password)
       setError('')
       setIsFetching(false)
-      history.push(`/authorize?client_id=${client_id}`)
+      setModalOpen(true)
     } catch (err) {
       setError(String(err))
       setIsFetching(false)
     }
   }
 
+  const modalButtonClick = () => {
+    history.push(`/authorize?client_id=${client_id}`)
+  }
+
   const onPasswordChange = ({
     target: { value },
   }: ChangeEvent<HTMLInputElement>) => {
@@ -75,6 +80,8 @@ export const useChangePasswordForm = () => {
     handleSubmit,
     isFetching,
     isSubmitDisabled,
+    modalButtonClick,
+    modalOpen,
     onConfirmPasswordChange,
     onPasswordChange,
     password,

src/features/AuthServiceApp/components/ChangePassword/index.tsx

@@ -13,6 +13,12 @@ import {
   Form,
   ButtonSolid,
   Error,
+  ChangePasswordModalWrapper,
+  ChangePasswordModal,
+  ChangePasswordModalIcon,
+  ChangePasswordModalTitle,
+  ChangePasswordModalText,
+  ChangePasswordModalButton,
 } from '../../styled'
 
 const ChangePassword = () => {
@@ -23,6 +29,8 @@ const ChangePassword = () => {
     handleSubmit,
     isFetching,
     isSubmitDisabled,
+    modalButtonClick,
+    modalOpen,
     onConfirmPasswordChange,
     onPasswordChange,
     password,
@@ -30,6 +38,22 @@ const ChangePassword = () => {
 
   return (
     <CenterBlock>
+      {modalOpen && (
+        <ChangePasswordModalWrapper>
+          <ChangePasswordModal>
+            <ChangePasswordModalIcon src='images/success-icon.svg' />
+            <ChangePasswordModalTitle>
+              <T9n t='password_changed_success' />
+            </ChangePasswordModalTitle>
+            <ChangePasswordModalText>
+              <T9n t='use_new_password' />
+            </ChangePasswordModalText>
+            <ChangePasswordModalButton onClick={modalButtonClick}>
+              <T9n t='ok' />
+            </ChangePasswordModalButton>
+          </ChangePasswordModal>
+        </ChangePasswordModalWrapper>
+      )}
       <Logo />
       <Form
         onSubmit={handleSubmit}

src/features/AuthServiceApp/config/lexics.tsx

@@ -31,7 +31,9 @@ export const lexics = {
   i_accept: 15737,
   i_agree: 15430,
   login: 13404,
+  ok: 724,
   or_continue_with: 15118,
+  password_changed_success: 17824,
   password_new: 15056,
   password_repeat: 15057,
   privacy_policy_and_statement: 15404,
@@ -51,4 +53,5 @@ export const lexics = {
   terms_and_conditions: 15738,
   to_email: 15904,
   updated_terms: 15429,
+  use_new_password: 17825,
 }

src/features/AuthServiceApp/styled.tsx

@@ -158,3 +158,68 @@ export const ScLoaderWrapper = styled.span`
   justify-content: center;
   align-items: center;
 `
+
+export const ChangePasswordModalWrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+`
+
+export const ChangePasswordModal = styled.div`
+  font-family: 'Montserrat',sans-serif;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background: #333333;
+  border-radius: 5px;
+  font-weight: 700;
+  height: 414px;
+  display: flex;
+  width: 577px;
+  margin: auto;
+  z-index: 1;
+
+  ${isMobileDevice ? css`
+    width: 90%;
+    padding: 20px;
+  ` : ''};
+`
+
+export const ChangePasswordModalIcon = styled.img`
+  margin-bottom: 20px;
+`
+
+export const ChangePasswordModalTitle = styled.div`
+  margin-bottom: 20px;
+  text-align: center;
+  line-height: 34px;
+  font-weight: 700;
+  font-size: 24px;
+  color: white;
+
+  ${isMobileDevice ? css`
+    font-size: 20px;
+  ` : ''};
+`
+
+export const ChangePasswordModalText = styled.div`
+  margin-bottom: 30px;
+  text-align: center;
+  line-height: 28px;
+  font-weight: 400;
+  font-size: 20px;
+  color: white;
+
+  ${isMobileDevice ? css`
+    font-size: 16px;
+  ` : ''};
+`
+
+export const ChangePasswordModalButton = styled(ButtonSolid)`
+  width: fit-content;
+  padding: 0 50px;
+  cursor: pointer;
+`

src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx

@@ -5,12 +5,15 @@ import find from 'lodash/find'
 import map from 'lodash/map'
 
 import { formIds } from 'config/form'
+import { AUTH_SERVICE } from 'config/routes'
 
 import { useForm } from 'features/FormStore'
 import { useLexicsStore } from 'features/LexicsStore'
 
 import { SaveUserInfo } from 'requests'
 
+import { readToken } from 'helpers/token'
+
 import { useUserInfoForm } from './useUserInfoForm'
 import { useValidateForm } from './useValidateForm'
 
@@ -32,6 +35,7 @@ export const useUserInfo = ({ loader, onSubmit }: Props) => {
     readFormValue,
     updateFormValue,
   } = useForm()
+  const token = readToken()
   const validateForm = useValidateForm()
   const { onPhoneBlur } = useUserInfoForm()
   const readTrimmedValue = useCallback(
@@ -101,6 +105,10 @@ export const useUserInfo = ({ loader, onSubmit }: Props) => {
     }
   }
 
+  const resetPassword = useCallback(() => {
+    window.location.href = `${AUTH_SERVICE}/change_password?token=${token}`
+  }, [token])
+
   return {
     handleSubmit,
     hasChanges,
@@ -111,6 +119,7 @@ export const useUserInfo = ({ loader, onSubmit }: Props) => {
     onPhoneBlur,
     readFormError,
     readFormValue,
+    resetPassword,
     updateFormValue,
   }
 }

src/features/UserAccount/components/PersonalInfoForm/index.tsx

@@ -14,7 +14,7 @@ import { ArrowLoader } from 'features/ArrowLoader'
 import type { Props } from './hooks/useUserInfo'
 import { useUserInfo } from './hooks/useUserInfo'
 
-import { SolidButton } from '../../styled'
+import { OutlineButton, SolidButton } from '../../styled'
 import {
   Form,
   ButtonWrapper,
@@ -43,6 +43,7 @@ export const PersonalInfoForm = (props: Props) => {
     onPhoneBlur,
     readFormError,
     readFormValue,
+    resetPassword,
     updateFormValue,
   } = useUserInfo(props)
 
@@ -121,6 +122,12 @@ export const PersonalInfoForm = (props: Props) => {
             <T9n t='save_changes' />
           </SolidButton>
         )}
+        <OutlineButton
+          type='button'
+          onClick={resetPassword}
+        >
+          <T9n t='change_password' />
+        </OutlineButton>
         <Error t={readFormError(formError) || ''} />
       </ButtonWrapper>
       <PrivacyWrapper>

src/features/UserAccount/components/PersonalInfoForm/styled.tsx

@@ -54,9 +54,12 @@ export const Form = styled.div`
 
 export const ButtonWrapper = styled.div`
   display: flex;
-  flex-direction: column;
   align-items: start;
   margin-top: 1.9rem;
+  
+  ${isMobileDevice ? css`
+    flex-direction: column;
+  ` : ''}
 `
 
 export const PrivacyPolicyLink = styled.a`

src/features/UserAccount/styled.tsx

@@ -19,6 +19,7 @@ export const SolidButton = styled(ButtonSolid)`
   border-radius: 5px;
   display: flex;
   align-items: center;
+  margin-right: 15px;
 
   @media ${devices.tablet} {
     height: 5rem;
@@ -34,6 +35,7 @@ export const SolidButton = styled(ButtonSolid)`
         display: flex;
         justify-content: center;
         width: 100%;
+        margin-bottom: 10px;
       }
       @media (orientation: landscape){
         width: auto;
@@ -44,26 +46,41 @@ export const SolidButton = styled(ButtonSolid)`
 
 export const OutlineButton = styled(ButtonOutline)`
   width: auto;
-  height: 50px;
-  padding: 0 20px;
+  height: 2.4rem;
+  padding: 0 0.94rem;
   color: white;
   font-weight: 600;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   border-color: #fff;
   border-radius: 5px;
-  font-size: 20px;
   display: flex;
   align-items: center;
 
-  @media ${devices.mobile} {
+  &:hover {
+    background: #FFFFFF;
+    border: 1px solid #FFFFFF;
+    color: #000000;
+  }
+
+  @media ${devices.tablet} {
+    height: 5rem;
+    font-size: 2.0rem;
     width: 100%;
+    justify-content: center;
   }
+
   ${isMobileDevice
     ? css`
-      height: 39px;
-      font-size: 14px;
-    `
-    : ''};
+      @media (max-width: 650px){
+        height: 35px;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+      }
+      @media (orientation: landscape){
+        width: auto;
+      }
+    ` : ''};
 `
 
 type IconProps = {