react-admin-base-bootstrap 0.7.5 → 0.7.6

package/assets/main.css

@@ -7,6 +7,10 @@
 @import url('~tingle.js/dist/tingle.css');
 @import url('~cropperjs/dist/cropper.css');
 
+.password-str-bar ~ .invalid-feedback {
+  margin-top: -20px;
+}
+
 .tingle-modal--visible {
   z-index: 10000;
 }

package/lib/esm/Components/DefaultValidatorOptions.d.ts

@@ -0,0 +1,3 @@
+export default function DefaultValidatorOptions({ children }: {
+    children: any;
+}): JSX.Element;

package/lib/esm/Components/DefaultValidatorOptions.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from "react";
+import { ValidatorOptionProvider } from "react-admin-base";
+import { useIntl } from "react-intl";
+import zxcvbn from 'zxcvbn';
+export default function DefaultValidatorOptions({ children }) {
+    const intl = useIntl();
+    const options = useMemo(() => ({
+        validators: {
+            password: {
+                message: intl.formatMessage({ id: 'PASSWORD_NOMATCH' }),
+                rule: function (val, params) {
+                    return val == params[0];
+                }
+            },
+            securepassword: {
+                message: intl.formatMessage({ id: 'INSECURE_PASSWORD' }),
+                rule: function (val, params) {
+                    return !val || (zxcvbn(val, []).score >= 2);
+                }
+            }
+        }
+    }), [intl]);
+    return React.createElement(ValidatorOptionProvider, { value: options }, children);
+}

package/lib/esm/Components/ErrorBoundary.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-export default class ErrorBoundary extends React.Component {
+export default class ErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+}> {
     state: {
         hasError: boolean;
         error: null;
@@ -8,5 +10,5 @@ export default class ErrorBoundary extends React.Component {
         hasError: boolean;
         error: any;
     };
-    render(): React.ReactNode;
+    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
 }

package/lib/esm/Components/PasswordInput.d.ts

@@ -0,0 +1,11 @@
+interface PasswordInputParams {
+    value?: string;
+    onChange: (str: string) => any;
+    className?: string;
+    disabled?: boolean;
+    icon?: string;
+    required?: boolean;
+    placeholder?: string;
+}
+export default function PasswordInput({ value, onChange, className, disabled, icon, required, placeholder }: PasswordInputParams): JSX.Element;
+export {};

package/lib/esm/Components/PasswordInput.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import PasswordStrengthBar from "react-password-strength-bar";
+import { FormGroup, Label, Input } from 'reactstrap';
+import { Validator } from "./Validator";
+function BootstrapPasswordInput({ className, value, onChange, disabled, placeholder }) {
+    const intl = useIntl();
+    const short = intl.formatMessage({ id: "PASSWORD_SHORT" });
+    const bad = intl.formatMessage({ id: "PASSWORD_BAD" });
+    const okay = intl.formatMessage({ id: "PASSWORD_OKAY" });
+    const good = intl.formatMessage({ id: "PASSWORD_GOOD" });
+    const perfect = intl.formatMessage({ id: "PASSWORD_PERFECT" });
+    const scoreWords = useMemo(() => [short, bad, okay, good, perfect], [short, bad, okay, good, perfect]);
+    return React.createElement(React.Fragment, null,
+        React.createElement(Input, { className: className, type: "password", value: value || '', onChange: a => onChange(a.currentTarget.value), disabled: disabled, placeholder: placeholder }),
+        React.createElement(PasswordStrengthBar, { className: "password-str-bar", password: value || '', scoreWords: scoreWords, shortScoreWord: short }));
+}
+export default function PasswordInput({ value, onChange, className, disabled, icon, required, placeholder }) {
+    const [password2, setPassword2] = useState('');
+    const iconElem = icon && React.createElement("i", { className: icon });
+    useEffect(function () {
+        if (!value) {
+            setPassword2('');
+        }
+    }, [value, setPassword2]);
+    return React.createElement(React.Fragment, null,
+        React.createElement(FormGroup, { className: className },
+            iconElem,
+            React.createElement(Label, null,
+                React.createElement(FormattedMessage, { id: "PASSWORD" })),
+            React.createElement(Validator, { name: "password", type: [required && "required", "securepassword"].filter(a => !!a) },
+                React.createElement(BootstrapPasswordInput, { value: value, onChange: onChange, disabled: disabled, placeholder: placeholder }))),
+        !!(required || value) && React.createElement(FormGroup, { className: className },
+            iconElem,
+            React.createElement(Label, null,
+                React.createElement(FormattedMessage, { id: "PASSWORD_AGAIN" })),
+            React.createElement(Validator, { name: "password2", type: [(required || value) && "required", { password: value || '' }].filter(a => !!a) },
+                React.createElement(Input, { type: "password", value: password2 || '', onChange: a => setPassword2(a.currentTarget.value), disabled: disabled }))));
+}

package/lib/esm/i18n/de.json

@@ -4,6 +4,13 @@
     "USERNAME": "Benutzername",
     "PASSWORD": "Passwort",
     "FORGOT_PASSWORD": "Ich habe mein Passwort vergessen",
+    "INSECURE_PASSWORD": "Passwort ist nicht sicher",
+    "PASSWORD_NOMATCH": "Passwort ist falsch",
+    "PASSWORD_SHORT": "zu kurz",
+    "PASSWORD_BAD": "schlecht",
+    "PASSWORD_OKAY": "okay",
+    "PASSWORD_GOOD": "gut",
+    "PASSWORD_PERFECT": "perfekt",
     "LOGIN": "Einloggen",
     "LOGIN_HEAD": "Anmeldebereich",
     "SUBMIT": "Absenden",

package/lib/esm/i18n/en.json

@@ -3,6 +3,14 @@
     "ENTITY.CANCEL": "Cancel",
     "USERNAME": "Username",
     "PASSWORD": "Password",
+    "PASSWORD_AGAIN": "Password (again)",
+    "PASSWORD_SHORT": "too short",
+    "PASSWORD_BAD": "bad",
+    "PASSWORD_OKAY": "okay",
+    "PASSWORD_GOOD": "good",
+    "PASSWORD_PERFECT": "perfect",
+    "INSECURE_PASSWORD": "Password is not secure",
+    "PASSWORD_NOMATCH": "Passwords does not match",
     "FORGOT_PASSWORD": "I forgot my password",
     "LOGIN": "Login",
     "LOGIN_HEAD": "Login Area",
@@ -12,7 +20,7 @@
     "EMAIL": "Email",
     "AUTH_CODE": "Authorization Code",
     "ENTER_AUTH_CODE": "Please enter the verification code that we sent to {email}.",
-    "CHANGE_EMAIL": "Not your e-mail? <1>Sent to a new email address</1>.",
+    "CHANGE_EMAIL": "Not your e-mail? <a>Sent to a new email address</a>.",
     "PASSWORD_REPEAT": "Password (again)",
     "VALIDATION.ERROR": "Entity has following errors:",
     "ENTITY.SAVED": "Changes are saved.",

package/lib/esm/i18n/tr.json

@@ -4,6 +4,13 @@
     "USERNAME": "Kullanıcı Adı",
     "PASSWORD": "Şifre",
     "FORGOT_PASSWORD": "Şifremi unuttum",
+    "INSECURE_PASSWORD": "Şifre güvenli değil",
+    "PASSWORD_NOMATCH": "Şifreler uyuşmuyor",
+    "PASSWORD_SHORT": "çok kısa",
+    "PASSWORD_BAD": "kötü",
+    "PASSWORD_OKAY": "idare eder",
+    "PASSWORD_GOOD": "iyi",
+    "PASSWORD_PERFECT": "harika",
     "SUBMIT": "Gönder",
     "LOGIN": "Giriş",
     "LOGIN_HEAD": "Oturum Açma Alanı",

package/lib/esm/index.d.ts

@@ -18,4 +18,6 @@ import { useMenuState, useIsMobile } from './Components/MenuState';
 import TopProgressBar from './Components/TopProgressBar';
 import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvider';
 import StepList, { StepItem } from './Components/StepList';
-export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+import PasswordInput from './Components/PasswordInput';
+import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };

package/lib/esm/index.js

@@ -18,4 +18,6 @@ import { useMenuState, useIsMobile } from './Components/MenuState';
 import TopProgressBar from './Components/TopProgressBar';
 import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvider';
 import StepList, { StepItem } from './Components/StepList';
-export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+import PasswordInput from './Components/PasswordInput';
+import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -25,29 +25,32 @@
     "delay": "100"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-intl": "^5.21.0",
     "react-router-dom": "^6.3.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.8.2",
+    "@emotion/react": "^11.9.3",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "bootstrap": "^5.1.3",
     "file-dialog": "^0.0.8",
     "modal-cropper": "^1.2.3",
     "nprogress": "^0.2.0",
     "prettysize": "^2.0.0",
-    "react-admin-base": "^0.7.2",
+    "react-admin-base": "^0.7.3",
+    "react-password-strength-bar": "^0.4.1",
     "react-responsive": "^8.2.0",
-    "react-select": "^5.2.2",
-    "reactstrap": "^9.0.1",
+    "react-select": "^5.3.2",
+    "reactstrap": "^9.1.1",
     "rewire": "^6.0.0",
-    "sweetalert2": "^11.4.8"
+    "sweetalert2": "^11.4.17"
   },
   "devDependencies": {
+    "@types/react": "^18.0.12",
     "cross-env": "^7.0.3",
-    "nodemon": "^2.0.15",
-    "react-intl": "^5.24.8",
-    "typescript": "^4.6.3"
+    "nodemon": "^2.0.16",
+    "react-intl": "^6.0.4",
+    "typescript": "^4.7.3"
   }
 }

package/src/Components/DefaultValidatorOptions.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+import { ValidatorOptionProvider } from "react-admin-base";
+import { useIntl } from "react-intl";
+import zxcvbn from 'zxcvbn';
+
+export default function DefaultValidatorOptions({ children }) {
+	const intl = useIntl();
+	
+	const options = useMemo(() => ({
+		validators: {
+			password: {
+				message: intl.formatMessage({ id: 'PASSWORD_NOMATCH' }),
+				rule: function (val, params) {
+					return val == params[0];
+				}
+			},
+			securepassword: {
+				message: intl.formatMessage({ id: 'INSECURE_PASSWORD' }),
+				rule: function (val, params) {
+					return !val || (zxcvbn(val, []).score >= 2);
+				}
+			}
+		}
+	}), [intl]);
+	
+	return <ValidatorOptionProvider value={options}>
+		{ children }
+	</ValidatorOptionProvider>;
+}

package/src/Components/ErrorBoundary.tsx

@@ -9,7 +9,7 @@ function ErrorHandler({ error }) {
   </Alert>;
 }
 
-export default class ErrorBoundary extends React.Component {
+export default class ErrorBoundary extends React.Component<{ children: React.ReactNode }> {
   state = { hasError: false, error: null };
 
   static getDerivedStateFromError(error) {

package/src/Components/PasswordInput.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import PasswordStrengthBar from "react-password-strength-bar";
+import { FormGroup, Label, Input } from 'reactstrap';
+import { Validator } from "./Validator";
+
+interface BootstrapPasswordInput {
+	value?: string;
+	onChange: (str: string) => any;
+	className?: string;
+	disabled?: boolean;
+	icon?: string;
+	required?: boolean;
+	placeholder?: string;
+}
+
+function BootstrapPasswordInput({ className, value, onChange, disabled, placeholder }: BootstrapPasswordInput) {
+	const intl = useIntl();
+	
+	const short = intl.formatMessage({ id: "PASSWORD_SHORT" });
+	const bad = intl.formatMessage({ id: "PASSWORD_BAD" });
+	const okay = intl.formatMessage({ id: "PASSWORD_OKAY" });
+	const good = intl.formatMessage({ id: "PASSWORD_GOOD" });
+	const perfect = intl.formatMessage({ id: "PASSWORD_PERFECT" });
+	
+	const scoreWords = useMemo(() => [short, bad, okay, good, perfect], [short, bad, okay, good, perfect]);
+	
+	return <>
+		<Input
+			className={className}
+			type="password"
+			value={value || ''}
+			onChange={a => onChange(a.currentTarget.value)}
+			disabled={disabled}
+			placeholder={placeholder}
+		/>
+		<PasswordStrengthBar
+			className="password-str-bar"
+			password={value || ''}
+			scoreWords={scoreWords}
+			shortScoreWord={short}
+		/>
+	</>
+}
+
+interface PasswordInputParams {
+	value?: string;
+	onChange: (str: string) => any;
+	className?: string;
+	disabled?: boolean;
+	icon?: string;
+	required?: boolean;
+	placeholder?: string;
+}
+
+export default function PasswordInput({ value, onChange, className, disabled, icon, required, placeholder }: PasswordInputParams) {
+	const [ password2, setPassword2 ] = useState('');
+	
+	const iconElem = icon && <i className={icon} />;
+	
+	useEffect(function() {
+		if (!value) {
+			setPassword2('');
+		}
+	}, [value, setPassword2]);
+	
+	return <>
+		<FormGroup className={className}>
+			{iconElem}
+			<Label><FormattedMessage id="PASSWORD" /></Label>
+			<Validator name="password" type={[required && "required", "securepassword"].filter(a => !!a)}>
+				<BootstrapPasswordInput
+					value={value}
+					onChange={onChange}
+					disabled={disabled}
+					placeholder={placeholder}
+				/>
+			</Validator>
+		</FormGroup>
+		{ !!(required || value) && <FormGroup className={className}>
+			{iconElem}
+			<Label><FormattedMessage id="PASSWORD_AGAIN" /></Label>
+			<Validator name="password2" type={[(required || value) && "required", { password: value || '' }].filter(a => !!a)}>
+				<Input
+					type="password"
+					value={password2 || ''}
+					onChange={a => setPassword2(a.currentTarget.value)}
+					disabled={disabled}
+				/>
+			</Validator>
+		</FormGroup> }
+	</>;
+}

package/src/i18n/de.json

@@ -4,6 +4,13 @@
   "USERNAME": "Benutzername",
   "PASSWORD": "Passwort",
   "FORGOT_PASSWORD": "Ich habe mein Passwort vergessen",
+  "INSECURE_PASSWORD": "Passwort ist nicht sicher",
+  "PASSWORD_NOMATCH": "Passwort ist falsch",
+  "PASSWORD_SHORT": "zu kurz",
+  "PASSWORD_BAD": "schlecht",
+  "PASSWORD_OKAY": "okay",
+  "PASSWORD_GOOD": "gut",
+  "PASSWORD_PERFECT": "perfekt",
   "LOGIN": "Einloggen",
   "LOGIN_HEAD": "Anmeldebereich",
   "SUBMIT": "Absenden",

package/src/i18n/en.json

@@ -3,6 +3,14 @@
   "ENTITY.CANCEL": "Cancel",
   "USERNAME": "Username",
   "PASSWORD": "Password",
+  "PASSWORD_AGAIN": "Password (again)",
+  "PASSWORD_SHORT": "too short",
+  "PASSWORD_BAD": "bad",
+  "PASSWORD_OKAY": "okay",
+  "PASSWORD_GOOD": "good",
+  "PASSWORD_PERFECT": "perfect",
+  "INSECURE_PASSWORD": "Password is not secure",
+  "PASSWORD_NOMATCH": "Passwords does not match",
   "FORGOT_PASSWORD": "I forgot my password",
   "LOGIN": "Login",
   "LOGIN_HEAD": "Login Area",
@@ -12,7 +20,7 @@
   "EMAIL": "Email",
   "AUTH_CODE": "Authorization Code",
   "ENTER_AUTH_CODE": "Please enter the verification code that we sent to {email}.",
-  "CHANGE_EMAIL": "Not your e-mail? <1>Sent to a new email address</1>.",
+  "CHANGE_EMAIL": "Not your e-mail? <a>Sent to a new email address</a>.",
   "PASSWORD_REPEAT": "Password (again)",
   "VALIDATION.ERROR": "Entity has following errors:",
   "ENTITY.SAVED": "Changes are saved.",

package/src/i18n/tr.json

@@ -4,6 +4,13 @@
   "USERNAME": "Kullanıcı Adı",
   "PASSWORD": "Şifre",
   "FORGOT_PASSWORD": "Şifremi unuttum",
+  "INSECURE_PASSWORD": "Şifre güvenli değil",
+  "PASSWORD_NOMATCH": "Şifreler uyuşmuyor",
+  "PASSWORD_SHORT": "çok kısa",
+  "PASSWORD_BAD": "kötü",
+  "PASSWORD_OKAY": "idare eder",
+  "PASSWORD_GOOD": "iyi",
+  "PASSWORD_PERFECT": "harika",
   "SUBMIT": "Gönder",
   "LOGIN": "Giriş",
   "LOGIN_HEAD": "Oturum Açma Alanı",

package/src/index.ts

@@ -19,10 +19,14 @@ import { useMenuState, useIsMobile } from './Components/MenuState';
 import TopProgressBar from './Components/TopProgressBar';
 import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvider';
 import StepList, { StepItem } from './Components/StepList';
+import PasswordInput from './Components/PasswordInput';
+import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
 
 export {
     ThemeProvider, useTheme, useAllThemes,
     useIsMobile, useMenuState,
+    DefaultValidatorOptions,
+    PasswordInput,
     StepList, StepItem,
     TopProgressBar,
     CRUD, ModalEntityEditor, CRUDActions,