Skip to content

Commit

Permalink
feat: auth
Browse files Browse the repository at this point in the history
  • Loading branch information
thecotne committed Mar 17, 2022
1 parent 672e1b8 commit eba109e
Show file tree
Hide file tree
Showing 17 changed files with 1,107 additions and 234 deletions.
8 changes: 8 additions & 0 deletions .github/workflows/www.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ on:
- '.github/workflows/www.yml'
- 'www/**'

env:
AUTH0_SECRET: ${{ secrets.AUTH0_SECRET }}
AUTH0_BASE_URL: https://www.shuttle.rs
AUTH0_ISSUER_BASE_URL: https://shuttle-prod.eu.auth0.com
AUTH0_CLIENT_ID: X77iwzR3Qm60kSIxxDEUVKOMFIQcDodp
AUTH0_CLIENT_SECRET: ${{ secrets.AUTH0_CLIENT_SECRET }}
SHUTTLE_API_BASE_URL: https://api.shuttle.rs

jobs:
deploy-vercel:
runs-on: ubuntu-latest
Expand Down
2 changes: 2 additions & 0 deletions www/.gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.next
.vercel
node_modules
tsconfig.tsbuildinfo
.env.local
6 changes: 2 additions & 4 deletions www/components/AnnouncementBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useState } from "react";
import styles from "./styles.module.css";

const AnnouncementBar = () => {
export default function AnnouncementBar() {
const [isClosed, setClosed] = useState(false);

if (isClosed) {
Expand Down Expand Up @@ -35,6 +35,4 @@ const AnnouncementBar = () => {
</button>
</div>
);
};

export default AnnouncementBar;
}
116 changes: 116 additions & 0 deletions www/components/ApiKeyModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import { Fragment, useState, createContext, useContext } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { XIcon } from "@heroicons/react/outline";
import { createStateContext } from "react-use";
import { useUser } from "@auth0/nextjs-auth0";
import Code from "./Code";

export const [useApiKeyModalState, ApiKeyModalStateProvider] =
createStateContext(false);

export default function ApiKeyModal() {
const [open, setOpen] = useApiKeyModalState();
const { user, error, isLoading } = useUser();

return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="fixed z-10 inset-0 overflow-y-auto text-dark-200"
onClose={setOpen}
>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>

{/* This element is to trick the browser into centering the modal contents. */}
<span
className="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
>
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="relative inline-block align-bottom bg-dark-600 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
<button
type="button"
className="border-dark-700 bg-dark-600 text-dark-200 hover:brightness-125 rounded-md "
onClick={() => setOpen(false)}
>
<span className="sr-only">Close</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
{user && (
<>
{user.api_key && (
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg leading-6 font-medium text-dark-200"
>
Api key
</Dialog.Title>
<div className="mt-2">
<Code code={user.api_key as string} />
</div>
</div>
</div>
)}
{!user.api_key && (
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg leading-6 font-medium text-dark-200"
>
Api key not found!
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-dark-200">
Contact us on discord to resolve this issue
</p>
</div>
</div>
</div>
)}
</>
)}
</div>

<div className="bg-dark-500/40 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-dark-700 shadow-sm px-4 py-2 bg-dark-600 text-base font-medium text-dark-200 hover:brightness-125 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setOpen(false)}
>
Close
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
);
}
5 changes: 2 additions & 3 deletions www/components/Code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ const copyToClipboard = (code) => {
navigator.clipboard.writeText(code);
};

const Code = ({ code }: CodeProps) => {
export default function Code ({ code }: CodeProps) {
return (
<div
className="cursor-pointer"
className="cursor-pointer text-dark-200"
data-tip
data-for="copiedTip"
data-event="click"
Expand Down Expand Up @@ -50,4 +50,3 @@ const Code = ({ code }: CodeProps) => {
);
};

export default Code;
6 changes: 2 additions & 4 deletions www/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import mixpanel from "mixpanel-browser";

const Footer = () => {
export default function Footer() {
const { basePath } = useRouter();

return (
Expand Down Expand Up @@ -134,6 +134,4 @@ const Footer = () => {
</div>
</div>
);
};

export default Footer;
}
27 changes: 23 additions & 4 deletions www/components/Hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@ import { useRouter } from "next/router";
import Code from "./Code";
import { SITE_DESCRIPTION, SITE_TITLE } from "../lib/constants";
import mixpanel from "mixpanel-browser";
import Link from "next/link";
import { useApiKeyModalState } from "./ApiKeyModal";
import { useUser } from "@auth0/nextjs-auth0";

const Hero = () => {
export default function Hero() {
const { basePath } = useRouter();
const [open, setOpen] = useApiKeyModalState();
const {user, error, isLoading} = useUser()

return (
<div className="w-full min-h-screen -mt-8 flex flex-col justify-center bg-dark-700">
<div className="xl:px-12 py-5 mx-auto">
Expand Down Expand Up @@ -34,6 +40,21 @@ const Hero = () => {
</div>

<div className="flex gap-4 justify-center">
{user && <button
className="text-white font-bold bg-brand-900 hover:bg-brand-700 py-3 px-8 rounded transition"
onClick={() => setOpen(true)}
>
View Api Key
</button>}

{!user &&
<a
className="text-white font-bold bg-brand-900 hover:bg-brand-700 py-3 px-8 rounded transition"
href="/api-key"
>
Get Api Key
</a>}

<a
ref={(el) => el && mixpanel.track_links(el, `Clicked Link`)}
className="text-white font-bold bg-brand-900 hover:bg-brand-700 py-3 px-8 rounded transition"
Expand All @@ -56,6 +77,4 @@ const Hero = () => {
</div>
</div>
);
};

export default Hero;
}
6 changes: 2 additions & 4 deletions www/components/NoSsr.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { useEffect, useState } from "react";

const NoSsr = ({ children }): JSX.Element => {
export default function NoSsr({ children }): JSX.Element {
const [isMounted, setMount] = useState(false);

useEffect(() => {
setMount(true);
}, []);

return <>{isMounted ? children : null}</>;
};

export default NoSsr;
}
File renamed without changes.
13 changes: 13 additions & 0 deletions www/lib/shuttle-api.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import fetch from 'node-fetch';

export async function getApiKey(username: string): Promise<string> {
const res = await fetch(`${process.env.SHUTTLE_API_BASE_URL}/users/${username}`, {
method: 'POST'
})

if (res.ok) {
return res.text()
} else {
throw new Error('could not get api key.')
}
}
19 changes: 12 additions & 7 deletions www/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,30 @@
"postbuild": "next-sitemap"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^6.0.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@auth0/nextjs-auth0": "^1.7.0",
"@fortawesome/fontawesome-svg-core": "^6.1.0",
"@fortawesome/free-brands-svg-icons": "^6.1.0",
"@fortawesome/free-regular-svg-icons": "^6.1.0",
"@fortawesome/free-solid-svg-icons": "^6.1.0",
"@fortawesome/react-fontawesome": "^0.1.14",
"@headlessui/react": "^1.5.0",
"@heroicons/react": "^1.0.6",
"mixpanel-browser": "^2.45.0",
"next": "^12.1.0",
"next-seo": "^5.1.0",
"node-fetch": "^3.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-tooltip": "^4.2.21",
"react-use": "^17.3.2",
"sass": "^1.32.8"
},
"devDependencies": {
"@types/node": "^17.0.21",
"@types/react": "^17.0.2",
"autoprefixer": "^10.2.4",
"next-sitemap": "^2.5.7",
"postcss": "^8.2.6",
"autoprefixer": "^10.4.4",
"next-sitemap": "^2.5.10",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23",
"typescript": "^4.1.5"
}
Expand Down
10 changes: 3 additions & 7 deletions www/pages/404.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
const NotFound = () => {
export default function NotFound() {
return (
<>
<div className="pt-32 pb-32 w-10/12 max-w-2xl m-auto leading-none overflow-visible">
<div className="w-full max-w-2xl m-auto">
<div className="text-6xl m-auto pb-4">
<span className="text-brand-600 m-auto font-bold">
Oops!
</span>
<span className="text-brand-600 m-auto font-bold">Oops!</span>
</div>
<div className="text-3xl">
This page does not seem to exist, sorry.
Expand All @@ -15,6 +13,4 @@ const NotFound = () => {
</div>
</>
);
};

export default NotFound;
}
Loading

0 comments on commit eba109e

Please sign in to comment.