diff --git a/packages/dashboard/src/components/Table.js b/packages/dashboard/src/components/Table.js
index 1c01b1fa..697b7d2c 100644
--- a/packages/dashboard/src/components/Table.js
+++ b/packages/dashboard/src/components/Table.js
@@ -44,7 +44,7 @@ export default function Table({ items, count, headers, mutate, actions, offset,
if (offset < 0) setOffset(0);
else if (offset >= count && count > 0) setOffset(Math.floor(count / pageSize - 1) * pageSize);
else if (offset % pageSize) setOffset(offset - (offset % pageSize));
- }, [offset, pageSize, setOffset]);
+ }, [count, offset, pageSize, setOffset]);
return (
@@ -104,7 +104,7 @@ export default function Table({ items, count, headers, mutate, actions, offset,
))
) : (
- |
+ |
no entries
|
diff --git a/packages/dashboard/src/config.js b/packages/dashboard/src/config.js
index 326ec4e9..70cf9342 100644
--- a/packages/dashboard/src/config.js
+++ b/packages/dashboard/src/config.js
@@ -1,13 +1,4 @@
export default {
- // https://github.com/ory/kratos-selfservice-ui-node#configuration
- kratos: {
- // The URL where ORY Kratos's Public API is located at. If this app and ORY Kratos are running in the same
- // private network, this should be the private network address (e.g. kratos-public.svc.cluster.local)
- public: process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL.replace(/\/+$/, ""),
- // The URL where ORY Kratos's public API is located, when accessible from the public internet via ORY Oathkeeper.
- // This could be for example http://kratos.my-app.com/.
- browser: process.env.NEXT_PUBLIC_KRATOS_BROWSER_URL.replace(/\/+$/, ""),
- },
tiers: {
starter: { id: "starter", tier: 1, name: "Free", description: "Pin up to 100GB" },
},
diff --git a/packages/dashboard/src/pages/_app.js b/packages/dashboard/src/pages/_app.js
index 811d3a0d..cf1d18e6 100644
--- a/packages/dashboard/src/pages/_app.js
+++ b/packages/dashboard/src/pages/_app.js
@@ -4,8 +4,13 @@ import { ToastContainer } from "react-toastify";
import Head from "next/head";
import "normalize.css";
import "react-toastify/dist/ReactToastify.css";
-import "tailwindcss/tailwind.css";
-import "@fontsource/metropolis/all.css";
+import "../../styles/globals.css";
+import "@fontsource/sora/300.css"; // light
+import "@fontsource/sora/400.css"; // normal
+import "@fontsource/sora/500.css"; // medium
+import "@fontsource/sora/600.css"; // semibold
+import "@fontsource/source-sans-pro/400.css"; // normal
+import "@fontsource/source-sans-pro/600.css"; // semibold
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
diff --git a/packages/dashboard/src/pages/api/accounts/login.js b/packages/dashboard/src/pages/api/accounts/login.js
deleted file mode 100644
index 89bad4dc..00000000
--- a/packages/dashboard/src/pages/api/accounts/login.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import superagent from "superagent";
-
-export default async (req, res) => {
- if (req.cookies.ory_kratos_session) {
- try {
- const { header } = await superagent
- .post("http://oathkeeper:4455/login")
- .set("cookie", `ory_kratos_session=${req.cookies.ory_kratos_session}`);
-
- res.setHeader("Set-Cookie", header["set-cookie"]);
- res.redirect(req.query.return_to ?? "/");
- } catch (error) {
- console.log(`Cookie is present but authentication failed: ${error.message}`);
-
- // credentials were correct but accounts service failed
- res.redirect("/.ory/kratos/public/self-service/browser/flows/logout");
- }
- } else {
- res.redirect("/auth/login"); // redirect to login page if kratos session is missing
- }
-};
diff --git a/packages/dashboard/src/pages/api/stripe/billing.js b/packages/dashboard/src/pages/api/stripe/billing.js
index 0c855ec4..58ef4bc2 100644
--- a/packages/dashboard/src/pages/api/stripe/billing.js
+++ b/packages/dashboard/src/pages/api/stripe/billing.js
@@ -1,4 +1,4 @@
-import ky from "ky/umd";
+import ky from "ky";
import Stripe from "stripe";
import { StatusCodes } from "http-status-codes";
@@ -11,10 +11,10 @@ const getStripeCustomer = (stripeCustomerId = null) => {
return stripe.customers.create();
};
-export default async (req, res) => {
+export default async function billingApi(req, res) {
try {
- const authorization = req.headers.authorization; // authorization header from request
- const { stripeCustomerId } = await ky("http://accounts:3000/user", { headers: { authorization } }).json();
+ const cookie = req.headers.cookie; // cookie header from request
+ const { stripeCustomerId } = await ky("http://accounts:3000/user", { headers: { cookie } }).json();
const customer = await getStripeCustomer(stripeCustomerId);
const session = await stripe.billingPortal.sessions.create({
customer: customer.id,
@@ -25,4 +25,4 @@ export default async (req, res) => {
} catch ({ message }) {
res.status(StatusCodes.BAD_REQUEST).json({ error: { message } });
}
-};
+}
diff --git a/packages/dashboard/src/pages/api/stripe/checkout.js b/packages/dashboard/src/pages/api/stripe/checkout.js
index 879d8efd..9da694cb 100644
--- a/packages/dashboard/src/pages/api/stripe/checkout.js
+++ b/packages/dashboard/src/pages/api/stripe/checkout.js
@@ -1,11 +1,11 @@
-import ky from "ky/umd";
+import ky from "ky";
import Stripe from "stripe";
import { StatusCodes } from "http-status-codes";
import { isPaidTier } from "../../../services/tiers";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
-const getStripeCustomer = async (user, authorization) => {
+const getStripeCustomer = async (user, cookie) => {
if (user.stripeCustomerId) {
return stripe.customers.retrieve(user.stripeCustomerId);
}
@@ -13,12 +13,12 @@ const getStripeCustomer = async (user, authorization) => {
const customer = await stripe.customers.create();
// update user instance and include the customer id once created
- await ky.put(`http://accounts:3000/user`, { headers: { authorization }, json: { stripeCustomerId: customer.id } });
+ await ky.put("http://accounts:3000/user", { headers: { cookie }, json: { stripeCustomerId: customer.id } });
return customer;
};
-export default async (req, res) => {
+export default async function checkoutApi(req, res) {
if (req.method !== "POST") {
return res.status(StatusCodes.NOT_FOUND).end();
}
@@ -30,8 +30,8 @@ export default async (req, res) => {
}
try {
- const authorization = req.headers.authorization; // authorization header from request
- const user = await ky("http://accounts:3000/user", { headers: { authorization } }).json();
+ const cookie = req.headers.cookie; // cookie header from request
+ const user = await ky("http://accounts:3000/user", { headers: { cookie } }).json();
if (isPaidTier(user.tier)) {
const message = `Customer can have only one active subscription at a time, use Stripe Customer Portal to manage active subscription`;
@@ -39,7 +39,7 @@ export default async (req, res) => {
return res.status(StatusCodes.BAD_REQUEST).json({ error: { message } });
}
- const customer = await getStripeCustomer(user, authorization);
+ const customer = await getStripeCustomer(user, cookie);
const session = await stripe.checkout.sessions.create({
mode: "subscription",
payment_method_types: ["card"],
@@ -55,4 +55,4 @@ export default async (req, res) => {
} catch (error) {
res.status(StatusCodes.BAD_REQUEST).json({ error: { message: error.message } });
}
-};
+}
diff --git a/packages/dashboard/src/pages/api/stripe/subscription.js b/packages/dashboard/src/pages/api/stripe/subscription.js
deleted file mode 100644
index 3526d5ac..00000000
--- a/packages/dashboard/src/pages/api/stripe/subscription.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import ky from "ky/umd";
-import Stripe from "stripe";
-import { StatusCodes } from "http-status-codes";
-
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
-
-export default async (req, res) => {
- try {
- const authorization = req.headers.authorization; // authorization header from request
- const { stripeCustomerId } = await ky("http://accounts:3000/user", { headers: { authorization } }).json();
- const stripeCustomer = await stripe.customers.retrieve(stripeCustomerId, { expand: ["subscriptions"] });
- const { subscriptions } = stripeCustomer;
-
- // todo: find a better way to get current subscription
- if (subscriptions.total_count) {
- return res.json(subscriptions.data[0]);
- }
-
- res.status(StatusCodes.NO_CONTENT).end();
- } catch ({ message }) {
- res.status(StatusCodes.BAD_REQUEST).json({ error: { message } });
- }
-};
diff --git a/packages/dashboard/src/pages/api/stubs/stripe/prices.js b/packages/dashboard/src/pages/api/stubs/stripe/prices.js
deleted file mode 100644
index ebf013a3..00000000
--- a/packages/dashboard/src/pages/api/stubs/stripe/prices.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export default (req, res) => {
- res.json([
- {
- id: "price_1IReYFIzjULiPWN6DqN2DwjN",
- name: "Skynet Extreme",
- description: "Skynet Extreme description",
- tier: 4,
- price: 80,
- currency: "usd",
- stripe: "price_1IReYFIzjULiPWN6DqN2DwjN",
- productId: "prod_J3m6IuVyh3XOc5",
- livemode: false,
- },
- {
- id: "price_1IReY5IzjULiPWN6AxPytHEG",
- name: "Skynet Pro",
- description: "Skynet Pro description",
- tier: 3,
- price: 20,
- currency: "usd",
- stripe: "price_1IReY5IzjULiPWN6AxPytHEG",
- productId: "prod_J3m6ioQg90kZj5",
- livemode: false,
- },
- {
- id: "price_1IReXpIzjULiPWN66PvsxHL4",
- name: "Skynet Plus",
- description: "Skynet Plus description",
- tier: 2,
- price: 5,
- currency: "usd",
- stripe: "price_1IReXpIzjULiPWN66PvsxHL4",
- productId: "prod_J3m6xMfDiz2LGE",
- livemode: false,
- },
- ]);
-};
diff --git a/packages/dashboard/src/pages/api/stubs/user.js b/packages/dashboard/src/pages/api/stubs/user.js
deleted file mode 100644
index 409bf333..00000000
--- a/packages/dashboard/src/pages/api/stubs/user.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import user from "./user.json";
-
-export default (req, res) => {
- res.json(user);
-};
diff --git a/packages/dashboard/src/pages/api/stubs/user.json b/packages/dashboard/src/pages/api/stubs/user.json
deleted file mode 100644
index f41dab0e..00000000
--- a/packages/dashboard/src/pages/api/stubs/user.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "firstName": "John",
- "lastName": "Doe",
- "email": "john@example.com",
- "sub": "ab776d6d-f324-4fa7-4k21-7587d5215481",
- "tier": 1,
- "subscribedUntil": "0001-01-01T00:00:00Z",
- "subscriptionStatus": "active",
- "subscriptionCancelAt": "2021-04-21T00:00:00Z",
- "subscriptionCancelAtPeriodEnd": true,
- "stripeCustomerId": "cus_J0iYnAp6LRgsTI"
-}
diff --git a/packages/dashboard/src/pages/api/stubs/user/downloads.js b/packages/dashboard/src/pages/api/stubs/user/downloads.js
deleted file mode 100644
index c4a24c03..00000000
--- a/packages/dashboard/src/pages/api/stubs/user/downloads.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import items from "./downloads.json";
-
-export default (req, res) => {
- const offset = parseInt(req.query?.offset ?? 0, 10);
- const pageSize = parseInt(req.query?.pageSize ?? 10, 10);
-
- res.json({ items: items.slice(offset, offset + pageSize), count: items.length, pageSize, offset });
-};
diff --git a/packages/dashboard/src/pages/api/stubs/user/downloads.json b/packages/dashboard/src/pages/api/stubs/user/downloads.json
deleted file mode 100644
index edf6ff0d..00000000
--- a/packages/dashboard/src/pages/api/stubs/user/downloads.json
+++ /dev/null
@@ -1,44 +0,0 @@
-[
- {
- "id": 1111,
- "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
- "name": "ugabuga.pdf",
- "size": 123123,
- "downloadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 2222,
- "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
- "name": "ugabuga.pdf",
- "size": 8912739812,
- "downloadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 3333,
- "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
- "name": "ugabuga.pdf",
- "size": 123123,
- "downloadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 4444,
- "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
- "name": "ugabuga.pdf",
- "size": 83943,
- "downloadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 5555,
- "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
- "name": "ugabuga.pdf",
- "size": 3290489120,
- "downloadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 6666,
- "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
- "name": "ugabuga.pdf",
- "size": 1290389,
- "downloadedOn": "2020-04-02T08:02:17-05:00"
- }
-]
diff --git a/packages/dashboard/src/pages/api/stubs/user/stats.js b/packages/dashboard/src/pages/api/stubs/user/stats.js
deleted file mode 100644
index 81a65545..00000000
--- a/packages/dashboard/src/pages/api/stubs/user/stats.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import stats from "./stats.json";
-
-export default (req, res) => {
- res.json(stats);
-};
diff --git a/packages/dashboard/src/pages/api/stubs/user/stats.json b/packages/dashboard/src/pages/api/stubs/user/stats.json
deleted file mode 100644
index 29696ca2..00000000
--- a/packages/dashboard/src/pages/api/stubs/user/stats.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "storageUsed": 809500672,
- "numRegReads": 0,
- "numRegWrites": 0,
- "numUploads": 13,
- "numDownloads": 78,
- "totalUploadsSize": 618649028,
- "totalDownloadsSize": 32307956843,
- "bwUploads": 2810183680,
- "bwDownloads": 32323934976,
- "bwRegReads": 0,
- "bwRegWrites": 0
-}
diff --git a/packages/dashboard/src/pages/api/stubs/user/uploads.js b/packages/dashboard/src/pages/api/stubs/user/uploads.js
deleted file mode 100644
index ad8b3d20..00000000
--- a/packages/dashboard/src/pages/api/stubs/user/uploads.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import items from "./uploads.json";
-
-export default (req, res) => {
- const offset = parseInt(req.query?.offset ?? 0, 10);
- const pageSize = parseInt(req.query?.pageSize ?? 10, 10);
-
- res.json({ items: items.slice(offset, offset + pageSize), count: items.length, pageSize, offset });
-};
diff --git a/packages/dashboard/src/pages/api/stubs/user/uploads.json b/packages/dashboard/src/pages/api/stubs/user/uploads.json
deleted file mode 100644
index efc42359..00000000
--- a/packages/dashboard/src/pages/api/stubs/user/uploads.json
+++ /dev/null
@@ -1,44 +0,0 @@
-[
- {
- "id": 1111,
- "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
- "name": "ugabuga.pdf",
- "size": 123123,
- "uploadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 2222,
- "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
- "name": "ugabuga.pdf",
- "size": 8912739812,
- "uploadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 3333,
- "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
- "name": "ugabuga.pdf",
- "size": 123123,
- "uploadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 4444,
- "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
- "name": "ugabuga.pdf",
- "size": 83943,
- "uploadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 5555,
- "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
- "name": "ugabuga.pdf",
- "size": 3290489120,
- "uploadedOn": "2020-04-02T08:02:17-05:00"
- },
- {
- "id": 6666,
- "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
- "name": "ugabuga.pdf",
- "size": 1290389,
- "uploadedOn": "2020-04-02T08:02:17-05:00"
- }
-]
diff --git a/packages/dashboard/src/pages/auth/login.js b/packages/dashboard/src/pages/auth/login.js
index f9e8ab45..46b807f6 100644
--- a/packages/dashboard/src/pages/auth/login.js
+++ b/packages/dashboard/src/pages/auth/login.js
@@ -1,65 +1,48 @@
import Link from "next/link";
-import { Configuration, PublicApi } from "@ory/kratos-client";
-import config from "../../config";
+import { useRouter } from "next/router";
+import * as Yup from "yup";
+import accountsApi from "../../services/accountsApi";
+import useAnonRoute from "../../services/useAnonRoute";
import SelfServiceForm from "../../components/Form/SelfServiceForm";
-const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public }));
-
-export async function getServerSideProps(context) {
- const flow = context.query.flow;
- const redirect = encodeURIComponent(`/api/accounts/login?return_to=${context.query.return_to ?? "/"}`);
-
- if (process.env.NODE_ENV === "development") {
- return { props: { flow: require("../../../stubs/login.json") } };
- }
-
- // The flow is used to identify the login and registration flow and
- // return data like the csrf_token and so on.
- if (!flow || typeof flow !== "string") {
- // No flow ID found in URL, initializing login flow.
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/login/browser?return_to=${redirect}`,
- },
- };
- }
-
- try {
- const { status, data } = await kratos.getSelfServiceLoginFlow(flow);
-
- if (status === 200) return { props: { flow: data } };
-
- throw new Error(`Failed to retrieve flow ${flow} with code ${status}`);
- } catch (error) {
- console.log(`Unexpected error retrieving login flow: ${error.message}`);
-
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/login/browser?return_to=${redirect}`,
- },
- };
- }
-}
-
-const fieldsConfig = {
- identifier: {
+const fieldsConfig = [
+ {
+ name: "email",
+ type: "text",
label: "Email address",
autoComplete: "email",
position: 0,
},
- password: {
+ {
+ name: "password",
+ type: "password",
label: "Password",
autoComplete: "current-password",
position: 1,
},
- csrf_token: {
- position: 99,
- },
-};
+];
+
+const validationSchema = Yup.object().shape({
+ email: Yup.string().required("Email is required").email("This email is invalid"),
+ password: Yup.string().required("Password is required"),
+});
+
+export default function Login() {
+ useAnonRoute(); // ensure user is not logged in
+
+ const router = useRouter();
+
+ const onSubmit = async (values) => {
+ await accountsApi.post("login", {
+ json: {
+ email: values.email,
+ password: values.password,
+ },
+ });
+
+ router.push("/");
+ };
-export default function Login({ flow }) {
return (
@@ -82,14 +65,19 @@ export default function Login({ flow }) {
sign up
{" "}
- if you don't have one yet
+ if you don't have one yet
-
+
diff --git a/packages/dashboard/src/pages/recovery.js b/packages/dashboard/src/pages/auth/recovery.js
similarity index 69%
rename from packages/dashboard/src/pages/recovery.js
rename to packages/dashboard/src/pages/auth/recovery.js
index e64a4213..05f94d85 100644
--- a/packages/dashboard/src/pages/recovery.js
+++ b/packages/dashboard/src/pages/auth/recovery.js
@@ -1,57 +1,39 @@
+import * as React from "react";
import Link from "next/link";
-import { Configuration, PublicApi } from "@ory/kratos-client";
-import config from "../config";
-import SelfServiceForm from "../components/Form/SelfServiceForm";
+import * as Yup from "yup";
+import accountsApi from "../../services/accountsApi";
+import useAnonRoute from "../../services/useAnonRoute";
+import SelfServiceForm from "../../components/Form/SelfServiceForm";
-const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public }));
-
-export async function getServerSideProps(context) {
- const flow = context.query.flow;
-
- if (process.env.NODE_ENV === "development") {
- return { props: { flow: require("../../stubs/recovery.json") } };
- }
-
- // The flow is used to identify the login and registration flow and
- // return data like the csrf_token and so on.
- if (!flow || typeof flow !== "string") {
- // No flow ID found in URL, initializing recovery flow.
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/recovery/browser`,
- },
- };
- }
-
- try {
- const { status, data } = await kratos.getSelfServiceRecoveryFlow(flow);
-
- if (status === 200) return { props: { flow: data } };
-
- throw new Error(`Failed to retrieve flow ${flow} with code ${status}`);
- } catch (error) {
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/recovery/browser`,
- },
- };
- }
-}
-
-const fieldsConfig = {
- email: {
- label: "Your email",
+const fieldsConfig = [
+ {
+ name: "email",
+ type: "text",
+ label: "Email address",
autoComplete: "email",
position: 0,
},
- csrf_token: {
- position: 99,
- },
-};
+];
+
+const validationSchema = Yup.object().shape({
+ email: Yup.string().required("Email is required").email("This email is invalid"),
+});
+
+export default function Recovery() {
+ useAnonRoute(); // ensure user is not logged in
+
+ const [success, setSuccess] = React.useState(false);
+
+ const onSubmit = async (values) => {
+ await accountsApi.post("user/recover/request", {
+ json: {
+ email: values.email,
+ },
+ });
+
+ setSuccess(true);
+ };
-export default function Recovery({ flow }) {
return (
@@ -84,12 +66,20 @@ export default function Recovery({ flow }) {
-
+ {!success && (
+
+ )}
+
+ {success && (
+
+ Account recovery requested, please follow instructions sent in email.
+
+ )}
);
}
diff --git a/packages/dashboard/src/pages/auth/registration.js b/packages/dashboard/src/pages/auth/registration.js
index 23414f72..c790f99a 100644
--- a/packages/dashboard/src/pages/auth/registration.js
+++ b/packages/dashboard/src/pages/auth/registration.js
@@ -1,88 +1,66 @@
import Link from "next/link";
-import { Configuration, PublicApi } from "@ory/kratos-client";
-import { getIn } from "formik";
-import config from "../../config";
+import { useRouter } from "next/router";
import levenshtein from "fast-levenshtein";
+import * as Yup from "yup";
+import accountsApi from "../../services/accountsApi";
+import useAnonRoute from "../../services/useAnonRoute";
import lcs from "../../services/longestCommonSequence";
import SelfServiceForm from "../../components/Form/SelfServiceForm";
-const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public }));
-
-export async function getServerSideProps(context) {
- const flow = context.query.flow;
- const redirect = encodeURIComponent(`/api/accounts/login?return_to=${context.query.return_to ?? "/"}`);
-
- if (process.env.NODE_ENV === "development") {
- return { props: { flow: require("../../../stubs/registration.json") } };
- }
-
- // The flow is used to identify the login and registration flow and
- // return data like the csrf_token and so on.
- if (!flow || typeof flow !== "string") {
- // No flow ID found in URL, initializing registration flow.
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/registration/browser?return_to=${redirect}`,
- },
- };
- }
-
- try {
- const { status, data } = await kratos.getSelfServiceRegistrationFlow(flow);
-
- if (status === 200) return { props: { flow: data } };
-
- throw new Error(`Failed to retrieve flow ${flow} with code ${status}`);
- } catch (error) {
- console.log(`Unexpected error retrieving registration flow: ${error.message}`);
-
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/registration/browser?return_to=${redirect}`,
- },
- };
- }
-}
-
-const fieldsConfig = {
- "traits.email": {
+const fieldsConfig = [
+ {
+ name: "email",
+ type: "text",
label: "Email address",
autoComplete: "email",
position: 0,
},
- password: {
+ {
+ name: "password",
+ type: "password",
label: "Password",
autoComplete: "new-password",
position: 1,
- checks: [
- {
- label: "At least 6 characters long",
- validate: (values, field) => {
- const value = getIn(values, field);
-
- return value && value.length > 5;
- },
- },
- {
- label: "Significantly different from the email",
- validate: (values, field) => {
- const value = getIn(values, field);
- const email = getIn(values, "traits.email");
-
- // levenshtein distance higher than 5 and longest common sequence shorter than half of the password
- return value && email && levenshtein.get(value, email) > 5 && lcs(value, email).length / value.length <= 0.5;
- },
- },
- ],
},
- csrf_token: {
- position: 99,
+ {
+ name: "confirmPassword",
+ type: "password",
+ label: "Password repeated",
+ autoComplete: "new-password",
+ position: 2,
},
-};
+];
+
+const validationSchema = Yup.object().shape({
+ email: Yup.string().required("Email is required").email("This email is invalid"),
+ password: Yup.string()
+ .required("Password is required")
+ .min(6, "Password has to be at least 6 characters long")
+ .test("levenshtein", "This password is too similar to your email", function (value) {
+ const email = this.parent.email;
+
+ // levenshtein distance higher than 5 and longest common sequence shorter than half of the password
+ return value && email && levenshtein.get(value, email) > 5 && lcs(value, email).length / value.length <= 0.5;
+ }),
+ confirmPassword: Yup.string().oneOf([Yup.ref("password"), null], "Passwords must match"),
+});
+
+export default function Registration() {
+ useAnonRoute(); // ensure user is not logged in
+
+ const router = useRouter();
+
+ const onSubmit = async (values) => {
+ await accountsApi.post("user", {
+ json: {
+ email: values.email,
+ password: values.password,
+ },
+ });
+
+ router.push("/");
+ };
-export default function Registration({ flow }) {
return (
@@ -109,7 +87,12 @@ export default function Registration({ flow }) {
-
+
);
}
diff --git a/packages/dashboard/src/pages/downloads.js b/packages/dashboard/src/pages/downloads.js
index d18257f7..c94bee3a 100644
--- a/packages/dashboard/src/pages/downloads.js
+++ b/packages/dashboard/src/pages/downloads.js
@@ -3,12 +3,10 @@ import prettyBytes from "pretty-bytes";
import { useState } from "react";
import Layout from "../components/Layout";
import Table from "../components/Table";
-import authServerSideProps from "../services/authServerSideProps";
import { SkynetClient } from "skynet-js";
import useAccountsApi from "../services/useAccountsApi";
const skynetClient = new SkynetClient(process.env.NEXT_PUBLIC_SKYNET_PORTAL_API);
-const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
const getRelativeDate = ({ downloadedOn }) => dayjs(downloadedOn).format("YYYY-MM-DD HH:mm:ss");
const headers = [
@@ -36,22 +34,15 @@ const headers = [
];
const actions = [];
-export const getServerSideProps = authServerSideProps(async (context, api) => {
- const initialData = await api.get("user/downloads?pageSize=10&offset=0").json();
-
- return { props: { initialData } };
-});
-
-export default function Downloads({ initialData }) {
+export default function Downloads() {
const [offset, setOffset] = useState(0);
- const { data } = useAccountsApi(`${apiPrefix}/user/downloads?pageSize=10&offset=${offset}`, {
- initialData: offset === 0 ? initialData : undefined,
+ const { data } = useAccountsApi(`user/downloads?pageSize=10&offset=${offset}`, {
revalidateOnMount: true,
});
// preload next page if it exists (based on the response from the current page query)
const nextPageOffset = data && data.offset + data.pageSize < data.count ? data.offset + data.pageSize : offset;
- useAccountsApi(`${apiPrefix}/user/downloads?pageSize=10&offset=${nextPageOffset}`);
+ useAccountsApi(`user/downloads?pageSize=10&offset=${nextPageOffset}`);
return (
diff --git a/packages/dashboard/src/pages/index.js b/packages/dashboard/src/pages/index.js
index c3e9d809..cbb2e68b 100644
--- a/packages/dashboard/src/pages/index.js
+++ b/packages/dashboard/src/pages/index.js
@@ -4,23 +4,14 @@ import relativeTime from "dayjs/plugin/relativeTime";
import prettyBytes from "pretty-bytes";
import Link from "next/link";
import Layout from "../components/Layout";
-import authServerSideProps from "../services/authServerSideProps";
import { SkynetClient } from "skynet-js";
import config from "../config";
import useAccountsApi from "../services/useAccountsApi";
-import { isFreeTier } from "../services/tiers";
+import React from "react";
dayjs.extend(relativeTime);
const skynetClient = new SkynetClient(process.env.NEXT_PUBLIC_SKYNET_PORTAL_API);
-const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
-
-export const getServerSideProps = authServerSideProps(async (context, api) => {
- const stripe = await api.get("stripe/prices").json();
- const plans = [config.tiers.starter, ...stripe].sort((a, b) => a.tier - b.tier);
-
- return { props: { plans } };
-});
function SkylinkList({ items = [], timestamp }) {
return (
@@ -99,13 +90,19 @@ function SkylinkList({ items = [], timestamp }) {
);
}
-export default function Home({ plans }) {
- const { data: user } = useAccountsApi(`${apiPrefix}/user`);
- const { data: stats } = useAccountsApi(`${apiPrefix}/user/stats`);
- const { data: downloads } = useAccountsApi(`${apiPrefix}/user/downloads?pageSize=3&offset=0`);
- const { data: uploads } = useAccountsApi(`${apiPrefix}/user/uploads?pageSize=3&offset=0`);
+export default function Home() {
+ const { data: prices } = useAccountsApi("stripe/prices");
+ const { data: user } = useAccountsApi("user");
+ const { data: stats } = useAccountsApi("user/stats");
+ const { data: downloads } = useAccountsApi("user/downloads?pageSize=3&offset=0");
+ const { data: uploads } = useAccountsApi("user/uploads?pageSize=3&offset=0");
+ const [plans, setPlans] = React.useState([config.tiers.starter]);
- const activePlan = plans.find(({ tier }) => (user ? user.tier === tier : isFreeTier(tier)));
+ React.useEffect(() => {
+ if (prices) setPlans((plans) => [...plans, ...prices].sort((a, b) => a.tier - b.tier));
+ }, [setPlans, prices]);
+
+ const activePlan = plans.find(({ tier }) => user && user.tier === tier);
return (
@@ -135,7 +132,7 @@ export default function Home({ plans }) {
Current plan
- {activePlan.name}
+ {activePlan?.name}
diff --git a/packages/dashboard/src/pages/payments.js b/packages/dashboard/src/pages/payments.js
index 94289e2d..48bbe5ba 100644
--- a/packages/dashboard/src/pages/payments.js
+++ b/packages/dashboard/src/pages/payments.js
@@ -1,16 +1,13 @@
import dayjs from "dayjs";
import Layout from "../components/Layout";
-import ky from "ky/umd";
-import { useEffect, useState } from "react";
-import authServerSideProps from "../services/authServerSideProps";
+import ky from "ky";
+import * as React from "react";
import classnames from "classnames";
import prettyBytes from "pretty-bytes";
import config from "../config";
import useAccountsApi from "../services/useAccountsApi";
import { isFreeTier, isPaidTier } from "../services/tiers";
-const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
-
const ActiveBadge = () => {
return (
@@ -19,22 +16,23 @@ const ActiveBadge = () => {
);
};
-export const getServerSideProps = authServerSideProps(async (context, api) => {
- const [user, stats, stripe] = await Promise.all([
- api.get("user").json(),
- api.get("user/stats").json(),
- api.get("stripe/prices").json(),
- ]);
- const plans = [config.tiers.starter, ...stripe].sort((a, b) => a.tier - b.tier);
+export default function Payments() {
+ const { data: user } = useAccountsApi("user");
+ const { data: stats } = useAccountsApi("user/stats");
+ const { data: prices } = useAccountsApi("stripe/prices");
+ const [plans, setPlans] = React.useState([config.tiers.starter]);
+ const [selectedPlan, setSelectedPlan] = React.useState(null);
- return { props: { plans, user, stats } };
-});
+ React.useEffect(() => {
+ if (prices) setPlans((plans) => [...plans, ...prices].sort((a, b) => a.tier - b.tier));
+ }, [setPlans, prices]);
+
+ const activePlan = plans.find(({ tier }) => user && user.tier === tier);
+
+ React.useEffect(() => {
+ setSelectedPlan(activePlan);
+ }, [activePlan, setSelectedPlan]);
-export default function Payments({ plans, user: initialUserData, stats: initialStatsData }) {
- const { data: user } = useAccountsApi(`${apiPrefix}/user`, { initialData: initialUserData });
- const { data: stats } = useAccountsApi(`${apiPrefix}/user/stats`, { initialData: initialStatsData });
- const [selectedPlan, setSelectedPlan] = useState(plans.find(({ tier }) => isFreeTier(tier)));
- const activePlan = plans.find(({ tier }) => (user ? user.tier === tier : isFreeTier(tier)));
const handleSubscribe = async () => {
try {
const price = selectedPlan.stripe;
@@ -46,12 +44,6 @@ export default function Payments({ plans, user: initialUserData, stats: initialS
}
};
- useEffect(() => {
- if (activePlan && isPaidTier(activePlan.tier)) {
- setSelectedPlan(activePlan);
- }
- }, [activePlan, selectedPlan, setSelectedPlan]);
-
return (
diff --git a/packages/dashboard/src/pages/plans.js b/packages/dashboard/src/pages/plans.js
index ee319e69..7935f0f4 100644
--- a/packages/dashboard/src/pages/plans.js
+++ b/packages/dashboard/src/pages/plans.js
@@ -41,7 +41,7 @@ export default function Payments() {
-
What's included
+
What's included
-
{/* Heroicon name: solid/check */}
@@ -96,7 +96,7 @@ export default function Payments() {
-
What's included
+
What's included
-
{/* Heroicon name: solid/check */}
@@ -168,7 +168,7 @@ export default function Payments() {
-
What's included
+
What's included
-
{/* Heroicon name: solid/check */}
@@ -257,7 +257,7 @@ export default function Payments() {
-
What's included
+
What's included
-
{/* Heroicon name: solid/check */}
diff --git a/packages/dashboard/src/pages/settings.js b/packages/dashboard/src/pages/settings.js
deleted file mode 100644
index 2c17a337..00000000
--- a/packages/dashboard/src/pages/settings.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Configuration, PublicApi } from "@ory/kratos-client";
-import Layout from "../components/Layout";
-import config from "../config";
-import SelfServiceForm from "../components/Form/SelfServiceForm";
-import authServerSideProps from "../services/authServerSideProps";
-
-const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public }));
-
-export const getServerSideProps = authServerSideProps(async (context) => {
- const flow = context.query.flow;
-
- if (process.env.NODE_ENV === "development") {
- return { props: { flow: require("../../stubs/settings.json") } };
- }
-
- // The flow is used to identify the login and registration flow and
- // return data like the csrf_token and so on.
- if (!flow || typeof flow !== "string") {
- // No flow ID found in URL, initializing settings flow.
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/settings/browser`,
- },
- };
- }
-
- try {
- const { status, data } = await kratos.getSelfServiceSettingsFlow(flow, {
- headers: { cookie: context.req.headers.cookie },
- });
-
- if (status === 200) return { props: { flow: data } };
-
- throw new Error(`Failed to retrieve flow ${flow} with code ${status}`);
- } catch (error) {
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/settings/browser`,
- },
- };
- }
-});
-
-const fieldsConfig = {
- "traits.email": {
- label: "Email address",
- autoComplete: "email",
- position: 0,
- },
- password: {
- label: "Password",
- autoComplete: "new-password",
- position: 1,
- },
- csrf_token: {
- position: 99,
- },
-};
-
-export default function Settings({ flow }) {
- const profileConfig = flow.methods.profile.config;
- const passwordConfig = flow.methods.password.config;
-
- return (
-
-
-
-
-
-
- );
-}
diff --git a/packages/dashboard/src/pages/uploads.js b/packages/dashboard/src/pages/uploads.js
index ff452f49..4e2e2def 100644
--- a/packages/dashboard/src/pages/uploads.js
+++ b/packages/dashboard/src/pages/uploads.js
@@ -1,16 +1,14 @@
import dayjs from "dayjs";
import prettyBytes from "pretty-bytes";
import { useState } from "react";
-import ky from "ky/umd";
+import ky from "ky";
import { toast } from "react-toastify";
import Layout from "../components/Layout";
import Table from "../components/Table";
-import authServerSideProps from "../services/authServerSideProps";
import { SkynetClient } from "skynet-js";
import useAccountsApi from "../services/useAccountsApi";
const skynetClient = new SkynetClient(process.env.NEXT_PUBLIC_SKYNET_PORTAL_API);
-const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
const getRelativeDate = ({ uploadedOn }) => dayjs(uploadedOn).format("YYYY-MM-DD HH:mm:ss");
const headers = [
@@ -40,7 +38,7 @@ const actions = [
{
name: "Unpin Skylink",
action: async ({ skylink }, mutate) => {
- await toast.promise(ky.delete(`/user/uploads/${skylink}`), {
+ await toast.promise(ky.delete(`/api/user/uploads/${skylink}`), {
pending: "Unpinning Skylink",
success: "Skylink unpinned",
error: (error) => error.message,
@@ -51,22 +49,15 @@ const actions = [
},
];
-export const getServerSideProps = authServerSideProps(async (context, api) => {
- const initialData = await api.get("user/uploads?pageSize=10&offset=0").json();
-
- return { props: { initialData } };
-});
-
-export default function Uploads({ initialData }) {
+export default function Uploads() {
const [offset, setOffset] = useState(0);
- const { data, mutate } = useAccountsApi(`${apiPrefix}/user/uploads?pageSize=10&offset=${offset}`, {
- initialData: offset === 0 ? initialData : undefined,
+ const { data, mutate } = useAccountsApi(`user/uploads?pageSize=10&offset=${offset}`, {
revalidateOnMount: true,
});
// preload next page if it exists (based on the response from the current page query)
const nextPageOffset = data && data.offset + data.pageSize < data.count ? data.offset + data.pageSize : offset;
- useAccountsApi(`${apiPrefix}/user/uploads?pageSize=10&offset=${nextPageOffset}`);
+ useAccountsApi(`user/uploads?pageSize=10&offset=${nextPageOffset}`);
return (
diff --git a/packages/dashboard/src/pages/user/confirm.js b/packages/dashboard/src/pages/user/confirm.js
new file mode 100644
index 00000000..104fefb5
--- /dev/null
+++ b/packages/dashboard/src/pages/user/confirm.js
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import accountsApi from "../../services/accountsApi";
+import useAnonRoute from "../../services/useAnonRoute";
+import React from "react";
+
+export default function Recover() {
+ useAnonRoute(); // ensure user is not logged in
+
+ const router = useRouter();
+ const [error, setError] = React.useState("");
+ const [confirmed, setConfirmed] = React.useState(false);
+
+ React.useEffect(() => {
+ async function confirm() {
+ try {
+ await accountsApi.get("user/confirm", { searchParams: { token: router.query.token } });
+
+ setConfirmed(true);
+
+ setTimeout(() => {
+ router.push("/");
+ }, 5000);
+ } catch (error) {
+ if (error.response) {
+ const data = await error.response.json();
+
+ setError(data.message ?? error.toString());
+ } else {
+ setError(error.toString());
+ }
+ }
+ }
+
+ if (router.query.token) confirm();
+ }, [router, setConfirmed]);
+
+ return (
+
+
+ {!confirmed && !error && (
+
Confirming your email, please wait.
+ )}
+ {confirmed && (
+
+ Email confirmed! You will be redirected to the{" "}
+
+ dashboard
+ {" "}
+ in 3 seconds.
+
+ )}
+ {error &&
{error}
}
+
+
@@ -42,27 +64,15 @@ export default function Error({ errors }) {
fillRule="evenodd"
/>
-
An error occurred
-
-
-
- {errors.map((error, index) => (
-
1 ? "mt-3 sm:mt-5" : ""} text-center`}>
-
- {error.code} - {error.message}
-
-
-
- ))}
-
-
-
+
+
);
}
diff --git a/packages/dashboard/src/pages/user/settings.js b/packages/dashboard/src/pages/user/settings.js
new file mode 100644
index 00000000..f2e1fd77
--- /dev/null
+++ b/packages/dashboard/src/pages/user/settings.js
@@ -0,0 +1,85 @@
+import * as Yup from "yup";
+import Layout from "../../components/Layout";
+import SelfServiceForm from "../../components/Form/SelfServiceForm";
+import accountsApi from "../../services/accountsApi";
+
+const profileConfig = [
+ {
+ name: "email",
+ type: "text",
+ label: "New email address",
+ autoComplete: "email",
+ position: 0,
+ },
+ {
+ name: "confirmEmail",
+ type: "text",
+ label: "New email address repeated",
+ autoComplete: "email",
+ position: 1,
+ },
+];
+
+const passwordConfig = [
+ {
+ name: "password",
+ type: "password",
+ label: "New password",
+ position: 1,
+ },
+ {
+ name: "confirmPassword",
+ type: "password",
+ label: "New password repeated",
+ position: 2,
+ },
+];
+
+const emailValidationSchema = Yup.object().shape({
+ email: Yup.string().required("Email is required").email("This email is invalid"),
+ confirmEmail: Yup.string().oneOf([Yup.ref("email"), null], "Emails must match"),
+});
+
+const passwordValidationSchema = Yup.object().shape({
+ 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"),
+});
+
+export default function Settings() {
+ const onEmailSubmit = async (values) => {
+ await accountsApi.put("user", {
+ json: {
+ email: values.email,
+ },
+ });
+ };
+
+ const onPasswordSubmit = async (values) => {
+ await accountsApi.put("user", {
+ json: {
+ password: values.password,
+ },
+ });
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/packages/dashboard/src/pages/verify.js b/packages/dashboard/src/pages/verify.js
deleted file mode 100644
index adcde201..00000000
--- a/packages/dashboard/src/pages/verify.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import Link from "next/link";
-import { Configuration, PublicApi } from "@ory/kratos-client";
-import config from "../config";
-import SelfServiceForm from "../components/Form/SelfServiceForm";
-import { useEffect } from "react";
-
-const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public }));
-
-export async function getServerSideProps(context) {
- const flow = context.query.flow;
-
- // if (process.env.NODE_ENV === "development") {
- // return { props: { flow: require("../../stubs/recovery.json") } };
- // }
-
- if (!flow || typeof flow !== "string") {
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/verification/browser`,
- },
- };
- }
-
- try {
- const { status, data } = await kratos.getSelfServiceVerificationFlow(flow);
-
- if (status === 200) return { props: { flow: data } };
-
- throw new Error(`Failed to retrieve flow ${flow} with code ${status}`);
- } catch (error) {
- return {
- redirect: {
- permanent: false,
- destination: `${config.kratos.browser}/self-service/verification/browser`,
- },
- };
- }
-}
-
-const fieldsConfig = {
- email: {
- label: "Your email",
- autoComplete: "email",
- position: 0,
- },
- csrf_token: {
- position: 99,
- },
-};
-
-export default function Verify({ flow }) {
- const state = flow.state;
-
- useEffect(() => {
- if (state === "passed_challenge") {
- setTimeout(() => (window.location = "/"), 5000);
- }
- }, [state]);
-
- return (
-
-
-
-
- {flow.state === "passed_challenge" ? "Verification successful!" : "Account verification"}
-
-
- {flow.state === "passed_challenge" && (
- <>
-
You will be redirected automatically
-
-
- go to dashboard
-
-
-
- )}
-
-
- {flow.state !== "passed_challenge" && (
-
- )}
-