react-admin-base-bootstrap 0.7.3 → 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/BootstrapDataTable.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { DataContextProvider, useAuth, useDataTable } from 'react-admin-base';
+import { DataContextProvider, RefreshScope, useAuth, useDataTable } from 'react-admin-base';
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from 'react-router-dom';
 import { Alert, Button, Card, CardFooter, CardHeader, Col, Input, Row, Table } from 'reactstrap';
@@ -80,7 +80,7 @@ export function Column(props) {
 export default function BootstrapTable({ url, bordered, noStrip, defaultParams, add, children, innerRef, body }) {
     var state = useState(Object.assign({ sort: 'id' }, defaultParams));
     const [params, setParams] = state;
-    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage] = useDataTable(url, params, body);
+    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage, update] = useDataTable(url, params, body);
     const intl = useIntl();
     const [api] = useAuth();
     var ref = useRef(defaultParams);
@@ -111,31 +111,32 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
     return React.createElement(Card, null,
         React.createElement(DataTableContext.Provider, { value: state },
             React.createElement(DataContextProvider, { value: fetchData },
-                React.createElement(CardHeader, null,
-                    React.createElement(Row, null,
-                        add && React.createElement(Col, { xs: "12", md: "2" },
-                            React.createElement(Link, { to: add, className: "btn btn-primary font-xl d-block" },
-                                React.createElement("i", { className: "fa fa-plus" }))),
-                        React.createElement(Col, { md: "2" },
-                            React.createElement(Input, { type: "select", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
-                                React.createElement("option", { value: "1" }, "1"),
-                                React.createElement("option", { value: "20" }, "20"),
-                                React.createElement("option", { value: "50" }, "50"),
-                                React.createElement("option", { value: "100" }, "100"),
-                                React.createElement("option", { value: "150" }, "150"),
-                                React.createElement("option", { value: "200" }, "200"),
-                                React.createElement("option", { value: "-1" }, intl.formatMessage({ id: "ALL" })))),
-                        children[2],
-                        React.createElement(Col, { md: "3", className: "ms-auto" },
-                            React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
-                data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
-                    React.createElement("i", { className: "fas fa-spinner fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
-                    React.createElement("i", { className: "far fa-times-circle" }),
-                    " ",
-                    React.createElement(FormattedMessage, { id: "NO_DATA_IS_AVAILABLE" })) : React.createElement(Table, { hover: true, bordered: bordered, striped: !noStrip, responsive: true, size: "md", className: "mb-0 dataTable" },
-                    children[0],
-                    React.createElement("tbody", null, data && data.map(children[1].props.children))),
-                lastPage > 1 && React.createElement(CardFooter, null,
-                    React.createElement("nav", null,
-                        React.createElement(BootstrapPagination, { currentPage: page, pageCount: lastPage, onPageChange: index => setPage(index) }))))));
+                React.createElement(RefreshScope, { update: update },
+                    React.createElement(CardHeader, null,
+                        React.createElement(Row, null,
+                            add && React.createElement(Col, { xs: "12", md: "2" },
+                                React.createElement(Link, { to: add, className: "btn btn-primary font-xl d-block" },
+                                    React.createElement("i", { className: "fa fa-plus" }))),
+                            React.createElement(Col, { md: "2" },
+                                React.createElement(Input, { type: "select", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
+                                    React.createElement("option", { value: "1" }, "1"),
+                                    React.createElement("option", { value: "20" }, "20"),
+                                    React.createElement("option", { value: "50" }, "50"),
+                                    React.createElement("option", { value: "100" }, "100"),
+                                    React.createElement("option", { value: "150" }, "150"),
+                                    React.createElement("option", { value: "200" }, "200"),
+                                    React.createElement("option", { value: "-1" }, intl.formatMessage({ id: "ALL" })))),
+                            children[2],
+                            React.createElement(Col, { md: "3", className: "ms-auto" },
+                                React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
+                    data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
+                        React.createElement("i", { className: "fas fa-spinner fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
+                        React.createElement("i", { className: "far fa-times-circle" }),
+                        " ",
+                        React.createElement(FormattedMessage, { id: "NO_DATA_IS_AVAILABLE" })) : React.createElement(Table, { hover: true, bordered: bordered, striped: !noStrip, responsive: true, size: "md", className: "mb-0 dataTable" },
+                        children[0],
+                        React.createElement("tbody", null, data && data.map(children[1].props.children))),
+                    lastPage > 1 && React.createElement(CardFooter, null,
+                        React.createElement("nav", null,
+                            React.createElement(BootstrapPagination, { currentPage: page, pageCount: lastPage, onPageChange: index => setPage(index) })))))));
 }

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/LanguageProvider.d.ts

@@ -1,7 +1,8 @@
 export declare function useLanguage(): any;
-export default function LanguageProvider({ defaultLanguage, languages, children }: {
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }: {
     defaultLanguage: any;
     languages: any;
+    loader: any;
     children: any;
-}): JSX.Element;
-export declare function LanguageSwitcher(): JSX.Element;
+}): JSX.Element | null;
+export declare function LanguageSwitcher(): JSX.Element | null;

package/lib/esm/Components/LanguageProvider.js

@@ -1,5 +1,5 @@
-import React, { useContext, useReducer, useMemo, useState } from 'react';
-import { useApp } from 'react-admin-base';
+import React, { useContext, useMemo, useState } from 'react';
+import { useApp, useLocalStorage } from 'react-admin-base';
 import { IntlProvider } from 'react-intl';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import enMessages from '../i18n/en.json';
@@ -14,29 +14,32 @@ const LanguageContext = React.createContext(null);
 export function useLanguage() {
     return useContext(LanguageContext);
 }
-export default function LanguageProvider({ defaultLanguage, languages, children }) {
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }) {
     const app = useApp();
-    const preferredLanguage = (navigator.languages && navigator.languages[0]) ||
-        navigator.language;
-    const [lang, setLang] = useReducer((oldValue, newValue) => {
-        localStorage.setItem(app.id + "_" + 'language', newValue);
-        return newValue;
-    }, localStorage.getItem(app.id + "_" + 'language') || null);
+    const preferredLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
+    const [lang, setLang] = useLocalStorage(app.id + "_language");
     const activeLanguageKey = (!!lang && languages[lang] && lang) || (languages[preferredLanguage] && preferredLanguage) || (languages[defaultLanguage] && defaultLanguage);
     const activeLanguage = languages[activeLanguageKey];
-    const messages = useMemo(() => (Object.assign(Object.assign({}, (_languages[activeLanguageKey] || _languages.en)), activeLanguage.messages)), [activeLanguage]);
     const value = useMemo(() => [activeLanguage, languages, setLang], [activeLanguage, languages, setLang]);
+    const originalMessages = (loader && loader(activeLanguage)) || activeLanguage.messages;
+    const messages = useMemo(() => originalMessages && (Object.assign(Object.assign({}, (_languages[activeLanguageKey] || _languages.en)), originalMessages)), [originalMessages, activeLanguage]);
+    if (!messages)
+        return null;
     return React.createElement(IntlProvider, { locale: activeLanguageKey, messages: messages },
         React.createElement(LanguageContext.Provider, { value: value }, children));
 }
 export function LanguageSwitcher() {
     const [show, setShow] = useState(false);
     const [activeLang, languages, setLanguage] = useLanguage();
+    if (Object.keys(languages).length <= 1)
+        return null;
     return React.createElement(Dropdown, { isOpen: show, toggle: () => setShow(!show) },
-        React.createElement(DropdownToggle, { className: "nav-flag dropdown-toggle show", nav: true, caret: true },
-            React.createElement("img", { width: "20", src: activeLang.icon, alt: activeLang.name })),
-        React.createElement(DropdownMenu, { end: true }, Object.entries(languages).map(([key, value]) => React.createElement(DropdownItem, { key: key, active: activeLang === value, onClick: () => setLanguage(key) },
-            React.createElement("img", { width: "20", src: value.icon, alt: value.name }),
+        React.createElement(DropdownToggle, { className: "nav-flag", nav: true, caret: true },
+            activeLang.icon && React.createElement("img", { width: "20", className: "me-1", src: activeLang.icon, alt: activeLang.name }),
+            " ",
+            activeLang.name),
+        React.createElement(DropdownMenu, null, Object.entries(languages).map(([key, value]) => React.createElement(DropdownItem, { key: key, active: activeLang === value, onClick: () => setLanguage(key) },
+            value.icon && React.createElement("img", { width: "20", className: "me-1", src: value.icon, alt: value.name }),
             " ",
             React.createElement("span", { className: "align-middle" }, value.name)))));
 }

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/Components/ThemeProvider.js

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useEffect, useMemo, useReducer } from "react";
-import { useApp } from "react-admin-base";
+import React, { createContext, useContext, useEffect, useMemo } from "react";
+import { useLocalStorage } from "react-admin-base";
 const ThemeContext = createContext(null);
 const AllThemesContext = createContext(null);
 export function useTheme() {
@@ -8,15 +8,6 @@ export function useTheme() {
 export function useAllThemes() {
     return useContext(AllThemesContext);
 }
-function useLocalStorage(key) {
-    const app = useApp();
-    const _key = app.id + '_' + key;
-    const previousValue = useMemo(() => localStorage.getItem(_key), [_key]);
-    return useReducer((_, newValue) => {
-        localStorage.setItem(_key, newValue);
-        return newValue;
-    }, previousValue);
-}
 export default function ThemeProvider({ themes, defaultTheme, children }) {
     const state = useLocalStorage('theme');
     const [theme, setTheme] = state;

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.3",
+  "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.0",
+    "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/BootstrapDataTable.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { DataContextProvider, useAuth, useDataTable } from 'react-admin-base';
+import { DataContextProvider, RefreshScope, useAuth, useDataTable } from 'react-admin-base';
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from 'react-router-dom';
 import { Alert, Button, Card, CardFooter, CardHeader, Col, Input, Row, Table } from 'reactstrap';
@@ -77,7 +77,7 @@ export function Column(props) {
 export default function BootstrapTable({url, bordered, noStrip, defaultParams, add, children, innerRef, body}: any) {
     var state = useState({sort: 'id', ...defaultParams});
     const [params, setParams] = state;
-    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage] = useDataTable(url, params, body);
+    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage, update] = useDataTable(url, params, body);
     const intl = useIntl();
     const [ api ] = useAuth();
 
@@ -98,7 +98,7 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
             };
         }
     }, [setParams, innerRef]);
-
+    
     const fetchData = useCallback(async function(extraParams) {
         if (body) {
             const data = await api.tokenized.post(url, body, { params: { ...params,  ...(extraParams || {}) } });
@@ -112,47 +112,49 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
     return <Card>
         <DataTableContext.Provider value={state}>
             <DataContextProvider value={fetchData}>
-                <CardHeader>
-                    <Row>
-                        {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl d-block"><i className="fa fa-plus"/></Link></Col>}
-                        <Col md="2">
-                            <Input type="select" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
-                                <option value="1">1</option>
-                                <option value="20">20</option>
-                                <option value="50">50</option>
-                                <option value="100">100</option>
-                                <option value="150">150</option>
-                                <option value="200">200</option>
-                                <option value="-1">{intl.formatMessage({id: "ALL"})}</option>
-                            </Input>
-                        </Col>
-                        {children[2]}
-                        <Col md="3" className="ms-auto">
-                            <Input
-                                placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
-                                value={params.query || ''}
-                                onChange={e => setParams({...params, query: e.currentTarget.value})}
+                <RefreshScope update={update}>
+                    <CardHeader>
+                        <Row>
+                            {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl d-block"><i className="fa fa-plus"/></Link></Col>}
+                            <Col md="2">
+                                <Input type="select" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
+                                    <option value="1">1</option>
+                                    <option value="20">20</option>
+                                    <option value="50">50</option>
+                                    <option value="100">100</option>
+                                    <option value="150">150</option>
+                                    <option value="200">200</option>
+                                    <option value="-1">{intl.formatMessage({id: "ALL"})}</option>
+                                </Input>
+                            </Col>
+                            {children[2]}
+                            <Col md="3" className="ms-auto">
+                                <Input
+                                    placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
+                                    value={params.query || ''}
+                                    onChange={e => setParams({...params, query: e.currentTarget.value})}
+                                />
+                            </Col>
+                        </Row>
+                    </CardHeader>
+                        {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
+                            <i className="far fa-times-circle"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
+                        </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
+                            {children[0]}
+                            <tbody>
+                            {data && data.map(children[1].props.children)}
+                            </tbody>
+                        </Table>}
+                    { lastPage > 1 && <CardFooter>
+                        <nav>
+                            <BootstrapPagination
+                                currentPage={page}
+                                pageCount={lastPage}
+                                onPageChange={index => setPage(index)}
                             />
-                        </Col>
-                    </Row>
-                </CardHeader>
-                    {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
-                        <i className="far fa-times-circle"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
-                    </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
-                        {children[0]}
-                        <tbody>
-                        {data && data.map(children[1].props.children)}
-                        </tbody>
-                    </Table>}
-                { lastPage > 1 && <CardFooter>
-                    <nav>
-                        <BootstrapPagination
-                            currentPage={page}
-                            pageCount={lastPage}
-                            onPageChange={index => setPage(index)}
-                        />
-                    </nav>
-                </CardFooter> }
+                        </nav>
+                    </CardFooter> }
+                </RefreshScope>
             </DataContextProvider>
         </DataTableContext.Provider>
     </Card>;

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/LanguageProvider.tsx

@@ -1,6 +1,6 @@
 
-import React, { useContext, useReducer, useMemo, useState } from 'react';
-import { useApp } from 'react-admin-base';
+import React, { useContext, useMemo, useState } from 'react';
+import { useApp, useLocalStorage } from 'react-admin-base';
 import { IntlProvider } from 'react-intl';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
@@ -20,23 +20,24 @@ export function useLanguage() {
   return useContext(LanguageContext);
 }
 
-export default function LanguageProvider({ defaultLanguage, languages, children }) {
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }) {
   const app = useApp();
+  
+  const preferredLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
 
-  const preferredLanguage = (navigator.languages && navigator.languages[0]) ||
-    navigator.language;
-
-  const [ lang, setLang ] = useReducer((oldValue, newValue) => {
-    localStorage.setItem(app.id + "_" + 'language', newValue);
-    return newValue;
-  }, localStorage.getItem(app.id + "_" + 'language') || null);
+  const [ lang, setLang ] = useLocalStorage(app.id + "_language");
 
   const activeLanguageKey = (!!lang && languages[lang] && lang) || (languages[preferredLanguage] && preferredLanguage) || (languages[defaultLanguage] && defaultLanguage);
   const activeLanguage = languages[activeLanguageKey];
-
-  const messages = useMemo(() => ({ ...(_languages[activeLanguageKey] || _languages.en), ...activeLanguage.messages }), [activeLanguage])
   const value = useMemo(() => [ activeLanguage, languages, setLang], [ activeLanguage, languages, setLang]);
 
+  const originalMessages = (loader && loader(activeLanguage)) || activeLanguage.messages;
+
+  const messages = useMemo(() => originalMessages && ({ ...(_languages[activeLanguageKey] || _languages.en), ...originalMessages }), [originalMessages, activeLanguage]);
+
+  if (!messages)
+    return null;
+
   return <IntlProvider locale={activeLanguageKey} messages={messages}>
     <LanguageContext.Provider value={value}>
       { children }
@@ -47,14 +48,17 @@ export default function LanguageProvider({ defaultLanguage, languages, children
 export function LanguageSwitcher() {
   const [show, setShow] = useState(false);
   const [ activeLang, languages, setLanguage ] = useLanguage();
+  
+  if (Object.keys(languages).length <= 1)
+    return null;
 
   return <Dropdown isOpen={show} toggle={() => setShow(!show)}>
-      <DropdownToggle className="nav-flag dropdown-toggle show" nav caret>
-          <img width="20" src={ activeLang.icon } alt={activeLang.name} />
+      <DropdownToggle className="nav-flag" nav caret>
+          { activeLang.icon && <img width="20" className="me-1" src={ activeLang.icon } alt={activeLang.name} /> } {activeLang.name}
       </DropdownToggle>
-      <DropdownMenu end>
+      <DropdownMenu>
           { Object.entries(languages).map(([key, value] : any) => <DropdownItem key={key} active={activeLang === value} onClick={() => setLanguage(key)}>
-              <img width="20" src={value.icon} alt={value.name} /> <span className="align-middle">{ value.name }</span>
+              {value.icon && <img width="20" className="me-1" src={value.icon} alt={value.name} /> } <span className="align-middle">{ value.name }</span>
           </DropdownItem>) }
       </DropdownMenu>
   </Dropdown>;

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/Components/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, Dispatch, useContext, useEffect, useMemo, useReducer, useRef } from "react";
-import { useApp } from "react-admin-base";
+import { useApp, useLocalStorage } from "react-admin-base";
 
 const ThemeContext = createContext(null as any);
 const AllThemesContext = createContext(null as any);
@@ -12,19 +12,6 @@ export function useAllThemes() {
 	return useContext(AllThemesContext);	
 }
 
-function useLocalStorage(key: string) : [string, Dispatch<string>] {
-	const app = useApp();
-	
-	const _key = app.id + '_' + key;
-	
-	const previousValue = useMemo(() => localStorage.getItem(_key), [_key]);
-	
-	return useReducer((_: string, newValue) => {
-		localStorage.setItem(_key, newValue);
-		return newValue;
-	}, previousValue);
-}
-
 export default function ThemeProvider({ themes, defaultTheme, children }) {
 	const state = useLocalStorage('theme');
 	const [ theme, setTheme ] = state;

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,