Add loading state to log in button (#287)

* add loading state to log in button

 - updated local state to include 'loading'
 - conditionally render loading div or just "Login" string on the login
 button
 - add styles for spinner in plain css

* Fix spacing to please prettier checks

frontend/src/components/account/Login.js

@@ -13,7 +13,8 @@ class Login extends Component {
       password: '',
       username: '',
       isLoggedIn: this.isLoggedIn(),
-      errors: []
+      errors: [],
+      loading: false
     };
   }
 
@@ -25,7 +26,7 @@ class Login extends Component {
 
   handleSubmit = async event => {
     event.preventDefault();
-    this.setState({ errors: [] });
+    this.setState({ errors: [], loading: true });
 
     try {
       const { message, success, result } = await login({
@@ -36,9 +37,10 @@ class Login extends Component {
       if (success) {
         const cookies = new Cookies();
         cookies.set('jwt', result['auth_token'], { path: '/' });
-        this.setState({ isLoggedIn: this.isLoggedIn() });
+        this.setState({ isLoggedIn: this.isLoggedIn(), loading: false });
       } else {
         // TODO: Display message if login wasn't successful
+        this.setState({ loading: false });
         this.handleAPIErrors(message);
       }
     } catch (e) {
@@ -117,7 +119,7 @@ class Login extends Component {
                   type="submit"
                   onClick={this.handleSubmit}
                 >
-                  Login
+                  {this.state.loading ? <div className="spinner" /> : 'Login'}
                 </Button>
               </FormGroup>
             </Card>

frontend/src/styles/Login.scss

@@ -28,3 +28,21 @@
   padding: 15px;
   border-radius: 10px;
 }
+
+.spinner {
+  border: 5px solid #000;
+  border-top: 5px solid #fff;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  animation: spin 1.2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}