diff --git a/components/Header.tsx b/components/Header.tsx deleted file mode 100644 index fa5bf97..0000000 --- a/components/Header.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Header() { - return ( - <> -
Header
- - ) -} \ No newline at end of file diff --git a/components/Layout.tsx b/components/Layout.tsx index 2a180ab..b2d176e 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,12 +1,15 @@ -import Navbar from './NavBar' -import Header from './Header' +import type { ReactNode } from "react"; -export default function Layout({ children }) { +type LayoutProps = { + children: ReactNode; +}; +export default function Layout({ children }: LayoutProps) { return ( <> - -
{children}
-
+
+

Mock SAML IdP

+
+
{children}
- ) -} \ No newline at end of file + ); +} diff --git a/components/NavBar.tsx b/components/NavBar.tsx deleted file mode 100644 index 353cb57..0000000 --- a/components/NavBar.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Sidenav, Nav, Dropdown } from 'rsuite'; - -export default function Navbar() { - return ( -
- - - - - -
- ) -} \ No newline at end of file diff --git a/next.config.js b/next.config.js index 841b1b3..19d7ba2 100644 --- a/next.config.js +++ b/next.config.js @@ -3,12 +3,12 @@ module.exports = { reactStrictMode: true, webpack: (config, { isServer }) => { if (!isServer) { - config.resolve.fallback = { - fs: false, - zlib: false, - } + config.resolve.fallback = { + fs: false, + zlib: false, + }; } return config; -} -} + }, +}; diff --git a/pages/_app.tsx b/pages/_app.tsx index b5a75b0..46ea5dd 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,10 +1,13 @@ -import '../styles/globals.css' -import type { AppProps } from 'next/app' +import "styles/globals.css"; +import type { AppProps } from "next/app"; +import Layout from "components/Layout"; function MyApp({ Component, pageProps }: AppProps) { return ( - - ) + + + + ); } -export default MyApp +export default MyApp; diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..ec7d782 --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,22 @@ +import Document, { Html, Head, Main, NextScript } from "next/document"; + +class MyDocument extends Document { + render() { + return ( + + + + + +
+ + + + ); + } +} + +export default MyDocument; diff --git a/pages/index.tsx b/pages/index.tsx index b640b90..2a8a77d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,36 +1,48 @@ -import type { NextPage } from 'next' -import { GetServerSideProps } from 'next'; -import { IdPMetadata } from '../types' -import config from '../lib/env'; -import {createCertificate} from '../utils' -import React from 'react'; -import Link from 'next/link' +import { GetServerSideProps } from "next"; +import { IdPMetadata } from "../types"; +import config from "../lib/env"; +import { createCertificate } from "../utils"; +import React from "react"; +import Link from "next/link"; +import Layout from "components/Layout"; +import Head from "next/head"; export const getServerSideProps: GetServerSideProps = async () => { const metadata: IdPMetadata = { ssoUrl: config.ssoUrl, entityId: config.entityId, certificate: await createCertificate(), - } + }; return { props: { - metadata + metadata, }, }; }; -const Home: React.FC<{metadata: IdPMetadata}> = ({ metadata }) => { +const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => { return ( -
- Mock IdP Metadata -

SSO URL: {metadata.ssoUrl}

-

Entity ID: {metadata.entityId}

-

Certificate: {metadata.certificate}

-

-

Download Metadata

-
- ) -} + <> + + Mock SAML IdP - Metadata + +
+

SSO URL

+

{metadata.ssoUrl}

+

Entity ID

+

{metadata.entityId}

+

Certificate

+

+ {metadata.certificate} +

+

+

+ Download Metadata +

+
+ + ); +}; -export default Home +export default Home; diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 32a57d5..0000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - padding: 0 2rem; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/globals.css b/styles/globals.css index 6138cf9..bf78f80 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,12 +2,20 @@ @tailwind components; @tailwind utilities; +:root { + color-scheme: dark light; +} + +.theme-default { + --color-primary: 37 194 160; + --color-secondary: 48 56 70; +} + html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-family: "Manrope", sans-serif; } a { diff --git a/tailwind.config.js b/tailwind.config.js index 1e244f0..408b23d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,25 @@ +const colors = require("tailwindcss/colors"); + +function withOpacityValue(variable) { + return ({ opacityValue }) => { + if (opacityValue === undefined) { + return `rgb(var(${variable}))`; + } + return `rgb(var(${variable}) / ${opacityValue})`; + }; +} + module.exports = { content: [ - './pages/**/*.{js,ts,jsx,tsx}', - './components/**/*.{js,ts,jsx,tsx}', + "./pages/**/*.{js,ts,jsx,tsx}", + "./components/**/*.{js,ts,jsx,tsx}", ], theme: { + colors: { + ...colors, + primary: withOpacityValue("--color-primary"), + secondary: withOpacityValue("--color-secondary"), + }, extend: {}, }, plugins: [],