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

Login form

Browse Source
This commit is contained in:
Aswin V 2022-02-18 23:42:45 +05:30
parent 492922b4e1
commit cb9cb3aed3
2 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
pages/saml/login.tsx Normal file
View File

@ -0,0 +1,46 @@
import Head from "next/head";
export default function Login() {
return (
<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-lightBlue-100 dark: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>
<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"
/>
</div>
<div className="mt-5">
<label htmlFor="password" className="block mb-2">
Password <sup>(Prefilled for you)</sup>
</label>
<input
id="password"
readOnly={true}
autoComplete="off"
type="password"
defaultValue="samlstrongpassword"
className="w-full input"
/>
</div>
<button type="submit" className="button mt-8 w-full">
Sign In
</button>
</form>
</div>
</div>
);
}

9
styles/globals.css
View File

@ -30,3 +30,12 @@ a {
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@layer components {
.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;
}
.input {
@apply bg-[#eff0f8] border-2 border-solid border-[#8b8a8b] leading-10 px-4 py-2 rounded-md focus:border-[#5a5dbb] focus:outline-none;
}
}