(({ className, ...props }, ref) => (
))
@@ -50,7 +47,7 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
deleted file mode 100644
index a23e7a2..0000000
--- a/src/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-const Collapsible = CollapsiblePrimitive.Root
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 4603f8b..3f54feb 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,3 +1,5 @@
+"use client"
+
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
@@ -93,7 +95,7 @@ const FormLabel = React.forwardRef<
return (
@@ -133,7 +135,7 @@ const FormDescription = React.forwardRef<
)
@@ -155,7 +157,7 @@ const FormMessage = React.forwardRef<
{body}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 677d05f..18679d0 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef(
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(
- (
- { className, orientation = "horizontal", decorative = true, ...props },
- ref
- ) => (
-
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0 dark:bg-slate-800/50",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px] dark:text-slate-400",
+ className
+ )}
+ {...props}
+ />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+ HTMLTableCellElement,
+ React.TdHTMLAttributes
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ ;
-}
-
-interface App {
- id: string;
- spAcsUrl: string;
- spEntityId: string;
- requiredDomain: string;
-}
-
-export function useStore(): [StoreData, (_: StoreData) => void] {
- const [state, setState] = useState(() => {
- const item = localStorage.getItem("store-data");
- return item === null ? { apps: {} } : JSON.parse(item);
- });
-
- return [
- state,
- (state) => {
- localStorage.setItem("store-data", JSON.stringify(state));
- setState(state);
- },
- ];
-}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d084cca..a5ef193 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
+ return twMerge(clsx(inputs));
}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
deleted file mode 100644
index 56715b0..0000000
--- a/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { Button } from "@/components/ui/button";
-import { useStore } from "@/lib/store";
-import { v4 as uuidv4 } from "uuid";
-import { useNavigate } from "react-router";
-
-export function HomePage() {
- const [storeData, setStoreData] = useStore();
- const navigate = useNavigate();
- const handleCreateApp = () => {
- const id = uuidv4();
- setStoreData({
- ...storeData,
- apps: {
- ...storeData.apps,
- [id]: {
- id,
- spAcsUrl: "",
- spEntityId: "",
- requiredDomain: "",
- },
- },
- });
-
- navigate(`/apps/${id}`);
- };
-
- return Create new app ;
-}
diff --git a/src/pages/InstantSetupPage.tsx b/src/pages/InstantSetupPage.tsx
deleted file mode 100644
index b8883e3..0000000
--- a/src/pages/InstantSetupPage.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useEffect } from "react";
-import { createSearchParams, useSearchParams } from "react-router-dom";
-import { useNavigate } from "react-router";
-import { useStore } from "@/lib/store";
-
-export function InstantSetupPage() {
- const [storeData, setStoreData] = useStore();
- const [searchParams] = useSearchParams();
-
- const appId = searchParams.get("appId")!;
- const spAcsUrl = searchParams.get("spAcsUrl")!;
- const spEntityId = searchParams.get("spEntityId")!;
- const requiredDomain = searchParams.get("requiredDomain")!;
- const email = searchParams.get("email")!;
- const firstName = searchParams.get("firstName")!;
- const lastName = searchParams.get("lastName")!;
-
- const navigate = useNavigate();
- useEffect(() => {
- setStoreData({
- ...storeData,
- apps: {
- ...storeData.apps,
- [appId]: {
- id: appId,
- spAcsUrl,
- spEntityId,
- requiredDomain,
- },
- },
- });
-
- navigate(
- {
- pathname: `/apps/${appId}/sso`,
- search: createSearchParams({ email, firstName, lastName }).toString(),
- },
- {
- replace: true,
- },
- );
- }, [appId, spAcsUrl, spEntityId]);
-
- return <>;
-}
diff --git a/src/pages/SSOPage.tsx b/src/pages/SSOPage.tsx
deleted file mode 100644
index 5ae62a7..0000000
--- a/src/pages/SSOPage.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { encodeAssertion } from "@/lib/saml";
-import { GLOBAL_NONSECURE_KEY } from "@/key";
-import { useStore } from "@/lib/store";
-import { useParams } from "react-router";
-import { z } from "zod";
-import {
- Form,
- FormControl,
- FormDescription,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "@/components/ui/button";
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card";
-import { useSearchParams } from "react-router-dom";
-import moment from "moment";
-import { clsx } from "clsx";
-import { Separator } from "@/components/ui/separator";
-
-const formSchema = z.object({
- email: z.string().min(1, { message: "Email is required." }),
- firstName: z.string(),
- lastName: z.string(),
-});
-
-export function SSOPage() {
- const [storeData, _] = useStore();
- const { appId } = useParams();
- const app = storeData.apps[appId!];
-
- const [searchParams] = useSearchParams();
- const email = searchParams.get("email");
- const firstName = searchParams.get("firstName");
- const lastName = searchParams.get("lastName");
- const samlRequest = searchParams.get("SAMLRequest");
-
- const [sessionId, setSessionId] = useState("");
-
- useEffect(() => {
- if (!samlRequest) {
- return;
- }
-
- const samlRequestXML = atob(
- // url to std base64
- samlRequest.replace(/-/g, "+").replace(/_/g, "/"),
- );
-
- const parser = new DOMParser();
- const doc = parser.parseFromString(samlRequestXML, "text/xml");
-
- // use xpath to get the AuthnRequest ID, throwing away all namespace information to make that easier
- const id = doc.evaluate(
- "string(/_:AuthnRequest/@ID)",
- doc,
- (_) => "urn:oasis:names:tc:SAML:2.0:protocol",
- XPathResult.STRING_TYPE,
- null,
- ).stringValue;
-
- setSessionId(id);
- }, [samlRequest]);
-
- const form = useForm>({
- resolver: zodResolver(formSchema),
- defaultValues: {
- email: email ?? "",
- firstName: firstName ?? "",
- lastName: lastName ?? "",
- },
- });
-
- async function onSubmit(values: z.infer, e: any) {
- setLoading(true);
-
- setTimeout(async () => {
- const key = await window.crypto.subtle.importKey(
- "jwk",
- GLOBAL_NONSECURE_KEY,
- {
- name: "RSASSA-PKCS1-v1_5",
- hash: "SHA-256",
- },
- true,
- ["sign"],
- );
-
- const now = moment(new Date()).add(-1, "hour");
- const expire = moment(new Date()).add(1, "hour");
-
- inputRef.current!.value = await encodeAssertion(key, {
- idpEntityId: `https://dummyidp.com/apps/${app.id}`,
- subjectId: `${values.email}@${app.requiredDomain}`,
- firstName: values.firstName,
- lastName: values.lastName,
- spEntityId: app.spEntityId,
- sessionId: sessionId,
- now: now.format(),
- expire: expire.format(),
- });
- inputRef.current!.form!.action = app.spAcsUrl;
- inputRef.current!.form!.submit();
- }, 1000);
- }
-
- const [loading, setLoading] = useState(false);
- const inputRef = useRef(null);
-
- return (
-
-
-
-
- {loading && (
-
-
-
- )}
-
-
- Log on
-
- Enter some details about who you want DummyIDP to say you are.
-
-
-
-
-
-
-
-
- DummyIDP is a fake identity provider. It's a dummy stand-in for
- something like Okta, Google Workspace, or Microsoft Entra.
-
-
- 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.
-
-
- We made DummyIDP because there doesn't exist any free, no-hassle
- SAML Identity Provider out there that developers can test with.
-
-
-
-
-
>({
- resolver: zodResolver(formSchema),
- defaultValues: {
- spAcsUrl: app.spAcsUrl,
- spEntityId: app.spEntityId,
- requiredDomain: app?.requiredDomain || "",
- },
- });
-
- const [open, setOpen] = useState(false);
-
- function onSubmit(values: z.infer, e: any) {
- e.preventDefault();
-
- setStoreData({
- ...storeData,
- apps: {
- ...storeData.apps,
- [app.id]: {
- ...storeData.apps[app.id],
- spAcsUrl: values.spAcsUrl,
- spEntityId: values.spEntityId,
- requiredDomain: values.requiredDomain,
- },
- },
- });
-
- setOpen(false);
- }
-
- return (
-
-
-
-
-
-
- App
-
-
- {app.id}
-
-
-
- This is a dummy app. This is a dumbed-down equivalent to an
- app/tile in Okta, Google Workspace, Microsoft Entra, etc.
-
-
-
-
- Edit
-
-
-
- Edit app
-
- Edit the settings associated with this dummy SSO app.
-
-
-
-
-
-
-
-
-
-
-
- Service Provider ACS URL
-
-
{app.spAcsUrl}
-
- Service Provider Entity ID
-
-
{app.spEntityId}
-
- Email Domain
-
-
{app.requiredDomain}
-
-
-
-
-
- Start SAML login
-
- Click the button below to do the equivalent of clicking on an
- app/tile in Okta, Google Workspace, Microsoft Entra, etc.
-
-
-
-
-
-
-
-
- This will perform a SAML IDP-initiated flow, meaning you'll be
- redirected to the Service Provider ACS URL, which you've configured
- as {app.spAcsUrl} .
-
-
-
-
-
-
- Identity Provider settings
-
- These are settings that the identity provider (i.e. DummyIDP, in
- this case) chooses.
-
-
-
-
-
-
- Identity Provider Sign-on URL
-
-
- https://sso.dummyidp.com/apps/{app.id}/sso
-
-
- Identity Provider Entity ID
-
-
- https://dummyidp.com/apps/{app.id}
-
-
- Certificate
-
-
-
-
- {GLOBAL_NONSECURE_CERT}
-
-
-
-
-
-
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 7c9d4fb..0fe117c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,22 +1,31 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
- content: ["./src/**/*.{ts,tsx}", "./public/index.html"],
- prefix: "",
+ content: [
+ "./app/**/*.{js,ts,jsx,tsx,mdx}",
+ "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+ // Or if using `src` directory:
+ "./src/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
theme: {
container: {
- center: true,
+ center: "true",
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
- fontFamily: {
- sans: `"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
- mono: `"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
- },
extend: {
colors: {
+ splash: {
+ 1: "#ddd6fe",
+ 2: "#99f6e4",
+ 3: "#bfdbfe",
+ },
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
@@ -56,14 +65,25 @@ module.exports = {
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
+ fontFamily: {
+ sans: ["var(--font-sans)", ...fontFamily.sans],
+ },
keyframes: {
"accordion-down": {
- from: { height: "0" },
- to: { height: "var(--radix-accordion-content-height)" },
+ from: {
+ height: "0",
+ },
+ to: {
+ height: "var(--radix-accordion-content-height)",
+ },
},
"accordion-up": {
- from: { height: "var(--radix-accordion-content-height)" },
- to: { height: "0" },
+ from: {
+ height: "var(--radix-accordion-content-height)",
+ },
+ to: {
+ height: "0",
+ },
},
},
animation: {
diff --git a/tsconfig.json b/tsconfig.json
index b4b6604..513ca44 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,16 +2,38 @@
"compilerOptions": {
"baseUrl": ".",
"paths": {
- "@/*": ["./src/*"]
+ "@/*": ["src/*"]
},
- "rootDir": "src",
- "module": "commonjs",
"target": "es2015",
- "sourceMap": true,
- "jsx": "react",
- "allowSyntheticDefaultImports": true,
- "lib": ["es2017", "dom"],
- "strict": true
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "incremental": true,
+ "module": "esnext",
+ "esModuleInterop": true,
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
},
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ ".next/types/**/*.ts",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}
- 
-