Make the signup form a lot more dynamic

tdemin · Nov 10, 2019 · 7155493 · 7155493
1 parent 399320b
commit 7155493
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/src/views/assets/locales.ts b/src/views/assets/locales.ts
@@ -8,7 +8,9 @@ export default new LocalizedStrings({
         login_userNameTp: "User name",
         login_passwordTp: "Password",
         login_wrongPassTp: "Login failed. Check username and password.",
-        signup_msg: "Signup failed",
+        signup_processMsg: "Signing up...",
+        signup_successMsg: "Success. Redirecting to login...",
+        signup_failMsg: "Signup failed",
         signup_unknownError: "Unknown error",
         signup_disabled: "Signup disabled",
         signup_userExists: "User with this name exists",

diff --git a/src/views/signupForm.tsx b/src/views/signupForm.tsx
@@ -9,9 +9,10 @@ import strings from "./assets/locales";
 import "./styles/signupForm.scss";
 
 enum Status {
+    UNDEFINED,
     FAILED,
     SUCCESS,
-    UNDEFINED,
+    IN_PROCESS,
 }
 enum Errors {
     FORBIDDEN = 403,
@@ -24,6 +25,22 @@ interface State {
     httpCode: number;
 }
 
+interface MsgProps {
+    message: string;
+    code: Status;
+    matchCode: Status;
+}
+/**
+ * Used for displaying messages on matching status code.
+ */
+const Msg: React.FC<MsgProps> = (props) => (
+    <span
+        style={{ display: props.code === props.matchCode ? "block" : "none" }}
+    >
+        {props.message}
+    </span>
+);
+
 class SignupForm extends React.PureComponent<RCP, State> {
     state = {
         name: "",
@@ -39,6 +56,7 @@ class SignupForm extends React.PureComponent<RCP, State> {
         }
     };
     signup = () => {
+        this.setState({ status: Status.IN_PROCESS });
         // prettier-ignore
         req.post("/signup", {
             name: this.state.name,
@@ -107,14 +125,21 @@ class SignupForm extends React.PureComponent<RCP, State> {
                             </div>
                         </div>
                         <div className="level-item">
-                            <span
-                                style={{
-                                    display:
-                                        this.state.status === Status.FAILED
-                                            ? "block"
-                                            : "none",
-                                }}
-                            >{`${strings.signup_msg}: ${message}`}</span>
+                            <Msg
+                                code={this.state.status}
+                                matchCode={Status.FAILED}
+                                message={`${strings.signup_failMsg}: ${message}`}
+                            />
+                            <Msg
+                                code={this.state.status}
+                                matchCode={Status.IN_PROCESS}
+                                message={strings.signup_processMsg}
+                            />
+                            <Msg
+                                code={this.state.status}
+                                matchCode={Status.SUCCESS}
+                                message={strings.signup_successMsg}
+                            />
                         </div>
                         <div className="level-item level-right">
                             <div className="control">