Merge pull request #262 from CodeForPhilly/feat/login-error

add UI error state when login fails; remove unused packages

Author: MikeyManoguerra

frontend/package.json

@@ -53,7 +53,6 @@
     "babel-polyfill": "^6.26.0",
     "clsx": "^1.0.4",
     "lodash": "^4.17.11",
-    "material": "^0.4.1",
     "material-table": "^1.39.2",
     "mobx": "^5.9.4",
     "mobx-react": "^5.4.3",
@@ -64,8 +63,7 @@
     "query-string": "^6.9.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
-    "react-router-dom": "^5.1.2",
-    "src": "^1.1.2"
+    "react-router-dom": "^5.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",

frontend/src/components/LoginForm.js

@@ -10,6 +10,7 @@ import FormControl from "@material-ui/core/FormControl"
 import InputLabel from "@material-ui/core/InputLabel"
 import Input from "@material-ui/core/Input"
 import Button from "@material-ui/core/Button"
+import Typography from "@material-ui/core/Typography"
 
 const LoginForm = observer(({ location }) => {
   const rootStore = useContext(rootStoreContext)
@@ -40,6 +41,7 @@ const LoginForm = observer(({ location }) => {
               type="username"
               value={username}
               onChange={changeUsername}
+              error={rootStore.authStore.error}
               required
             />
           </FormControl>
@@ -53,13 +55,24 @@ const LoginForm = observer(({ location }) => {
               value={password}
               type="password"
               onChange={changePassword}
+              error={rootStore.authStore.error}
               required
             />
           </FormControl>
         </FormGroup>
         <Button type="submit" variant="contained" style={{ marginTop: "10px" }}>
           Sign In
         </Button>
+        {rootStore.authStore.error && (
+          <Typography
+            className="login-form__error"
+            component="p"
+            variant="body2"
+            gutterBottom
+          >
+            Incorrect Username or password
+          </Typography>
+        )}
       </form>
     </div>
   )

frontend/src/scss/login-form.scss

@@ -7,4 +7,9 @@
       max-width: 320px;
     }
   }
+
+  .login-form__error {
+    color: #ff000f;
+    padding-top: 10px;
+  }
 }

frontend/src/stores/AuthStore.js

@@ -10,6 +10,7 @@ export class AuthStore {
   @observable isAuthenticated = null
   @observable username = null
   @observable email = null
+  @observable error = null
 
   @action
   setIsAuthenticated(auth) {
@@ -24,6 +25,10 @@ export class AuthStore {
     this.username = email
   }
   @action
+  setError(error) {
+    this.error = error
+  }
+  @action
   logout() {
     localStorage.removeItem("JWT_ACCESS")
     localStorage.removeItem("JWT_REFRESH")
@@ -39,9 +44,12 @@ export class AuthStore {
         this.setIsAuthenticated(true)
         this.setUsername(data.username)
         this.setEmail(data.email)
+        this.setError(data.null)
+      } else {
+        throw new Error()
       }
     } catch (error) {
-      throw "AuthStore:  login() Failed  =>  " + error
+      this.setError(true)
     }
   })
 }