diff --git a/frontend/src/components/account/Login.js b/frontend/src/components/account/Login.js index a40cc4f..e973712 100644 --- a/frontend/src/components/account/Login.js +++ b/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 ?
: 'Login'} diff --git a/frontend/src/styles/Login.scss b/frontend/src/styles/Login.scss index 09ec0ac..cd18832 100644 --- a/frontend/src/styles/Login.scss +++ b/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); + } +}