fix(dashboard-v2): address review comments

packages/dashboard-v2/README.md

@@ -11,7 +11,7 @@ This is a Gatsby application. To run it locally, all you need is:
 
 ## Accessing remote APIs
 
-To be able to log in on a local environment with your production credentials, you'll need to make the browser believe you're actually on the same domain, otherwise browser will block the session cookie.
+To be able to log in on a local environment with your production credentials, you'll need to make the browser believe you're actually on the same domain, otherwise the browser will block the session cookie.
 
 To do the trick, edit your `/etc/hosts` file and add a record like this:
 
@@ -19,7 +19,7 @@ To do the trick, edit your `/etc/hosts` file and add a record like this:
 127.0.0.1 local.skynetpro.net
 ```
 
-then run `yarn secure` -- it will run `gatsby develop` with `--https --host=local.skynetpro.net -p=443` options.
+then run `yarn develop:secure` -- it will run `gatsby develop` with `--https --host=local.skynetpro.net -p=443` options.
 If you're on macOS, you may need to `sudo` the command to successfully bind to port `443`.
 
 > **NOTE:** This should become easier once we have a docker image for the new dashboard.

packages/dashboard-v2/package.json

@@ -9,8 +9,8 @@
   ],
   "scripts": {
     "develop": "gatsby develop",
+    "develop:secure": "gatsby develop --https --host=local.skynetpro.net -p=443",
     "start": "gatsby develop",
-    "secure": "gatsby develop --https --host=local.skynetpro.net -p=443",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",

packages/dashboard-v2/src/components/NavBar/NavBar.js

@@ -81,6 +81,7 @@ export const NavBar = () => (
               onClick={async () => {
                 await accountsService.post("logout");
                 navigate("/auth/login");
+                // TODO: handle errors
               }}
               activeClassName="text-primary"
               className="cursor-pointer"

packages/dashboard-v2/src/components/forms/LoginForm.js

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Formik, Form } from "formik";
 import { Link } from "gatsby";
@@ -16,14 +17,17 @@ const loginSchema = Yup.object().shape({
 
 const INVALID_CREDENTIALS_ERRORS = ["password mismatch", "user not found"];
 
-export const LoginForm = ({ onSuccess }) => (
+export const LoginForm = ({ onSuccess }) => {
+  const [error, setError] = useState(null);
+
+  return (
     <Formik
       initialValues={{
         email: "",
         password: "",
       }}
       validationSchema={loginSchema}
-    onSubmit={async (values, { setErrors }) => {
+      onSubmit={async (values) => {
         try {
           await accountsService.post("login", {
             json: values,
@@ -35,18 +39,20 @@ export const LoginForm = ({ onSuccess }) => (
             const data = await err.response.json();
 
             if (INVALID_CREDENTIALS_ERRORS.includes(data.message)) {
-            setErrors({
+              setError("Invalid email address or password.");
-              email: "Invalid e-mail address or password",
+            } else {
-              password: "Invalid e-mail address or password",
+              setError(data.message);
-            });
             }
+          } else {
+            setError("An error occured when logging you in. Please try again.");
           }
         }
       }}
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col gap-4">
-        <h3 className="mt-4 mb-8">Log in to your account</h3>
+          <h3 className="mt-4 mb-4">Log in to your account</h3>
+          {error && <p className="px-4 py-3 rounded border border-error bg-red-50 text-error mb-4">{error}</p>}
           <TextField
             type="text"
             id="email"
@@ -81,7 +87,8 @@ export const LoginForm = ({ onSuccess }) => (
         </Form>
       )}
     </Formik>
-);
+  );
+};
 
 LoginForm.propTypes = {
   onSuccess: PropTypes.func.isRequired,