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

Login form submittion

Browse Source
This commit is contained in:
Aswin V 2022-02-22 13:48:07 +05:30
parent 628e760b8b
commit b64af7afff
1 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
pages/saml/login.tsx
View File

@ -1,42 +1,71 @@
import Head from "next/head"; import Head from 'next/head';
import { useState } from 'react';
import type { FormEvent } from 'react';
import { useRouter } from 'next/router';
export default function Login() { export default function Login() {
const router = useRouter();
const { id, audience, acsUrl, providerName, relayState } = router.query;
const [email, setEmail] = useState('@example.com');
const handleChange = (e: FormEvent<HTMLInputElement>): void => {
setEmail(e.currentTarget.value);
};
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await fetch(`/api/saml/auth`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, id, audience, acsUrl, providerName, relayState }),
});
if (response.ok) {
document.write(await response.text());
} else {
document.write('Error in getting SAML response');
}
};
return ( return (
<div className="h-full"> <div className='h-full'>
<Head> <Head>
<title>Mock SAML IdP - Login</title> <title>Mock SAML IdP - Login</title>
</Head> </Head>
<div className="w-[465px] max-w-[90%] mx-auto relative top-20 bg-blue-50 p-10 rounded-xl shadow-md shadow-blueGray-50 text-[#145698]"> <div className='w-[465px] max-w-[90%] mx-auto relative top-20 bg-blue-50 p-10 rounded-xl shadow-md shadow-blueGray-50 text-[#145698]'>
<h2 className="text-3xl font-bold text-center mb-3">Login</h2> <h2 className='text-3xl font-bold text-center mb-3'>Login</h2>
<form> <form onSubmit={handleSubmit}>
<div> <div>
<label htmlFor="email" className="block mb-2"> <label htmlFor='email' className='block mb-2'>
Email Email
</label> </label>
<input <input
id="email" id='email'
autoComplete="off" autoComplete='off'
type="email" type='email'
placeholder="username@example.com" placeholder='username@example.com'
pattern=".+@example\.com" value={email}
className="w-full input" onChange={handleChange}
title="please provide a mock example.com email address" pattern='.+@example\.com'
className='w-full input'
title='please provide a mock example.com email address'
/> />
</div> </div>
<div className="mt-5"> <div className='mt-5'>
<label htmlFor="password" className="block mb-2"> <label htmlFor='password' className='block mb-2'>
Password <sup>(Prefilled for you)</sup> Password <sup>(Prefilled for you)</sup>
</label> </label>
<input <input
id="password" id='password'
readOnly={true} readOnly={true}
autoComplete="off" autoComplete='off'
type="password" type='password'
defaultValue="samlstrongpassword" defaultValue='samlstrongpassword'
className="w-full input" className='w-full input'
/> />
</div> </div>
<button type="submit" className="button mt-8 w-full"> <button type='submit' className='button mt-8 w-full'>
Sign In Sign In
</button> </button>
</form> </form>