@thebuoyant-tsdev/mui-ts-library 3.2.1 → 3.6.0

package/dist/components/password-strength-meter/PasswordStrengthMeter.js

@@ -0,0 +1,272 @@
+import { scorePassword as e } from "./util/password-strength.util.js";
+import { PasswordStrengthBar as t } from "./PasswordStrengthBar.js";
+import { DEFAULT_CHECK_COLORS as n, DEFAULT_METER_COLORS as r, DEFAULT_PASSWORD_TRANSLATIONS as i } from "./PasswordStrengthMeter.types.js";
+import { useId as a, useMemo as o, useState as s } from "react";
+import { Box as c, Button as l, FormControl as u, FormHelperText as d, IconButton as f, InputAdornment as p, InputLabel as m, OutlinedInput as h, Stack as g, Tooltip as _, Typography as v } from "@mui/material";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import ee from "@mui/icons-material/AutoFixHigh";
+import x from "@mui/icons-material/CheckCircleOutlined";
+import S from "@mui/icons-material/ErrorOutlined";
+import te from "@mui/icons-material/CheckCircle";
+import ne from "@mui/icons-material/Cancel";
+import C from "@mui/icons-material/Visibility";
+import w from "@mui/icons-material/VisibilityOff";
+//#region src/components/password-strength-meter/PasswordStrengthMeter.tsx
+function re(e) {
+	let t = [];
+	e.upper && t.push("ABCDEFGHIJKLMNOPQRSTUVWXYZ"), e.lower && t.push("abcdefghijklmnopqrstuvwxyz"), e.numbers && t.push("0123456789"), e.symbols && t.push("!@#$%^&*()-_=+[]{}|;:,.<>?"), t.length === 0 && t.push("abcdefghijklmnopqrstuvwxyz");
+	let n = t.join(""), r = new Uint32Array(e.length);
+	crypto.getRandomValues(r);
+	let i = t.map((e) => e[crypto.getRandomValues(new Uint32Array(1))[0] % e.length]), a = Array.from(r.slice(i.length)).map((e) => n[e % n.length]), o = [...i, ...a];
+	for (let e = o.length - 1; e > 0; e--) {
+		let t = crypto.getRandomValues(new Uint32Array(1))[0] % (e + 1);
+		[o[e], o[t]] = [o[t], o[e]];
+	}
+	return o.join("");
+}
+function T({ label: e, fulfilled: t, checkColors: n }) {
+	return /* @__PURE__ */ b(g, {
+		direction: "row",
+		sx: {
+			alignItems: "center",
+			mb: .25
+		},
+		spacing: .5,
+		children: [/* @__PURE__ */ y(v, {
+			variant: "caption",
+			children: e
+		}), t ? /* @__PURE__ */ y(x, {
+			"data-testid": "psm-req-success",
+			style: {
+				fontSize: 16,
+				color: n.success
+			}
+		}) : /* @__PURE__ */ y(S, {
+			"data-testid": "psm-req-failure",
+			style: {
+				fontSize: 16,
+				color: n.failure
+			}
+		})]
+	});
+}
+function E({ value: x, confirmValue: S, name: E, inputRef: D, disabled: O = !1, error: k = !1, helperText: A, autoComplete: j, customRequirements: ie, generatorOptions: M, showConfirmField: N = !1, showPasswordAdornment: ae = !0, showMeter: oe = !0, showPasswordGenerator: se = !1, showSegmentedBar: ce = !1, showSummary: le = !0, inputSize: P = "medium", translation: ue, meterColors: de, passwordMinLength: F = 8, checkColors: I = n, onPasswordChange: L, onConfirmChange: R, onPasswordGenerated: z }) {
+	let B = {
+		...i,
+		...ue
+	}, V = {
+		...r,
+		...de
+	}, H = a(), U = `${H}-password`, [W, G] = s(!1), [K, fe] = s(!1), [pe, q] = s(""), [me, J] = s(""), Y = x === void 0 ? pe : x, X = S === void 0 ? me : S, Z = N && X.length > 0, Q = Z && Y === X, $ = o(() => e(Y, F), [Y, F]);
+	return /* @__PURE__ */ b(g, { children: [
+		/* @__PURE__ */ b(u, {
+			variant: "outlined",
+			fullWidth: !0,
+			error: k,
+			children: [
+				/* @__PURE__ */ y(m, {
+					htmlFor: U,
+					size: P,
+					children: B.label
+				}),
+				/* @__PURE__ */ y(h, {
+					id: U,
+					type: W ? "text" : "password",
+					fullWidth: !0,
+					size: P,
+					value: Y,
+					onChange: (t) => {
+						let n = t.target.value;
+						x === void 0 && q(n), L && L(n, e(n, F));
+					},
+					disabled: O,
+					inputRef: D,
+					inputProps: {
+						"data-testid": "psm-input",
+						name: E,
+						autoComplete: j
+					},
+					endAdornment: ae ? /* @__PURE__ */ y(p, {
+						position: "end",
+						children: /* @__PURE__ */ y(f, {
+							"data-testid": "psm-toggle",
+							disabled: O,
+							"aria-label": W ? B.hidePasswordLabel : B.showPasswordLabel,
+							onClick: () => {
+								G((e) => !e);
+							},
+							onMouseDown: (e) => {
+								e.preventDefault();
+							},
+							onMouseUp: (e) => {
+								e.preventDefault();
+							},
+							edge: "end",
+							children: y(W ? w : C, {})
+						})
+					}) : null,
+					label: B.label
+				}),
+				A && /* @__PURE__ */ y(d, { children: A })
+			]
+		}),
+		se && /* @__PURE__ */ y(_, {
+			title: B.generatePasswordLabel,
+			arrow: !0,
+			children: /* @__PURE__ */ y("span", { children: /* @__PURE__ */ y(l, {
+				"data-testid": "psm-generate",
+				size: "small",
+				variant: "text",
+				startIcon: /* @__PURE__ */ y(ee, { fontSize: "small" }),
+				disabled: O,
+				onClick: () => {
+					let t = re({
+						length: M?.length ?? Math.max(16, F),
+						upper: M?.upper ?? !0,
+						lower: M?.lower ?? !0,
+						numbers: M?.numbers ?? !0,
+						symbols: M?.symbols ?? !0
+					});
+					x === void 0 && q(t), S === void 0 && J(""), L?.(t, e(t, F)), z?.(t), G(!0);
+				},
+				sx: {
+					mt: .5,
+					alignSelf: "flex-start",
+					textTransform: "none"
+				},
+				children: B.generatePasswordLabel
+			}) })
+		}),
+		N && /* @__PURE__ */ b(u, {
+			variant: "outlined",
+			fullWidth: !0,
+			error: Z && !Q,
+			sx: { mt: 1 },
+			children: [
+				/* @__PURE__ */ y(m, {
+					htmlFor: `${H}-confirm`,
+					size: P,
+					children: B.confirmLabel
+				}),
+				/* @__PURE__ */ y(h, {
+					id: `${H}-confirm`,
+					type: K ? "text" : "password",
+					fullWidth: !0,
+					size: P,
+					value: X,
+					onChange: (e) => {
+						let t = e.target.value;
+						S === void 0 && J(t), R?.(t, t === Y);
+					},
+					disabled: O,
+					inputProps: { "data-testid": "psm-confirm-input" },
+					endAdornment: /* @__PURE__ */ b(p, {
+						position: "end",
+						children: [Z && (Q ? /* @__PURE__ */ y(te, {
+							"data-testid": "psm-confirm-match",
+							sx: {
+								color: I.success,
+								mr: .5
+							},
+							fontSize: "small"
+						}) : /* @__PURE__ */ y(ne, {
+							"data-testid": "psm-confirm-mismatch",
+							sx: {
+								color: I.failure,
+								mr: .5
+							},
+							fontSize: "small"
+						})), /* @__PURE__ */ y(f, {
+							size: "small",
+							disabled: O,
+							onClick: () => fe((e) => !e),
+							onMouseDown: (e) => e.preventDefault(),
+							edge: "end",
+							"aria-label": K ? B.hidePasswordLabel : B.showPasswordLabel,
+							children: y(K ? w : C, {})
+						})]
+					}),
+					label: B.confirmLabel
+				}),
+				Z && /* @__PURE__ */ y(d, {
+					sx: { color: Q ? I.success : I.failure },
+					children: Q ? B.confirmMatchLabel : B.confirmMismatchLabel
+				})
+			]
+		}),
+		oe && /* @__PURE__ */ y(t, {
+			percent: $.percent,
+			color: ((e) => {
+				switch (e.meterStatus) {
+					case "weak": return V.weak;
+					case "ok": return V.ok;
+					case "good": return V.good;
+					case "very good": return V.veryGood;
+					default: return "transparent";
+				}
+			})($),
+			ariaLabel: B.meterAriaLabel,
+			segments: ce
+		}),
+		le && /* @__PURE__ */ b(c, {
+			"data-testid": "psm-summary",
+			sx: {
+				mt: .5,
+				p: .5
+			},
+			children: [/* @__PURE__ */ y(v, {
+				variant: "caption",
+				gutterBottom: !0,
+				sx: {
+					display: "block",
+					fontSize: 14
+				},
+				children: B.summaryHeaderLabel
+			}), /* @__PURE__ */ b(g, {
+				direction: "row",
+				spacing: 6,
+				children: [/* @__PURE__ */ b(g, {
+					direction: "column",
+					children: [
+						/* @__PURE__ */ y(T, {
+							label: B.summaryMinChars.replace("{n}", String(F)),
+							fulfilled: $.length >= F,
+							checkColors: I
+						}),
+						/* @__PURE__ */ y(T, {
+							label: B.summaryCapitalLetter,
+							fulfilled: $.hasUpper,
+							checkColors: I
+						}),
+						/* @__PURE__ */ y(T, {
+							label: B.summaryLowerCaseLetter,
+							fulfilled: $.hasLower,
+							checkColors: I
+						})
+					]
+				}), /* @__PURE__ */ b(g, {
+					direction: "column",
+					children: [
+						/* @__PURE__ */ y(T, {
+							label: B.summaryNumber,
+							fulfilled: $.hasDigit,
+							checkColors: I
+						}),
+						/* @__PURE__ */ y(T, {
+							label: B.summarySpecialChar,
+							fulfilled: $.hasSymbol,
+							checkColors: I
+						}),
+						ie?.map((e, t) => /* @__PURE__ */ y(T, {
+							label: e.label,
+							fulfilled: typeof e.fulfilled == "function" ? e.fulfilled(Y) : e.fulfilled,
+							checkColors: I
+						}, t))
+					]
+				})]
+			})]
+		})
+	] });
+}
+//#endregion
+export { E as PasswordStrengthMeter };

package/dist/components/password-strength-meter/PasswordStrengthMeter.types.js

@@ -0,0 +1,27 @@
+//#region src/components/password-strength-meter/PasswordStrengthMeter.types.ts
+var e = {
+	label: "Password",
+	summaryHeaderLabel: "Requirements for your password",
+	summaryMinChars: "At least {n} characters",
+	summaryCapitalLetter: "At least 1 capital letter",
+	summaryLowerCaseLetter: "At least 1 lowercase letter",
+	summaryNumber: "At least 1 number",
+	summarySpecialChar: "At least 1 special character",
+	showPasswordLabel: "Show password",
+	hidePasswordLabel: "Hide password",
+	meterAriaLabel: "Password strength",
+	generatePasswordLabel: "Generate secure password",
+	confirmLabel: "Confirm password",
+	confirmMatchLabel: "Passwords match",
+	confirmMismatchLabel: "Passwords do not match"
+}, t = {
+	weak: "#cc0000",
+	ok: "#fdc010",
+	good: "#8bc34a",
+	veryGood: "#43a047"
+}, n = {
+	failure: "#cc0000",
+	success: "#43a047"
+};
+//#endregion
+export { n as DEFAULT_CHECK_COLORS, t as DEFAULT_METER_COLORS, e as DEFAULT_PASSWORD_TRANSLATIONS };

package/dist/components/password-strength-meter/util/password-strength.util.js

@@ -0,0 +1,38 @@
+//#region src/components/password-strength-meter/util/password-strength.util.ts
+var e = (e) => Math.max(0, Math.min(4, Math.round(e)));
+function t(t, n) {
+	let r = t ?? "", i = r.length, a = /[a-z]/.test(r), o = /[A-Z]/.test(r), s = /\d/.test(r), c = /[^A-Za-z0-9]/.test(r), l = [
+		a,
+		o,
+		s,
+		c
+	].filter(Boolean).length;
+	if (i < n) {
+		let e = i === 0 ? 0 : 1;
+		return {
+			score: e,
+			percent: e * 25,
+			meterStatus: "weak",
+			length: i,
+			hasLower: a,
+			hasUpper: o,
+			hasDigit: s,
+			hasSymbol: c
+		};
+	}
+	let u = 0;
+	u += 1, i >= n + 4 && (u += 1), l >= 2 && (u += 1), l >= 3 && (u += 1), /^(.)\1+$/.test(r) && (u -= 2), /1234|abcd|qwer|password|passwort|admin/i.test(r) && (u -= 2);
+	let d = e(u), f = d <= 1 ? "weak" : d === 2 ? "ok" : d === 3 ? "good" : "very good";
+	return {
+		score: d,
+		percent: d * 25,
+		meterStatus: f,
+		length: i,
+		hasLower: a,
+		hasUpper: o,
+		hasDigit: s,
+		hasSymbol: c
+	};
+}
+//#endregion
+export { t as scorePassword };