From 3356b88a3e3254283fd3db982748f613fd43cadb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Mar 2022 11:23:55 +0100
Subject: [PATCH 1/7] feat(dashboard-v2): allow <Button> to be type=submit

---
 packages/dashboard-v2/src/components/Button/Button.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Button/Button.js b/packages/dashboard-v2/src/components/Button/Button.js
index 48cedb15..328d52cd 100644
--- a/packages/dashboard-v2/src/components/Button/Button.js
+++ b/packages/dashboard-v2/src/components/Button/Button.js
@@ -5,8 +5,8 @@ import styled from "styled-components";
 /**
  * Primary UI component for user interaction
  */
-export const Button = styled.button.attrs(({ disabled, $primary }) => ({
-  type: "button",
+export const Button = styled.button.attrs(({ disabled, $primary, type }) => ({
+  type,
   className: cn("px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide transition-[opacity_filter]", {
     "bg-primary text-palette-600": $primary,
     "bg-white border-2 border-black text-palette-600": !$primary,
@@ -14,6 +14,7 @@ export const Button = styled.button.attrs(({ disabled, $primary }) => ({
     "hover:brightness-90": !disabled,
   }),
 }))``;
+
 Button.propTypes = {
   /**
    * Is this the principal call to action on the page?
@@ -23,9 +24,14 @@ Button.propTypes = {
    * Prevent interaction on the button
    */
   disabled: PropTypes.bool,
+  /**
+   * Type of button (button / submit)
+   */
+  type: PropTypes.oneOf(["button", "submit"]),
 };
 
 Button.defaultProps = {
   $primary: false,
   disabled: false,
+  type: "button",
 };

From 2f1b176a09cce0a9e3fde9e3025783f3fe634f5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Mar 2022 11:25:27 +0100
Subject: [PATCH 2/7] feat(dashboard-v2): add AuthLayout for /auth/ pages
 namespace

---
 .../dashboard-v2/src/layouts/AuthLayout.js    | 45 +++++++++++++++++++
 .../dashboard-v2/static/images/auth-bg.svg    |  1 +
 2 files changed, 46 insertions(+)
 create mode 100644 packages/dashboard-v2/src/layouts/AuthLayout.js
 create mode 100644 packages/dashboard-v2/static/images/auth-bg.svg

diff --git a/packages/dashboard-v2/src/layouts/AuthLayout.js b/packages/dashboard-v2/src/layouts/AuthLayout.js
new file mode 100644
index 00000000..9706c83b
--- /dev/null
+++ b/packages/dashboard-v2/src/layouts/AuthLayout.js
@@ -0,0 +1,45 @@
+import * as React from "react";
+import styled from "styled-components";
+import { SWRConfig } from "swr";
+
+import { UserProvider } from "../contexts/user";
+import { guestsOnly } from "../lib/swrConfig";
+
+const Layout = styled.div.attrs({
+  className: "h-screen w-screen bg-black flex",
+})`
+  background-image: url(/images/auth-bg.svg);
+  background-repeat: no-repeat;
+  background-position: center center;
+`;
+
+const SloganContainer = styled.div.attrs({
+  className: "hidden md:flex lg:w-7/12 grow justify-center items-center relative overflow-hidden",
+})``;
+
+const Content = styled.div.attrs({
+  className: "w-full md:w-5/12 md:max-w-[680px] shrink-0",
+})``;
+
+const AuthLayout = ({ children }) => {
+  return (
+    <>
+      <SWRConfig value={guestsOnly}>
+        <UserProvider>
+          <Layout>
+            <SloganContainer className="pl-20 pr-20 lg:pr-30 xl:pr-40">
+              <div className="">
+                <h1 className="text-4xl lg:text-5xl xl:text-6xl text-white">
+                  The decentralized <span className="text-primary">revolution</span> starts with decentralized storage
+                </h1>
+              </div>
+            </SloganContainer>
+            <Content>{children}</Content>
+          </Layout>
+        </UserProvider>
+      </SWRConfig>
+    </>
+  );
+};
+
+export default AuthLayout;
diff --git a/packages/dashboard-v2/static/images/auth-bg.svg b/packages/dashboard-v2/static/images/auth-bg.svg
new file mode 100644
index 00000000..89d598f8
--- /dev/null
+++ b/packages/dashboard-v2/static/images/auth-bg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1,.cls-4{fill:#fff;}.cls-1,.cls-2{isolation:isolate;}.cls-1,.cls-3{opacity:0.1;}.cls-2{fill:#1c1c1c;opacity:0.5;}.cls-4{fill-rule:evenodd;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M500,0C773.39,0,995.52,219.35,999.93,491.62l.07,8.26h-1C999,224.34,775.6,1,500,1S1,224.34,1,499.88A496.66,496.66,0,0,0,112.53,814.31l2.19,2.67-.76.62A497.65,497.65,0,0,1,0,499.88C0,223.8,223.85,0,500,0ZM182.53,885.18A497.32,497.32,0,0,0,496.48,999H500v1A498.28,498.28,0,0,1,184.58,888.13l-2.67-2.19ZM772.29,839l.61.76a436.19,436.19,0,0,1-496.57,34.16l-2-1.22.51-.84a435.22,435.22,0,0,0,495.17-31Z"/><path class="cls-1" d="M904.76,338.72A435.64,435.64,0,0,1,842.1,769.61l-1.83,2.31-.77-.62a434.67,434.67,0,0,0,65-430.69l-.61-1.53ZM65.32,500A432.58,432.58,0,0,0,126.9,723.16l1.22,2-.84.51A433.53,433.53,0,0,1,64.35,502.42V500Zm753-190.57a371.93,371.93,0,0,1,13.5,356.24l-.78,1.55-.88-.45a371,371,0,0,0-11.66-355.13l-1-1.71ZM667.75,830.15q-3.5,1.79-7,3.49l.43.88c2.36-1.14,4.7-2.3,7-3.49ZM653.62,837q-3.57,1.63-7.17,3.19l.39.9q3.61-1.56,7.19-3.2Zm-14.41,6.22q-3.63,1.47-7.3,2.88l.35.91q3.68-1.4,7.32-2.88Zm-14.67,5.6q-3.69,1.32-7.42,2.57l.31.93q3.74-1.24,7.44-2.57Zm-14.88,5c-2.5.77-5,1.52-7.52,2.24l.27,1q3.8-1.1,7.54-2.25Zm-15.09,4.33q-3.8,1-7.61,1.92l.23,1q3.82-.91,7.63-1.92Zm-15.27,3.68q-3.82.84-7.68,1.59l.19,1q3.86-.76,7.7-1.6Zm-15.38,3c-2.58.45-5.16.88-7.75,1.27l.15,1c2.59-.39,5.18-.82,7.76-1.27Zm-15.53,2.37c-2.59.34-5.19.66-7.79.94l.11,1q3.91-.44,7.81-.94Zm-15.61,1.71c-2.6.23-5.21.44-7.82.61l.06,1c2.62-.17,5.24-.38,7.85-.61Zm-15.65,1.06q-3.92.18-7.85.27l0,1q3.93-.11,7.86-.28Zm-15.71.39h-1.63c-2.08,0-4.15,0-6.22-.05l0,1q3.12.06,6.24.06h1.64Zm-15.7-.26q-3.92-.15-7.82-.37l-.06,1c2.61.15,5.23.28,7.85.37ZM470,869.16c-2.6-.21-5.21-.45-7.8-.71l-.1,1q3.9.39,7.83.71Zm-15.6-1.58c-2.59-.31-5.18-.66-7.77-1l-.14,1c2.59.38,5.19.72,7.79,1Zm-15.52-2.23c-2.58-.42-5.16-.88-7.73-1.36l-.18,1c2.58.48,5.16.94,7.75,1.36Zm-15.44-2.89c-2.56-.54-5.12-1.1-7.66-1.69l-.23,1q3.84.88,7.69,1.69Zm-15.31-3.55c-2.53-.65-5.06-1.32-7.57-2l-.27,1q3.8,1,7.6,2Zm-15.1-4.19c-2.5-.75-5-1.53-7.48-2.34l-.3.94q3.73,1.21,7.5,2.34Zm-14.93-4.84c-2.47-.86-4.94-1.75-7.39-2.66l-.34.92q3.69,1.38,7.41,2.67Zm-14.71-5.47c-2.43-1-4.86-2-7.27-3l-.38.9c2.42,1,4.85,2,7.29,3ZM349,838.31q-3.58-1.6-7.14-3.28l-.42.89q3.56,1.68,7.16,3.29Zm-14.22-6.72c-2.34-1.16-4.66-2.36-7-3.57l-.46.87c2.32,1.22,4.66,2.41,7,3.58Zm-13.88-7.29c-2.29-1.27-4.56-2.56-6.83-3.88l-.49.85q3.4,2,6.85,3.89Zm-13.58-7.9c-2.23-1.36-4.45-2.75-6.65-4.15l-.53.82c2.21,1.42,4.43,2.8,6.67,4.17ZM294.07,808q-3.26-2.18-6.47-4.43l-.57.8q3.23,2.26,6.5,4.45Zm-12.84-9q-3.17-2.33-6.29-4.71l-.59.78q3.12,2.4,6.3,4.72Zm-12.47-9.55c-2-1.63-4.07-3.28-6.07-5l-.63.75q3,2.52,6.09,5Zm-12-10c-2-1.72-3.93-3.47-5.87-5.23l-.66.73c1.94,1.77,3.9,3.51,5.88,5.24Zm-11.63-10.58q-2.85-2.7-5.64-5.46l-.69.7q2.81,2.76,5.65,5.48Zm-11.14-11q-2.74-2.82-5.41-5.7l-.72.67c1.79,1.92,3.59,3.82,5.42,5.71Zm-10.7-11.52q-2.61-2.93-5.16-5.91l-.74.63q2.55,3,5.17,5.94ZM213.07,734.3c-1.66-2-3.29-4.07-4.91-6.13l-.77.6q2.43,3.11,4.92,6.15Zm-9.68-12.36c-1.57-2.1-3.11-4.2-4.63-6.33l-.8.57q2.28,3.2,4.65,6.35Zm-9.15-12.78q-2.22-3.24-4.37-6.52l-.82.54q2.14,3.29,4.38,6.54ZM185.63,696q-2.07-3.33-4.08-6.7l-.84.51q2,3.38,4.09,6.71Zm-8-13.49q-1.93-3.42-3.8-6.87l-.86.47q1.86,3.47,3.81,6.88Zm-7.45-13.82c-1.2-2.33-2.36-4.67-3.51-7l-.88.43q1.73,3.54,3.51,7Zm-6.85-14.1q-1.63-3.57-3.2-7.17l-.9.39c1,2.41,2.11,4.8,3.21,7.19Zm-6.23-14.37q-1.48-3.63-2.9-7.29l-.91.35c.94,2.45,1.9,4.89,2.9,7.32Zm-5.64-14.66q-1.34-3.71-2.58-7.42l-.93.31q1.26,3.74,2.59,7.44Zm-5-14.86c-.78-2.5-1.54-5-2.26-7.52l-1,.27q1.1,3.78,2.27,7.54Zm-4.37-15.1q-1-3.79-1.93-7.61l-1,.23q.93,3.82,1.94,7.63Zm-3.71-15.26q-.84-3.83-1.61-7.68l-1,.2q.77,3.86,1.61,7.7ZM135.31,565c-.45-2.57-.88-5.16-1.28-7.74l-1,.15q.6,3.89,1.28,7.76Zm-2.4-15.53q-.51-3.88-.95-7.79l-1,.11q.44,3.91,1,7.81Zm-1.74-15.59q-.34-3.92-.62-7.83l-1,.07q.27,3.93.62,7.84Zm-1.08-15.67c-.12-2.62-.22-5.23-.29-7.85l-1,0q.1,3.93.29,7.86Zm-.42-15.7v-2.26c0-1.86,0-3.72,0-5.58h-1c0,1.86,0,3.72,0,5.59,0,.76,0,1.51,0,2.27Zm.24-15.68q.14-3.93.36-7.85l-1,0q-.22,3.93-.37,7.86Zm.88-15.67c.21-2.61.44-5.21.69-7.82l-1-.09q-.39,3.91-.7,7.83Zm1.55-15.63q.47-3.9,1-7.78l-1-.14q-.55,3.9-1,7.81ZM134.55,440q.63-3.87,1.35-7.73l-1-.18q-.72,3.87-1.35,7.75Zm2.86-15.43c.54-2.57,1.1-5.12,1.68-7.67l-1-.22c-.59,2.55-1.15,5.12-1.69,7.69Zm3.53-15.31q1-3.8,2-7.58l-.95-.26c-.69,2.52-1.36,5.06-2,7.6Zm4.17-15.12q1.13-3.76,2.32-7.5l-.93-.3c-.81,2.5-1.58,5-2.34,7.52Zm4.81-14.94q1.29-3.72,2.65-7.39l-.93-.34q-1.37,3.69-2.65,7.41Zm5.45-14.72c1-2.44,1.94-4.86,3-7.27l-.91-.38q-1.51,3.62-3,7.29ZM161.44,350c1.07-2.39,2.15-4.77,3.27-7.13l-.89-.42c-1.12,2.37-2.21,4.76-3.28,7.15Zm6.68-14.2q1.75-3.51,3.57-7l-.87-.46c-1.22,2.33-2.41,4.66-3.58,7Zm7.28-13.91c.71-1.28,1.43-2.56,2.15-3.83l-.86-.49q-1.08,1.92-2.15,3.85Zm154-75.15c2.17-1.46,4.35-2.9,6.56-4.31a.51.51,0,0,0,.15-.68.5.5,0,0,0-.68-.15c-2.21,1.42-4.41,2.86-6.58,4.33a.49.49,0,1,0,.55.81Zm13.22-8.45q3.36-2,6.77-4a.49.49,0,0,0,.18-.67.5.5,0,0,0-.67-.18c-2.28,1.3-4.54,2.62-6.79,4a.49.49,0,0,0-.16.67A.48.48,0,0,0,342.57,238.26Zm13.64-7.76c2.3-1.23,4.62-2.44,7-3.61a.49.49,0,1,0-.44-.88q-3.51,1.77-7,3.62a.51.51,0,0,0-.21.67A.49.49,0,0,0,356.21,230.5Zm14-7.06q3.56-1.66,7.15-3.25a.49.49,0,0,0,.25-.64.5.5,0,0,0-.65-.26q-3.6,1.59-7.17,3.27a.48.48,0,0,0-.23.65A.48.48,0,0,0,370.24,223.44Zm14.36-6.31c2.41-1,4.85-1.94,7.29-2.87a.49.49,0,1,0-.35-.92q-3.68,1.4-7.32,2.88a.49.49,0,0,0-.26.65A.48.48,0,0,0,384.6,217.13Zm14.67-5.56q3.71-1.31,7.44-2.5a.49.49,0,1,0-.3-.93q-3.75,1.2-7.46,2.5a.49.49,0,0,0,.32.93Zm15-4.8q3.76-1.11,7.56-2.11a.49.49,0,1,0-.25-.95c-2.54.67-5.07,1.38-7.58,2.11a.49.49,0,1,0,.27,1Zm15.16-4q3.81-.9,7.66-1.71a.5.5,0,0,0,.38-.58.49.49,0,0,0-.59-.38q-3.85.81-7.68,1.72a.48.48,0,0,0-.36.59A.49.49,0,0,0,429.38,202.75Zm15.35-3.23q3.86-.71,7.74-1.31a.51.51,0,0,0,.41-.57.5.5,0,0,0-.57-.4c-2.59.4-5.18.84-7.75,1.32a.48.48,0,0,0-.4.57A.49.49,0,0,0,444.73,199.52Zm15.51-2.43q3.88-.51,7.79-.92a.49.49,0,0,0,.44-.54.49.49,0,0,0-.54-.43c-2.61.27-5.22.58-7.82.91a.49.49,0,0,0,.13,1Zm15.61-1.64q3.91-.3,7.83-.51a.51.51,0,0,0,.47-.52.49.49,0,0,0-.52-.46q-3.93.21-7.85.52a.49.49,0,1,0,.07,1Zm15.68-.83q3.92-.1,7.85-.12a.49.49,0,1,0,0-1c-2.62,0-5.25,0-7.86.12a.48.48,0,0,0-.48.5A.49.49,0,0,0,491.53,194.62Zm15.7,0q3.93.09,7.84.28a.49.49,0,0,0,.51-.47.5.5,0,0,0-.47-.52q-3.92-.18-7.85-.27a.49.49,0,1,0,0,1Zm15.67.75q3.92.28,7.82.68a.48.48,0,0,0,.53-.44.49.49,0,0,0-.44-.54q-3.91-.39-7.84-.68a.49.49,0,1,0-.07,1Zm15.62,1.55q3.9.5,7.77,1.08a.49.49,0,0,0,.15-1q-3.88-.6-7.8-1.08a.49.49,0,0,0-.12,1ZM554,199.23q3.86.69,7.7,1.47a.49.49,0,0,0,.58-.38.5.5,0,0,0-.39-.58c-2.56-.52-5.14-1-7.72-1.47a.49.49,0,1,0-.17,1Zm15.35,3.15c2.55.59,5.1,1.21,7.63,1.87a.5.5,0,0,0,.6-.36.49.49,0,0,0-.36-.59q-3.81-1-7.64-1.88a.49.49,0,0,0-.59.37A.5.5,0,0,0,569.39,202.38Zm15.22,3.94c2.51.72,5,1.48,7.51,2.26a.49.49,0,0,0,.3-.94q-3.76-1.17-7.54-2.27a.49.49,0,1,0-.27.95ZM599.55,211q3.71,1.28,7.38,2.65a.5.5,0,0,0,.63-.29.49.49,0,0,0-.29-.64c-2.45-.91-4.92-1.8-7.4-2.65a.49.49,0,1,0-.32.93Zm14.71,5.49q3.65,1.47,7.24,3a.5.5,0,0,0,.39-.91q-3.61-1.56-7.26-3a.49.49,0,0,0-.37.91Zm14.39,6.24q3.55,1.65,7.07,3.39a.49.49,0,1,0,.44-.88q-3.52-1.74-7.1-3.41a.49.49,0,0,0-.41.9Zm14.07,7q3.46,1.83,6.88,3.75a.49.49,0,1,0,.48-.86c-2.28-1.28-4.58-2.54-6.9-3.76a.49.49,0,0,0-.67.2A.51.51,0,0,0,642.72,229.74Zm13.68,7.69q3.38,2,6.69,4.1a.49.49,0,0,0,.68-.15.5.5,0,0,0-.16-.68c-2.21-1.4-4.45-2.77-6.7-4.12a.5.5,0,0,0-.68.18A.49.49,0,0,0,656.4,237.43Zm13.28,8.39q3.26,2.18,6.47,4.44a.49.49,0,1,0,.56-.8c-2.14-1.52-4.3-3-6.49-4.46a.49.49,0,0,0-.54.82Zm12.8,9c2.1,1.56,4.17,3.15,6.23,4.76a.49.49,0,1,0,.61-.77q-3.11-2.43-6.25-4.78a.49.49,0,0,0-.59.79Zm12.32,9.68q3,2.5,6,5.08a.51.51,0,0,0,.7-.05.5.5,0,0,0-.05-.69q-3-2.6-6-5.1a.49.49,0,0,0-.69.07A.5.5,0,0,0,694.8,264.54Zm11.84,10.32c1.93,1.76,3.83,3.56,5.71,5.37a.49.49,0,1,0,.68-.7c-1.88-1.83-3.79-3.62-5.73-5.4a.49.49,0,0,0-.69,0A.5.5,0,0,0,706.64,274.86Zm11.29,10.9c1.83,1.87,3.65,3.75,5.43,5.67a.5.5,0,0,0,.72-.68c-1.79-1.91-3.61-3.81-5.45-5.68a.5.5,0,0,0-.7,0A.49.49,0,0,0,717.93,285.76Zm10.72,11.47c1.73,1.95,3.45,3.93,5.13,5.93a.49.49,0,1,0,.75-.64q-2.53-3-5.15-5.94a.48.48,0,0,0-.69-.05A.5.5,0,0,0,728.65,297.23Zm10.11,12c1.64,2,3.24,4.1,4.83,6.18a.48.48,0,0,0,.68.1.49.49,0,0,0,.1-.69q-2.39-3.13-4.84-6.21a.49.49,0,0,0-.77.62Zm9.5,12.5q2.29,3.19,4.5,6.43a.49.49,0,0,0,.68.13.48.48,0,0,0,.13-.68c-1.47-2.17-3-4.32-4.51-6.45a.5.5,0,0,0-.69-.11A.48.48,0,0,0,748.26,321.72Zm8.85,13q2.11,3.3,4.16,6.65a.5.5,0,0,0,.68.16.49.49,0,0,0,.16-.67c-1.36-2.24-2.76-4.47-4.18-6.67a.5.5,0,0,0-.68-.15A.49.49,0,0,0,757.11,334.7Zm8.16,13.41c1.3,2.27,2.58,4.55,3.82,6.85a.49.49,0,0,0,.67.2.5.5,0,0,0,.2-.67c-1.25-2.3-2.53-4.6-3.84-6.87a.48.48,0,0,0-.67-.18A.5.5,0,0,0,765.27,348.11Zm7.47,13.81c1.18,2.33,2.34,4.68,3.46,7a.49.49,0,0,0,.89-.42q-1.7-3.56-3.48-7.07a.49.49,0,0,0-.87.45Zm6.74,14.16,1,2.3a.49.49,0,1,0,.9-.39c-.33-.77-.67-1.54-1-2.3a.49.49,0,0,0-.65-.25A.48.48,0,0,0,779.48,376.08ZM259,310.6l.77.61a306.22,306.22,0,0,0-49.93,284.47l.31.92-.93.31a307.19,307.19,0,0,1,48.52-284.7ZM784.42,612.29l.91.37A306.91,306.91,0,0,1,503.8,806.46l-3.8,0v-1A305.9,305.9,0,0,0,783,615.75ZM736.26,548c-.52,2.56-1.08,5.12-1.68,7.66a.49.49,0,1,0,1,.22q.9-3.83,1.68-7.68a.49.49,0,0,0-.38-.58A.49.49,0,0,0,736.26,548Zm-3.61,15.27c-.68,2.52-1.41,5-2.17,7.54a.48.48,0,0,0,.32.61.49.49,0,0,0,.62-.32c.77-2.51,1.49-5,2.18-7.58a.49.49,0,1,0-1-.25Zm-4.59,15q-1.27,3.72-2.67,7.39a.49.49,0,1,0,.92.34q1.4-3.68,2.68-7.41a.5.5,0,0,0-.31-.62A.49.49,0,0,0,728.06,578.24Zm-5.57,14.66c-1,2.41-2,4.81-3.14,7.19a.49.49,0,1,0,.89.41c1.09-2.39,2.15-4.8,3.16-7.22a.49.49,0,0,0-.27-.64A.48.48,0,0,0,722.49,592.9ZM716,607.18q-1.74,3.51-3.6,7a.49.49,0,0,0,.2.67.51.51,0,0,0,.67-.2c1.24-2.32,2.45-4.65,3.61-7a.49.49,0,1,0-.88-.43ZM708.53,621q-2,3.39-4,6.71a.49.49,0,0,0,.15.68.5.5,0,0,0,.68-.16q2.08-3.33,4.06-6.74a.48.48,0,0,0-.18-.67A.5.5,0,0,0,708.53,621Zm-8.3,13.29c-1.46,2.16-3,4.31-4.48,6.43a.48.48,0,0,0,.11.68.5.5,0,0,0,.69-.11q2.3-3.19,4.49-6.46a.49.49,0,0,0-.13-.68A.49.49,0,0,0,700.23,634.29ZM691.06,647q-2.38,3.11-4.88,6.13a.49.49,0,1,0,.76.62q2.5-3,4.9-6.15a.48.48,0,0,0-.09-.69A.49.49,0,0,0,691.06,647Zm-10,12.11c-1.73,2-3.48,3.9-5.27,5.8a.49.49,0,0,0,0,.7.51.51,0,0,0,.7,0q2.69-2.88,5.29-5.83a.5.5,0,0,0-.05-.69A.49.49,0,0,0,681.1,659.13Zm-10.73,11.45q-2.77,2.76-5.64,5.45a.49.49,0,0,0,0,.7.5.5,0,0,0,.69,0c1.92-1.8,3.8-3.62,5.66-5.48a.49.49,0,0,0,0-.69A.47.47,0,0,0,670.37,670.58ZM658.92,681.3q-3,2.6-6,5.08a.5.5,0,0,0-.07.7.48.48,0,0,0,.69.06c2-1.66,4-3.37,6-5.1a.48.48,0,0,0,.05-.69A.5.5,0,0,0,658.92,681.3Zm-12.12,10q-3.1,2.4-6.29,4.69a.49.49,0,1,0,.57.79c2.14-1.53,4.24-3.1,6.32-4.7a.48.48,0,0,0,.09-.69A.5.5,0,0,0,646.8,691.26Zm-12.72,9.15q-3.26,2.19-6.58,4.26a.49.49,0,0,0,.52.84q3.35-2.09,6.61-4.28a.49.49,0,0,0,.14-.68A.5.5,0,0,0,634.08,700.41Zm-13.3,8.31c-2.26,1.32-4.54,2.59-6.84,3.83a.49.49,0,1,0,.46.86c2.31-1.24,4.61-2.52,6.88-3.84a.49.49,0,0,0,.17-.67A.5.5,0,0,0,620.78,708.72ZM607,716.15c-2.34,1.16-4.7,2.29-7.08,3.37a.5.5,0,0,0-.24.65.49.49,0,0,0,.65.25c2.39-1.1,4.76-2.22,7.11-3.39a.49.49,0,0,0-.44-.88Zm-14.29,6.52c-2.41,1-4.84,2-7.28,2.9a.49.49,0,0,0-.29.63.5.5,0,0,0,.64.29q3.68-1.4,7.31-2.91a.51.51,0,0,0,.27-.65A.5.5,0,0,0,592.68,722.67ZM578,728.23c-2.47.84-5,1.65-7.46,2.41a.5.5,0,0,0-.33.62.49.49,0,0,0,.62.32c2.51-.76,5-1.57,7.49-2.42a.5.5,0,0,0,.3-.63A.49.49,0,0,0,578,728.23Zm-15,4.59c-2.52.68-5.06,1.33-7.6,1.92a.5.5,0,0,0-.37.6.49.49,0,0,0,.59.36c2.56-.6,5.11-1.25,7.64-1.93a.48.48,0,0,0,.34-.6A.49.49,0,0,0,563,732.82Zm-15.27,3.6c-2.56.51-5.13,1-7.71,1.42a.49.49,0,0,0,.16,1c2.59-.44,5.17-.91,7.74-1.43a.49.49,0,1,0-.19-1ZM532.26,739c-2.59.35-5.19.65-7.79.92a.48.48,0,0,0-.44.53.49.49,0,0,0,.54.44q3.91-.39,7.82-.92a.48.48,0,0,0,.42-.55A.49.49,0,0,0,532.26,739Zm-15.61,1.58c-2.61.18-5.22.31-7.84.41a.49.49,0,0,0,0,1q3.95-.13,7.86-.41a.49.49,0,0,0,.46-.52A.48.48,0,0,0,516.65,740.59Zm-15.68.57h-1q-3.42,0-6.82-.1a.5.5,0,1,0,0,1q3.42.09,6.85.09h1a.48.48,0,0,0,.48-.49A.48.48,0,0,0,501,741.16Zm-15.69-.44c-2.61-.16-5.22-.35-7.82-.59a.49.49,0,1,0-.09,1q3.92.36,7.85.6a.49.49,0,1,0,.06-1Zm-15.62-1.44q-3.89-.49-7.76-1.1a.48.48,0,0,0-.56.4.5.5,0,0,0,.41.57c2.59.41,5.19.77,7.79,1.1a.49.49,0,1,0,.12-1Zm-15.47-2.46c-2.57-.49-5.12-1-7.67-1.6a.49.49,0,0,0-.21,1c2.55.58,5.12,1.11,7.7,1.61a.49.49,0,0,0,.57-.39A.5.5,0,0,0,454.19,736.82Zm-15.31-3.46c-2.53-.66-5-1.36-7.55-2.1a.49.49,0,0,0-.61.33.5.5,0,0,0,.34.61c2.51.74,5,1.45,7.57,2.11a.49.49,0,0,0,.25-.95Zm-15.05-4.46c-2.48-.83-4.95-1.69-7.4-2.6a.5.5,0,0,0-.63.29.48.48,0,0,0,.29.63q3.69,1.37,7.43,2.61a.51.51,0,0,0,.62-.31A.5.5,0,0,0,423.83,728.9Zm-14.7-5.43q-3.63-1.49-7.21-3.07a.49.49,0,0,0-.65.25.48.48,0,0,0,.25.64q3.6,1.61,7.24,3.09a.49.49,0,0,0,.64-.27A.49.49,0,0,0,409.13,723.47Zm-14.33-6.39q-3.53-1.71-7-3.54a.5.5,0,0,0-.66.21.48.48,0,0,0,.21.66c2.32,1.23,4.66,2.41,7,3.56a.48.48,0,0,0,.65-.23A.49.49,0,0,0,394.8,717.08Zm-13.87-7.3c-2.28-1.29-4.53-2.63-6.76-4a.5.5,0,0,0-.68.16.48.48,0,0,0,.17.67c2.24,1.38,4.5,2.71,6.78,4a.49.49,0,0,0,.49-.85Zm-13.39-8.2q-3.27-2.16-6.47-4.42a.49.49,0,1,0-.57.8c2.14,1.52,4.31,3,6.5,4.44a.5.5,0,0,0,.68-.14A.49.49,0,0,0,367.54,701.58Zm-12.82-9.06c-2.09-1.57-4.14-3.18-6.18-4.83a.49.49,0,0,0-.69.08.48.48,0,0,0,.08.69c2,1.65,4.1,3.26,6.2,4.84a.47.47,0,0,0,.68-.09A.49.49,0,0,0,354.72,692.52Zm-12.19-9.85q-3-2.56-5.85-5.22a.5.5,0,0,0-.67.73c1.93,1.77,3.89,3.52,5.87,5.23a.49.49,0,0,0,.7,0A.5.5,0,0,0,342.53,682.67ZM331,672.06c-1.87-1.83-3.71-3.7-5.51-5.59a.49.49,0,1,0-.71.68q2.71,2.85,5.53,5.61a.48.48,0,0,0,.69,0A.49.49,0,0,0,331,672.06Zm-10.83-11.35c-1.74-2-3.46-3.92-5.13-5.93a.49.49,0,0,0-.76.63c1.69,2,3.41,4,5.16,6a.49.49,0,0,0,.69,0A.5.5,0,0,0,320.18,660.71Zm-10.08-12c-1.61-2-3.19-4.14-4.74-6.25a.49.49,0,0,0-.79.58q2.32,3.18,4.76,6.28a.49.49,0,0,0,.77-.61ZM300.83,636c-1.48-2.15-2.92-4.34-4.33-6.54a.49.49,0,0,0-.68-.15.51.51,0,0,0-.15.68c1.42,2.21,2.86,4.4,4.34,6.57a.5.5,0,0,0,.82-.56Zm-8.44-13.22q-2-3.37-3.88-6.81a.49.49,0,0,0-.67-.2.48.48,0,0,0-.19.67q1.89,3.45,3.9,6.84a.49.49,0,0,0,.67.17A.48.48,0,0,0,292.39,622.8Zm-7.55-13.75q-1.77-3.49-3.44-7a.49.49,0,0,0-.65-.24.5.5,0,0,0-.24.65q1.67,3.57,3.45,7.08a.49.49,0,1,0,.88-.44Zm-6.64-14.22q-1.54-3.6-3-7.26a.49.49,0,0,0-.64-.28.51.51,0,0,0-.28.64q1.44,3.66,3,7.29a.5.5,0,0,0,.91-.39Zm-5.7-14.61q-1.31-3.71-2.49-7.44a.48.48,0,0,0-.61-.32.49.49,0,0,0-.32.62q1.19,3.75,2.49,7.46a.49.49,0,0,0,.63.3A.48.48,0,0,0,272.5,580.22Zm-4.73-15q-1.06-3.78-2-7.59a.49.49,0,0,0-1,.24q.94,3.83,2,7.61a.49.49,0,0,0,.61.34A.49.49,0,0,0,267.77,565.25ZM264,550q-.81-3.82-1.49-7.7a.5.5,0,0,0-.57-.4.49.49,0,0,0-.4.57q.69,3.88,1.5,7.73a.48.48,0,0,0,.58.38A.49.49,0,0,0,264,550Zm-2.73-15.41c-.37-2.58-.7-5.18-1-7.78a.49.49,0,0,0-1,.11c.29,2.61.62,5.22,1,7.81a.49.49,0,1,0,1-.14Zm-1.72-15.53q-.3-3.91-.48-7.83a.51.51,0,0,0-.52-.47.48.48,0,0,0-.46.51q.18,3.94.48,7.86a.49.49,0,0,0,.53.45A.48.48,0,0,0,259.58,519.05Zm-.72-15.68c0-1.12,0-2.24,0-3.36a.49.49,0,1,0-1,0c0,1.12,0,2.25,0,3.38a.5.5,0,0,0,.5.48A.48.48,0,0,0,258.86,503.37ZM614.35,286.52A242.66,242.66,0,0,1,736.78,449.16l.44,2.12-1,.19a241.62,241.62,0,0,0-120.5-163.06l-1.87-1ZM345.81,440.94l.92.35A162.81,162.81,0,0,0,336,499.75c0,90.34,73.33,163.56,163.8,163.56,89.57,0,162.34-71.76,163.78-160.85l0-2.71h1c0,90.88-73.77,164.54-164.79,164.54S335,590.63,335,499.75a164,164,0,0,1,10.59-58.15ZM145.87,830.55a24.07,24.07,0,1,0,24.07,24.07A24.07,24.07,0,0,0,145.87,830.55Zm0,1a23.09,23.09,0,1,1-23.08,23.09A23.09,23.09,0,0,1,145.87,831.53Zm596.27-363a16.21,16.21,0,1,0,16.21,16.2A16.21,16.21,0,0,0,742.14,468.57Zm0,1a15.23,15.23,0,1,1-15.22,15.22A15.23,15.23,0,0,1,742.14,469.55Zm64.34,312.87a24.07,24.07,0,1,0,24.07,24.06A24.07,24.07,0,0,0,806.48,782.42Zm0,1a23.09,23.09,0,1,1-23.08,23.08A23.09,23.09,0,0,1,806.48,783.4ZM289.78,257.61A16.21,16.21,0,1,0,306,273.82,16.21,16.21,0,0,0,289.78,257.61Zm0,1a15.23,15.23,0,1,1-15.22,15.22A15.23,15.23,0,0,1,289.78,258.6Z"/><path class="cls-2" d="M118.37,500c0-210.77,170.86-381.63,381.63-381.63S881.63,289.23,881.63,500a23.58,23.58,0,0,1-47.15.39V500c0-184.73-149.75-334.48-334.48-334.48S165.52,315.27,165.52,500c0,182.88,146.77,331.48,329,334.43l5.53.05a23.58,23.58,0,1,1,0,47.15C289.23,881.63,118.37,710.77,118.37,500Z"/><g class="cls-3"><path class="cls-4" d="M358.22,424.06,585.52,544a9.72,9.72,0,0,1,2.12,15.75h-.11A106.75,106.75,0,0,1,563.79,576c-73.45,36.87-159.31-19.51-154.55-101.47l30.39,21c9.1,47.85,59.71,75.46,104.93,57.24L358.22,424.06Zm91.9,33.44,152.66,60.27a9.24,9.24,0,0,1,5.53,11.11v.2a9.28,9.28,0,0,1-13.37,5.57L450.12,457.5Zm56.21-78.94c28.79-2.46,64.76,8.36,86.2,36,18.05,23.29,21.78,51.76,20.51,81.15v-.07a9.33,9.33,0,0,1-12.73,7.9l-103.77-41,96.34,25.8a77.39,77.39,0,0,0-11.35-48.43c-31.54-50.6-106.11-48.13-134.21,4.46a78.77,78.77,0,0,0-4.23,9.37L417.25,440c.73-1.08,1.51-2.1,2.28-3.14,1.23-2.57,2.57-5.17,4-7.72,17.13-29.62,45.81-47.06,76.05-49.85,2.24-.19,4.48-.52,6.72-.72Z"/></g></g></g></svg>
\ No newline at end of file

From 7dea4674f6a979302867fee8476038b8aa5e1ed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Mar 2022 11:30:19 +0100
Subject: [PATCH 3/7] docs(dashboard-v2): add notes on how to run HTTPs locally

---
 packages/dashboard-v2/README.md    | 15 +++++++++++++++
 packages/dashboard-v2/package.json |  1 +
 2 files changed, 16 insertions(+)

diff --git a/packages/dashboard-v2/README.md b/packages/dashboard-v2/README.md
index ba9db568..c450ce50 100644
--- a/packages/dashboard-v2/README.md
+++ b/packages/dashboard-v2/README.md
@@ -8,3 +8,18 @@ This is a Gatsby application. To run it locally, all you need is:
 
 - `yarn install`
 - `yarn start`
+
+## 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 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.
+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.
diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json
index 7b561154..dad231a4 100644
--- a/packages/dashboard-v2/package.json
+++ b/packages/dashboard-v2/package.json
@@ -10,6 +10,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
+    "secure": "gatsby develop --https --host=local.skynetpro.net -p=443",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",

From a5a6757bf12ea04626f132cd60a8dbedb120f62c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Mar 2022 11:31:21 +0100
Subject: [PATCH 4/7] feat(dashboard-v2): add a HighlightedLink component

---
 packages/dashboard-v2/src/components/HighlightedLink.js | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 packages/dashboard-v2/src/components/HighlightedLink.js

diff --git a/packages/dashboard-v2/src/components/HighlightedLink.js b/packages/dashboard-v2/src/components/HighlightedLink.js
new file mode 100644
index 00000000..5fa6b079
--- /dev/null
+++ b/packages/dashboard-v2/src/components/HighlightedLink.js
@@ -0,0 +1,6 @@
+import { Link } from "gatsby";
+import styled from "styled-components";
+
+export default styled(Link).attrs({
+  className: "text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline",
+})``;

From d64d8212d175b35e295ee36876ebfab003107ded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Mar 2022 11:43:26 +0100
Subject: [PATCH 5/7] feat(dashboard-v2): implement LoginForm component

---
 packages/dashboard-v2/package.json            |  5 +-
 .../src/components/Form/TextField.js          | 56 ++++++++++++
 .../dashboard-v2/src/components/Form/index.js |  1 +
 .../src/components/forms/LoginForm.js         | 88 +++++++++++++++++++
 .../src/components/forms/index.js             |  1 +
 .../src/services/accountsService.js           |  3 +
 packages/dashboard-v2/yarn.lock               | 71 +++++++++++++++
 7 files changed, 224 insertions(+), 1 deletion(-)
 create mode 100644 packages/dashboard-v2/src/components/Form/TextField.js
 create mode 100644 packages/dashboard-v2/src/components/Form/index.js
 create mode 100644 packages/dashboard-v2/src/components/forms/LoginForm.js
 create mode 100644 packages/dashboard-v2/src/components/forms/index.js
 create mode 100644 packages/dashboard-v2/src/services/accountsService.js

diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json
index dad231a4..b5f638d6 100644
--- a/packages/dashboard-v2/package.json
+++ b/packages/dashboard-v2/package.json
@@ -25,9 +25,11 @@
     "classnames": "^2.3.1",
     "copy-text-to-clipboard": "^3.0.1",
     "dayjs": "^1.10.8",
+    "formik": "^2.2.9",
     "gatsby": "^4.6.2",
     "gatsby-plugin-postcss": "^5.7.0",
     "http-status-codes": "^2.2.0",
+    "ky": "^0.30.0",
     "nanoid": "^3.3.1",
     "path-browserify": "^1.0.1",
     "postcss": "^8.4.6",
@@ -39,7 +41,8 @@
     "react-use": "^17.3.2",
     "skynet-js": "^3.0.2",
     "swr": "^1.2.2",
-    "tailwindcss": "^3.0.23"
+    "tailwindcss": "^3.0.23",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7.17.4",
diff --git a/packages/dashboard-v2/src/components/Form/TextField.js b/packages/dashboard-v2/src/components/Form/TextField.js
new file mode 100644
index 00000000..7eb811a8
--- /dev/null
+++ b/packages/dashboard-v2/src/components/Form/TextField.js
@@ -0,0 +1,56 @@
+import PropTypes from "prop-types";
+import cn from "classnames";
+import { Field } from "formik";
+
+export const TextField = ({ id, label, name, error, touched, ...props }) => {
+  return (
+    <div className="flex flex-col w-full gap-1">
+      {label && (
+        <label className="font-sans uppercase text-palette-300 text-xs" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <Field
+        id={id}
+        name={name}
+        className={cn("w-full py-2 px-4 bg-palette-100 rounded-sm placeholder:text-palette-200 outline-1", {
+          "focus:outline outline-palette-200": !error || !touched,
+          "outline outline-error": touched && error,
+        })}
+        {...props}
+      />
+      {touched && error && (
+        <div className="text-error">
+          <small>{error}</small>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/** Besides noted properties, it accepts all props accepted by:
+ *  - a regular <input> element
+ *  - Formik's <Field> component
+ */
+TextField.propTypes = {
+  /**
+   * ID for the field. Used to couple <label> and <input> elements
+   */
+  id: PropTypes.string,
+  /**
+   * Label for the field
+   */
+  label: PropTypes.string,
+  /**
+   * Name of the field
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Validation error message
+   */
+  error: PropTypes.string,
+  /**
+   * Indicates wether or not the user touched the field already.
+   */
+  touched: PropTypes.bool,
+};
diff --git a/packages/dashboard-v2/src/components/Form/index.js b/packages/dashboard-v2/src/components/Form/index.js
new file mode 100644
index 00000000..79aaa711
--- /dev/null
+++ b/packages/dashboard-v2/src/components/Form/index.js
@@ -0,0 +1 @@
+export * from "./TextField";
diff --git a/packages/dashboard-v2/src/components/forms/LoginForm.js b/packages/dashboard-v2/src/components/forms/LoginForm.js
new file mode 100644
index 00000000..93d7a1b9
--- /dev/null
+++ b/packages/dashboard-v2/src/components/forms/LoginForm.js
@@ -0,0 +1,88 @@
+import PropTypes from "prop-types";
+import { Formik, Form } from "formik";
+import { Link } from "gatsby";
+import * as Yup from "yup";
+
+import HighlightedLink from "../HighlightedLink";
+import { TextField } from "../Form/TextField";
+import { Button } from "../Button";
+
+import accountsService from "../../services/accountsService";
+
+const loginSchema = Yup.object().shape({
+  email: Yup.string().required("Email is required").email("Please provide a valid email address"),
+  password: Yup.string().required("Password is required"),
+});
+
+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,
+        });
+
+        onSuccess();
+      } catch (err) {
+        if (err.response) {
+          const data = await err.response.json();
+
+          if (INVALID_CREDENTIALS_ERRORS.includes(data.message)) {
+            setErrors({
+              email: "Invalid e-mail address or password",
+              password: "Invalid e-mail address or password",
+            });
+          }
+        }
+      }
+    }}
+  >
+    {({ 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>
+
+        <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>
+);
+
+LoginForm.propTypes = {
+  onSuccess: PropTypes.func.isRequired,
+};
diff --git a/packages/dashboard-v2/src/components/forms/index.js b/packages/dashboard-v2/src/components/forms/index.js
new file mode 100644
index 00000000..1cad6f41
--- /dev/null
+++ b/packages/dashboard-v2/src/components/forms/index.js
@@ -0,0 +1 @@
+export * from "./LoginForm";
diff --git a/packages/dashboard-v2/src/services/accountsService.js b/packages/dashboard-v2/src/services/accountsService.js
new file mode 100644
index 00000000..37244e5f
--- /dev/null
+++ b/packages/dashboard-v2/src/services/accountsService.js
@@ -0,0 +1,3 @@
+import ky from "ky";
+
+export default ky.create({ prefixUrl: "/api" });
diff --git a/packages/dashboard-v2/yarn.lock b/packages/dashboard-v2/yarn.lock
index 12ff2eb1..687e3c5b 100644
--- a/packages/dashboard-v2/yarn.lock
+++ b/packages/dashboard-v2/yarn.lock
@@ -3373,6 +3373,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash@^4.14.175":
+  version "4.14.180"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
+  integrity sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==
+
 "@types/lodash@^4.14.92":
   version "4.14.178"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
@@ -6366,6 +6371,11 @@ deep-object-diff@^1.1.0:
   resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.7.tgz#348b3246f426427dd633eaa50e1ed1fc2eafc7e4"
   integrity sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -7951,6 +7961,19 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
+formik@^2.2.9:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"
+  integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -10357,6 +10380,11 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
+ky@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/ky/-/ky-0.30.0.tgz#a3d293e4f6c4604a9a4694eceb6ce30e73d27d64"
+  integrity sha512-X/u76z4JtDVq10u1JA5UQfatPxgPaVDMYTrgHyiTpGN2z4TMEJkIHsoSBBSg9SWZEIXTKsi9kHgiQ9o3Y/4yog==
+
 language-subtag-registry@~0.3.2:
   version "0.3.21"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
@@ -10510,6 +10538,11 @@ lock@^1.1.0:
   resolved "https://registry.yarnpkg.com/lock/-/lock-1.1.0.tgz#53157499d1653b136ca66451071fca615703fa55"
   integrity sha1-UxV0mdFlOxNspmRRBx/KYVcD+lU=
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.clonedeep@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -11183,6 +11216,11 @@ nano-css@^5.3.1:
     stacktrace-js "^2.0.2"
     stylis "^4.0.6"
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanoid@^3.1.23, nanoid@^3.2.0, nanoid@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
@@ -12647,6 +12685,11 @@ proper-lockfile@^4.1.2:
     retry "^0.12.0"
     signal-exit "^3.0.2"
 
+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 property-information@^5.0.0, property-information@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -12942,6 +12985,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
   integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.0.1, react-fast-compare@^3.1.1, react-fast-compare@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
@@ -14830,6 +14878,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tinycolor2@^1.4.1:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
@@ -14929,6 +14982,11 @@ token-types@^4.1.1:
     "@tokenizer/token" "^0.3.0"
     ieee754 "^1.2.1"
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
@@ -16036,6 +16094,19 @@ yoga-layout-prebuilt@^1.10.0:
   dependencies:
     "@types/yoga-layout" "1.9.2"
 
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"
+
 yurnalist@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/yurnalist/-/yurnalist-2.1.0.tgz#44cf7ea5a33a8fab4968cc8c2970489f93760902"

From dda507fd5fe963eb6a5f1f3295ecc58c1482d2fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Mar 2022 11:44:00 +0100
Subject: [PATCH 6/7] feat(dashboard-v2): add /auth/login page

---
 .../src/components/NavBar/NavBar.js           | 10 +++++---
 packages/dashboard-v2/src/pages/auth/login.js | 23 +++++++++++++++++++
 .../static/images/logo-black-text.svg         | 19 +++++++++++++++
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 packages/dashboard-v2/src/pages/auth/login.js
 create mode 100644 packages/dashboard-v2/static/images/logo-black-text.svg

diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index 1db72dda..3d443627 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/packages/dashboard-v2/src/components/NavBar/NavBar.js
@@ -1,4 +1,4 @@
-import { Link } from "gatsby";
+import { Link, navigate } from "gatsby";
 import styled from "styled-components";
 
 import { screen } from "../../lib/cssHelpers";
@@ -7,6 +7,7 @@ import { CogIcon, LockClosedIcon, SkynetLogoIcon } from "../Icons";
 import { PageContainer } from "../PageContainer";
 
 import { NavBarLink, NavBarSection } from ".";
+import accountsService from "../../services/accountsService";
 
 const NavBarContainer = styled.div.attrs({
   className: `grid sticky top-0 bg-white z-10 shadow-sm`,
@@ -77,9 +78,12 @@ export const NavBar = () => (
               partiallyActive
             />
             <DropdownMenuLink
-              to="/logout"
-              as={Link}
+              onClick={async () => {
+                await accountsService.post("logout");
+                navigate("/auth/login");
+              }}
               activeClassName="text-primary"
+              className="cursor-pointer"
               icon={LockClosedIcon}
               label="Log out"
             />
diff --git a/packages/dashboard-v2/src/pages/auth/login.js b/packages/dashboard-v2/src/pages/auth/login.js
new file mode 100644
index 00000000..077dda61
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/auth/login.js
@@ -0,0 +1,23 @@
+import { navigate } from "gatsby";
+
+import AuthLayout from "../../layouts/AuthLayout";
+
+import { LoginForm } from "../../components/forms";
+
+const LoginPage = ({ location }) => {
+  const query = new URLSearchParams(location.search);
+  const redirectTo = query.get("return_to");
+
+  return (
+    <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 h-screen">
+      <div className="mb-16">
+        <img src="/images/logo-black-text.svg" alt="Skynet" />
+      </div>
+      <LoginForm onSuccess={() => navigate(redirectTo || "/")} />
+    </div>
+  );
+};
+
+LoginPage.Layout = AuthLayout;
+
+export default LoginPage;
diff --git a/packages/dashboard-v2/static/images/logo-black-text.svg b/packages/dashboard-v2/static/images/logo-black-text.svg
new file mode 100644
index 00000000..40e45ba8
--- /dev/null
+++ b/packages/dashboard-v2/static/images/logo-black-text.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="155" height="41" viewBox="0 0 155 41">
+    <defs>
+        <filter id="9uejgo84sa">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <path fill="#00C65E" d="M0 8.762L43.44 31.68c1.14.596 1.347 2.137.406 3.012h-.022c-1.365 1.235-2.89 2.28-4.536 3.106C25.25 44.845 8.84 34.069 9.75 18.402l5.809 4.007c1.738 9.146 11.411 14.423 20.054 10.941L0 8.762zm17.563 6.392l29.176 11.52c.846.332 1.303 1.25 1.056 2.124v.037c-.313 1.09-1.558 1.61-2.554 1.065L17.563 15.154zM28.306.065c5.502-.472 12.377 1.596 16.474 6.872 3.45 4.453 4.162 9.894 3.919 15.513v-.015c-.097 1.192-1.32 1.95-2.432 1.511l-19.832-7.83 18.411 4.933c.316-3.24-.446-6.494-2.168-9.258-6.029-9.672-20.279-9.2-25.65.853-.308.579-.578 1.177-.809 1.791l-4.937-2.628c.14-.207.287-.402.435-.601.236-.49.49-.988.771-1.475C15.762 4.07 21.242.736 27.021.201z" transform="translate(-247 -96) translate(247 96)"/>
+                <g filter="url(#9uejgo84sa)" transform="translate(-247 -96) translate(247 96)">
+                    <g>
+                        <path fill="#333" fill-rule="nonzero" d="M7.758 19.892c1.552 0 2.901-.25 4.048-.75 1.146-.499 2.03-1.2 2.65-2.105.62-.904.931-1.95.931-3.139 0-1.12-.28-2.075-.84-2.867-.56-.792-1.35-1.421-2.366-1.886-1.018-.465-2.199-.75-3.543-.852l-1.656-.155c-.93-.07-1.612-.323-2.043-.763-.43-.439-.646-.951-.646-1.537 0-.482.12-.93.362-1.343.241-.413.603-.74 1.086-.982.483-.24 1.086-.361 1.81-.361.759 0 1.384.133 1.875.4.492.267.862.62 1.112 1.06.25.438.375.916.375 1.433h3.595c0-1.223-.284-2.286-.853-3.19-.57-.905-1.371-1.606-2.405-2.106C10.215.25 8.982 0 7.55 0 6.172 0 4.97.237 3.944.71c-1.026.474-1.823 1.146-2.392 2.015-.57.87-.854 1.908-.854 3.113 0 1.602.539 2.89 1.617 3.862 1.077.973 2.521 1.538 4.331 1.693l1.655.129c1.19.103 2.07.357 2.638.762.57.404.854.943.854 1.614 0 .534-.147 1.012-.44 1.434-.293.422-.741.762-1.345 1.02-.603.259-1.353.388-2.25.388-1 0-1.806-.146-2.418-.44-.612-.292-1.056-.675-1.332-1.149-.275-.473-.413-.96-.413-1.46H0c0 1.189.302 2.252.905 3.191.604.939 1.479 1.675 2.625 2.209 1.147.534 2.556.8 4.228.8zm14.51-.491v-6.562h1.526l4.706 6.562h4.06l-5.913-8.047 4.776-5.98h-3.75l-5.405 6.755V.543h-3.595V19.4h3.595zm14.225 5.528c1.155 0 2.125-.138 2.91-.413.784-.276 1.426-.728 1.926-1.356.5-.629.888-1.46 1.164-2.493l4.164-15.294h-3.44L40.389 16.25h-.55L36.417 5.373h-3.621l4.552 13.718h2.302l-.208.8c-.108.435-.259.792-.451 1.072l-.066.091c-.224.293-.504.5-.84.62-.337.12-.755.181-1.255.181h-2.637v3.074h2.301zm16.45-5.528V11.16c0-.913.27-1.64.814-2.183.543-.542 1.254-.814 2.134-.814.862 0 1.538.267 2.03.801.491.534.737 1.232.737 2.093V19.4h3.594v-8.034c0-2.136-.43-3.742-1.293-4.818-.862-1.077-2.129-1.615-3.801-1.615h-.155c-1.121 0-2.056.241-2.806.723-.75.483-1.315 1.202-1.694 2.158-.106.265-.196.549-.272.85l-.039.16V5.373h-2.844v14.028h3.594zm19.655.49c1.156 0 2.186-.197 3.09-.593.906-.397 1.652-.956 2.238-1.68.586-.723.982-1.567 1.19-2.531h-3.31c-.156.516-.51.951-1.061 1.304-.552.353-1.267.53-2.147.53-.879 0-1.603-.194-2.172-.581-.569-.388-.991-.922-1.267-1.602-.17-.419-.287-.875-.353-1.368l-.014-.117h10.556V11.96c0-1.24-.259-2.398-.776-3.475-.517-1.076-1.288-1.946-2.314-2.609s-2.298-.994-3.815-.994c-1.155 0-2.172.202-3.051.607-.88.404-1.617.947-2.211 1.627-.595.68-1.044 1.455-1.345 2.325-.302.87-.453 1.77-.453 2.7v.49c0 .896.151 1.774.453 2.636.301.86.75 1.64 1.345 2.337.594.698 1.344 1.253 2.25 1.667.905.413 1.96.62 3.167.62zm3.316-8.834h-7.058l.028-.15c.059-.284.135-.55.229-.8l.059-.148c.284-.68.702-1.201 1.254-1.563.552-.362 1.224-.543 2.017-.543.793 0 1.453.173 1.979.517.525.344.918.835 1.176 1.473.13.318.227.669.291 1.052l.025.162zm14.763 8.525v-3.075h-2.198c-.69 0-1.22-.185-1.59-.555-.371-.37-.557-.9-.557-1.589l.013-6.355h4.332V5.373H86.35l.008-3.952h-3.362l-.008 3.952h-2.242v2.635h2.237l-.013 6.123c0 1.292.187 2.332.56 3.12l.061.122c.414.8 1.039 1.37 1.875 1.705.836.336 1.9.504 3.194.504h2.017z" transform="translate(64 11)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

From 731b1b6d52c515864bc054ff1e1ec63974c7f8d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Thu, 24 Mar 2022 15:47:35 +0100
Subject: [PATCH 7/7] fix(dashboard-v2): address review comments

---
 packages/dashboard-v2/README.md               |   4 +-
 packages/dashboard-v2/package.json            |   2 +-
 .../src/components/NavBar/NavBar.js           |   1 +
 .../src/components/forms/LoginForm.js         | 127 +++++++++---------
 4 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/packages/dashboard-v2/README.md b/packages/dashboard-v2/README.md
index c450ce50..ab0421f8 100644
--- a/packages/dashboard-v2/README.md
+++ b/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.
diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json
index b5f638d6..44f7595d 100644
--- a/packages/dashboard-v2/package.json
+++ b/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",
diff --git a/packages/dashboard-v2/src/components/NavBar/NavBar.js b/packages/dashboard-v2/src/components/NavBar/NavBar.js
index 3d443627..65d9afe5 100644
--- a/packages/dashboard-v2/src/components/NavBar/NavBar.js
+++ b/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"
diff --git a/packages/dashboard-v2/src/components/forms/LoginForm.js b/packages/dashboard-v2/src/components/forms/LoginForm.js
index 93d7a1b9..61973215 100644
--- a/packages/dashboard-v2/src/components/forms/LoginForm.js
+++ b/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,