Login button should be disabled while user is waiting for login result

jannfis · Apr 17, 2020 · a3ddb91 · a3ddb91
1 parent 3028f35
commit a3ddb91
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/docs/operator-manual/user-management/index.md b/docs/operator-manual/user-management/index.md
@@ -113,7 +113,7 @@ Default: 300 (5 minutes). If this is set to 0, the failure window is
 disabled and the delay kicks in after 10 consecutive logon failures,
 regardless of the time frame they happened.
 
-`ARGOCD_SESSION_MAX_CACHE_SIZE`: Maximum number of entries allowed in the
+* `ARGOCD_SESSION_MAX_CACHE_SIZE`: Maximum number of entries allowed in the
 cache. Default: 1000
 
 ## SSO

diff --git a/ui/src/app/login/components/login.tsx b/ui/src/app/login/components/login.tsx
@@ -18,6 +18,7 @@ export interface LoginForm {
 interface State {
     authSettings: AuthSettings;
     loginError: string;
+    loginInProgress: boolean;
     returnUrl: string;
     ssoLoginError: string;
 }
@@ -36,7 +37,7 @@ export class Login extends React.Component<RouteComponentProps<{}>, State> {
 
     constructor(props: RouteComponentProps<{}>) {
         super(props);
-        this.state = {authSettings: null, loginError: null, returnUrl: null, ssoLoginError: null};
+        this.state = {authSettings: null, loginError: null, returnUrl: null, ssoLoginError: null, loginInProgress: false};
     }
 
     public async componentDidMount() {
@@ -93,7 +94,7 @@ export class Login extends React.Component<RouteComponentProps<{}>, State> {
                                         {this.state.loginError && <div className='argo-form-row__error-msg'>{this.state.loginError}</div>}
                                     </div>
                                     <div className='login__form-row'>
-                                        <button className='argo-button argo-button--full-width argo-button--xlg' type='submit'>
+                                        <button disabled={this.state.loginInProgress} className='argo-button argo-button--full-width argo-button--xlg' type='submit'>
                                             Sign In
                                         </button>
                                     </div>
@@ -116,17 +117,18 @@ export class Login extends React.Component<RouteComponentProps<{}>, State> {
 
     private async login(username: string, password: string, returnURL: string) {
         try {
-            this.setState({loginError: ''});
+            this.setState({loginError: '', loginInProgress: true});
             this.appContext.apis.navigation.goto('.', {sso_error: null});
             await services.users.login(username, password);
+            this.setState({loginInProgress: false});
             if (returnURL) {
                 const url = new URL(returnURL);
                 this.appContext.apis.navigation.goto(url.pathname + url.search);
             } else {
                 this.appContext.apis.navigation.goto('/applications');
             }
         } catch (e) {
-            this.setState({loginError: e.response.body.error});
+            this.setState({loginError: e.response.body.error, loginInProgress: false});
         }
     }