[libeufin] branch master updated (4c5b5fe -> 96c26bc)

[gnunet]

This is an automated email from the git hooks/post-receive script.

heng-yeow pushed a change to branch master
in repository libeufin.

    from 4c5b5fe  nullable creditor BIC
     new a29532e  Display existing bank connections and bank accounts
     new b6c1f45  Enable 'enter' keystroke support for login page
     new 96c26bc  Add styles for bank accounts page

The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../src/components/bank-accounts/BankAccounts.less |  33 +++++
 frontend/src/components/bank-accounts/Index.tsx    | 152 ++++++++++++++++-----
 frontend/src/components/login/Index.tsx            |  25 +++-
 3 files changed, 171 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/components/bank-accounts/BankAccounts.less

diff --git a/frontend/src/components/bank-accounts/BankAccounts.less 
b/frontend/src/components/bank-accounts/BankAccounts.less
new file mode 100644
index 0000000..3fab2aa
--- /dev/null
+++ b/frontend/src/components/bank-accounts/BankAccounts.less
@@ -0,0 +1,33 @@
+.bank-accounts {
+  margin-top: 50px;
+}
+
+.buttons-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.buttons-row button {
+  margin-left: 40px;
+  margin-bottom: 50px;
+}
+
+.steps-row {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 50px;
+}
+
+.steps-row .ant-steps {
+  width: 50%;
+}
+
+.steps-action {
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin-bottom: 40px;
+}
diff --git a/frontend/src/components/bank-accounts/Index.tsx 
b/frontend/src/components/bank-accounts/Index.tsx
index ccb37b9..69f2f2c 100644
--- a/frontend/src/components/bank-accounts/Index.tsx
+++ b/frontend/src/components/bank-accounts/Index.tsx
@@ -1,45 +1,133 @@
 import React, { useState } from 'react';
+import { Button, Card, Col, Row, Tabs } from 'antd';
+import './BankAccounts.less';
+// import AddBankConnectionDrawer from './AddBankConnectionDrawer';
+
+const { TabPane } = Tabs;
 
 const BankAccounts = () => {
   const [connectionsList, setConnectionsList] = useState([]);
+  const [accountsList, setAccountsList] = useState([]);
 
-  React.useEffect(() => {
-    const fetchBankConnections = async () => {
-      const authHeader = await window.localStorage.getItem('authHeader');
-      await fetch(`/bank-connections`, {
-        headers: new Headers({
-          Authorization: `Basic ${authHeader}`,
-        }),
+  const fetchBankConnections = async () => {
+    const authHeader = await window.localStorage.getItem('authHeader');
+    await fetch(`/bank-connections`, {
+      headers: new Headers({
+        Authorization: `Basic ${authHeader}`,
+      }),
+    })
+      .then((response) => {
+        console.log(response);
+        if (response.ok) {
+          return response.json();
+        }
+        throw 'Cannot fetch bank connections';
+      })
+      .then((response) => {
+        setConnectionsList(response.bankConnections);
+      })
+      .catch((err) => {
+        console.log(err);
+        throw new Error(err);
+      });
+  };
+
+  const fetchBankAccounts = async () => {
+    const authHeader = await window.localStorage.getItem('authHeader');
+    await fetch(`/bank-accounts`, {
+      headers: new Headers({
+        Authorization: `Basic ${authHeader}`,
+      }),
+    })
+      .then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        throw 'Cannot fetch bank accounts';
       })
-        .then((response) => {
-          if (response.ok) {
-            return response.json();
-          }
-          throw 'Cannot fetch bank connections';
-        })
-        .then((response) => {
-          setConnectionsList(response.bankConnections);
-        })
-        .catch((err) => {
-          throw new Error(err);
-        });
-    };
+      .then((response) => {
+        setAccountsList(response.accounts);
+      })
+      .catch((err) => {
+        console.log(err);
+        throw new Error(err);
+      });
+  };
+
+  React.useEffect(() => {
     fetchBankConnections();
+    fetchBankAccounts();
   }, []);
 
+  const [visible, setVisible] = useState(false);
+  const showDrawer = () => {
+    setVisible(true);
+  };
+  const onClose = () => {
+    setVisible(false);
+    fetchBankConnections();
+    fetchBankAccounts();
+  };
+
   return (
-    <>
-      <h1>Bank Accounts</h1>
-      <h2>Bank connections</h2>
-      {connectionsList
-        ? connectionsList.map((bankConnection) => (
-            <div>
-              <p>Name: {bankConnection['name']}</p>
-              <p>Type: {bankConnection['type']}</p>
-            </div>
-          ))
-        : null}
-    </>
+    <div className="bank-accounts">
+      <Tabs defaultActiveKey="1" type="card" size="large">
+        <TabPane tab="Bank connections" key="1">
+          <div className="buttons-row">
+            <Button type="primary" size="middle" onClick={showDrawer}>
+              Add bank connection
+            </Button>
+            {/* <AddBankConnectionDrawer visible={visible} onClose={onClose} 
/> */}
+            <Button type="primary" size="middle">
+              Import from backup
+            </Button>
+            <Button type="primary" size="middle">
+              Reload connections
+            </Button>
+          </div>
+          <Row gutter={[40, 40]}>
+            {connectionsList
+              ? connectionsList.map((bankConnection) => (
+                  <Col span={8}>
+                    <Card
+                      title={String(bankConnection['type']).toUpperCase()}
+                      bordered={false}
+                    >
+                      <p>Name: {bankConnection['name']}</p>
+                    </Card>
+                  </Col>
+                ))
+              : null}
+          </Row>
+        </TabPane>
+        <TabPane tab="Your accounts" key="2">
+          <div className="buttons-row">
+            <Button type="primary" size="middle">
+              Add bank account
+            </Button>
+          </div>
+          <Row gutter={[40, 40]}>
+            {accountsList
+              ? accountsList.map((bankAccount) => (
+                  <Col span={8}>
+                    <Card
+                      title={String(bankAccount['account']).toUpperCase()}
+                      bordered={false}
+                    >
+                      <p>Holder: {bankAccount['holder']}</p>
+                      <p>IBAN: {bankAccount['iban']}</p>
+                      <p>BIC: {bankAccount['bic']}</p>
+                    </Card>
+                  </Col>
+                ))
+              : null}
+          </Row>
+        </TabPane>
+        <TabPane tab="Recipient accounts" key="3">
+          Placeholder
+        </TabPane>
+      </Tabs>
+    </div>
   );
 };
 
diff --git a/frontend/src/components/login/Index.tsx 
b/frontend/src/components/login/Index.tsx
index e73e234..15f2b50 100644
--- a/frontend/src/components/login/Index.tsx
+++ b/frontend/src/components/login/Index.tsx
@@ -20,6 +20,21 @@ const Login = ({ loginConnect }: Props) => {
     wrapperCol: { span: 32 },
   };
 
+  const login = () => {
+    loginConnect(nexusURL, username, password)
+      .then(() => {
+        setAuthenticationFailure(false);
+      })
+      .catch((err) => setAuthenticationFailure(true));
+  };
+
+  const enterPressed = (event) => {
+    let code = event.keyCode || event.which;
+    if (code === 13) {
+      login();
+    }
+  };
+
   return (
     <div className="login">
       {authenticationFailure ? (
@@ -43,25 +58,21 @@ const Login = ({ loginConnect }: Props) => {
           <Input
             placeholder="Username"
             onChange={(e) => setUsername(e.target.value)}
+            onKeyPress={(e) => enterPressed(e)}
           />
         </Form.Item>
         <Form.Item>
           <Input.Password
             placeholder="Password"
             onChange={(e) => setPassword(e.target.value)}
+            onKeyPress={(e) => enterPressed(e)}
           />
         </Form.Item>
         <div className="button">
           <Button
             type="primary"
             icon={<LoginOutlined />}
-            onClick={() =>
-              loginConnect(nexusURL, username, password)
-                .then(() => {
-                  setAuthenticationFailure(false);
-                })
-                .catch((err) => setAuthenticationFailure(true))
-            }
+            onClick={() => login()}
           >
             Login
           </Button>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.