react-admin-base-bootstrap 0.7.4 → 0.7.7

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';
@@ -67,10 +67,7 @@ export function ActionsColumn() {
 export function Column(props) {
     const [params, setParams] = useContext(DataTableContext);
     const { sort } = props;
-    return React.createElement("th", Object.assign({}, props, { style: props.sort && { cursor: 'pointer' }, onClick: props.sort && (() => setParams({
-            sort: sort,
-            desc: params.sort === sort ? !params.desc : true
-        })) }),
+    return React.createElement("th", Object.assign({}, props, { style: props.sort && { cursor: 'pointer' }, onClick: props.sort && (() => setParams(params => (Object.assign(Object.assign({}, params), { sort: sort, desc: params.sort === sort ? !params.desc : true })))) }),
         props.children,
         " ",
         sort && params.sort && params.sort === sort ? params.desc ?
@@ -80,7 +77,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 +108,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/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, autoComplete: "new-password" }),
+        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, autoComplete: "new-password" }))));
+}

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

@@ -0,0 +1,4 @@
+export default function RichTextEditor({ value, onChange }: {
+    value: any;
+    onChange: any;
+}): JSX.Element;

package/lib/esm/Components/RichTextEditor.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS } from "@lexical/markdown";
+import ToolbarPlugin from '../Lexical/ToolbarPlugin';
+function Placeholder() {
+    return React.createElement("div", { className: "editor-placeholder" }, "Enter some rich text...");
+}
+const editorConfig = {
+    namespace: '',
+    // Handling of errors during update
+    onError(error) {
+        throw error;
+    },
+    // Any custom nodes go here
+    nodes: [
+        HeadingNode,
+        ListNode,
+        ListItemNode,
+        QuoteNode,
+        CodeNode,
+        CodeHighlightNode,
+        TableNode,
+        TableCellNode,
+        TableRowNode,
+        AutoLinkNode,
+        LinkNode
+    ]
+};
+export default function RichTextEditor({ value, onChange }) {
+    return React.createElement(LexicalComposer, { initialConfig: editorConfig },
+        React.createElement("div", { className: "editor-container" },
+            React.createElement(ToolbarPlugin, null),
+            React.createElement("div", { className: "editor-inner" },
+                React.createElement(RichTextPlugin, { contentEditable: React.createElement(ContentEditable, { className: "editor-input" }), placeholder: React.createElement(Placeholder, null) }),
+                React.createElement(HistoryPlugin, null),
+                React.createElement(AutoFocusPlugin, null),
+                React.createElement(ListPlugin, null),
+                React.createElement(LinkPlugin, null),
+                React.createElement(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }))));
+}

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.4",
+  "version": "0.7.7",
   "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.1",
+    "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';
@@ -64,10 +64,11 @@ export function Column(props) {
     return <th
         {...props}
         style={props.sort && {cursor: 'pointer'}}
-        onClick={props.sort && (() => setParams({
-            sort: sort,
+        onClick={props.sort && (() => setParams(params => ({
+            ...params,
+	    sort: sort,
             desc: params.sort === sort ? !params.desc : true
-        }))}
+        })))}
     >{props.children} {sort && params.sort && params.sort === sort ? params.desc ?
         <i className="fa fa-sort-down"/> :
         <i className="fa fa-sort-up"/> : ''}
@@ -77,7 +78,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 +99,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 +113,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/PasswordInput.tsx

@@ -0,0 +1,95 @@
+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}
+			autoComplete="new-password"
+		/>
+		<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}
+					autoComplete="new-password"
+				/>
+			</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,