feat(app-general): add logout functionality

eficode · Jan 7, 2021 · 8de46ae · 8de46ae
1 parent 9401893
commit 8de46ae
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 3 deletions.
diff --git a/packages/game-app/src/_shared/auth/hooks.ts b/packages/game-app/src/_shared/auth/hooks.ts
@@ -13,3 +13,7 @@ export const useEmailVerification = createRequestHook('auth.emailVerification',
 export const useLogin = createRequestHook('auth.login', actions.login, {
   errorMessagesScope: 'login.errors',
 });
+
+export const useLogout = createRequestHook('auth.logout', actions.logout, {
+  errorMessagesScope: 'auth.errors',
+});
diff --git a/packages/game-app/src/_shared/auth/index.ts b/packages/game-app/src/_shared/auth/index.ts
@@ -1,7 +1,7 @@
 import { reducer, actions, name, selectors, AuthUser } from './slice';
 import saga from './saga';
 import useLoggedUser from './useLoggedUser';
-import { useEmailVerification, useLogin, useResendVerificationEmail } from './hooks';
+import { useEmailVerification, useLogin, useLogout, useResendVerificationEmail } from './hooks';
 
 export {
   reducer,
@@ -13,6 +13,7 @@ export {
   useResendVerificationEmail,
   useEmailVerification,
   useLogin,
+  useLogout,
 };
 
 export type { AuthUser };
diff --git a/packages/game-app/src/_shared/auth/saga.ts b/packages/game-app/src/_shared/auth/saga.ts
@@ -62,6 +62,11 @@ function* executeLogin({ payload: { email, password } }: ReturnType<typeof actio
   }
 }
 
+function* executeLogout() {
+  yield call(() => firebase.auth().signOut());
+  yield put(actions.setLoggedUser(null));
+}
+
 export default function* authSaga() {
   yield takeEvery(actions.initialize, initializeAuthSaga);
   yield takeEvery(
@@ -70,4 +75,5 @@ export default function* authSaga() {
   );
   yield takeEvery(actions.verifyEmail, addRequestStatusManagement(executeEmailVerification, 'auth.emailVerification'));
   yield takeEvery(actions.login, addRequestStatusManagement(executeLogin, 'auth.login'));
+  yield takeEvery(actions.logout, addRequestStatusManagement(executeLogout, 'auth.logout'));
 }
diff --git a/packages/game-app/src/_shared/auth/slice.ts b/packages/game-app/src/_shared/auth/slice.ts
@@ -49,6 +49,7 @@ export const actions = {
   resendEmailVerification: createAction(`${name}/resendEmailVerification`),
   verifyEmail: createAction<{ code: string }>(`${name}/verifyEmail`),
   login: createAction<{ email: string; password: string }>(`${name}/login`),
+  logout: createAction(`${name}/logout`),
 };
 export const selectors = {
   getCurrentUser,

diff --git a/packages/game-app/src/_shared/requests-status/requestsKeys.ts b/packages/game-app/src/_shared/requests-status/requestsKeys.ts
@@ -6,4 +6,5 @@ export interface RequestsKeys {
   'auth.resendVerificationEmail': null;
   'auth.emailVerification': null;
   'auth.login': null;
+  'auth.logout': null;
 }
diff --git a/packages/game-app/src/assets/i18n/en.ts b/packages/game-app/src/assets/i18n/en.ts
@@ -3,6 +3,7 @@ const translations = {
     errors: {
       'auth/invalid-action-code': 'Verification link invalid or already used',
     },
+    logout: 'Sign out',
   },
   dashboard: {
     title: 'Pipeline',

diff --git a/packages/game-app/src/dashboard/components/Dashboard/Dashboard.tsx b/packages/game-app/src/dashboard/components/Dashboard/Dashboard.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
 import { useTranslate } from '@pipeline/i18n';
+import { useLogout } from '@pipeline/auth';
 
 type Props = {};
 
 const Dashboard: React.FC<Props> = () => {
   const t = useTranslate();
+  const { call: executeLogout } = useLogout();
 
   return (
     <div className="dashboard">
+      <div className="sign-out-button">
+        <button className="link" onClick={executeLogout}>
+          {t('auth.logout')}
+        </button>
+      </div>
       <h1>{t('dashboard.title')}</h1>
       <h2>{t('dashboard.subtitle')}</h2>
       <p>{t('dashboard.message')}</p>

diff --git a/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx b/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx
@@ -1,22 +1,26 @@
 import React from 'react';
 import { useTranslate } from '@pipeline/i18n';
-import { useResendVerificationEmail } from '@pipeline/auth';
+import { useLogout, useResendVerificationEmail } from '@pipeline/auth';
 
 type Props = {};
 
 const EmailVerificationRequired: React.FC<Props> = () => {
   const t = useTranslate();
 
   const { call: resendEmail, success, loading, translatedError } = useResendVerificationEmail();
+  const { call: executeLogout } = useLogout();
 
   return (
     <div className="content">
       <div className="card text-center">
         <h2>{t('signup.verificationRequired.message')}</h2>
-
         <button className="primary" disabled={loading} onClick={resendEmail}>
           {t('signup.verificationRequired.resend')}
         </button>
+        &nbsp;
+        <button className="link" onClick={executeLogout}>
+          {t('auth.logout')}
+        </button>
         {success ? t('signup.verificationRequired.resendSuccess') : null}
         {translatedError ? <span className="error-message">{translatedError}</span> : null}
       </div>

diff --git a/packages/game-app/src/temporary.css b/packages/game-app/src/temporary.css
@@ -191,6 +191,7 @@ input + button.icon-button {
   height: 100vh;
   width: 100vw;
   background-color: white;
+  position: relative;
 }
 
 .dashboard h1 {
@@ -208,3 +209,9 @@ input + button.icon-button {
   max-width: 450px;
   margin-left: 50px;
 }
+
+.dashboard .sign-out-button {
+  position: absolute;
+  top: 15px;
+  right: 60px;
+}