support account activation code

packages/app/src/components/Login/index.jsx

@@ -40,7 +40,9 @@ class Login extends React.Component {
         loginInputs: {},
         error: null,
         phase: 0,
+
         mfa_required: null,
+        activation: null,
         forbidden: false,
     }
 
@@ -67,6 +69,15 @@ class Login extends React.Component {
                         forbidden: error.response.data.violation
                     })
                 }
+
+                if (error.response.data.activation_required) {
+                    return this.setState({
+                        activation: {
+                            required: true,
+                            user_id: error.response.data.user_id,
+                        },
+                    })
+                }
             }
 
             console.error(error, error.response)
@@ -95,12 +106,61 @@ class Login extends React.Component {
         }
 
         if (typeof this.props.onDone === "function") {
-            this.props.onDone()
+            await this.props.onDone()
         }
 
         return true
     }
 
+    onClickActivateAccount = async () => {
+        const activationObj = this.state.activation
+
+        if (!activationObj) {
+            return null
+        }
+
+        try {
+            await AuthModel.activateAccount(
+                this.state.activation.user_id,
+                this.state.activation.code
+            )
+
+            this.handleFinish()
+        } catch (error) {
+            this.setState({
+                activation: {
+                    ...this.state.activation,
+                    error: error
+                }
+            })
+
+            console.error(error)
+        }
+    }
+
+    onClickResendActivationCode = async () => {
+        const activationObj = this.state.activation
+
+        if (!activationObj) {
+            return null
+        }
+
+        const rensendObj = await AuthModel.resendActivationCode(activationObj.user_id)
+            .catch((error) => {
+                app.message.info(`Please try again later...`)
+                return null
+            })
+
+        if (rensendObj) {
+            this.setState({
+                activation: {
+                    ...this.state.activation,
+                    resended: rensendObj.date,
+                },
+            })
+        }
+    }
+
     onClickForgotPassword = () => {
         if (this.props.locked) {
             this.props.unlock()
@@ -235,14 +295,61 @@ class Login extends React.Component {
             </div>
         }
 
+        if (this.state.activation) {
+            return <div className="login_wrapper">
+                <div className="content">
+                    <h1>Activate your Account</h1>
+                    <p>We have sent you an email with a code that you need to enter below in order to activate your account.</p>
+
+                    <antd.Input.OTP
+                        length={6}
+                        onChange={(code) => this.setState({
+                            activation: {
+                                ...this.state.activation,
+                                code: code,
+                            }
+                        })}
+                    />
+
+                    <div className="resend">
+                        {
+                            this.state.activation.resended && <antd.Alert
+                                message={`Mail resended`}
+                            />
+                        }
+                        <a
+                            href="#"
+                            onClick={this.onClickResendActivationCode}
+                        >
+                            Didn't receive the email?
+                        </a>
+                    </div>
+
+                    {
+                        this.state.activation.error && <div className="field-error">
+                            {this.state.activation.error.response.data.error}
+                        </div>
+                    }
+
+                    <antd.Button
+                        onClick={this.onClickActivateAccount}
+                    >
+                        Activate
+                    </antd.Button>
+                </div>
+            </div>
+        }
+
         return <div className="login_wrapper">
             <div className="content">
-                <h1>
+                <div className="header">
-                    Sign in
+                    <h1>
-                </h1>
+                        Sign in
-                <h3>
+                    </h1>
-                    To continue to {config.app.siteName}
+                    <h3>
-                </h3>
+                        To continue to {config.app.siteName}
+                    </h3>
+                </div>
 
                 <antd.Form
                     name="login"
@@ -332,9 +439,11 @@ class Login extends React.Component {
                     </antd.Button>
                 </div>
 
-                <div className="field-error">
+                {
-                    {this.state.error}
+                    this.state.error && <div className="field-error">
-                </div>
+                        {this.state.error}
+                    </div>
+                }
 
                 <div className="field" onClick={this.onClickForgotPassword}>
                     <a>Forgot your password?</a>

packages/app/src/components/Login/index.less

@@ -47,20 +47,18 @@
 
 		padding: 40px 0;
 
+		gap: 20px;
+
 		border-radius: 12px;
 
 		.fields {
 			display: flex;
 			flex-direction: column;
 
-			margin-top: 20px;
-
 			.field {
 				display: flex;
 				flex-direction: column;
 
-				margin-bottom: 20px;
-
 				transition: all 150ms ease-in-out;
 
 				&.hidden {