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() {
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 (
<div className="h-full">
<div className='h-full'>
<Head>
<title>Mock SAML IdP - Login</title>
</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]">
<h2 className="text-3xl font-bold text-center mb-3">Login</h2>
<form>
<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>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email" className="block mb-2">
<label htmlFor='email' className='block mb-2'>
Email
</label>
<input
id="email"
autoComplete="off"
type="email"
placeholder="username@example.com"
pattern=".+@example\.com"
className="w-full input"
title="please provide a mock example.com email address"
id='email'
autoComplete='off'
type='email'
placeholder='username@example.com'
value={email}
onChange={handleChange}
pattern='.+@example\.com'
className='w-full input'
title='please provide a mock example.com email address'
/>
</div>
<div className="mt-5">
<label htmlFor="password" className="block mb-2">
<div className='mt-5'>
<label htmlFor='password' className='block mb-2'>
Password <sup>(Prefilled for you)</sup>
</label>
<input
id="password"
id='password'
readOnly={true}
autoComplete="off"
type="password"
defaultValue="samlstrongpassword"
className="w-full input"
autoComplete='off'
type='password'
defaultValue='samlstrongpassword'
className='w-full input'
/>
</div>
<button type="submit" className="button mt-8 w-full">
<button type='submit' className='button mt-8 w-full'>
Sign In
</button>
</form>