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

copy and appearance updates

Browse Source
This commit is contained in:
Ulysse Carion 2024-05-17 10:13:27 -07:00
parent 9f9f5d83c8
commit 0a70f1cbf2
5 changed files with 168 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@ -9,9 +9,15 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
<style>
body {
background-image: url("/wordart.png");
}
</style>
</head> </head>
<body> <body>
<div id="react-root" class="h-full min-h-screen bg-muted/40"></div> <div id="react-root" class="h-full min-h-screen"></div>
</body> </body>
<script src="/index.js"></script> <script src="/index.js"></script>

BIN
public/wordart.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 52 KiB

2
src/App.tsx
View File

@ -11,10 +11,10 @@ export function App() {
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/instant-setup" element={<InstantSetupPage />} /> <Route path="/instant-setup" element={<InstantSetupPage />} />
<Route path="/apps/:appId/sso" element={<SSOPage />} />
<Route path="/" element={<Page />}> <Route path="/" element={<Page />}>
<Route path="/" element={<HomePage />} /> <Route path="/" element={<HomePage />} />
<Route path="/apps/:appId" element={<ViewAppPage />} /> <Route path="/apps/:appId" element={<ViewAppPage />} />
<Route path="/apps/:appId/sso" element={<SSOPage />} />
</Route> </Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

29
src/components/ui/separator.tsx Normal file
View File

@ -0,0 +1,29 @@
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }

39
src/pages/SSOPage.tsx
View File

@ -27,6 +27,7 @@ import {
import { useSearchParams } from "react-router-dom"; import { useSearchParams } from "react-router-dom";
import moment from "moment"; import moment from "moment";
import { clsx } from "clsx"; import { clsx } from "clsx";
import { Separator } from "@/components/ui/separator";
const formSchema = z.object({ const formSchema = z.object({
email: z.string().min(1, { message: "Email is required." }), email: z.string().min(1, { message: "Email is required." }),
@ -82,6 +83,9 @@ export function SSOPage() {
}); });
async function onSubmit(values: z.infer<typeof formSchema>, e: any) { async function onSubmit(values: z.infer<typeof formSchema>, e: any) {
setLoading(true);
setTimeout(async () => {
const key = await window.crypto.subtle.importKey( const key = await window.crypto.subtle.importKey(
"jwk", "jwk",
GLOBAL_NONSECURE_KEY, GLOBAL_NONSECURE_KEY,
@ -108,21 +112,29 @@ export function SSOPage() {
}); });
inputRef.current!.form!.action = app.spAcsUrl; inputRef.current!.form!.action = app.spAcsUrl;
inputRef.current!.form!.submit(); inputRef.current!.form!.submit();
}, 1000);
} }
const [loading, setLoading] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
return ( return (
<> <div className="flex w-screen h-screen">
<form method="post"> <form method="post">
<input type="hidden" name="SAMLResponse" ref={inputRef} /> <input type="hidden" name="SAMLResponse" ref={inputRef} />
</form> </form>
<Card className="mx-auto max-w-xl"> <div className="m-auto max-w-xl relative">
{loading && (
<div className="absolute bg-black/80 inset-0 flex justify-center items-center z-10 dark text-white">
<img className="m-auto" alt="loading" src="/loading.gif" />
</div>
)}
<Card>
<CardHeader> <CardHeader>
<CardTitle>Log on</CardTitle> <CardTitle>Log on</CardTitle>
<CardDescription> <CardDescription>
Enter some details about who you want DummyIDP to log you in as. Enter some details about who you want DummyIDP to say you are.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -192,8 +204,27 @@ export function SSOPage() {
</div> </div>
</form> </form>
</Form> </Form>
<Separator className="my-8" />
<div className="text-xs text-muted-foreground space-y-2">
<p>
DummyIDP is a fake identity provider. It's a dummy stand-in for
something like Okta, Google Workspace, or Microsoft Entra.
</p>
<p>
In the real world, your customers would never see or interact
with DummyIDP in any way. In the real world, your customers
would see their own IDP, not this fake one.
</p>
<p>
We made DummyIDP because there doesn't exist any free, no-hassle
SAML Identity Provider out there that developers can test with.
</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
</> </div>
</div>
); );
} }