docs: add minimal example for implicit flow

versini-org · Jun 20, 2024 · 13def89 · 13def89
1 parent 396698b
commit 13def89
Show file tree

Hide file tree

Showing 14 changed files with 512 additions and 0 deletions.
diff --git a/examples/implicit-flow/index.html b/examples/implicit-flow/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>Implicit Flow</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/examples/implicit-flow/nodemon.json b/examples/implicit-flow/nodemon.json
@@ -0,0 +1,11 @@
+{
+	"watch": [
+		"tailwind.config.js",
+		"src/**/*.*",
+		"../../packages/ui-components/src/**/*.*",
+		"../../packages/ui-components/lib/**/*.*",
+		"../../packages/ui-styles/src/**/*.*",
+		"../../packages/ui-form/src/**/*.*",
+		"../../packages/ui-icons/src/**/*.*"
+	]
+}
diff --git a/examples/implicit-flow/package.json b/examples/implicit-flow/package.json
@@ -0,0 +1,19 @@
+{
+	"name": "@versini/example-with-vite",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"clean": "rimraf dist",
+		"dev": "rsbuild dev",
+		"lint": "biome lint src"
+	},
+	"dependencies": {
+		"@versini/auth-provider": "workspace:../../packages/auth-provider",
+		"@versini/ui-components": "5.19.5",
+		"@versini/ui-styles": "1.9.2",
+		"@versini/ui-system": "1.4.1",
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
+	}
+}
diff --git a/examples/implicit-flow/postcss.config.js b/examples/implicit-flow/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/examples/implicit-flow/rsbuild.config.ts b/examples/implicit-flow/rsbuild.config.ts
@@ -0,0 +1,48 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import fs from "fs-extra";
+
+const packageJson = fs.readJSONSync("package.json");
+
+const buildTime = new Date()
+	.toLocaleString("en-US", {
+		timeZone: "America/New_York",
+		timeZoneName: "short",
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+	})
+	.replace(/,/g, "");
+
+export default defineConfig({
+	source: {
+		entry: {
+			index: "./src/index.tsx",
+		},
+		define: {
+			"import.meta.env.BUILDTIME": JSON.stringify(buildTime),
+			"import.meta.env.BUILDVERSION": JSON.stringify(packageJson.version),
+		},
+	},
+	output: {
+		polyfill: "off",
+		cleanDistPath: true,
+		distPath: {
+			root: "./dist",
+		},
+	},
+	html: {
+		template: "./index.html",
+	},
+	server: {
+		host: "macmini.gizmette.local.com",
+		port: 5173,
+		https: {
+			key: process.env.SSL_KEY,
+			cert: process.env.SSL_CERT,
+		},
+	},
+	plugins: [pluginReact()],
+});
diff --git a/examples/implicit-flow/src/index.css b/examples/implicit-flow/src/index.css
@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@media (prefers-color-scheme: light) {
+	html,
+	body {
+		background-color: white;
+	}
+}
+@media (prefers-color-scheme: dark) {
+	html,
+	body {
+		background-color: rgb(100 116 139);
+	}
+}
diff --git a/examples/implicit-flow/src/index.tsx b/examples/implicit-flow/src/index.tsx
@@ -0,0 +1,15 @@
+import "./index.css";
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import { AuthProvider } from "@versini/auth-provider";
+import { App } from "./main.tsx";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<AuthProvider clientId={"b44c68f0-e5b3-4a1d-a3e3-df8632b0223b"}>
+			<App />
+		</AuthProvider>
+	</React.StrictMode>,
+);
diff --git a/examples/implicit-flow/src/main.tsx b/examples/implicit-flow/src/main.tsx
@@ -0,0 +1,78 @@
+import { useAuth } from "@versini/auth-provider";
+import { Button, Header, Main } from "@versini/ui-components";
+import { Flexgrid, FlexgridItem } from "@versini/ui-system";
+import * as React from "react";
+
+export const App: React.FC = () => {
+	const { login, logout, isAuthenticated } = useAuth();
+
+	const handleValidLogin = async (e: { preventDefault: () => void }) => {
+		e.preventDefault();
+		const response = await login(
+			process.env.PUBLIC_TEST_USER as string,
+			process.env.PUBLIC_TEST_USER_PASSWORD as string,
+		);
+		if (!response) {
+			console.error(`==> [${Date.now()}] : `, "Login failed");
+		} else {
+			console.info(`==> [${Date.now()}] : `, "Login successful");
+			console.info(`==> [${Date.now()}] : `, response);
+		}
+	};
+
+	const handleInvalidLogin = async (e: { preventDefault: () => void }) => {
+		e.preventDefault();
+		const response = await login(
+			process.env.PUBLIC_TEST_USER as string,
+			"invalid-password",
+		);
+		if (!response) {
+			console.error(`==> [${Date.now()}] : `, "Login failed");
+		} else {
+			console.info(`==> [${Date.now()}] : `, "Login successful");
+			console.info(`==> [${Date.now()}] : `, response);
+		}
+	};
+
+	return (
+		<div className="prose prose-dark dark:prose-lighter">
+			<Header>
+				<h1>Implicit Flow</h1>
+			</Header>
+			<Main>
+				<Flexgrid rowGap={2} direction="column">
+					<FlexgridItem>
+						<Button
+							size="small"
+							spacing={{ r: 2 }}
+							onClick={handleValidLogin}
+							disabled={isAuthenticated}
+						>
+							Login (valid)
+						</Button>
+						<Button
+							size="small"
+							onClick={handleInvalidLogin}
+							disabled={isAuthenticated}
+						>
+							Login (invalid)
+						</Button>
+					</FlexgridItem>
+					<FlexgridItem>
+						<Button
+							size="small"
+							onClick={logout}
+							variant="danger"
+							disabled={!isAuthenticated}
+						>
+							Logout (valid)
+						</Button>
+					</FlexgridItem>
+				</Flexgrid>
+
+				<h2>State</h2>
+				<pre className="text-xs">{JSON.stringify(useAuth(), null, 2)}</pre>
+			</Main>
+		</div>
+	);
+};
diff --git a/examples/implicit-flow/src/vite-env.d.ts b/examples/implicit-flow/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/implicit-flow/tailwind.config.js b/examples/implicit-flow/tailwind.config.js
@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+
+import { twPlugin } from "@versini/ui-styles";
+
+export default twPlugin.merge({
+	content: ["./src/**/*.{js,ts,jsx,tsx}"],
+});
diff --git a/examples/implicit-flow/tsconfig.json b/examples/implicit-flow/tsconfig.json
@@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/implicit-flow/tsconfig.node.json b/examples/implicit-flow/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"strict": true
+	},
+	"include": ["vite.config.ts"]
+}