From 579ebf4a0f1c62067471c53e4e09307cd5cb17ae Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Wed, 29 Sep 2021 16:43:24 +0300
Subject: [PATCH] Alter registration page to show loading icon while
 registration request is being processed

---
 .../cc/ui/src/components/pages/RegisterPage.js           | 9 ++++++++-
 .../monkey_island/cc/ui/src/styles/pages/AuthPage.scss   | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
index 55a5fcebf..596a86f5a 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
@@ -4,11 +4,13 @@ import {Row, Col, Container, Form, Button} from 'react-bootstrap';
 import AuthService from '../../services/AuthService';
 import monkeyDetective from '../../images/detective-monkey.svg';
 import ParticleBackground from '../ui-components/ParticleBackground';
+import LoadingIcon from '../ui-components/LoadingIcon';
 
 class RegisterPageComponent extends React.Component {
 
   register = (event) => {
     event.preventDefault();
+    this.setState({loading: true})
     this.auth.register(this.username, this.password).then(res => {
       this.setState({failed: false, error: ''});
       if (res['result']) {
@@ -68,7 +70,12 @@ class RegisterPageComponent extends React.Component {
                     <Form.Control onChange={evt => this.updateUsername(evt)} type='text' placeholder='Username'/>
                     <Form.Control onChange={evt => this.updatePassword(evt)} type='password' placeholder='Password'/>
                     <Button className={'monkey-submit-button'} type={'submit'} >
-                      Let's go!
+                      {
+                        this.state.loading ?
+                          <LoadingIcon/>
+                          :
+                          'Let\'s go!'
+                      }
                     </Button>
                     <Row>
                       <Col>
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss
index 80bd54507..3392fcee7 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss
@@ -35,3 +35,11 @@
   margin-bottom: 20px;
   text-align: center;
 }
+
+.auth-container .monkey-submit-button:hover .loading-icon {
+  color: $monkey-black;
+}
+
+.auth-container .monkey-submit-button:focus .loading-icon {
+  color: $monkey-black;
+}