draft update of login flow 3

src/components/molecules/login.tsx

@@ -6,12 +6,14 @@ import root from '~lib/routes';
 import useLanguageRoute from '~lib/useLanguageRoute';
 
 import LoginForm from './loginForm';
+import SocialLogin from './socialLogin';
 
 export default function Login(): JSX.Element {
 	const languageRoute = useLanguageRoute();
 	const router = useRouter();
 	return (
 		<AndOnboarding>
+			<SocialLogin />
 			<LoginForm
 				showRegister={() =>
 					router.push(

src/components/molecules/loginLanding.tsx

@@ -1,15 +1,68 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import AndOnboarding from '~components/templates/andOnboarding';
+import root from '~src/lib/routes';
+import useLanguageRoute from '~src/lib/useLanguageRoute';
 
+import Button from './button';
 import SocialLogin from './socialLogin';
+import styles from './socialLogin.module.scss';
 
 export default function Login(): JSX.Element {
-	//const languageRoute = useLanguageRoute();
-	//const router = useRouter();
+	const languageRoute = useLanguageRoute();
+	const intl = useIntl();
+	const router = useRouter();
 	return (
 		<AndOnboarding>
 			<SocialLogin />
+			<div className={styles.buttonCol}>
+				<p className={styles.centerText}>
+					{intl.formatMessage({
+						id: 'socialLogin__loginOr',
+						defaultMessage: 'Or',
+					})}
+				</p>
+				<Button
+					href={root.lang(languageRoute).account.register.get({
+						params: {
+							back: router.asPath,
+						},
+					})}
+					className={styles.centerText}
+					type="secondary"
+					text={
+						<FormattedMessage
+							id="molecule-button-SignUp"
+							defaultMessage="Sign Up with Email"
+						/>
+					}
+				/>
+
+				<p className={styles.centerText}>
+					{intl.formatMessage({
+						id: 'regularLogin__login',
+						defaultMessage: 'Already have an account? ',
+					})}
+					<Link
+						href={root.lang(languageRoute).account.login.get({
+							params: {
+								back: router.asPath,
+							},
+						})}
+						legacyBehavior
+					>
+						<a>
+							{intl.formatMessage({
+								id: 'regularLogin__loginTxt',
+								defaultMessage: 'Log In',
+							})}
+						</a>
+					</Link>
+				</p>
+			</div>
 		</AndOnboarding>
 	);
 }

src/components/molecules/socialLogin.tsx

@@ -1,6 +1,4 @@
 import { useQueryClient } from '@tanstack/react-query';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 import {
 	ReactFacebookFailureResponse,
@@ -14,9 +12,7 @@ import { useRegisterSocialMutation } from '~containers/account/__generated__/reg
 import { FACEBOOK_APP_ID, GOOGLE_CLIENT_ID } from '~lib/constants';
 import { setSessionToken } from '~lib/cookies';
 import useDidUnmount from '~lib/useDidUnmount';
-import useLanguageRoute from '~lib/useLanguageRoute';
 import { UserSocialServiceName } from '~src/__generated__/graphql';
-import root from '~src/lib/routes';
 
 import Button from './button';
 import styles from './socialLogin.module.scss';
@@ -28,12 +24,10 @@ export default function SocialLogin({
 	onSuccess?: () => void;
 	isRegister?: boolean;
 }): JSX.Element {
-	const languageRoute = useLanguageRoute();
 	const [errors, setErrors] = useState<string[]>([]);
 	const intl = useIntl();
 	const didUnmount = useDidUnmount();
 	const queryClient = useQueryClient();
-	const router = useRouter();
 
 	const { mutate: mutateSocial, isSuccess: isSuccessSocial } =
 		useRegisterSocialMutation({
@@ -164,49 +158,6 @@ export default function SocialLogin({
 					onClick={signIn}
 					centered
 				/>
-				<p>
-					{intl.formatMessage({
-						id: 'socialLogin__loginOr',
-						defaultMessage: 'Or',
-					})}
-				</p>
-				<Button
-					href={root.lang(languageRoute).account.register.get({
-						params: {
-							back: router.asPath,
-						},
-					})}
-					className={styles.centerText}
-					type="secondary"
-					text={
-						<FormattedMessage
-							id="molecule-button-SignUp"
-							defaultMessage="Sign Up with Email"
-						/>
-					}
-				/>
-
-				<p>
-					{intl.formatMessage({
-						id: 'regularLogin__login',
-						defaultMessage: 'Already have an account? ',
-					})}
-					<Link
-						href={root.lang(languageRoute).account.login.get({
-							params: {
-								back: router.asPath,
-							},
-						})}
-						legacyBehavior
-					>
-						<a>
-							{intl.formatMessage({
-								id: 'regularLogin__loginTxt',
-								defaultMessage: 'Log In',
-							})}
-						</a>
-					</Link>
-				</p>
 			</div>
 		</>
 	);

src/containers/account/register.spec.tsx

@@ -304,7 +304,7 @@ describe('register page', () => {
 
 		await userEvent.click(getByTestId('guest-info-button2'));
 
-		expect(getByText('Why Sign Up?')).toBeInTheDocument();
+		expect(getByText('Sign Up?')).toBeInTheDocument();
 	});
 });