Issue 1401 login

components/frontend/src/App.js

@@ -11,7 +11,6 @@ import { Menubar } from './header_footer/Menubar';
 import { Footer } from './header_footer/Footer';
 import { createBrowserHistory } from 'history';
 import { ReadOnlyContext } from './context/ReadOnly';
-import { login, logout } from './api/auth';
 import { get_datamodel } from './api/datamodel';
 import { get_reports, get_tag_report } from './api/report';
 import { nr_measurements_api } from './api/measurement';
@@ -22,7 +21,7 @@ class App extends Component {
     super(props);
     this.state = {
       datamodel: {}, reports: [], report_uuid: '', search_string: '', report_date_string: '', reports_overview: {},
-      nr_measurements: 0, loading: true, user: null, email: null, last_update: new Date(), login_error: false
+      nr_measurements: 0, loading: true, user: null, email: null, last_update: new Date()
     };
     this.history = createBrowserHistory();
     this.history.listen((location, action) => {
@@ -184,31 +183,16 @@ class App extends Component {
     return report_date;
   }
 
-  login(username, password) {
-    let self = this;
-    login(username, password)
-      .then(function (json) {
-        if (json.ok) {
-          const email = json.email.indexOf("@") > -1 ? json.email : null;
-          self.setState({ user: username, email: email, login_error: false })
-          localStorage.setItem("user", username)
-          localStorage.setItem("email", email)
-        } else {
-          self.setState({ login_error: true })
-        }
-      })
-      .catch(function (error) {
-        self.setState({ login_error: true });
-      });
-  }
-
-  logout() {
-    let self = this;
-    logout().then(() => {
-      self.setState({ user: null });
+  set_user(username, email) {
+    const email_address = email && email.indexOf("@") > -1 ? email : null;
+    this.setState({ user: username, email: email_address });
+    if (username === null) {
       localStorage.removeItem("user");
       localStorage.removeItem("email");
-    })
+    } else {
+      localStorage.setItem("user", username);
+      localStorage.setItem("email", email_address);
+    }
   }
 
   render() {
@@ -223,13 +207,11 @@ class App extends Component {
           email={this.state.email}
           go_dashboard={(e) => this.go_dashboard(e)}
           go_home={() => this.go_home()}
-          login={(u, p) => this.login(u, p)}
-          login_error={this.state.login_error}
-          logout={(e) => this.logout(e)}
           onDate={(e, { name, value }) => this.handleDateChange(e, { name, value })}
           onSearch={(e) => this.handleSearchChange(e)}
           report_date_string={this.state.report_date_string}
           searchable={current_report !== null}
+          set_user={(username, email) => this.set_user(username, email)}
           user={this.state.user}
         />
         <SemanticToastContainer />

components/frontend/src/App.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import App from './App';
 
 let container;
@@ -77,4 +77,15 @@ describe("<App/>", () => {
     wrapper.instance().go_dashboard(new Event('click'));
     expect(scrollIntoView).toHaveBeenCalled()
   });
+
+  it('sets the user', () => {
+    const wrapper = mount(<App />);
+    wrapper.instance().set_user("admin", "[email protected]");
+    expect(wrapper.state("user")).toBe("admin");
+    expect(wrapper.state("email")).toBe("[email protected]");
+    wrapper.instance().set_user(null);
+    expect(wrapper.state("user")).toBe(null);
+    expect(wrapper.state("email")).toBe(null);
+  });
 });
+

components/frontend/src/header_footer/Menubar.js

@@ -1,17 +1,34 @@
 import React, { useState } from 'react';
 import { Button, Container, Form, Header, Icon, Image, Input, Menu, Message, Modal, Dropdown, Popup } from 'semantic-ui-react';
+import { login, logout } from '../api/auth';
 import { DatePicker } from '../widgets/DatePicker';
 import { Avatar } from '../widgets/Avatar';
 import './Menubar.css';
 
 function Login(props) {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [login_error, setLoginError] = useState(false);
+
+  function submit() {
+    login(username, password)
+      .then(function (json) {
+        if (json.ok) {
+          props.set_user(username, json.email)
+        } else {
+          setLoginError(true);
+        }
+      })
+      .catch(function (error) {
+        setLoginError(true);
+      });
+  }
+
   return (
-    <Modal trigger={<Button secondary><Icon name='user' />Login</Button>} size='tiny'>
+    <Modal trigger={<Button secondary><Icon name='user' />Login</Button>} size='tiny' onClose={() => setLoginError(false)} >
       <Header content='Login' />
       <Modal.Content>
-        <Form error={props.error} warning={!props.error} onSubmit={() => props.login(username, password)}>
+        <Form error={login_error} warning={!login_error} onSubmit={() => submit()} >
           <Form.Input autoFocus label='Username' name='username' onChange={(event, { value }) => setUsername(value)} />
           <Form.Input type='password' label='Password' name='password' onChange={(event, { value }) => setPassword(value)} />
           <Message error header='Invalid credentials' content='Username and/or password are invalid. Please try again.' />
@@ -28,7 +45,7 @@ function Logout(props) {
   return (
     <Dropdown
       trigger={trigger}
-      options={[{ key: "logout", text: "Logout", icon: "log out", onClick: props.logout }]}
+      options={[{ key: "logout", text: "Logout", icon: "log out", onClick: () => {logout().then(() => props.set_user(null))} }]}
     />
   )
 }
@@ -60,7 +77,7 @@ export function Menubar(props) {
             <DatePicker onDate={props.onDate} name="report_date_string" value={props.report_date_string} label="Report date" />
           </Menu.Item>
           <Menu.Item>
-            {(props.user !== null) ? <Logout email={props.email} user={props.user} logout={props.logout} /> : <Login login={props.login} error={props.login_error} />}
+            {(props.user !== null) ? <Logout email={props.email} user={props.user} set_user={props.set_user} /> : <Login set_user={props.set_user} />}
           </Menu.Item>
         </Menu.Menu>
       </Container>

docs/CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 - The 'source up-to-dateness' metric combined with the Calendar would report a parse error instead of returning the number of days since the specified date. Fixes [#1399](https://github.com/ICTU/quality-time/issues/1399).
+- After an attempt to login with invalid credentials and closing/reopening the login dialog, it would still show the error message. Fixes [#1401](https://github.com/ICTU/quality-time/issues/1401).
 - When measuring 'tests' with Azure Devops, test runs could not be marked as false positive or won't fix. Fixes [#1402](https://github.com/ICTU/quality-time/issues/1402).
 
 ## [3.2.0] - [2020-08-22]