diff --git a/packages/dashboard-v2/gatsby-config.js b/packages/dashboard-v2/gatsby-config.js
index 017a4dfc..160a7784 100644
--- a/packages/dashboard-v2/gatsby-config.js
+++ b/packages/dashboard-v2/gatsby-config.js
@@ -26,7 +26,7 @@ module.exports = {
app.use(
"/api/",
createProxyMiddleware({
- target: "https://account.siasky.net",
+ target: "https://account.skynetpro.net",
secure: false, // Do not reject self-signed certificates.
changeOrigin: true,
})
diff --git a/packages/dashboard-v2/src/components/forms/SignUpForm.js b/packages/dashboard-v2/src/components/forms/SignUpForm.js
new file mode 100644
index 00000000..7ff7ba87
--- /dev/null
+++ b/packages/dashboard-v2/src/components/forms/SignUpForm.js
@@ -0,0 +1,109 @@
+import PropTypes from "prop-types";
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+
+import { TextField } from "../Form/TextField";
+import { Button } from "../Button";
+
+import accountsService from "../../services/accountsService";
+
+// TODO: better password strength validation
+const registrationSchema = Yup.object().shape({
+ email: Yup.string().required("Email is required").email("Please provide a valid email address"),
+ password: Yup.string().required("Password is required").min(6, "Password has to be at least 6 characters long"),
+ confirmPassword: Yup.string().oneOf([Yup.ref("password"), null], "Passwords must match"),
+});
+
+const USER_EXISTS_ERROR = "identity already belongs to an existing user";
+
+export const SignUpForm = ({ onSuccess, onFailure }) => (
+ {
+ try {
+ await accountsService.post("user", {
+ json: {
+ email,
+ password,
+ },
+ });
+
+ onSuccess();
+ } catch (err) {
+ let isFormErrorSet = false;
+
+ if (err.response) {
+ const data = await err.response.json();
+
+ // If it's a user error, let's capture it and handle within the form.
+ if (USER_EXISTS_ERROR === data.message) {
+ setErrors({ email: "This email address already in use." });
+ isFormErrorSet = true;
+ }
+ }
+
+ if (!isFormErrorSet) {
+ onFailure();
+ }
+ }
+ }}
+ >
+ {({ errors, touched }) => (
+
+ )}
+
+);
+
+SignUpForm.propTypes = {
+ onFailure: PropTypes.func.isRequired,
+ onSuccess: PropTypes.func.isRequired,
+};
diff --git a/packages/dashboard-v2/src/layouts/AuthLayout.js b/packages/dashboard-v2/src/layouts/AuthLayout.js
index 9706c83b..8a803fed 100644
--- a/packages/dashboard-v2/src/layouts/AuthLayout.js
+++ b/packages/dashboard-v2/src/layouts/AuthLayout.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
import { SWRConfig } from "swr";
import { UserProvider } from "../contexts/user";
-import { guestsOnly } from "../lib/swrConfig";
+import { guestsOnly, allUsers } from "../lib/swrConfig";
const Layout = styled.div.attrs({
className: "h-screen w-screen bg-black flex",
@@ -21,25 +21,30 @@ const Content = styled.div.attrs({
className: "w-full md:w-5/12 md:max-w-[680px] shrink-0",
})``;
-const AuthLayout = ({ children }) => {
- return (
- <>
-
-
-
-
-
-
- The decentralized revolution starts with decentralized storage
-
-
-
- {children}
-
-
-
- >
- );
-};
+const AuthLayout =
+ (swrConfig) =>
+ ({ children }) => {
+ return (
+ <>
+
+
+
+
+
+
+ The decentralized revolution starts with decentralized storage
+
+
+
+ {children}
+
+
+
+ >
+ );
+ };
-export default AuthLayout;
+// Some pages (e.g. email confirmation) need to be accessible to both logged-in and guest users.
+export const AllUsersAuthLayout = AuthLayout(allUsers);
+
+export default AuthLayout(guestsOnly);
diff --git a/packages/dashboard-v2/src/lib/swrConfig.js b/packages/dashboard-v2/src/lib/swrConfig.js
index 3e5f730a..058b5ead 100644
--- a/packages/dashboard-v2/src/lib/swrConfig.js
+++ b/packages/dashboard-v2/src/lib/swrConfig.js
@@ -23,6 +23,10 @@ const redirectAuthenticated = (key) =>
return response.json();
});
+export const allUsers = {
+ fetcher: (key) => fetch(`${baseUrl}/${key}`).then((response) => response.json()),
+};
+
export const authenticatedOnly = {
fetcher: redirectUnauthenticated,
};
diff --git a/packages/dashboard-v2/src/pages/auth/signup.js b/packages/dashboard-v2/src/pages/auth/signup.js
new file mode 100644
index 00000000..d3df874d
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/auth/signup.js
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+
+import AuthLayout from "../../layouts/AuthLayout";
+
+import HighlightedLink from "../../components/HighlightedLink";
+import { SignUpForm } from "../../components/forms/SignUpForm";
+import { navigate } from "gatsby";
+
+const State = {
+ Pure: "PURE",
+ Success: "SUCCESS",
+ Failure: "FAILURE",
+};
+
+const SignUpPage = () => {
+ const [state, setState] = useState(State.Pure);
+
+ useEffect(() => {
+ if (state === State.Success) {
+ const timer = setTimeout(() => navigate("/"), 3000);
+
+ return () => clearTimeout(timer);
+ }
+ }, [state]);
+
+ return (
+
+
+
+
+ {state !== State.Success && (
+
setState(State.Success)} onFailure={() => setState(State.Failure)} />
+ )}
+
+ {state === State.Success && (
+
+
Please check your email inbox and confirm your email address.
+
You will be redirected to your dashboard shortly.
+
Click here to go there now.
+
+ )}
+
+ {state === State.Failure && (
+ Something went wrong, please try again later.
+ )}
+
+
+ Already have an account? Sign in
+
+
+ );
+};
+
+SignUpPage.Layout = AuthLayout;
+
+export default SignUpPage;
diff --git a/packages/dashboard-v2/src/pages/user/confirm.js b/packages/dashboard-v2/src/pages/user/confirm.js
new file mode 100644
index 00000000..a66fc368
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/user/confirm.js
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { navigate } from "gatsby";
+
+import { AllUsersAuthLayout } from "../../layouts/AuthLayout";
+
+import HighlightedLink from "../../components/HighlightedLink";
+import accountsService from "../../services/accountsService";
+
+const State = {
+ Pure: "PURE",
+ Success: "SUCCESS",
+ Failure: "FAILURE",
+};
+
+const EmailConfirmationPage = ({ location }) => {
+ const query = new URLSearchParams(location.search);
+ const token = query.get("token");
+
+ const [state, setState] = useState(State.Pure);
+
+ useEffect(() => {
+ let timer;
+
+ async function confirm(token) {
+ try {
+ await accountsService.get("user/confirm", { searchParams: { token } });
+
+ timer = setTimeout(() => {
+ navigate("/");
+ }, 3000);
+ setState(State.Success);
+ } catch {
+ setState(State.Failure);
+ }
+ }
+
+ if (token) {
+ confirm(token);
+ }
+
+ return () => clearTimeout(timer);
+ }, [token]);
+
+ return (
+
+
+
+
+
+ {state === State.Pure &&
Please wait while we verify your account...
}
+
+ {state === State.Success && (
+ <>
+
All done!
+
You will be redirected to your dashboard shortly.
+
Redirect now.
+ >
+ )}
+
+ {state === State.Failure &&
Something went wrong, please try again later.
}
+
+
+ );
+};
+
+EmailConfirmationPage.Layout = AllUsersAuthLayout;
+
+export default EmailConfirmationPage;