feat(app-signup): update email verification dialog

eficode · Feb 4, 2021 · 0ff5402 · 0ff5402
1 parent a04bf53
commit 0ff5402
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/packages/game-app/src/_shared/components/Dialog/Dialog.tsx b/packages/game-app/src/_shared/components/Dialog/Dialog.tsx
@@ -36,7 +36,9 @@ const Dialog: React.FC<Props> & { DialogContainer: typeof DialogContainer } = ({
   return (
     <GlassOverlay open={open}>
       <DialogContainerComponent {...DialogContainerProps}>
-        <Typography variant="dialogHead">{title}</Typography>
+        <Typography textAlign="center" variant="dialogHead">
+          {title}
+        </Typography>
         {children}
       </DialogContainerComponent>
     </GlassOverlay>

diff --git a/packages/game-app/src/assets/i18n/en.ts b/packages/game-app/src/assets/i18n/en.ts
@@ -76,7 +76,8 @@ const translations = {
     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",
+      title: 'Check your email',
+      message: 'We sent a mail to {{email}}. Click the link in the mail to confirm you email address.',
       resend: 'Resend email',
       resendSuccess: 'Resend success',
     },

diff --git a/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx b/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx
@@ -1,32 +1,38 @@
 import React from 'react';
 import { useTranslate } from '@pipeline/i18n';
-import { useLogout, useResendVerificationEmail } from '@pipeline/auth';
-import { Button, ErrorMessage, Link } from '@pipeline/components';
+import { selectors, useLogout, useResendVerificationEmail } from '@pipeline/auth';
+import { Box, Button, Dialog, ErrorMessage, Link, Typography } from '@pipeline/components';
+import { useSelector } from 'react-redux';
 
 type Props = {};
 
 const EmailVerificationRequired: React.FC<Props> = () => {
   const t = useTranslate();
 
+  const { email } = useSelector(selectors.getCurrentUser)!;
+
   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>
+    <Dialog open title={t('signup.verificationRequired.title')}>
+      <Box maxWidth="400px" mt={3}>
+        <Typography>{t('signup.verificationRequired.message', { data: { email } })}</Typography>
+      </Box>
+      <Box mt={3} textAlign="center">
         <Button
           label={t('signup.verificationRequired.resend')}
           disabled={loading}
           loading={loading}
           onClick={resendEmail}
         />
-        &nbsp;
+      </Box>
+      <Box mt={3} textAlign="center">
         <Link onClick={executeLogout}>{t('auth.logout')}</Link>
-        {success ? t('signup.verificationRequired.resendSuccess') : null}
-        {translatedError ? <ErrorMessage message={translatedError} /> : null}
-      </div>
-    </div>
+      </Box>
+      {success ? t('signup.verificationRequired.resendSuccess') : null}
+      {translatedError ? <ErrorMessage message={translatedError} /> : null}
+    </Dialog>
   );
 };