gmgauthier/mocksaml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style the index page

Browse Source
This commit is contained in:
Kiran 2022-02-24 09:46:49 +05:30
parent 369008c03f
commit e9b7228493
5 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer.tsx
View File

@ -17,7 +17,7 @@ export default function Footer() {
<span className='ml-3 text-xl'>Mock SAML</span> <span className='ml-3 text-xl'>Mock SAML</span>
</a> </a>
<p className='mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0'> <p className='mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0'>
Powered by{' '} Powered by
<a <a
href='https://boxyhq.com/' href='https://boxyhq.com/'
className='ml-1 text-gray-600' className='ml-1 text-gray-600'

6
components/Header.tsx
View File

@ -17,7 +17,11 @@ export default function Header() {
<span className='ml-3 text-xl'>Mock SAML</span> <span className='ml-3 text-xl'>Mock SAML</span>
</a> </a>
<nav className='flex flex-wrap items-center justify-center text-base md:ml-auto'> <nav className='flex flex-wrap items-center justify-center text-base md:ml-auto'>
<a className='mr-5 hover:text-gray-900' href='https://github.com/boxyhq/jackson'> <a
className='mr-5 underline hover:text-gray-900'
href='https://github.com/boxyhq/jackson'
rel='noopener noreferrer'
target='_blank'>
Integrate SAML with a few lines of code. Integrate SAML with a few lines of code.
</a> </a>
</nav> </nav>

1
components/Layout.tsx
View File

@ -5,6 +5,7 @@ import Header from './Header';
type LayoutProps = { type LayoutProps = {
children: ReactNode; children: ReactNode;
}; };
export default function Layout({ children }: LayoutProps) { export default function Layout({ children }: LayoutProps) {
return ( return (
<> <>

61
pages/index.tsx
View File

@ -1,5 +1,4 @@
import { GetStaticProps } from 'next'; import { GetStaticProps } from 'next';
import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import React from 'react'; import React from 'react';
import config from '../lib/env'; import config from '../lib/env';
@ -21,24 +20,56 @@ export const getStaticProps: GetStaticProps = async () => {
}; };
const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => { const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
const { ssoUrl, entityId, certificate } = metadata;
return ( return (
<div className='h-full'> <section className='text-gray-600 body-font'>
<Head> <div className='container px-5 py-24 mx-auto'>
<title>Mock SAML IdP - Metadata</title> <div className='flex flex-col w-full mb-12 text-center'>
</Head> <h1 className='mb-4 text-2xl font-medium text-gray-900 sm:text-3xl title-font'>
<div className='w-4/5 lg:w-3/5 mx-auto relative top-20 bg-blue-50 p-10 rounded-xl grid gap-6 grid-cols-3 shadow-lg shadow-blueGray-50 text-[#145698]'> Mock SAML Metadata
<p className='font-extrabold'>SSO URL</p> </h1>
<p className='col-span-2'>{metadata.ssoUrl}</p> <p className='mx-auto text-base leading-relaxed lg:w-2/3'>
<p className='font-extrabold'>Entity ID</p> Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke
<p className='col-span-2'>{metadata.entityId}</p> farm-to-table. Franzen you probably haven't heard of them man bun deep.
<p className='font-extrabold'>Certificate</p>
<p className='min-w-0 col-span-2 overflow-auto text-sm'>{metadata.certificate}</p>
<br></br>
<p>
<Link href='/api/saml/metadata/download'>Download Metadata</Link>
</p> </p>
</div> </div>
<div className='flex items-end w-full px-8 mx-auto space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
<div className='relative mr-4 lg:w-full'>
<label className='text-sm leading-7 text-gray-600'>SSO URL</label>
<input
type='text'
value={ssoUrl}
className='w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500'
/>
</div> </div>
<div className='relative mr-4 lg:w-full'>
<label className='text-sm leading-7 text-gray-600'>Entity ID</label>
<input
type='text'
value={entityId}
className='w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500'
/>
</div>
</div>
<div className='flex items-end w-full px-8 mx-auto mt-5 space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
<div className='relative lg:w-full'>
<label className='text-sm leading-7 text-gray-600'>Certificate</label>
<textarea
rows='5'
value={certificate}
className='w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500'></textarea>
</div>
</div>
<div className='flex items-end w-full px-8 mx-auto mt-5 space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
<Link href='/api/saml/metadata/download'>
<a className='inline-flex px-6 py-2 text-white bg-indigo-500 border-0 rounded focus:outline-none hover:bg-indigo-600'>
Download Metadata
</a>
</Link>
</div>
</div>
</section>
); );
}; };

4
styles/globals.css
View File

@ -11,7 +11,7 @@ html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: "Manrope", sans-serif; font-family: 'Manrope', sans-serif;
height: 100%; height: 100%;
} }
#__next { #__next {
@ -29,7 +29,7 @@ a {
@layer components { @layer components {
.button { .button {
@apply block py-2 px-4 leading-8 bg-primary/90 text-white font-semibold rounded-lg shadow-md hover:bg-primary/95 focus:outline-none focus:ring-4 focus:ring-primary/30 focus:ring-opacity-100; @apply block px-4 py-2 font-semibold leading-8 text-white rounded-lg shadow-md bg-primary/90 hover:bg-primary/95 focus:outline-none focus:ring-4 focus:ring-primary/30 focus:ring-opacity-100;
} }
.input { .input {
@apply bg-[#eff0f8] border-2 border-solid border-[#8b8a8b] leading-10 px-4 py-2 rounded-md focus:border-[#5a5dbb] focus:outline-none; @apply bg-[#eff0f8] border-2 border-solid border-[#8b8a8b] leading-10 px-4 py-2 rounded-md focus:border-[#5a5dbb] focus:outline-none;