Improve tenant signup page (#302)

app/javascript/components/TenantSignUp/ConfirmSignUpPage.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
-import I18n from 'i18n-js';
 import Box from '../common/Box';
 
 interface Props {
   subdomain: string;
   userEmail: string;
+  pendingTenantImage: string;
 }
 
 const ConfirmSignUpPage = ({
   subdomain,
   userEmail,
+  pendingTenantImage,
 }: Props) => (
   <Box>
-    <h3>{ I18n.t('signup.step3.title') }</h3>
+    <h3>You're almost done!</h3>
 
-    <p>{ I18n.t('signup.step3.message', { email: userEmail, subdomain: `${subdomain}.astuto.io` }) }</p>
+    <img src={pendingTenantImage} width={64} height={64} style={{margin: '12px auto'}} />
+
+    <p style={{textAlign: 'center'}}>
+      Check your email <b>{userEmail}</b> to activate your new feedback space {subdomain}.astuto.io!
+    </p>
   </Box>
 );
 

app/javascript/components/TenantSignUp/TenantSignUpForm.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import I18n from 'i18n-js';
 
 import Box from '../common/Box';
 import Button from '../common/Button';
@@ -28,7 +27,7 @@ const TenantSignUpForm = ({
 
   return (
     <Box customClass="tenantSignUpStep2">
-      <h3>{ I18n.t('signup.step2.title') }</h3>
+      <h3>Create feedback space</h3>
 
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="formRow">
@@ -68,10 +67,10 @@ const TenantSignUpForm = ({
             {errors.subdomain?.type === 'required' && getValidationMessage('required', 'tenant', 'subdomain')}
           </DangerText>
           <DangerText>
-            {errors.subdomain?.type === 'pattern' && I18n.t('signup.step2.validations.subdomain_only_letters_and_numbers')}
+            {errors.subdomain?.type === 'pattern' && 'Subdomain can only contain alphanumeric characters and hyphens'}
           </DangerText>
           <DangerText>
-            {errors.subdomain?.type === 'notAlreadyTaken' && I18n.t('signup.step2.validations.subdomain_already_taken')}
+            {errors.subdomain?.type === 'notAlreadyTaken' && 'Sorry, this subdomain is not available'}
           </DangerText>
         </div>
 
@@ -79,7 +78,7 @@ const TenantSignUpForm = ({
           onClick={() => null}
           className="tenantConfirm"
         >
-          { isSubmitting ? <Spinner /> : I18n.t('signup.step2.create_button') }
+          { isSubmitting ? <Spinner /> : 'Create feedback space' }
         </Button>
 
         { error !== '' && <DangerText>{ error }</DangerText> }

app/javascript/components/TenantSignUp/TenantSignUpP.tsx

@@ -26,6 +26,9 @@ interface Props {
     authenticityToken: string,
   ): Promise<any>;
 
+  astutoLogoImage: string;
+  pendingTenantImage: string;
+
   baseUrl: string;
   authenticityToken: string;
 }
@@ -50,6 +53,8 @@ const TenantSignUpP = ({
   isSubmitting,
   error,
   handleSubmit,
+  astutoLogoImage,
+  pendingTenantImage,
   baseUrl,
   authenticityToken
 }: Props) => {
@@ -93,6 +98,9 @@ const TenantSignUpP = ({
   }
 
   return (
+    <>
+    <img src={astutoLogoImage} width={64} height={64} className="astutoLogo" />
+    
     <div className="tenantSignUpContainer">
       {
         (currentStep === 1 || currentStep === 2) &&
@@ -124,9 +132,11 @@ const TenantSignUpP = ({
           <ConfirmSignUpPage
             subdomain={tenantData.subdomain}
             userEmail={userData.email}
+            pendingTenantImage={pendingTenantImage}
           />
       }
     </div>
+    </>
   );
 }
 

app/javascript/components/TenantSignUp/UserSignUpForm.tsx

@@ -11,7 +11,7 @@ import { getLabel, getValidationMessage } from '../../helpers/formUtils';
 import { EMAIL_REGEX } from '../../constants/regex';
 import { IOAuth } from '../../interfaces/IOAuth';
 import ActionLink from '../common/ActionLink';
-import { BackIcon } from '../common/Icons';
+import { BackIcon, EditIcon } from '../common/Icons';
 
 interface Props {
   currentStep: number;
@@ -47,7 +47,7 @@ const UserSignUpForm = ({
   } = useForm<ITenantSignUpUserForm>();
   const onSubmit: SubmitHandler<ITenantSignUpUserForm> = data => {
     if (data.password !== data.passwordConfirmation) {
-      setError('passwordConfirmation', I18n.t('signup.step1.validations.password_mismatch'));
+      setError('passwordConfirmation', I18n.t('common.validations.password_mismatch'));
       return;
     }
 
@@ -57,13 +57,13 @@ const UserSignUpForm = ({
 
   return (
     <Box customClass="tenantSignUpStep1">
-      <h3>{ I18n.t('signup.step1.title') }</h3>
+      <h3>Create user account</h3>
 
       {
         currentStep === 1 && !emailAuth && 
         <>
         <Button className="emailAuth" onClick={() => setEmailAuth(true)}>
-          { I18n.t('signup.step1.email_auth') }
+          Sign up with email
         </Button>
 
         {
@@ -118,7 +118,7 @@ const UserSignUpForm = ({
           </div>
 
           <div className="formRow">
-            <div className="formGroup col-6">
+            <div className="userPasswordDiv">
               <input
                 {...register('password', { required: true, minLength: 6, maxLength: 128 })}
                 type="password"
@@ -129,7 +129,7 @@ const UserSignUpForm = ({
               <DangerText>{ errors.password && I18n.t('common.validations.password', { n: 6 }) }</DangerText>
             </div>
 
-            <div className="formGroup col-6">
+            <div className="userPasswordConfirmationDiv">
               <input
                 {...register('passwordConfirmation')}
                 type="password"
@@ -152,12 +152,10 @@ const UserSignUpForm = ({
 
       {
         currentStep === 2 && !oAuthLoginCompleted &&
-        <p><b>{userData.fullName}</b> ({userData.email})</p>
-      }
-
-      {
-        currentStep === 2 && oAuthLoginCompleted &&
-        <p><b>{oauthUserName}</b> ({oauthUserEmail})</p>
+        <p className="userRecap">
+          <b>{oAuthLoginCompleted ? oauthUserName : userData.fullName}</b> ({oAuthLoginCompleted ? oauthUserEmail : userData.email})
+          <ActionLink onClick={() => setCurrentStep(currentStep-1)} icon={<EditIcon />} customClass="editUser">Edit</ActionLink>
+        </p>
       }
     </Box>
   );

app/javascript/components/TenantSignUp/index.tsx

@@ -13,6 +13,8 @@ interface Props {
   oauthUserEmail?: string;
   oauthUserName?: string;
   baseUrl: string;
+  astutoLogoImage: string;
+  pendingTenantImage: string;
   authenticityToken: string;
 }
 
@@ -31,6 +33,8 @@ class TenantSignUpRoot extends React.Component<Props> {
       oAuthLoginCompleted,
       oauthUserEmail,
       oauthUserName,
+      astutoLogoImage,
+      pendingTenantImage,
       baseUrl,
       authenticityToken,
     } = this.props;
@@ -42,6 +46,8 @@ class TenantSignUpRoot extends React.Component<Props> {
           oauthUserEmail={oauthUserEmail}
           oauthUserName={oauthUserName}
           oAuths={oAuths.map(oAuth => oAuthJSON2JS(oAuth))}
+          astutoLogoImage={astutoLogoImage}
+          pendingTenantImage={pendingTenantImage}
           baseUrl={baseUrl}
           authenticityToken={authenticityToken}
         />