feat(app-login): add signup link

eficode · Jan 5, 2021 · 8c74b65 · 8c74b65
1 parent 0143fcc
commit 8c74b65
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/game-app/src/assets/i18n/en.ts b/packages/game-app/src/assets/i18n/en.ts
@@ -12,6 +12,8 @@ const translations = {
   },
   login: {
     title: 'Sign in to play',
+    notYetAccount: "Haven't played yet?",
+    goToSignup: 'Create account',
     form: {
       emailLabel: 'Email',
       passwordLabel: 'Password',

diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -1,9 +1,11 @@
-import React, { useMemo } from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
+import React, { useCallback, useMemo } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 import { FormTextField } from '@pipeline/form';
 import { PasswordInput } from '@pipeline/components';
 import { useTranslate } from '@pipeline/i18n';
 import { useLogin } from '@pipeline/auth';
+import { useHistory } from 'react-router-dom';
+import { RoutingPath } from '@pipeline/routing';
 
 type Props = {};
 
@@ -24,6 +26,12 @@ const Login: React.FC<Props> = () => {
 
   const submit = useMemo(() => handleSubmit(call), [handleSubmit, call]);
 
+  const history = useHistory();
+
+  const goToSignUp = useCallback(() => {
+    history.push(RoutingPath.Signup);
+  }, [history]);
+
   return (
     <div className="login">
       <div className="content card">
@@ -38,6 +46,12 @@ const Login: React.FC<Props> = () => {
           </div>
           {translatedError ? <span className="error-message">{translatedError}</span> : null}
           {loading ? <span>Loading</span> : null}
+          <div className="text-center">
+            <span>{t('login.notYetAccount')}</span>&nbsp;
+            <button className="link" onClick={goToSignUp}>
+              {t('login.goToSignup')}
+            </button>
+          </div>
         </FormProvider>
       </div>
     </div>