This repository has been archived on 2022-10-07. You can view files and clone it, but cannot push or open issues or pull requests.
skynet-webportal/packages/dashboard/src/components/Layout.js

328 lines
16 KiB
JavaScript
Raw Normal View History

Accounts (#554) * stripe env * stripe env * stripe env * allow post * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * accounts/** * favicon * foo * foo * foo * foo * foo * foo * title * fix dashboard timestamp * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * prices * Revert "prices" This reverts commit 7071ed4ef4641bc7a7247f2b56ba1159c9606112. * Make sure we don't accidentally commit `kratos.yml`. * Add Oathkeeper access rules for Stripe. * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * Add `max_breaches` to Kratos's sample config file. * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * payments * cache .next folder * Use own fork of Kratos's `master` in order to get the fix for the migrations issue. * Don't retry running Kratos migrations. * payments * restart: no * no * no * no * no * no * no * no * no * no * payments * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * accounts * limits * limits * nginx depends on accounts and kratos-migrate depends on cockroach. * upload limit rate * upload limit rate - 2 * upload limit rate - 3 * upload limit rate - 4 * upload limit rate - 5 * upload limit rate - 6 * upload limit rate - 7 * upload limit rate - 8 * upload limit rate - 9 * forgotten password link * use header for skylink * use header for skylink * use header for skylink * use header for skylink * use header for skylink * use header for skylink * use header for skylink * use header for skylink * copy to clipboard * fix ratelimit issue * Allow access to the stripe webhook. * enable allow_promotion_codes * Allow POST on webhook. * Add all env vars accounts need to docker-compose. * Don't use custom port for accounts. * print recovery * recovery sign up link * refactor cors header response * refactor cors header response * do not log unauthorized * fix registration link * settings logging * update node and tailwindcss * move webapp from volume * host 0.0.0.0 * refactor dockerfile * enable accounts * cache public * uncache public * remove cache control * no-cache * no cache * Do not use the person's name for registration. * add verify route * add verify route * add verify route * Go back to using the stock kratos image. * add verify route * fix settings link * clean up verify flow * refactor Dockerfile * Remove first and last name from used traits. * Remove account verification via email. * Allow additional properties. * Cookies and tokens last for 30 days now. * Rename secure.siasky.net to account.siasky.net. * redirect secure to account Co-authored-by: Ivaylo Novakov <inovakov@gmail.com> Co-authored-by: Ivaylo Novakov <ro-tex@users.noreply.github.com>
2021-04-01 13:15:37 +00:00
import Link from "next/link";
import { useRouter } from "next/router";
import Head from "next/head";
import ky from "ky/umd";
import { useState } from "react";
import config from "../../src/config";
export default function Layout({ title, children }) {
const [menuOpen, openMenu] = useState(false);
const [avatarDropdownOpen, openAvatarDropdown] = useState(false);
const router = useRouter();
const handleSignOut = async (e) => {
e.preventDefault();
try {
await ky.post("/logout");
window.location = `${config.kratos.browser}/self-service/browser/flows/logout`;
} catch (error) {
console.log(error); // todo: handle errors with a message
}
};
return (
<div>
<Head>
<title key="title">Skynet - {title}</title>
</Head>
<div className="bg-gray-800 pb-32">
<nav className="bg-gray-800">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="border-b border-gray-700">
<div className="flex items-center justify-between h-16 px-4 sm:px-0">
<div className="flex items-center">
<Link href="/">
<a className="flex-shrink-0">
<svg
viewBox="19.88800048828125 37.1175193787 132.07760620117188 132.07760620117188"
width={33}
height={33}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M 116.388 139.371 C 92.969 148.816 66.759 134.5 62.048 109.691 L 46.308 98.821 C 43.843 141.32 88.308 170.55 126.346 151.435 C 130.805 149.195 134.94 146.361 138.638 143.011 L 138.698 143.011 C 141.248 140.637 140.685 136.456 137.598 134.841 L 19.888 72.671 Z"
style={{ fill: "rgb(88, 181, 96)" }}
/>
<path
d="M 149.398 127.121 L 149.398 127.021 C 150.067 124.651 148.83 122.161 146.538 121.261 L 67.478 90.011 L 142.478 130.011 C 145.178 131.489 148.552 130.08 149.398 127.121 Z"
style={{ fill: "rgb(88, 181, 96)" }}
/>
<path
d="M 151.848 109.801 C 152.508 94.561 150.578 79.801 141.228 67.721 C 130.128 53.411 111.498 47.801 96.588 49.081 C 95.428 49.181 94.268 49.351 93.108 49.451 C 77.448 50.901 62.598 59.941 53.728 75.301 C 52.968 76.621 52.278 77.971 51.638 79.301 C 51.238 79.841 50.838 80.371 50.458 80.931 L 63.838 88.061 C 64.463 86.395 65.194 84.772 66.028 83.201 C 80.584 55.935 119.197 54.651 135.532 80.889 C 140.199 88.386 142.264 97.212 141.408 106.001 L 91.518 92.621 L 145.258 113.861 C 148.274 115.053 151.585 112.994 151.848 109.761 Z"
style={{ fill: "rgb(88, 181, 96)" }}
/>
</svg>
</a>
</Link>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
<Link href="/">
<a
className={`${
router.pathname === "/"
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white"
} px-3 py-2 rounded-md text-sm font-medium`}
>
Dashboard
</a>
</Link>
<Link href="/uploads">
<a
className={`${
router.pathname === "/uploads"
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white"
} px-3 py-2 rounded-md text-sm font-medium`}
>
Your uploads
</a>
</Link>
<Link href="/downloads">
<a
className={`${
router.pathname === "/downloads"
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white"
} px-3 py-2 rounded-md text-sm font-medium`}
>
Your downloads
</a>
</Link>
<a
href={process.env.NEXT_PUBLIC_SKYNET_PORTAL_API}
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center"
target="_blank"
rel="noopener noreferrer"
>
Upload files
<svg
className="flex-shrink-0 h-4 w-4 ml-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
</div>
</div>
</div>
<div className="hidden md:block">
<div className="ml-4 flex items-center md:ml-6">
{/* Profile dropdown */}
<div className="ml-3 relative">
<div>
<button
className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
id="user-menu"
aria-haspopup="true"
onClick={() => openAvatarDropdown(!avatarDropdownOpen)}
>
<span className="sr-only">Open user menu</span>
<span className="inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100">
<svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</span>
</button>
</div>
{/*
Profile dropdown panel, show/hide based on dropdown state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
*/}
{avatarDropdownOpen && (
<div
className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu"
>
<Link href="/settings">
<a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Settings
</a>
</Link>
<Link href="/payments">
<a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Payments
</a>
</Link>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
role="menuitem"
onClick={handleSignOut}
>
Sign out
</a>
</div>
)}
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
{/* Mobile menu button */}
<button
className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
onClick={() => openMenu(!menuOpen)}
>
<span className="sr-only">Open main menu</span>
<svg
className={`${menuOpen ? "hidden" : "block"} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg
className={`${menuOpen ? "block" : "hidden"} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div className={`${menuOpen ? "block" : "hidden"} border-b border-gray-700 md:hidden`}>
<div className="px-2 py-3 space-y-1 sm:px-3">
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
<Link href="/">
<a
className={`${
router.pathname === "/"
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white"
} block px-3 py-2 rounded-md text-base font-medium`}
>
Dashboard
</a>
</Link>
<Link href="/uploads">
<a
className={`${
router.pathname === "/uploads"
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white"
} block px-3 py-2 rounded-md text-base font-medium`}
>
Your uploads
</a>
</Link>
<Link href="/downloads">
<a
className={`${
router.pathname === "/downloads"
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white"
} block px-3 py-2 rounded-md text-base font-medium`}
>
Your downloads
</a>
</Link>
<a
href={process.env.NEXT_PUBLIC_SKYNET_PORTAL_API}
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium flex items-center"
target="_blank"
rel="noopener noreferrer"
>
Upload files
<svg
className="flex-shrink-0 h-4 w-4 ml-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
</div>
<div className="pt-4 pb-3 border-t border-gray-700">
{/* <div className="flex items-center px-5">
<div className="flex-shrink-0">
<span className="inline-block h-10 w-10 rounded-full overflow-hidden bg-gray-100">
<svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</span>
</div>
<div className="ml-3">
<div className="text-base font-medium leading-none text-white">John Doe</div>
<div className="text-sm font-medium leading-none text-gray-400">john@example.com</div>
</div>
</div> */}
<div className="mt-3 px-2 space-y-1">
<Link href="/settings">
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">
Settings
</a>
</Link>
<Link href="/payments">
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">
Payments
</a>
</Link>
<a
href="#"
onClick={handleSignOut}
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 cursor-pointer"
>
Sign out
</a>
</div>
</div>
</div>
</nav>
<header className="py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-white">{title}</h1>
</div>
</header>
</div>
<main className="-mt-32">
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
{children || (
<div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
)}
</div>
</main>
<footer className="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
<p className="text-center text-sm text-gray-400">© 2021 Skynet Labs Inc. All rights reserved.</p>
</footer>
</div>
);
}