feat(app-signup): add login link

package.json

@@ -5,6 +5,7 @@
     "bootstrap": "npm ci && npx lerna bootstrap",
     "build": "npx lerna run build --stream",
     "start:emulators": "npx firebase emulators:start",
+    "start:app": "npm run start --prefix packages/game-app",
     "test:firestore": "npm run test --prefix packages/firestore",
     "scripts:initialize-firestore-emulator": "node scripts/load-initial-data-in-emulator.js",
     "scripts:initialize-firestore-emulator:local": "npx env-cmd -f .env node scripts/load-initial-data-in-emulator.js"

packages/game-app/src/assets/i18n/en.ts

@@ -26,6 +26,8 @@ const translations = {
   },
   signup: {
     title: 'Signup to play',
+    alreadyAccount: 'Already have an account?',
+    goToSignIn: 'Sign in',
     verificationRequired: {
       message: "You need to verify your email to start playing! If you don't find it, try in your spam",
       resend: 'Resend email',

packages/game-app/src/signup/components/Signup/Signup.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { FormSelect, FormTextField } from '@pipeline/form';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -9,6 +9,7 @@ import { signupValidationSchema } from '../../utils/validation';
 import { useTranslate } from '@pipeline/i18n';
 import { PasswordInput } from '@pipeline/components';
 import { RoutingPath, useNavigateOnCondition } from '@pipeline/routing';
+import { useHistory } from 'react-router-dom';
 
 type Props = {};
 
@@ -47,6 +48,12 @@ const Signup: React.FC<Props> = () => {
     [signup, handleSubmit],
   );
 
+  const history = useHistory();
+
+  const goToSignIn = useCallback(() => {
+    history.push(RoutingPath.Login);
+  }, [history]);
+
   useNavigateOnCondition(signupSuccess, RoutingPath.EmailVerificationRequired);
 
   return (
@@ -73,6 +80,12 @@ const Signup: React.FC<Props> = () => {
             {signupLoading ? <span>Loading</span> : null}
             {signupTranslateError ? <span className="error-message">{signupTranslateError}</span> : null}
             {signupSuccess ? <span>Success</span> : null}
+            <div className="text-center">
+              <span>{t('signup.alreadyAccount')}</span>&nbsp;
+              <button className="link" onClick={goToSignIn}>
+                {t('signup.goToSignIn')}
+              </button>
+            </div>
           </form>
         </FormProvider>
       </div>

packages/game-app/src/temporary.css

@@ -124,6 +124,14 @@ button.icon-button {
   padding: 8px;
 }
 
+button.link {
+  background-color: transparent;
+  border: 0;
+  text-decoration: underline;
+  font-size: 15px;
+  color: #9f998f;
+}
+
 input + button.icon-button {
   position: absolute;
   right: 10px;