client - support for admin/mod users

client/app/pages/login/login.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { ContentContainer } from '../../components';
+import { UserService } from '../../services';
+
+interface Props extends RouteComponentProps<any> {}
+
+interface State {
+  username: string;
+  password: string;
+  errorMessage?: string;
+}
+
+export class Login extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: '',
+    };
+  }
+
+  private async login(event: any) {
+    event.preventDefault();
+    const { username, password } = this.state;
+
+    try {
+      await UserService.login(username, password);
+      window.location.pathname = '/';
+    } catch (e) {
+      console.error(e);
+      this.setState({ errorMessage: 'Invalid login.' });
+    }
+  }
+
+  render() {
+    const { username, password } = this.state;
+
+    return (
+      <ContentContainer>
+        <form onSubmit={e => this.login(e)}>
+          <div className="form-group">
+            <label>Username</label>
+            <input
+              autoFocus
+              type="text"
+              className="input"
+              value={username}
+              onChange={event => this.setState({ username: event.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Password</label>
+            <input type="password" className="input" value={password} onChange={event => this.setState({ password: event.target.value })} />
+          </div>
+
+          <div className="form-group">
+            <input className="input__button" type="submit" value="Submit" />
+            <span className="red" style={{ marginLeft: '10px' }}>
+              {this.state.errorMessage}
+            </span>
+          </div>
+        </form>
+      </ContentContainer>
+    );
+  }
+}