[DEV-114] Add "resend verification email" in frontend (#1047)

* resend-verification-token

* force resend email verification

* delete wrong codelines

* improve code

* fix loading

client/src/app/main/main-home/main-home-page-login-widget.js

@@ -17,6 +17,11 @@ import FormField        from 'core-components/form-field';
 import Widget           from 'core-components/widget';
 import WidgetTransition from 'core-components/widget-transition';
 import Message          from 'core-components/message';
+import Loading          from 'core-components/loading';
+
+const UNVERIFIED_USER_STEP = 0;
+const LOADING_STEP = 1;
+const REQUEST_RESULT_STEP = 2;
 
 class MainHomePageLoginWidget extends React.Component {
 
@@ -26,7 +31,10 @@ class MainHomePageLoginWidget extends React.Component {
         recoverFormErrors: {},
         recoverSent: false,
         loadingLogin: false,
-        loadingRecover: false
+        loadingRecover: false,
+        reSendEMailVerificationLoading: false,
+        reSendEmailVerificationStep: 0,
+        reSendEmailVerificationMessage: ""
     };
 
     componentDidUpdate(prevProps) {
@@ -57,13 +65,45 @@ class MainHomePageLoginWidget extends React.Component {
                         <SubmitButton type="primary">{i18n('LOG_IN')}</SubmitButton>
                     </div>
                 </Form>
-                <Button className="login-widget__forgot-password" type="link" onClick={this.onForgotPasswordClick.bind(this)} onMouseDown={(event) => {event.preventDefault()}}>
-                    {i18n('FORGOT_PASSWORD')}
-                </Button>
+                <div className="main-home-page__link-buttons-container">
+                    <Button className="login-widget__forgot-password" type="link" onClick={this.onForgotPasswordClick.bind(this)} onMouseDown={(event) => {event.preventDefault()}}>
+                        {i18n('FORGOT_PASSWORD')}
+                    </Button>
+                    {this.renderReSendEmailVerificationSection()}
+                </div>
             </Widget>
         );
     }
 
+    renderReSendEmailVerificationSection() {
+        if(this.props.session.failMessage === 'UNVERIFIED_USER') {
+            switch (this.state.reSendEmailVerificationStep) {
+                case UNVERIFIED_USER_STEP:
+                    return (
+                        <Button className="login-widget__resend-verification-token" type="link" onClick={this.onReSendEmailVerificationClick.bind(this)}>
+                            {i18n('RESEND_EMAIL_VERIFICATION')}
+                        </Button>
+                    )
+
+                case LOADING_STEP:
+                    return <Loading className="login-widget__loading" />
+
+                case REQUEST_RESULT_STEP:
+                    return (
+                        (this.state.emailVerificationMessage === "success") ?
+                            <Message className="login-widget__resend-email-verification-success" type="success" leftAligned>
+                                {i18n('RESEND_EMAIL_VERIFICATION_SUCCESS')}
+                            </Message> :
+                            <Message className="login-widget__resend-email-verification-fail" type="error" leftAligned>
+                                {i18n('RESEND_EMAIL_VERIFICATION_FAIL')}
+                            </Message>
+                    )
+            }
+        } else {
+            return null
+        }
+    }
+
     renderPasswordRecovery() {
         return (
             <PasswordRecovery ref="passwordRecovery" recoverSent={this.state.recoverSent} formProps={this.getRecoverFormProps()} onBackToLoginClick={this.onBackToLoginClick.bind(this)}/>
@@ -123,6 +163,11 @@ class MainHomePageLoginWidget extends React.Component {
     }
 
     onLoginFormSubmit(formState) {
+        this.setState({
+            loadingRecover: true,
+            recoverSent: false,
+            reSendEmailVerificationStep: UNVERIFIED_USER_STEP
+        })
         this.props.dispatch(SessionActions.login(formState));
     }
 
@@ -178,6 +223,29 @@ class MainHomePageLoginWidget extends React.Component {
             }
         }, () => this.refs.passwordRecovery.focusEmail());
     }
+
+    onReSendEmailVerificationClick() {
+        this.setState({
+            reSendEmailVerificationStep: LOADING_STEP,
+        })
+
+        API.call({
+            path: '/user/resend-email-verification',
+            data: {
+                email: this.state.email
+            }
+        }).then(() => {
+            this.setState({
+                reSendEmailVerificationStep: REQUEST_RESULT_STEP,
+                reSendEMailVerificationMessage: 'success'
+            })
+        }).catch(() => {
+            this.setState({
+                reSendEmailVerificationStep: REQUEST_RESULT_STEP,
+                reSendEMailVerificationMessage: 'error'
+            })
+        });
+    }
 }
 
 
@@ -185,4 +253,4 @@ export default connect((store) => {
     return {
         session: store.session
     };
-})(MainHomePageLoginWidget);
+})(MainHomePageLoginWidget);

client/src/app/main/main-home/main-home-page-login-widget.scss

@@ -18,6 +18,25 @@
     &__message {
         margin-top: 18px;
     }
+
+    &__loading > span{
+        border-top: 1.1em solid rgba($dark-grey, 0.2);
+        border-right: 1.1em solid rgba($dark-grey, 0.2);
+        border-bottom: 1.1em solid rgba($dark-grey, 0.2);
+        border-left: 1.1em solid $dark-grey;
+        margin-top: 10px;
+    }
+}
+
+.main-home-page__link-buttons-container {
+    display: flex;
+    flex-direction: column;
+    width: 329px;
+    margin: auto;
+}
+
+.main-home-page__widget {
+    min-height: 391px;
 }
 
 @media screen and (min-width: 379px) {

client/src/app/main/main-layout.scss

@@ -9,7 +9,7 @@
     transition: max-height 0.15s ease-out;
 
     &--content {
-        min-height: 400px;
+        min-height: 453px;
         padding: 20px;
 
         @media screen and (min-width: 993px) and (max-width: 1032px) {

client/src/data/languages/en.js

@@ -241,6 +241,9 @@ export default {
     'CHART_SIGNUP': 'Signups',
     'CHART_COMMENT': 'Replies',
     'CHART_ASSIGN': 'Assigned',
+    'RESEND_EMAIL_VERIFICATION': 'Resend e-mail verification',
+    'RESEND_EMAIL_VERIFICATION_SUCCESS': 'The mail was sent successfully',
+    'RESEND_EMAIL_VERIFICATION_FAIL': 'An error has occurred',
 
     //ACTIVITIES
     'ACTIVITY_COMMENT': 'commented ticket',