Implement permissions

5 files changed, 87 insertions, 20 deletions

diff --git a/frontend/public/index.html b/frontend/public/index.html
index b41fd33..4f82110 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,13 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' localhost:4000;
-                                                        style-src 'self' 'unsafe-inline';
+                                                        style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
                                                         img-src * data:;
                                                         script-src 'self' 'unsafe-inline';" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"
+      integrity="sha256-D9M5yrVDqFlla7nlELDaYZIpXfFWDytQtiV+TaH6F1I=" crossorigin="anonymous">
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/frontend/src/Home.js b/frontend/src/Home.js
index c67c69a..50524bd 100644
--- a/frontend/src/Home.js
+++ b/frontend/src/Home.js
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 
 import LogoutBtn from './LogoutBtn';
 import userState from './UserState';
+import UserList from './UserList';
 
 const Home = observer(({ user }) => {
   if (user.authError) {
@@ -17,11 +18,17 @@ const Home = observer(({ user }) => {
 
   return (
     <div>
-      <LogoutBtn />
-      Hello {user.username}!
+      <div className="navbar">
+        <LogoutBtn />
+      </div>
+
+      <h1 className="title">Hello {user.username}!</h1>
       <div>
         <img src="https://placehold.it/200x200" alt="Placeholder" />
       </div>
+      <div>
+        <UserList />
+      </div>
     </div>
   );
 });
diff --git a/frontend/src/Login.js b/frontend/src/Login.js
index d17a5ab..70fff91 100644
--- a/frontend/src/Login.js
+++ b/frontend/src/Login.js
@@ -28,17 +28,16 @@ const Login = () => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <h1>Log in</h1>
-      <label>
-        Username <input name="username" type="text" ref={register} required />
+      <h1 class="title">Log in</h1>
+      <label className="label">
+        Username <input className="input" name="username" type="text" ref={register} required />
       </label>
-      <label>
-        Password <input name="password" type="password" ref={register} required />
+      <label className="label">
+        Password <input className="input" name="password" type="password" ref={register} required />
       </label>
-      <label>
-        Remember me <input name="remember" type="checkbox" ref={register} />
-      </label>
-      <button type="submit">Log in</button>
+      <button className="button" type="submit">
+        Log in
+      </button>
       <div className="error">{loginError}</div>
       <div>
         No account? Register <Link to="/register">here</Link>.
diff --git a/frontend/src/Register.js b/frontend/src/Register.js
index f4a6ec3..6ba1537 100644
--- a/frontend/src/Register.js
+++ b/frontend/src/Register.js
@@ -32,17 +32,19 @@ const Register = () => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <h1>Register new account</h1>
-      <label>
-        Username <input name="username" type="text" ref={register} required />
+      <h1 className="title">Register new account</h1>
+      <label className="label">
+        Username <input className="input" name="username" type="text" ref={register} required />
       </label>
-      <label>
-        Password <input name="password" type="password" ref={register} required />
+      <label className="label">
+        Password <input className="input" name="password" type="password" ref={register} required />
       </label>
-      <label>
-        Confirm password <input name="confirm_password" type="password" ref={register} required />
+      <label className="label">
+        Confirm password <input className="input" name="confirm_password" type="password" ref={register} required />
       </label>
-      <button type="submit">Register</button>
+      <button className="button" type="submit">
+        Register
+      </button>
       <div className="error">{loginError}</div>
       {/* <div className="error">{errors}</div> */}
     </form>
diff --git a/frontend/src/UserList.js b/frontend/src/UserList.js
new file mode 100644
index 0000000..dd17ace
--- /dev/null
+++ b/frontend/src/UserList.js
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import axios from './axios';
+
+const UserList = () => {
+  const [ data, setData ] = useState({});
+  useEffect(() => {
+    (async () => {
+      try {
+        const resp = await axios.get('/users');
+        setData({
+          users: resp.data.users,
+        });
+      } catch (err) {
+        if (err.response.status === 401) {
+          setData({
+            error: err.response.data.error,
+          });
+        } else {
+          throw err;
+        }
+      }
+    })();
+  }, []);
+
+  const users = data.users;
+  const userRows = !!users
+    ? users.map(user => (
+        <tr key={user.id}>
+          <td>{user.id}</td>
+          <td>{user.username}</td>
+        </tr>
+      ))
+    : null;
+
+  return (
+    <div>
+      <h2 className="subtitle">User list</h2>
+      <div>
+        <div className="error" key="error">
+          {data.error}
+        </div>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Username</th>
+            </tr>
+          </thead>
+          <tbody>{userRows}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default UserList;