Add components folder with Login page

7 files changed, 127 insertions, 0 deletions

diff --git a/frontend/src/components/NotFound.tsx b/frontend/src/components/NotFound.tsx
new file mode 100644
index 00000000..a01a48e3
--- /dev/null
+++ b/frontend/src/components/NotFound.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const NotFound = () => <p>Not Found</p>;
+
+export default NotFound;
diff --git a/frontend/src/components/activity/Index.tsx b/frontend/src/components/activity/Index.tsx
new file mode 100644
index 00000000..81ef5836
--- /dev/null
+++ b/frontend/src/components/activity/Index.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const Activity = () => <p>Activity</p>;
+
+export default Activity;
diff --git a/frontend/src/components/bank-accounts/Index.tsx b/frontend/src/components/bank-accounts/Index.tsx
new file mode 100644
index 00000000..7d806480
--- /dev/null
+++ b/frontend/src/components/bank-accounts/Index.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const BankAccounts = () => <p>Bank Accounts</p>;
+
+export default BankAccounts;
diff --git a/frontend/src/components/home/Index.tsx b/frontend/src/components/home/Index.tsx
new file mode 100644
index 00000000..29af137f
--- /dev/null
+++ b/frontend/src/components/home/Index.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { logout } from '../../actions/auth';
+
+interface Props {
+  logoutConnect: () => void;
+}
+
+const Home = ({ logoutConnect }: Props) => (
+  <>
+    <p>Home page</p>
+    <ul>
+      <li>
+        <Link to="/activity">Activity</Link>
+      </li>
+      <li>
+        <Link to="/bank-accounts">Bank Accounts</Link>
+      </li>
+      <li>
+        <Link to="/non-existent-link">Non existent link</Link>
+      </li>
+    </ul>
+    <button type="button" onClick={logoutConnect}>
+      Logout
+    </button>
+  </>
+);
+
+const mapDispatchToProps = {
+  logoutConnect: logout,
+};
+
+export default connect(null, mapDispatchToProps)(Home);
diff --git a/frontend/src/components/login/Index.tsx b/frontend/src/components/login/Index.tsx
new file mode 100644
index 00000000..261eca39
--- /dev/null
+++ b/frontend/src/components/login/Index.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { Form, Input, Button } from 'antd';
+import { LoginOutlined } from '@ant-design/icons';
+import { login } from '../../actions/auth';
+import largeLogo from './libeufin-logo-large.png';
+import './Login.less';
+
+interface Props {
+  loginConnect: (nexusURL: string, username: string, password: string) => void;
+}
+
+const Login = ({ loginConnect }: Props) => {
+  const [nexusURL, setNexusURL] = useState('localhost:5000');
+  const [username, setUsername] = useState('user1');
+  const [password, setPassword] = useState('user1');
+
+  const layout = {
+    wrapperCol: { span: 32 },
+  };
+
+  return (
+    <div className="login">
+      <img className="img" src={largeLogo} alt="LibEuFin large logo" />
+      <Form {...layout} size="large">
+        <Form.Item>
+          <Input
+            placeholder="Nexus Server URL"
+            defaultValue="localhost:5000"
+            onChange={(e) => setNexusURL(e.target.value)}
+          />
+        </Form.Item>
+        <Form.Item>
+          <Input
+            placeholder="Username"
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </Form.Item>
+        <Form.Item>
+          <Input.Password
+            placeholder="Password"
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </Form.Item>
+        <div className="button">
+          <Button
+            type="primary"
+            icon={<LoginOutlined />}
+            onClick={() => loginConnect(nexusURL, username, password)}
+          >
+            Login
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
+};
+
+const mapDispatchToProps = {
+  loginConnect: login,
+};
+
+export default connect(null, mapDispatchToProps)(Login);
diff --git a/frontend/src/components/login/Login.less b/frontend/src/components/login/Login.less
new file mode 100644
index 00000000..bd8cb220
--- /dev/null
+++ b/frontend/src/components/login/Login.less
@@ -0,0 +1,15 @@
+.img {
+  margin-bottom: 24px;
+}
+
+.login {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.button {
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/frontend/src/components/login/libeufin-logo-large.png b/frontend/src/components/login/libeufin-logo-large.png
new file mode 100644
index 00000000..d9c6a701
--- /dev/null
+++ b/frontend/src/components/login/libeufin-logo-large.png