feat: add google register link to register page (#542)

src/components/forms/LoginForm/index.tsx

@@ -5,7 +5,7 @@ import { useHandleLoginSubmit } from './helpers/useHandleLoginSubmit';
 import { SubmitButton } from './styled';
 import { FormContainer } from '../styled';
 import { getVisibleText } from '../../../lib/text/getVisibleText';
-import { getGoogleSignInUrl } from '../../../lib/backend/getGoogleSignInUrl';
+import { WithGoogleLink } from '../WithGoogleLink';
 
 interface LoginFormProps {
   onError: ErrorHandlerType;
@@ -74,12 +74,7 @@ function LoginForm({ onError }: LoginFormProps) {
                 </div>
                 <hr />
                 <div className="control">
-                  <a href={getGoogleSignInUrl()} className="button is-fullwidth">
-  <span className="icon">
-    <i className="fab fa-google" />
-  </span>
-                    <span>Login in with Google</span>
-                  </a>
+                  <WithGoogleLink text={getVisibleText('navigation.login.google')} />
                 </div>
               </form>
               <p className="pt-4">

src/components/forms/RegisterForm.tsx

@@ -3,6 +3,8 @@ import BetaMessage from '../BetaMessage';
 import { ErrorHandlerType } from '../errors/helpers/getErrorMessage';
 import { FormContainer } from './styled';
 import { get2ankiApi } from '../../lib/backend/get2ankiApi';
+import { WithGoogleLink } from './WithGoogleLink';
+import { getVisibleText } from '../../lib/text/getVisibleText';
 
 interface Props {
   setErrorMessage: ErrorHandlerType;
@@ -51,8 +53,12 @@ function RegisterForm({ setErrorMessage }: Props) {
           <div className="columns is-centered">
             <div className="column is-half">
               <BetaMessage />
-              <h1 className="title">Register.</h1>
-              <p className="subtitle">To get started please register below.</p>
+              <h1 className="title">Register</h1>
+              <div>
+                <WithGoogleLink text={getVisibleText('navigation.register.google')} />
+              </div>
+              <hr />
+              <p className="subtitle">Or create a new account.</p>
               <form onSubmit={handleSubmit}>
                 <div className="field">
                   <label htmlFor="name" className="label">

src/components/forms/WithGoogleLink.tsx

@@ -0,0 +1,14 @@
+import { getGoogleSignInUrl } from '../../lib/backend/getGoogleSignInUrl';
+
+interface WithGoogleLinkProps {
+  text: string;
+}
+
+export function WithGoogleLink({ text }: WithGoogleLinkProps) {
+  return <a href={getGoogleSignInUrl()} className="button is-fullwidth">
+  <span className="icon">
+    <i className="fab fa-google" />
+  </span>
+    <span>{text}</span>
+  </a>;
+}

src/lib/text/app.document.json

@@ -19,5 +19,7 @@
   "pricing.page.title": "Our Pricing Plans",
   "navigation.settings": "Settings",
   "card.options": "Card Options",
-  "favorites.empty": "You have no favorites!"
+  "favorites.empty": "You have no favorites!",
+  "navigation.login.google": "Login with Google",
+  "navigation.register.google": "Register with Google"
 }