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

Fix the mobile responsive issues (#25)

Browse Source
This commit is contained in:
Kiran K 2022-07-27 13:22:38 +05:30 committed by GitHub
parent 2c428759ea
commit 8d3459d126
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Header.tsx
View File

@ -2,8 +2,8 @@ import Link from 'next/link';
export default function Header() { export default function Header() {
return ( return (
<header className='body-font border-b text-gray-600'> <header className='body-font border-b px-2 text-gray-600'>
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between space-y-3 py-3 md:flex-row'> <div className='container mx-auto flex flex-col flex-wrap items-center justify-between space-y-2 py-3 md:flex-row'>
<Link href='/'> <Link href='/'>
<a className='title-font flex items-center font-medium text-gray-900 md:mb-0'> <a className='title-font flex items-center font-medium text-gray-900 md:mb-0'>
<svg <svg
@ -20,8 +20,8 @@ export default function Header() {
<span className='ml-3 text-2xl'>Mock SAML</span> <span className='ml-3 text-2xl'>Mock SAML</span>
</a> </a>
</Link> </Link>
<div className='flex flex-col items-center md:flex-row'> <div className='flex flex-col items-center space-y-2 md:flex-row md:space-y-0 md:space-x-2'>
<span className='mr-5'> <span>
<a <a
className='btn btn-outline btn-sm' className='btn btn-outline btn-sm'
href='https://github.com/boxyhq/jackson' href='https://github.com/boxyhq/jackson'

2
components/Layout.tsx
View File

@ -35,7 +35,7 @@ export default function Layout({ children }: LayoutProps) {
<meta name='twitter:image' content={ogImage} /> <meta name='twitter:image' content={ogImage} />
</Head> </Head>
<Header /> <Header />
<main className='h-[calc(100%_-_80px)] overflow-auto'>{children}</main> <main className='h-[calc(100%_-_80px)] overflow-auto py-5'>{children}</main>
</> </>
); );
} }

108
pages/index.tsx
View File

@ -8,65 +8,63 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
const { ssoUrl, entityId, certificate } = metadata; const { ssoUrl, entityId, certificate } = metadata;
return ( return (
<div className='flex min-h-full items-center justify-center'> <div className='flex items-center justify-center md:py-10'>
<div className='flex w-full max-w-4xl flex-col px-3'> <div className='flex w-full max-w-4xl flex-col space-y-5 px-2'>
<h1 className='mb-20 text-center text-2xl font-extrabold text-gray-900'> <h1 className='text-center text-xl font-extrabold text-gray-900 md:text-2xl'>
A free SAML 2.0 Identity Provider for testing SAML SSO integrations. A free SAML 2.0 Identity Provider for testing SAML SSO integrations.
</h1> </h1>
<div className='space-y-4'> <div className='flex flex-col justify-between md:flex-row'>
<div className='flex justify-between'> <Link href='/api/saml/metadata/download'>
<Link href='/api/saml/metadata/download'> <a className='btn btn-active btn-primary'>
<a className='btn btn-active btn-primary'> <svg
<svg className='mr-1 inline-block h-6 w-6'
className='mr-1 inline-block h-6 w-6' fill='none'
fill='none' viewBox='0 0 24 24'
viewBox='0 0 24 24' stroke='currentColor'
stroke='currentColor' aria-hidden
aria-hidden strokeWidth='2'>
strokeWidth='2'> <path
<path strokeLinecap='round'
strokeLinecap='round' strokeLinejoin='round'
strokeLinejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' />
/> </svg>
</svg> Download Metadata
Download Metadata </a>
</a> </Link>
</Link> <Link href='/saml/login'>
<Link href='/saml/login'> <a className='btn btn-outline btn-primary'>Test IdP Login</a>
<a className='btn btn-outline btn-primary'>Test IdP Login</a> </Link>
</Link> </div>
</div> <div className='border-2 p-3'>
<div className='border-2 p-3'> <h2 className='mb-5 text-center text-2xl font-bold text-gray-900'>Mock SAML Metadata</h2>
<h2 className='mb-5 text-center text-2xl font-bold text-gray-900'>Mock SAML Metadata</h2> <div className='grid grid-cols-2 gap-y-5 gap-x-5'>
<div className='grid grid-cols-2 gap-y-5 gap-x-5'> <div className='form-control'>
<div className='form-control'> <label className='label'>
<label className='label'> <span className='label-text font-bold'>SSO URL</span>
<span className='label-text font-bold'>SSO URL</span> </label>
</label> <input type='text' defaultValue={ssoUrl} className='input input-bordered' disabled />
<input type='text' defaultValue={ssoUrl} className='input input-bordered' disabled /> </div>
</div> <div className='form-control'>
<div className='form-control'> <label className='label'>
<label className='label'> <span className='label-text font-bold'>Entity ID</span>
<span className='label-text font-bold'>Entity ID</span> </label>
</label> <input type='text' defaultValue={entityId} className='input input-bordered' disabled />
<input type='text' defaultValue={entityId} className='input input-bordered' disabled /> </div>
</div> <div className='form-control col-span-2 w-full'>
<div className='form-control col-span-2 w-full'> <label className='label'>
<label className='label'> <span className='label-text font-bold'>Certificate</span>
<span className='label-text font-bold'>Certificate</span> </label>
</label> <textarea
<textarea className='textarea textarea-bordered h-48'
className='textarea textarea-bordered h-48' defaultValue={certificate}
defaultValue={certificate} disabled></textarea>
disabled></textarea>
</div>
</div> </div>
</div> </div>
<div className='alert alert-error'> </div>
<div> <div className='alert alert-error'>
<span className='text-white'>Caution: Not for production use.</span> <div>
</div> <span className='text-white'>Caution: Not for production use.</span>
</div> </div>
</div> </div>
</div> </div>

2
pages/saml/login.tsx
View File

@ -74,7 +74,7 @@ export default function Login() {
<div className='flex min-h-full items-center justify-center'> <div className='flex min-h-full items-center justify-center'>
<div className='flex w-full max-w-xl flex-col px-3'> <div className='flex w-full max-w-xl flex-col px-3'>
<div className='space-y-2'> <div className='space-y-2'>
<div className='border-2 p-5'> <div className='border-2 p-4'>
<h2 className='mb-5 text-center text-2xl font-bold text-gray-900'>SAML SSO Login</h2> <h2 className='mb-5 text-center text-2xl font-bold text-gray-900'>SAML SSO Login</h2>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className='grid grid-cols-2 gap-y-1 gap-x-5'> <div className='grid grid-cols-2 gap-y-1 gap-x-5'>