From c25bb75d5a3c9fa1a2f663593300d3eaa6b379f0 Mon Sep 17 00:00:00 2001 From: Amir Ghezelbash Date: Mon, 28 Aug 2023 14:47:30 +0300 Subject: [PATCH] feat: add done button and enhance design for reset password flow (WPB-3157) (#4379) * feat: add done button and enhance design for reset password flow (WPB-3157) * fix: revert lock file * fix: add line break * bring back css --- src/i18n/en-US.json | 3 ++- src/script/Root.tsx | 10 +--------- src/script/component/DirectDownloadButton.tsx | 4 +--- src/script/component/OpenWebappButton.tsx | 4 ++-- src/script/component/OpenWireButtons.test.tsx | 2 +- src/script/component/WebsiteDownloadButton.tsx | 2 +- src/script/page/PasswordForgot.tsx | 11 +++++++---- 7 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json index 5350991712..835c3f51f4 100644 --- a/src/i18n/en-US.json +++ b/src/i18n/en-US.json @@ -22,7 +22,8 @@ "errorUnusedEmail": "This email is not in use.", "successDescription": "We sent you a link to reset your password. It is valid for 1 hour.", "successTitle": "Check your email", - "title": "Change Password" + "title": "Change Password", + "login": "Login" }, "general": { "loading": "Please wait…" diff --git a/src/script/Root.tsx b/src/script/Root.tsx index 7af6f442f8..be60cbda44 100644 --- a/src/script/Root.tsx +++ b/src/script/Root.tsx @@ -17,8 +17,7 @@ * */ -import {Global} from '@emotion/react'; -import {COLOR, FlexBox, Loading, StyledApp, THEME_ID} from '@wireapp/react-ui-kit'; +import {FlexBox, Loading, StyledApp, THEME_ID} from '@wireapp/react-ui-kit'; import createBrowserHistory from 'history/createBrowserHistory'; import React, {lazy, Suspense, useEffect} from 'react'; import {Redirect, Route, Router, Switch} from 'react-router-dom'; @@ -56,13 +55,6 @@ const Root: React.FC = () => { return ( - diff --git a/src/script/component/DirectDownloadButton.tsx b/src/script/component/DirectDownloadButton.tsx index 573b436162..0d5c4d7c71 100644 --- a/src/script/component/DirectDownloadButton.tsx +++ b/src/script/component/DirectDownloadButton.tsx @@ -30,9 +30,7 @@ import { WEBSITE_URL, } from 'script/Environment'; -interface Props extends ButtonProps { - backgroundColor?: string; -} +interface Props extends ButtonProps {} const DirectDownloadButton = ({children, ...props}: Props) => { const [t] = useTranslation('open'); diff --git a/src/script/component/OpenWebappButton.tsx b/src/script/component/OpenWebappButton.tsx index 6d34dcd0aa..2706d2333e 100644 --- a/src/script/component/OpenWebappButton.tsx +++ b/src/script/component/OpenWebappButton.tsx @@ -17,10 +17,10 @@ * */ -import {ButtonLink, COLOR, ButtonProps} from '@wireapp/react-ui-kit'; +import {ButtonLink, ButtonProps, COLOR} from '@wireapp/react-ui-kit'; import {WEBAPP_URL} from 'script/Environment'; -interface Props extends ButtonProps {} +interface Props extends ButtonProps {} const OpenWebappButton = (props: Props) => { return ( diff --git a/src/script/component/OpenWireButtons.test.tsx b/src/script/component/OpenWireButtons.test.tsx index 2377978ba0..f16a60f2d4 100644 --- a/src/script/component/OpenWireButtons.test.tsx +++ b/src/script/component/OpenWireButtons.test.tsx @@ -25,7 +25,7 @@ jest.mock('script/Environment', () => mockConfig); import {OpenWireButtons} from './OpenWireButtons'; import {Runtime} from '@wireapp/commons'; import {render} from '@testing-library/react'; -import {withTheme} from '../util/test/TestUtil'; +import {withTheme} from 'script/util/test/TestUtil'; describe('OpenWireButtons', () => { const defaultParams = { diff --git a/src/script/component/WebsiteDownloadButton.tsx b/src/script/component/WebsiteDownloadButton.tsx index 734c4b5409..eed2c60210 100644 --- a/src/script/component/WebsiteDownloadButton.tsx +++ b/src/script/component/WebsiteDownloadButton.tsx @@ -21,7 +21,7 @@ import {ButtonLink, ButtonProps, COLOR} from '@wireapp/react-ui-kit'; import {useTranslation} from 'react-i18next'; import {BRAND_NAME, WEBSITE_URL} from 'script/Environment'; -interface Props extends ButtonProps {} +interface Props extends ButtonProps {} const WebsiteDownloadButton = (props: Props) => { const [t] = useTranslation('open'); diff --git a/src/script/page/PasswordForgot.tsx b/src/script/page/PasswordForgot.tsx index 3bbdf3952a..da40ef77e7 100644 --- a/src/script/page/PasswordForgot.tsx +++ b/src/script/page/PasswordForgot.tsx @@ -16,9 +16,10 @@ * along with this program. If not, see http://www.gnu.org/licenses/. * */ -import {Button, COLOR, ContainerXS, Form, H1, Input, Text} from '@wireapp/react-ui-kit'; +import {Button, ButtonLink, ContainerXS, ErrorMessage, Form, H1, Input, Text} from '@wireapp/react-ui-kit'; import React, {useContext, useRef, useState} from 'react'; import {useTranslation} from 'react-i18next'; +import {WEBAPP_URL} from 'script/Environment'; import Document from 'script/component/Document'; import {ActionContext} from 'script/module/action'; import ValidationError from 'script/module/action/ValidationError'; @@ -87,6 +88,9 @@ const PasswordForgot = () => {

{t('successTitle')}

{t('successDescription')} + + {t('login')} + ) : ( @@ -101,14 +105,13 @@ const PasswordForgot = () => { setEmail(event.currentTarget.value); }} placeholder={t('emailPlaceholder')} + label={t('emailPlaceholder')} name="email" type="email" required data-uie-name="enter-email" + error={{error}} /> - - {error} -