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

Add example.org to the domain list so that users can test multiple domains (#12)

Browse Source 
* Add the email domain dropdown

* Fix #5

Co-authored-by: Deepak Prabhakara <deepak@boxyhq.com>
This commit is contained in:
Kiran K 2022-03-03 02:32:13 +05:30 committed by GitHub
parent e413c794f0
commit eb0a0fe518
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/api/saml/auth.ts
View File

@ -1,6 +1,6 @@
import { createHash } from 'crypto';
import type { NextApiRequest, NextApiResponse } from 'next';
import config from 'lib/env';
import type { NextApiRequest, NextApiResponse } from 'next';
import type { User } from 'types';
import {
createResponseForm,
@ -14,9 +14,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
if (req.method === 'POST') {
const email = req.body.email;
if (!email.endsWith('@example.com')) {
if (!email.endsWith('@example.com') && !email.endsWith('@example.org')) {
res.status(403).send(`${email} denied access`);
}
const id = createHash('sha256').update(email).digest('hex');
const user: User = {

76
pages/saml/login.tsx
View File

@ -1,12 +1,16 @@
import Head from 'next/head';
import { useEffect, useRef, useState } from 'react';
import type { FormEvent } from 'react';
import { useRouter } from 'next/router';
import type { FormEvent } from 'react';
import { useEffect, useRef, useState } from 'react';
export default function Login() {
const router = useRouter();
const { id, audience, acsUrl, providerName, relayState } = router.query;
const [email, setEmail] = useState('jackson');
const [state, setState] = useState({
username: 'jackson',
domain: 'example.com',
});
// Set focus to email input on load
const emailInp = useRef<HTMLInputElement>(null);
@ -17,22 +21,39 @@ export default function Login() {
}
}, []);
const handleChange = (e: FormEvent<HTMLInputElement>): void => {
setEmail(e.currentTarget.value);
const handleChange = (e: FormEvent<HTMLInputElement | HTMLSelectElement>): void => {
const { name, value } = e.currentTarget;
setState({
...state,
[name]: value,
});
};
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const { username, domain } = state;
const response = await fetch(`/api/saml/auth`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email: `${email}@example.com`, id, audience, acsUrl, providerName, relayState }),
body: JSON.stringify({
email: `${username}@${domain}`,
id,
audience,
acsUrl,
providerName,
relayState,
}),
});
if (response.ok) {
const newHtml = await response.text();
const newDoc = document.open('text/html', 'replace');
newDoc.write(newHtml);
newDoc.close();
} else {
@ -45,25 +66,36 @@ export default function Login() {
<Head>
<title>Mock SAML IdP - Login</title>
</Head>
<div className='relative top-20 mx-auto w-[465px] max-w-[90%] rounded-xl p-10 text-[#145698] shadow-lg shadow-indigo-200'>
<div className='relative top-20 mx-auto w-[465px] max-w-[90%] rounded-md border p-10 text-[#145698]'>
<h2 className='mb-3 text-center text-3xl font-bold'>Login</h2>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor='email' className='mb-2 block'>
Email
</label>
<input
id='email'
ref={emailInp}
autoComplete='off'
type='text'
placeholder='jackson'
value={email}
<div className='flex items-end gap-x-1'>
<div>
<label htmlFor='username' className='mb-2 block'>
Email
</label>
<input
name='username'
id='username'
ref={emailInp}
autoComplete='off'
type='text'
placeholder='jackson'
value={state.username}
onChange={handleChange}
className='input'
title='please provide a mock example.com email address'
/>
</div>
<select
name='domain'
id='domain'
className='select w-full'
onChange={handleChange}
className='input w-[65%]'
title='please provide a mock example.com email address'
/>
<span className='ml-2 w-1/4'>@example.com</span>
value={state.domain}>
<option value='example.com'>@example.com</option>
<option value='example.org'>@example.org</option>
</select>
</div>
<div className='mt-5'>
<label htmlFor='password' className='mb-2 block'>

8
styles/globals.css
View File

@ -26,10 +26,14 @@ a {
@layer components {
.button {
@apply block px-4 py-2 leading-8 text-white bg-indigo-500 rounded-md shadow-md hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 focus:ring-opacity-100;
@apply block rounded-md bg-indigo-500 px-4 py-2 leading-8 text-white shadow-md hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 focus:ring-opacity-100;
}
.input {
@apply 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-md outline-none focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-300;
@apply rounded-md border border-gray-300 bg-gray-100 bg-opacity-50 px-3 py-1 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-300;
}
.select {
@apply rounded-md border border-gray-300 bg-gray-100 bg-opacity-50 px-3 py-2.5 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-300;
}
}