From 0a342fc2e30465eb741577c20f29779e2481faeb Mon Sep 17 00:00:00 2001
From: Timur Demin <me@tdem.in>
Date: Mon, 11 Nov 2019 00:41:32 +0500
Subject: [PATCH] Display error messages on signup fail

---
 src/views/assets/locales.ts |  4 ++++
 src/views/signupForm.tsx    | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/views/assets/locales.ts b/src/views/assets/locales.ts
index c050040..dc1a4c7 100644
--- a/src/views/assets/locales.ts
+++ b/src/views/assets/locales.ts
@@ -8,6 +8,10 @@ export default new LocalizedStrings({
         login_userNameTp: "User name",
         login_passwordTp: "Password",
         login_wrongPassTp: "Login failed. Check username and password.",
+        signup_msg: "Signup failed",
+        signup_unknownError: "Unknown error",
+        signup_disabled: "Signup disabled",
+        signup_userExists: "User with this name exists",
         login_signupBtn: "Sign up",
         login_goBackBtn: "Go back",
         main_loggedInMsg: "Logged in as",
diff --git a/src/views/signupForm.tsx b/src/views/signupForm.tsx
index 259cd1e..f688214 100644
--- a/src/views/signupForm.tsx
+++ b/src/views/signupForm.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { RouteComponentProps as RCP } from "react-router-dom";
+import { AxiosError, AxiosResponse } from "axios";
 
 import req from "../axios";
 
@@ -12,10 +13,15 @@ enum Status {
     SUCCESS,
     UNDEFINED,
 }
+enum Errors {
+    FORBIDDEN = 403,
+    USER_EXISTS = 409,
+}
 interface State {
     name: string;
     password: string;
     status: Status;
+    httpCode: number;
 }
 
 class SignupForm extends React.PureComponent<RCP, State> {
@@ -23,6 +29,7 @@ class SignupForm extends React.PureComponent<RCP, State> {
         name: "",
         password: "",
         status: Status.UNDEFINED,
+        httpCode: 0,
     };
     componentDidUpdate = () => {
         if (this.state.status === Status.SUCCESS) {
@@ -39,7 +46,10 @@ class SignupForm extends React.PureComponent<RCP, State> {
         })
         .then(
             () => this.setState({ status: Status.SUCCESS }),
-            () => this.setState({ status: Status.FAILED })
+            (e: AxiosError) => this.setState({
+                status: Status.FAILED,
+                httpCode: (e.response as AxiosResponse).status
+            })
         );
     };
     goBack = () => this.props.history.push("/");
@@ -48,6 +58,15 @@ class SignupForm extends React.PureComponent<RCP, State> {
     updatePassword = (e: React.FormEvent<HTMLInputElement>) =>
         this.setState({ password: e.currentTarget.value });
     render = () => {
+        let message: string;
+        switch (this.state.httpCode) {
+            case Errors.FORBIDDEN:
+                message = strings.signup_disabled;
+            case Errors.USER_EXISTS:
+                message = strings.signup_userExists;
+            default:
+                message = strings.signup_unknownError;
+        }
         return (
             <div className="container signup_form">
                 <form className="signupForm">
@@ -87,6 +106,16 @@ 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>
+                        </div>
                         <div className="level-item level-right">
                             <div className="control">
                                 <input