updated login flow

wireapp · Dec 18, 2024 · e7e7d60 · e7e7d60
1 parent 4ecc152
commit e7e7d60
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 37 deletions.
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
@@ -806,7 +806,7 @@
   "guestRoomToggleName": "Allow Guests",
   "historyInfo.learnMore": "Learn more",
   "historyInfo.noHistoryHeadline": "It’s the first time you’re using {brandName} on this device.",
-  "historyInfo.noHistoryInfo": "For privacy reasons, {newline}your conversation history will not appear here.",
+  "historyInfo.noHistoryInfo": "For privacy reasons, your history will not appear here.",
   "historyInfo.ok": "OK",
   "index.createAccount": "Create account",
   "index.createAccountForOrganizations": "Wire for Free",

diff --git a/src/script/auth/page/ClientManager.tsx b/src/script/auth/page/ClientManager.tsx
@@ -23,7 +23,7 @@ import {connect} from 'react-redux';
 import {AnyAction, Dispatch} from 'redux';
 
 import {UrlUtil, StringUtil, Runtime} from '@wireapp/commons';
-import {Button, ButtonVariant, ContainerXS, H1, Muted, QUERY, useMatchMedia, useTimeout} from '@wireapp/react-ui-kit';
+import {Button, ButtonVariant, ContainerXS, Muted, QUERY, Text, useMatchMedia, useTimeout} from '@wireapp/react-ui-kit';
 
 import {t} from 'Util/LocalizerUtil';
 
@@ -82,9 +82,9 @@ const ClientManagerComponent = ({doGetAllClients, doLogout}: Props & ConnectedPr
           marginInline: isMobile ? '20px' : 'auto',
         }}
       >
-        <H1 center style={{marginTop: '1rem'}}>
+        <Text center block style={{marginTop: '1rem', fontSize: '1.5rem', fontWeight: '500'}}>
           {t('clientManager.headline')}
-        </H1>
+        </Text>
         <Muted
           center
           style={{

diff --git a/src/script/auth/page/HistoryInfo.tsx b/src/script/auth/page/HistoryInfo.tsx
@@ -25,7 +25,7 @@ import {connect} from 'react-redux';
 import {Navigate, useNavigate} from 'react-router-dom';
 import {AnyAction, Dispatch} from 'redux';
 
-import {Button, ContainerXS, H1, Link, Paragraph} from '@wireapp/react-ui-kit';
+import {Button, ContainerXS, Link, Paragraph, Text} from '@wireapp/react-ui-kit';
 
 import {handleEnterDown} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
@@ -77,9 +77,11 @@ const HistoryInfoComponent = ({
 
   return (
     <Page withSideBar>
-      <ContainerXS centerText verticalCenter style={{width: '100%'}}>
-        <H1 center>{t('historyInfo.noHistoryHeadline', {brandName: Config.getConfig().BRAND_NAME})}</H1>
-        <Paragraph center style={{marginBottom: 56}}>
+      <ContainerXS centerText verticalCenter style={{width: '100%', maxWidth: '20rem'}}>
+        <Text fontSize="1.5rem" css={{fontWeight: '500'}} center>
+          {t('historyInfo.noHistoryHeadline', {brandName: Config.getConfig().BRAND_NAME})}
+        </Text>
+        <Paragraph center style={{marginBottom: '1rem'}}>
           <FormattedMessage
             id="historyInfo.noHistoryInfo"
             values={{
@@ -96,7 +98,7 @@ const HistoryInfoComponent = ({
         >
           {t('historyInfo.ok')}
         </Button>
-        <Paragraph center style={{marginTop: 40}}>
+        <Paragraph center style={{marginTop: '1rem'}}>
           <Link href={Config.getConfig().URL.SUPPORT.HISTORY} target="_blank" data-uie-name="do-history-learn-more">
             {t('historyInfo.learnMore')}
           </Link>

diff --git a/src/script/auth/page/Index.tsx b/src/script/auth/page/Index.tsx
@@ -76,6 +76,11 @@ const IndexComponent = ({defaultSSOCode}: Props & ConnectedProps & DispatchProps
     return <Navigate to={ROUTE.LOGIN} />;
   }
 
+  // TODO: add condition for api version and FF
+  if (true) {
+    return <Navigate to={ROUTE.SSO} />;
+  }
+
   return (
     <Page withSideBar>
       <ContainerXS centerText verticalCenter style={{width: '380px'}}>
@@ -96,7 +101,6 @@ const IndexComponent = ({defaultSSOCode}: Props & ConnectedProps & DispatchProps
         >
           {t('index.welcome', {brandName: Config.getConfig().BACKEND_NAME})}
         </Text>
-
         {!getWebEnvironment().isProduction && isDataDogEnabled() && (
           <Text
             block
@@ -116,7 +120,6 @@ const IndexComponent = ({defaultSSOCode}: Props & ConnectedProps & DispatchProps
             />
           </Text>
         )}
-
         {features.ENABLE_ACCOUNT_REGISTRATION && (
           <Button
             type="button"

diff --git a/src/script/auth/page/Login.tsx b/src/script/auth/page/Login.tsx
@@ -43,7 +43,6 @@ import {
   ContainerXS,
   FlexBox,
   Form,
-  H2,
   IsMobile,
   Label,
   Link,
@@ -411,22 +410,24 @@ const LoginComponent = ({
               >
                 {twoFactorLoginData ? (
                   <div>
-                    <H2 center>{t('login.twoFactorLoginTitle')}</H2>
-                    <Text data-uie-name="label-with-email">
+                    <Text fontSize="1.5rem" css={{fontWeight: '500'}} center block>
+                      {t('login.twoFactorLoginTitle')}
+                    </Text>
+                    <Text data-uie-name="label-with-email" fontSize="1rem">
                       {t('login.twoFactorLoginSubHead', {email: twoFactorLoginData.email as string})}
                     </Text>
                     <Label markInvalid={!!twoFactorSubmitError}>
                       <CodeInput
                         disabled={isFetching}
-                        style={{marginTop: 60}}
+                        style={{marginTop: '1rem'}}
                         onCodeComplete={submitTwoFactorLogin}
                         data-uie-name="enter-code"
                       />
                     </Label>
                     <div style={{display: 'flex', justifyContent: 'center', marginTop: 10}}>
                       {!!twoFactorSubmitError && parseError(twoFactorSubmitError)}
                     </div>
-                    <div style={{marginTop: 20}}>
+                    <div style={{marginTop: '1rem'}}>
                       {isSendingTwoFactorCode ? (
                         <Loading size={20} />
                       ) : (
@@ -439,7 +440,7 @@ const LoginComponent = ({
                       <Button
                         disabled={!!twoFactorSubmitError || isFetching}
                         type="submit"
-                        css={{marginTop: 65}}
+                        css={{marginTop: '1rem'}}
                         onClick={() => handleSubmit({...twoFactorLoginData, verificationCode}, [])}
                       >
                         {t('login.submitTwoFactorButton')}

diff --git a/src/script/auth/page/SingleSignOn.tsx b/src/script/auth/page/SingleSignOn.tsx
@@ -27,7 +27,6 @@ import {useParams} from 'react-router-dom';
 import {AnyAction, Dispatch} from 'redux';
 
 import {
-  ArrowIcon,
   COLOR,
   Column,
   Columns,
@@ -55,10 +54,8 @@ import {SingleSignOnForm} from './SingleSignOnForm';
 
 import {Config} from '../../Config';
 import {AppAlreadyOpen} from '../component/AppAlreadyOpen';
-import {RouterLink} from '../component/RouterLink';
 import {RootState, bindActionCreators} from '../module/reducer';
 import * as AuthSelector from '../module/selector/AuthSelector';
-import {ROUTE} from '../route';
 
 type Props = React.HTMLAttributes<HTMLDivElement>;
 
@@ -186,12 +183,6 @@ const SingleSignOnComponent = ({hasDefaultSSOCode}: Props & ConnectedProps & Dis
     ssoWindowRef.current?.focus();
   };
 
-  const backArrow = (
-    <RouterLink to={ROUTE.INDEX} data-uie-name="go-login">
-      <ArrowIcon direction="left" color={COLOR.TEXT} />
-    </RouterLink>
-  );
-
   return (
     <Page withSideBar>
       {isOverlayOpen && (
@@ -226,12 +217,8 @@ const SingleSignOnComponent = ({hasDefaultSSOCode}: Props & ConnectedProps & Dis
           </Container>
         </Overlay>
       )}
-      {!hasDefaultSSOCode && (
-        <IsMobile>
-          <div style={{margin: 16}}>{backArrow}</div>
-        </IsMobile>
-      )}
-      <Container centerText verticalCenter style={{width: '100%'}}>
+
+      <Container centerText verticalCenter style={{width: '100%', padding: '1rem'}}>
         {isTablet && (
           <LogoFullIcon
             aria-hidden="true"
@@ -244,11 +231,7 @@ const SingleSignOnComponent = ({hasDefaultSSOCode}: Props & ConnectedProps & Dis
         <AppAlreadyOpen />
         <Columns>
           <IsMobile not>
-            <Column style={{display: 'flex'}}>
-              {!hasDefaultSSOCode && (
-                <div style={{margin: 'auto', marginTop: '1.25rem', marginRight: '0px'}}>{backArrow}</div>
-              )}
-            </Column>
+            <Column style={{display: 'flex'}} />
           </IsMobile>
           <Column style={{flexBasis: 384, flexGrow: 0, padding: 0}}>
             <ContainerXS