moving to vite as build system 🎉

ui/src/views/login/Login.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Input } from 'semantic-ui-react';
+
+import cityBackground from '../../assets/city_background.jpg';
+import Logo from '../../components/logo/Logo';
+import { xhrPost } from '../../services/xhr';
+import { Message } from 'semantic-ui-react';
+import { useHistory } from 'react-router';
+import { useDispatch } from 'react-redux';
+
+import './login.less';
+
+export default function Login() {
+  const dispatch = useDispatch();
+
+  const [username, setUserName] = React.useState('');
+  const [password, setPassword] = React.useState('');
+  const [error, setError] = React.useState(null);
+
+  const history = useHistory();
+
+  const tryLogin = async () => {
+    if (username.length === 0 || password.length === 0) {
+      setError('Username and password are mandatory.');
+      return;
+    }
+    try {
+      await xhrPost('/api/login', {
+        username,
+        password,
+      });
+      setError(null);
+    } catch (Exception) {
+      setError('Login not successful...');
+      return;
+    }
+    await dispatch.user.getCurrentUser();
+    history.push('/jobs');
+  };
+
+  return (
+    <div className="login">
+      <div className="login__bgImage" style={{ background: `url("${cityBackground}")` }} />
+      <Logo />
+      <form>
+        <div className="login__loginWrapper">
+          {error && <Message negative icon="error" content={error} />}
+          <Input
+            icon="user"
+            iconPosition="left"
+            placeholder="Username"
+            defaultValue={username}
+            style={{ marginTop: error ? '1rem' : '4rem' }}
+            autoFocus
+            onChange={(e) => setUserName(e.target.value)}
+          />
+
+          <Input
+            type="password"
+            icon="lock"
+            iconPosition="left"
+            defaultValue={password}
+            placeholder="Password"
+            style={{ marginTop: '2rem' }}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+
+          <button className="ui primary button" style={{ marginTop: '3rem' }} onClick={tryLogin}>
+            Login
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+Login.displayName = 'Login';