@licklist/design 0.78.5-dev.91 → 0.78.5-dev.93

package/dist/v2/pages/auth/CreatePassword/CreatePasswordPage.js

@@ -0,0 +1,377 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { AuthLayout } from '../AuthLayout/AuthLayout.js';
+import { FormField } from '../../../components/FormField/FormField.js';
+import { Button } from '../../../components/Button/Button.js';
+import '../../../components/Button/GhostButton.scss.js';
+import { PasswordTypeIcon, PasswordRequirementIcon } from '../../../icons/index.js';
+import './CreatePasswordPage.scss.js';
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var CreatePasswordPage = function(param) {
+    var onSubmit = param.onSubmit, onResetInstead = param.onResetInstead, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, error = param.error;
+    var t = useTranslation([
+        'Validation',
+        'User'
+    ]).t;
+    var _useForm = useForm(), register = _useForm.register, handleSubmit = _useForm.handleSubmit, watch = _useForm.watch;
+    var password = watch('password', '');
+    var confirmPassword = watch('confirmPassword', '');
+    var hasNumber = /\d/.test(password);
+    var hasCapital = /[A-Z]/.test(password);
+    var hasMinLength = password.length >= 8;
+    var criteriaCount = [
+        hasNumber,
+        hasCapital,
+        hasMinLength
+    ].filter(Boolean).length;
+    var getStrengthColor = function() {
+        if (password.length === 0) return 'transparent';
+        if (criteriaCount <= 1) return 'var(--red-600)';
+        if (criteriaCount === 2) return 'var(--orange-500)';
+        return 'var(--green-600)';
+    };
+    var getStrengthWidth = function() {
+        if (password.length === 0) return '0%';
+        if (criteriaCount <= 1) return '33%';
+        if (criteriaCount === 2) return '66%';
+        return '100%';
+    };
+    var getStrengthLabel = function() {
+        if (password.length === 0) return '';
+        if (criteriaCount <= 1) return t('User:passwordStrengthWeak');
+        if (criteriaCount === 2) return t('User:passwordStrengthMedium');
+        return t('User:passwordStrengthStrong');
+    };
+    var passwordsMatch = password === confirmPassword && confirmPassword.length > 0;
+    var showMatchIndicator = confirmPassword.length > 0;
+    var onFormSubmit = function() {
+        var _ref = _async_to_generator(function(data) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            onSubmit(data.password)
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function onFormSubmit(data) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    return /*#__PURE__*/ jsx(AuthLayout, {
+        badgeLabel: t('User:newPassword'),
+        icon: /*#__PURE__*/ jsx(PasswordTypeIcon, {}),
+        title: t('User:newPassword'),
+        subtitle: t('User:newPasswordSubtitle'),
+        error: error,
+        children: /*#__PURE__*/ jsxs("form", {
+            className: "auth-create-password",
+            onSubmit: handleSubmit(onFormSubmit),
+            noValidate: true,
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: "auth-create-password__requirements",
+                    children: [
+                        /*#__PURE__*/ jsx("p", {
+                            className: "auth-create-password__requirements-title",
+                            children: t('User:passwordsMustContain')
+                        }),
+                        /*#__PURE__*/ jsxs("ul", {
+                            className: "auth-create-password__requirements-list",
+                            children: [
+                                /*#__PURE__*/ jsxs("li", {
+                                    className: "auth-create-password__requirement-item",
+                                    children: [
+                                        /*#__PURE__*/ jsx(PasswordRequirementIcon, {
+                                            met: hasNumber,
+                                            visible: password.length > 0
+                                        }),
+                                        t('User:passwordRequireNumber')
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("li", {
+                                    className: "auth-create-password__requirement-item",
+                                    children: [
+                                        /*#__PURE__*/ jsx(PasswordRequirementIcon, {
+                                            met: hasCapital,
+                                            visible: password.length > 0
+                                        }),
+                                        t('User:passwordRequireCapital')
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("li", {
+                                    className: "auth-create-password__requirement-item",
+                                    children: [
+                                        /*#__PURE__*/ jsx(PasswordRequirementIcon, {
+                                            met: hasMinLength,
+                                            visible: password.length > 0
+                                        }),
+                                        t('User:passwordRequireMinLength')
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "auth-create-password__field",
+                    children: [
+                        /*#__PURE__*/ jsx(FormField, _object_spread({
+                            label: t('User:password'),
+                            type: "password",
+                            disabled: isLoading
+                        }, register('password', {
+                            required: t('Validation:fieldRequired', {
+                                attribute: t('User:password')
+                            }),
+                            minLength: {
+                                value: 8,
+                                message: t('Validation:fieldMinLength', {
+                                    attribute: t('User:password'),
+                                    min: 8
+                                })
+                            }
+                        }))),
+                        password.length > 0 && /*#__PURE__*/ jsxs("div", {
+                            className: "auth-create-password__strength",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "auth-create-password__strength-header",
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            children: t('User:passwordStrength')
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            children: getStrengthLabel()
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "auth-create-password__strength-bar-track",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: "auth-create-password__strength-bar-fill",
+                                        style: {
+                                            width: getStrengthWidth(),
+                                            backgroundColor: getStrengthColor()
+                                        }
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "auth-create-password__field--last",
+                    children: [
+                        /*#__PURE__*/ jsx(FormField, _object_spread({
+                            label: t('User:confirmPassword'),
+                            type: "password",
+                            disabled: isLoading
+                        }, register('confirmPassword', {
+                            required: t('Validation:fieldRequired', {
+                                attribute: t('User:confirmPassword')
+                            }),
+                            validate: function(value) {
+                                return value === password || t('Validation:fieldDoesntMatchField', {
+                                    field1: t('User:confirmPassword'),
+                                    field2: t('User:password')
+                                });
+                            }
+                        }))),
+                        showMatchIndicator && /*#__PURE__*/ jsxs("div", {
+                            className: "auth-create-password__match auth-create-password__match--".concat(passwordsMatch ? 'match' : 'no-match'),
+                            children: [
+                                /*#__PURE__*/ jsx(PasswordRequirementIcon, {
+                                    met: passwordsMatch
+                                }),
+                                passwordsMatch ? t('User:passwordsMatch') : t('User:passwordsDoNotMatch')
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "auth-create-password__actions",
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "submit",
+                            variant: "primary",
+                            isLoading: isLoading,
+                            disabled: isLoading,
+                            children: t('User:submit')
+                        }),
+                        onResetInstead && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "auth-create-password__reset-link",
+                            onClick: onResetInstead,
+                            disabled: isLoading,
+                            children: t('User:resetPasswordInstead')
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { CreatePasswordPage };

package/dist/v2/pages/auth/CreatePassword/CreatePasswordPage.scss.js

@@ -0,0 +1,6 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".auth-create-password{display:flex;flex-direction:column;gap:0}.auth-create-password__requirements{margin-bottom:24px}.auth-create-password__requirements-title{color:var(--label-primary);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:600;line-height:1.4;margin:0 0 8px;padding:0}.auth-create-password__requirements-list{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.auth-create-password__requirement-item{align-items:center;color:var(--label-primary);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:400;gap:8px;line-height:1.4}.auth-create-password__requirement-icon{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.auth-create-password__requirement-icon--met{color:var(--label-status-success)}.auth-create-password__requirement-icon--unmet{color:var(--label-status-error)}.auth-create-password__requirement-icon--neutral{color:var(--label-tertiary)}.auth-create-password__field{margin-bottom:16px}.auth-create-password__field--last{margin-bottom:24px}.auth-create-password__strength{margin-top:8px}.auth-create-password__strength-header{color:var(--label-secondary);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:12px;justify-content:space-between;margin-bottom:4px}.auth-create-password__strength-bar-track{background-color:var(--surface-tertiary);border-radius:4px;height:4px;overflow:hidden}.auth-create-password__strength-bar-fill{border-radius:4px;height:100%;transition:width .3s ease,background-color .3s ease}.auth-create-password__match{align-items:center;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:13px;gap:8px;margin-top:8px}.auth-create-password__match--match{color:var(--label-status-success)}.auth-create-password__match--no-match{color:var(--label-status-error)}.auth-create-password__actions{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.auth-create-password__reset-link{background:none;border:none;color:var(--label-action);cursor:pointer;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:400;padding:0;text-decoration:underline}.auth-create-password__reset-link:hover{opacity:.8}.auth-create-password__error{align-items:center;background-color:var(--surface-status-error);border:1px solid var(--border-status-error);border-radius:8px;color:var(--label-status-error);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:13px;gap:8px;margin-bottom:16px;padding:10px 12px}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/{auth → v2/pages/auth}/Login/LoginPage.js

@@ -1,13 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEffect } from 'react';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
+import 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import useAlert from '@licklist/plugins/dist/context/app/hooks/useAlert';
-import FormCard from '../../static/FormCard.js';
-import Logo from '../../logo/Logo.js';
-import { ReactComponent as SvgBookedit } from '../../assets/logo/bookedit.svg.js';
-import { LoginFormComponent } from './LoginFormComponent.js';
+import { AuthLayout } from '../AuthLayout/AuthLayout.js';
+import { FormField } from '../../../components/FormField/FormField.js';
+import { Button } from '../../../components/Button/Button.js';
+import '../../../components/Button/GhostButton.scss.js';
+import { SecurityIcon } from '../../../icons/index.js';
+import emailRule from '@licklist/plugins/dist/validation/Rules/emailRule';
+import './LoginPage.scss.js';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -38,6 +39,34 @@ function _async_to_generator(fn) {
         });
     };
 }
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _ts_generator(thisArg, body) {
     var f, y, t, g, _ = {
         label: 0,
@@ -134,29 +163,20 @@ function _ts_generator(thisArg, body) {
     }
 }
 var LoginPage = function(param) {
-    var onSubmit = param.onSubmit, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, error = param.error;
+    var onSubmit = param.onSubmit, onForgotPassword = param.onForgotPassword, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, error = param.error, version = param.version;
     var t = useTranslation([
+        'Validation',
         'User'
     ]).t;
-    var showAlert = useAlert().showAlert;
-    useEffect(function() {
-        if (error) {
-            showAlert({
-                type: 'error',
-                message: error
-            });
-        }
-    }, [
-        error
-    ]);
-    var handleSubmit = function() {
-        var _ref = _async_to_generator(function(credentials) {
+    var _useForm = useForm(), register = _useForm.register, handleSubmit = _useForm.handleSubmit;
+    var onFormSubmit = function() {
+        var _ref = _async_to_generator(function(data) {
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
                         return [
                             4,
-                            onSubmit(credentials.email, credentials.password)
+                            onSubmit(data.email, data.password)
                         ];
                     case 1:
                         _state.sent();
@@ -166,36 +186,67 @@ var LoginPage = function(param) {
                 }
             });
         });
-        return function handleSubmit(credentials) {
+        return function onFormSubmit(data) {
             return _ref.apply(this, arguments);
         };
     }();
-    return /*#__PURE__*/ jsx(Row, {
-        className: "justify-content-center",
-        children: /*#__PURE__*/ jsxs(Col, {
-            xs: true,
-            sm: 12,
-            md: 7,
-            lg: 6,
-            xl: 5,
-            className: "align-self-center",
+    return /*#__PURE__*/ jsx(AuthLayout, {
+        badgeLabel: t('User:login'),
+        icon: /*#__PURE__*/ jsx(SecurityIcon, {}),
+        title: t('User:login'),
+        subtitle: t('User:loginSubtitle'),
+        version: version,
+        error: error,
+        children: /*#__PURE__*/ jsxs("form", {
+            className: "auth-login",
+            onSubmit: handleSubmit(onFormSubmit),
+            noValidate: true,
             children: [
-                /*#__PURE__*/ jsx("h1", {
-                    className: "text-center",
-                    children: t('User:loginTitle')
+                /*#__PURE__*/ jsx(FormField, _object_spread({
+                    className: "auth-login__field",
+                    label: t('User:emailAddress'),
+                    type: "email",
+                    disabled: isLoading
+                }, register('email', {
+                    required: t('Validation:fieldRequired', {
+                        attribute: t('User:email')
+                    }),
+                    pattern: {
+                        value: emailRule,
+                        message: t('Validation:fieldValidEmail', {
+                            attribute: t('User:email')
+                        })
+                    }
+                }))),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "auth-login__field--last",
+                    children: [
+                        /*#__PURE__*/ jsx(FormField, _object_spread({
+                            label: t('User:password'),
+                            type: "password",
+                            disabled: isLoading
+                        }, register('password', {
+                            required: t('Validation:fieldRequired', {
+                                attribute: t('User:password')
+                            })
+                        }))),
+                        onForgotPassword && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "auth-login__forgot",
+                            onClick: onForgotPassword,
+                            disabled: isLoading,
+                            children: t('User:forgotPassword')
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: "login d-flex pb-4 justify-content-center",
-                    children: /*#__PURE__*/ jsx(Logo, {
-                        logo: /*#__PURE__*/ jsx(SvgBookedit, {})
-                    })
-                }),
-                /*#__PURE__*/ jsx(FormCard, {
-                    children: /*#__PURE__*/ jsx(LoginFormComponent, {
+                    className: "auth-login__actions",
+                    children: /*#__PURE__*/ jsx(Button, {
+                        type: "submit",
+                        variant: "primary",
                         isLoading: isLoading,
-                        setIsLoading: function() {},
-                        onSubmit: handleSubmit,
-                        invitation: null
+                        disabled: isLoading,
+                        children: t('User:login')
                     })
                 })
             ]

package/dist/v2/pages/auth/Login/LoginPage.scss.js

@@ -0,0 +1,6 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".auth-login{display:flex;flex-direction:column;gap:0}.auth-login__field{margin-bottom:16px}.auth-login__field--last{margin-bottom:24px}.auth-login__forgot{background:none;border:none;color:var(--label-action);cursor:pointer;display:inline-block;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:400;margin-top:8px;padding:0;text-decoration:underline}.auth-login__forgot:hover{opacity:.8}.auth-login__actions{margin-bottom:0}.auth-login__error{align-items:center;background-color:var(--surface-status-error);border:1px solid var(--border-status-error);border-radius:8px;color:var(--label-status-error);display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:13px;gap:8px;margin-bottom:16px;padding:10px 12px}";
+styleInject(css_248z);
+
+export { css_248z as default };