feat(health): add health checks to server api

client/modals/auth/RegisterModal.tsx

@@ -1,13 +1,15 @@
+import env from '@beam-australia/react-env';
 import { joiResolver } from '@hookform/resolvers/joi';
-import { HowToReg } from '@mui/icons-material';
+import { Google, HowToReg } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
 import Joi from 'joi';
 import { Trans, useTranslation } from 'next-i18next';
+import { GoogleLoginResponse, GoogleLoginResponseOffline, useGoogleLogin } from 'react-google-login';
 import { Controller, useForm } from 'react-hook-form';
 import { useMutation } from 'react-query';
 
 import BaseModal from '@/components/shared/BaseModal';
-import { register as registerUser, RegisterParams } from '@/services/auth';
+import { loginWithGoogle, LoginWithGoogleParams, register as registerUser, RegisterParams } from '@/services/auth';
 import { ServerError } from '@/services/axios';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setModalState } from '@/store/modal/modalSlice';
@@ -56,6 +58,19 @@ const RegisterModal: React.FC = () => {
 
   const { mutateAsync, isLoading } = useMutation<void, ServerError, RegisterParams>(registerUser);
 
+  const { mutateAsync: loginWithGoogleMutation } = useMutation<void, ServerError, LoginWithGoogleParams>(
+    loginWithGoogle
+  );
+
+  const { signIn } = useGoogleLogin({
+    clientId: env('GOOGLE_CLIENT_ID'),
+    onSuccess: async (response: GoogleLoginResponse | GoogleLoginResponseOffline) => {
+      await loginWithGoogleMutation({ accessToken: (response as GoogleLoginResponse).accessToken });
+
+      handleClose();
+    },
+  });
+
   const handleClose = () => {
     dispatch(setModalState({ modal: 'auth.register', state: { open: false } }));
     reset();
@@ -63,7 +78,6 @@ const RegisterModal: React.FC = () => {
 
   const onSubmit = async ({ name, username, email, password }: FormData) => {
     await mutateAsync({ name, username, email, password });
-
     handleClose();
   };
 
@@ -72,6 +86,10 @@ const RegisterModal: React.FC = () => {
     dispatch(setModalState({ modal: 'auth.login', state: { open: true } }));
   };
 
+  const handleLoginWithGoogle = () => {
+    signIn();
+  };
+
   return (
     <BaseModal
       icon={<HowToReg />}
@@ -79,9 +97,21 @@ const RegisterModal: React.FC = () => {
       heading={t('modals.auth.register.heading')}
       handleClose={handleClose}
       footerChildren={
-        <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>
-          {t('modals.auth.register.actions.register')}
-        </Button>
+        <>
+          <Button
+            type="submit"
+            variant="outlined"
+            disabled={isLoading}
+            startIcon={<Google />}
+            onClick={handleLoginWithGoogle}
+          >
+            {t('modals.auth.register.actions.google')}
+          </Button>
+
+          <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>
+            {t('modals.auth.register.actions.register')}
+          </Button>
+        </>
       }
     >
       <p>{t('modals.auth.register.body')}</p>