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,72 +17,78 @@ const loginSchema = Yup.object().shape({
 
 const INVALID_CREDENTIALS_ERRORS = ["password mismatch", "user not found"];
 
-export const LoginForm = ({ onSuccess }) => (
-  <Formik
-    initialValues={{
-      email: "",
-      password: "",
-    }}
-    validationSchema={loginSchema}
-    onSubmit={async (values, { setErrors }) => {
-      try {
-        await accountsService.post("login", {
-          json: values,
-        });
+export const LoginForm = ({ onSuccess }) => {
+  const [error, setError] = useState(null);
 
-        onSuccess();
-      } catch (err) {
-        if (err.response) {
-          const data = await err.response.json();
+  return (
+    <Formik
+      initialValues={{
+        email: "",
+        password: "",
+      }}
+      validationSchema={loginSchema}
+      onSubmit={async (values) => {
+        try {
+          await accountsService.post("login", {
+            json: values,
+          });
 
-          if (INVALID_CREDENTIALS_ERRORS.includes(data.message)) {
-            setErrors({
-              email: "Invalid e-mail address or password",
-              password: "Invalid e-mail address or password",
-            });
+          onSuccess();
+        } catch (err) {
+          if (err.response) {
+            const data = await err.response.json();
+
+            if (INVALID_CREDENTIALS_ERRORS.includes(data.message)) {
+              setError("Invalid email address or password.");
+            } else {
+              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>
-        <TextField
-          type="text"
-          id="email"
-          name="email"
-          label="Email address"
-          error={errors.email}
-          touched={touched.email}
-        />
-        <TextField
-          type="password"
-          id="password"
-          name="password"
-          label="Password"
-          error={errors.password}
-          touched={touched.password}
-        />
-        <div>
-          <Link to="/auth/recover" className="text-sm inline transition-colors hover:text-primary">
-            Forgot your password?
-          </Link>
-        </div>
+      }}
+    >
+      {({ errors, touched }) => (
+        <Form className="flex flex-col gap-4">
+          <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"
+            name="email"
+            label="Email address"
+            error={errors.email}
+            touched={touched.email}
+          />
+          <TextField
+            type="password"
+            id="password"
+            name="password"
+            label="Password"
+            error={errors.password}
+            touched={touched.password}
+          />
+          <div>
+            <Link to="/auth/recover" className="text-sm inline transition-colors hover:text-primary">
+              Forgot your password?
+            </Link>
+          </div>
 
-        <div className="flex w-full justify-center mt-4">
-          <Button type="submit" className="px-12" $primary>
-            Log in
-          </Button>
-        </div>
+          <div className="flex w-full justify-center mt-4">
+            <Button type="submit" className="px-12" $primary>
+              Log in
+            </Button>
+          </div>
 
-        <p className="text-sm text-center mt-8">
-          Don't have an account? <HighlightedLink to="/auth/signup">Sign up</HighlightedLink>
-        </p>
-      </Form>
-    )}
-  </Formik>
-);
+          <p className="text-sm text-center mt-8">
+            Don't have an account? <HighlightedLink to="/auth/signup">Sign up</HighlightedLink>
+          </p>
+        </Form>
+      )}
+    </Formik>
+  );
+};
 
 LoginForm.propTypes = {
   onSuccess: PropTypes.func.isRequired,