@iankibetsh/shframework 4.4.6 → 4.4.8

package/dist/library.js

@@ -2059,7 +2059,7 @@ const _hoisted_9$7 = {
   key: 1,
   class: "dropdown-item sh-suggest-no-results"
 };
-const _hoisted_10$6 = {
+const _hoisted_10$7 = {
   key: 2,
   class: "dropdown-item sh-suggest-no-input"
 };
@@ -2261,7 +2261,7 @@ return (_ctx, _cache) => {
               }), 128 /* KEYED_FRAGMENT */))
             : (vue.unref(searchText))
               ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$7, " No results found "))
-              : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$6, " Type to search... "))
+              : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$7, " Type to search... "))
         ], 8 /* PROPS */, _hoisted_7$8)
       ]))
     : vue.createCommentVNode("v-if", true)
@@ -2618,8 +2618,8 @@ const _hoisted_6$8 = { key: 1 };
 const _hoisted_7$7 = { class: "row" };
 const _hoisted_8$6 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_9$6 = { class: "col-md-12" };
-const _hoisted_10$5 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
-const _hoisted_11$5 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_10$6 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
+const _hoisted_11$6 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_12$4 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_13$4 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_14$4 = ["data-cy", "name", "onFocus", "onUpdate:modelValue"];
@@ -2714,7 +2714,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     ref: 'file_'+field,
                     onChange: $event => ($options.handleFileUpload(field)),
                     type: "file"
-                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$5))
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$6))
                 : vue.createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'numeric')
                 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -2726,7 +2726,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "number"
-                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$5)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$6)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -3204,12 +3204,12 @@ const _hoisted_6$7 = {
 const _hoisted_7$6 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* HOISTED */);
 const _hoisted_8$5 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* HOISTED */);
 const _hoisted_9$5 = /*#__PURE__*/vue.createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* HOISTED */);
-const _hoisted_10$4 = [
+const _hoisted_10$5 = [
   _hoisted_7$6,
   _hoisted_8$5,
   _hoisted_9$5
 ];
-const _hoisted_11$4 = ["innerHTML"];
+const _hoisted_11$5 = ["innerHTML"];
 const _hoisted_12$3 = ["disabled"];
 const _hoisted_13$3 = {
   key: 0,
@@ -3497,14 +3497,14 @@ return (_ctx, _cache) => {
                     }, null, 10 /* CLASS, PROPS */, _hoisted_5$8))
                   : vue.createCommentVNode("v-if", true),
                 (vue.unref(isFloating))
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$7, [..._hoisted_10$4]))
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$7, [..._hoisted_10$5]))
                   : vue.createCommentVNode("v-if", true),
                 (field.helper)
                   ? (vue.openBlock(), vue.createElementBlock("div", {
                       key: 3,
                       class: vue.normalizeClass(getElementClass('helperText')),
                       innerHTML: field.helper
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_11$4))
+                    }, null, 10 /* CLASS, PROPS */, _hoisted_11$5))
                   : vue.createCommentVNode("v-if", true),
                 (validationErrors.value[field.field])
                   ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -4097,8 +4097,8 @@ const _hoisted_9$4 = {
   key: 1,
   class: "page-link"
 };
-const _hoisted_10$3 = ["onClick"];
-const _hoisted_11$3 = { key: 1 };
+const _hoisted_10$4 = ["onClick"];
+const _hoisted_11$4 = { key: 1 };
 const _hoisted_12$2 = {
   key: 0,
   class: "text-center"
@@ -4167,7 +4167,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             key: 2,
                             onClick: $event => ($options.changeTableKey('page',page)),
                             class: "page-link"
-                          }, vue.toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_10$3))
+                          }, vue.toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_10$4))
                   ], 2 /* CLASS */))
                 }), 128 /* KEYED_FRAGMENT */)),
                 vue.createElementVNode("li", {
@@ -4182,7 +4182,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]))
           : vue.createCommentVNode("v-if", true)
       ]))
-    : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$3, [
+    : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$4, [
         (this.pagination_data.loading === 1 && $props.loadMore && $props.hideLoadMore)
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, [..._hoisted_14$2]))
           : vue.createCommentVNode("v-if", true),
@@ -4419,8 +4419,8 @@ const _hoisted_6$4 = {
 const _hoisted_7$3 = { class: "sh-range-preset" };
 const _hoisted_8$3 = ["onClick"];
 const _hoisted_9$3 = { class: "border-top" };
-const _hoisted_10$2 = { class: "dropdown-item d-flex flex-column" };
-const _hoisted_11$2 = /*#__PURE__*/vue.createElementVNode("span", null, "Custom", -1 /* HOISTED */);
+const _hoisted_10$3 = { class: "dropdown-item d-flex flex-column" };
+const _hoisted_11$3 = /*#__PURE__*/vue.createElementVNode("span", null, "Custom", -1 /* HOISTED */);
 
 
 
@@ -4556,8 +4556,8 @@ return (_ctx, _cache) => {
         ]),
         vue.createElementVNode("ul", null, [
           vue.createElementVNode("li", _hoisted_9$3, [
-            vue.createElementVNode("div", _hoisted_10$2, [
-              _hoisted_11$2,
+            vue.createElementVNode("div", _hoisted_10$3, [
+              _hoisted_11$3,
               vue.createElementVNode("div", null, [
                 vue.withDirectives(vue.createElementVNode("input", {
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((customFrom).value = $event)),
@@ -4609,13 +4609,13 @@ const _hoisted_7$2 = {
   key: 1,
   class: "row"
 };
-const _hoisted_8$2 = { class: "col-12 mb-3 d-flex justify-content-start" };
+const _hoisted_8$2 = { class: "col-12 mb-3 d-flex justify-content-between flex-column flex-md-row flex-lg-row" };
 const _hoisted_9$2 = ["placeholder"];
-const _hoisted_10$1 = {
+const _hoisted_10$2 = {
   key: 0,
   class: "input-group-text exact_checkbox"
 };
-const _hoisted_11$1 = /*#__PURE__*/vue.createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* HOISTED */);
+const _hoisted_11$2 = /*#__PURE__*/vue.createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* HOISTED */);
 const _hoisted_12$1 = {
   key: 0,
   class: "sh-range-selector"
@@ -5103,7 +5103,7 @@ return (_ctx, _cache) => {
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
           vue.createElementVNode("div", _hoisted_8$2, [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'ms-2':''])
+              class: vue.normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
             }, [
               vue.withDirectives(vue.createElementVNode("input", {
                 onKeydown: _cache[1] || (_cache[1] = (...args) => (_ctx.userTyping && _ctx.userTyping(...args))),
@@ -5117,7 +5117,7 @@ return (_ctx, _cache) => {
                 [vue.vModelText, _ctx.filter_value]
               ]),
               (_ctx.filter_value.length > 1)
-                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$1, [
+                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$2, [
                     vue.withDirectives(vue.createElementVNode("input", {
                       onChange: _cache[5] || (_cache[5] = (...args) => (_ctx.reloadData && _ctx.reloadData(...args))),
                       value: true,
@@ -5126,7 +5126,7 @@ return (_ctx, _cache) => {
                     }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
                       [vue.vModelCheckbox, _ctx.exactMatch]
                     ]),
-                    _hoisted_11$1
+                    _hoisted_11$2
                   ]))
                 : vue.createCommentVNode("v-if", true)
             ], 2 /* CLASS */),
@@ -5854,8 +5854,8 @@ const _hoisted_9$1 = {
   id: "permissions-content",
   class: "col-md-9 py-4 px-4"
 };
-const _hoisted_10 = { class: "p-2 rounded-2 bg-white h-100" };
-const _hoisted_11 = {
+const _hoisted_10$1 = { class: "p-2 rounded-2 bg-white h-100" };
+const _hoisted_11$1 = {
   key: 0,
   class: "alert alert-info"
 };
@@ -6000,9 +6000,9 @@ return (_ctx, _cache) => {
           ]))
     ]),
     vue.createElementVNode("div", _hoisted_9$1, [
-      vue.createElementVNode("div", _hoisted_10, [
+      vue.createElementVNode("div", _hoisted_10$1, [
         (loading.value)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, " loading ... "))
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, " loading ... "))
           : (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
               vue.createElementVNode("div", _hoisted_13, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modulePermissions.value, (permissions) => {
@@ -6655,24 +6655,30 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 0,
-  class: "sh-login-section"
+  class: "sh-forgot-section",
+  style: {"min-width":"400px"}
 };
 const _hoisted_3 = { class: "sh-auth-footer" };
-const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("strong", { class: "sh-forgot-link text-primary" }, "Forgotten password?", -1 /* HOISTED */));
-const _hoisted_5 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("strong", { class: "bi-dot" }, null, -1 /* HOISTED */));
-const _hoisted_6 = {
+const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("i", { class: "bi bi-arrow-left" }, null, -1 /* HOISTED */));
+const _hoisted_5 = {
   key: 1,
+  class: "sh-login-section"
+};
+const _hoisted_6 = { class: "sh-auth-footer" };
+const _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("strong", { class: "bi-dot" }, null, -1 /* HOISTED */));
+const _hoisted_8 = {
+  key: 2,
   class: "sh-register-section"
 };
-const _hoisted_7 = {
+const _hoisted_9 = {
   key: 0,
   class: "sh-register-title"
 };
-const _hoisted_8 = {
+const _hoisted_10 = {
   key: 1,
   class: "sh-register-link"
 };
-const _hoisted_9 = { class: "sh-auth-footer" };
+const _hoisted_11 = { class: "sh-auth-footer" };
 
 var script = {
   __name: 'ShAuth',
@@ -6684,6 +6690,7 @@ userStore.setUser();
 const {user} = pinia.storeToRefs(userStore);
 const section = vue.ref('login');
 const registerEndpoint = vue.inject('registerEndpoint');
+const forgotEndpoint = vue.inject('forgotEndpoint');
 const loginEndpoint = vue.inject('loginEndpoint');
 const registrationFields = vue.inject('registrationFields');
 const registerTitle = vue.inject('registerTitle');
@@ -6694,7 +6701,12 @@ function goToSection(newSection){
   section.value = newSection;
 }
 vue.watch(user,(newUser) => {
-  if(newUser.value) {
+  if(newUser.value && redirectLogin) {
+    router.push(redirectLogin);
+  }
+});
+vue.onMounted(()=>{
+  if(user.value && redirectLogin){
     router.push(redirectLogin);
   }
 });
@@ -6704,6 +6716,10 @@ function loginSuccessful(res){
   window.location.href = redirectLogin;
 }
 
+const forgotSuccessful = ()=>{
+  shRepo.showToast('Reset link sent to your email');
+};
+
 return (_ctx, _cache) => {
   return (vue.unref(user))
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -6711,8 +6727,28 @@ return (_ctx, _cache) => {
         vue.createElementVNode("strong", null, vue.toDisplayString(vue.unref(user).name), 1 /* TEXT */)
       ]))
     : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-        (section.value === 'login')
+        (section.value === 'forgot')
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+              vue.createVNode(script$u, {
+                class: "sh-login-form",
+                fields: ['email'],
+                "action-label": "Send Reset Link",
+                action: vue.unref(forgotEndpoint),
+                "success-callback": forgotSuccessful
+              }, null, 8 /* PROPS */, ["action"]),
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createElementVNode("strong", {
+                  onClick: _cache[0] || (_cache[0] = $event => (goToSection('login'))),
+                  class: "sh-register-link text-primary"
+                }, [
+                  _hoisted_4,
+                  vue.createTextVNode(" Back to Login ")
+                ])
+              ])
+            ]))
+          : vue.createCommentVNode("v-if", true),
+        (section.value === 'login')
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
               vue.createVNode(script$u, {
                 class: "sh-login-form",
                 fields: ['email','password'],
@@ -6720,23 +6756,26 @@ return (_ctx, _cache) => {
                 action: vue.unref(loginEndpoint),
                 "success-callback": loginSuccessful
               }, null, 8 /* PROPS */, ["action"]),
-              vue.createElementVNode("div", _hoisted_3, [
-                _hoisted_4,
-                _hoisted_5,
+              vue.createElementVNode("div", _hoisted_6, [
+                vue.createElementVNode("strong", {
+                  class: "sh-forgot-link text-primary",
+                  onClick: _cache[1] || (_cache[1] = $event => (goToSection('forgot')))
+                }, "Forgotten password?"),
+                _hoisted_7,
                 vue.createElementVNode("strong", {
-                  onClick: _cache[0] || (_cache[0] = $event => (goToSection('register'))),
+                  onClick: _cache[2] || (_cache[2] = $event => (goToSection('register'))),
                   class: "sh-register-link text-primary"
                 }, "Sign Up")
               ])
             ]))
           : vue.createCommentVNode("v-if", true),
         (section.value === 'register')
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
               (vue.unref(registerTitle))
-                ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_7, vue.toDisplayString(vue.unref(registerTitle)), 1 /* TEXT */))
+                ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_9, vue.toDisplayString(vue.unref(registerTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
               (vue.unref(registerSubTitle))
-                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
+                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
               vue.createVNode(script$u, {
                 class: "sh-login-form",
@@ -6745,9 +6784,9 @@ return (_ctx, _cache) => {
                 action: vue.unref(registerEndpoint),
                 "success-callback": loginSuccessful
               }, null, 8 /* PROPS */, ["fields", "action"]),
-              vue.createElementVNode("div", _hoisted_9, [
+              vue.createElementVNode("div", _hoisted_11, [
                 vue.createElementVNode("strong", {
-                  onClick: _cache[1] || (_cache[1] = $event => (goToSection('login'))),
+                  onClick: _cache[3] || (_cache[3] = $event => (goToSection('login'))),
                   class: "sh-register-link text-primary"
                 }, "Already have an account?")
               ])
@@ -6782,6 +6821,7 @@ const ShFrontend = {
     const swalPosition = options.swalPosition ?? 'top-end';
     const loginEndpoint = options.loginEndpoint ?? 'auth/login';
     const registerEndpoint = options.registerEndpoint ?? 'auth/register';
+    const forgotEndpoint = options.forgotEndpoint ?? 'auth/forgot-password';
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
@@ -6804,6 +6844,7 @@ const ShFrontend = {
     app.provide('loginUrl', loginUrl);
     app.provide('shFormElementClasses',defaultFormElementClasses);
     app.provide('noRecordsComponent',noRecordsComponent);
+    app.provide('forgotEndpoint',forgotEndpoint);
     window.swalPosition = swalPosition;
     if(options.router) {
       options.router.addRoute({

package/dist/library.mjs

@@ -2047,7 +2047,7 @@ const _hoisted_9$7 = {
   key: 1,
   class: "dropdown-item sh-suggest-no-results"
 };
-const _hoisted_10$6 = {
+const _hoisted_10$7 = {
   key: 2,
   class: "dropdown-item sh-suggest-no-input"
 };
@@ -2249,7 +2249,7 @@ return (_ctx, _cache) => {
               }), 128 /* KEYED_FRAGMENT */))
             : (unref(searchText))
               ? (openBlock(), createElementBlock("li", _hoisted_9$7, " No results found "))
-              : (openBlock(), createElementBlock("li", _hoisted_10$6, " Type to search... "))
+              : (openBlock(), createElementBlock("li", _hoisted_10$7, " Type to search... "))
         ], 8 /* PROPS */, _hoisted_7$8)
       ]))
     : createCommentVNode("v-if", true)
@@ -2606,8 +2606,8 @@ const _hoisted_6$8 = { key: 1 };
 const _hoisted_7$7 = { class: "row" };
 const _hoisted_8$6 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_9$6 = { class: "col-md-12" };
-const _hoisted_10$5 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
-const _hoisted_11$5 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_10$6 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
+const _hoisted_11$6 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_12$4 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_13$4 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_14$4 = ["data-cy", "name", "onFocus", "onUpdate:modelValue"];
@@ -2702,7 +2702,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     ref: 'file_'+field,
                     onChange: $event => ($options.handleFileUpload(field)),
                     type: "file"
-                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$5))
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_10$6))
                 : createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'numeric')
                 ? withDirectives((openBlock(), createElementBlock("input", {
@@ -2714,7 +2714,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "number"
-                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$5)), [
+                  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_11$6)), [
                     [vModelText, _ctx.form_elements[field]]
                   ])
                 : createCommentVNode("v-if", true),
@@ -3192,12 +3192,12 @@ const _hoisted_6$7 = {
 const _hoisted_7$6 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* HOISTED */);
 const _hoisted_8$5 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* HOISTED */);
 const _hoisted_9$5 = /*#__PURE__*/createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* HOISTED */);
-const _hoisted_10$4 = [
+const _hoisted_10$5 = [
   _hoisted_7$6,
   _hoisted_8$5,
   _hoisted_9$5
 ];
-const _hoisted_11$4 = ["innerHTML"];
+const _hoisted_11$5 = ["innerHTML"];
 const _hoisted_12$3 = ["disabled"];
 const _hoisted_13$3 = {
   key: 0,
@@ -3485,14 +3485,14 @@ return (_ctx, _cache) => {
                     }, null, 10 /* CLASS, PROPS */, _hoisted_5$8))
                   : createCommentVNode("v-if", true),
                 (unref(isFloating))
-                  ? (openBlock(), createElementBlock("div", _hoisted_6$7, [..._hoisted_10$4]))
+                  ? (openBlock(), createElementBlock("div", _hoisted_6$7, [..._hoisted_10$5]))
                   : createCommentVNode("v-if", true),
                 (field.helper)
                   ? (openBlock(), createElementBlock("div", {
                       key: 3,
                       class: normalizeClass(getElementClass('helperText')),
                       innerHTML: field.helper
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_11$4))
+                    }, null, 10 /* CLASS, PROPS */, _hoisted_11$5))
                   : createCommentVNode("v-if", true),
                 (validationErrors.value[field.field])
                   ? (openBlock(), createElementBlock("div", {
@@ -4085,8 +4085,8 @@ const _hoisted_9$4 = {
   key: 1,
   class: "page-link"
 };
-const _hoisted_10$3 = ["onClick"];
-const _hoisted_11$3 = { key: 1 };
+const _hoisted_10$4 = ["onClick"];
+const _hoisted_11$4 = { key: 1 };
 const _hoisted_12$2 = {
   key: 0,
   class: "text-center"
@@ -4155,7 +4155,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             key: 2,
                             onClick: $event => ($options.changeTableKey('page',page)),
                             class: "page-link"
-                          }, toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_10$3))
+                          }, toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_10$4))
                   ], 2 /* CLASS */))
                 }), 128 /* KEYED_FRAGMENT */)),
                 createElementVNode("li", {
@@ -4170,7 +4170,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]))
           : createCommentVNode("v-if", true)
       ]))
-    : (openBlock(), createElementBlock("div", _hoisted_11$3, [
+    : (openBlock(), createElementBlock("div", _hoisted_11$4, [
         (this.pagination_data.loading === 1 && $props.loadMore && $props.hideLoadMore)
           ? (openBlock(), createElementBlock("div", _hoisted_12$2, [..._hoisted_14$2]))
           : createCommentVNode("v-if", true),
@@ -4407,8 +4407,8 @@ const _hoisted_6$4 = {
 const _hoisted_7$3 = { class: "sh-range-preset" };
 const _hoisted_8$3 = ["onClick"];
 const _hoisted_9$3 = { class: "border-top" };
-const _hoisted_10$2 = { class: "dropdown-item d-flex flex-column" };
-const _hoisted_11$2 = /*#__PURE__*/createElementVNode("span", null, "Custom", -1 /* HOISTED */);
+const _hoisted_10$3 = { class: "dropdown-item d-flex flex-column" };
+const _hoisted_11$3 = /*#__PURE__*/createElementVNode("span", null, "Custom", -1 /* HOISTED */);
 
 
 
@@ -4544,8 +4544,8 @@ return (_ctx, _cache) => {
         ]),
         createElementVNode("ul", null, [
           createElementVNode("li", _hoisted_9$3, [
-            createElementVNode("div", _hoisted_10$2, [
-              _hoisted_11$2,
+            createElementVNode("div", _hoisted_10$3, [
+              _hoisted_11$3,
               createElementVNode("div", null, [
                 withDirectives(createElementVNode("input", {
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((customFrom).value = $event)),
@@ -4597,13 +4597,13 @@ const _hoisted_7$2 = {
   key: 1,
   class: "row"
 };
-const _hoisted_8$2 = { class: "col-12 mb-3 d-flex justify-content-start" };
+const _hoisted_8$2 = { class: "col-12 mb-3 d-flex justify-content-between flex-column flex-md-row flex-lg-row" };
 const _hoisted_9$2 = ["placeholder"];
-const _hoisted_10$1 = {
+const _hoisted_10$2 = {
   key: 0,
   class: "input-group-text exact_checkbox"
 };
-const _hoisted_11$1 = /*#__PURE__*/createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* HOISTED */);
+const _hoisted_11$2 = /*#__PURE__*/createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* HOISTED */);
 const _hoisted_12$1 = {
   key: 0,
   class: "sh-range-selector"
@@ -5091,7 +5091,7 @@ return (_ctx, _cache) => {
       ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
           createElementVNode("div", _hoisted_8$2, [
             createElementVNode("div", {
-              class: normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'ms-2':''])
+              class: normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
             }, [
               withDirectives(createElementVNode("input", {
                 onKeydown: _cache[1] || (_cache[1] = (...args) => (_ctx.userTyping && _ctx.userTyping(...args))),
@@ -5105,7 +5105,7 @@ return (_ctx, _cache) => {
                 [vModelText, _ctx.filter_value]
               ]),
               (_ctx.filter_value.length > 1)
-                ? (openBlock(), createElementBlock("span", _hoisted_10$1, [
+                ? (openBlock(), createElementBlock("span", _hoisted_10$2, [
                     withDirectives(createElementVNode("input", {
                       onChange: _cache[5] || (_cache[5] = (...args) => (_ctx.reloadData && _ctx.reloadData(...args))),
                       value: true,
@@ -5114,7 +5114,7 @@ return (_ctx, _cache) => {
                     }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
                       [vModelCheckbox, _ctx.exactMatch]
                     ]),
-                    _hoisted_11$1
+                    _hoisted_11$2
                   ]))
                 : createCommentVNode("v-if", true)
             ], 2 /* CLASS */),
@@ -5842,8 +5842,8 @@ const _hoisted_9$1 = {
   id: "permissions-content",
   class: "col-md-9 py-4 px-4"
 };
-const _hoisted_10 = { class: "p-2 rounded-2 bg-white h-100" };
-const _hoisted_11 = {
+const _hoisted_10$1 = { class: "p-2 rounded-2 bg-white h-100" };
+const _hoisted_11$1 = {
   key: 0,
   class: "alert alert-info"
 };
@@ -5988,9 +5988,9 @@ return (_ctx, _cache) => {
           ]))
     ]),
     createElementVNode("div", _hoisted_9$1, [
-      createElementVNode("div", _hoisted_10, [
+      createElementVNode("div", _hoisted_10$1, [
         (loading.value)
-          ? (openBlock(), createElementBlock("div", _hoisted_11, " loading ... "))
+          ? (openBlock(), createElementBlock("div", _hoisted_11$1, " loading ... "))
           : (openBlock(), createElementBlock("div", _hoisted_12, [
               createElementVNode("div", _hoisted_13, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(modulePermissions.value, (permissions) => {
@@ -6643,24 +6643,30 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 0,
-  class: "sh-login-section"
+  class: "sh-forgot-section",
+  style: {"min-width":"400px"}
 };
 const _hoisted_3 = { class: "sh-auth-footer" };
-const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("strong", { class: "sh-forgot-link text-primary" }, "Forgotten password?", -1 /* HOISTED */));
-const _hoisted_5 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("strong", { class: "bi-dot" }, null, -1 /* HOISTED */));
-const _hoisted_6 = {
+const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("i", { class: "bi bi-arrow-left" }, null, -1 /* HOISTED */));
+const _hoisted_5 = {
   key: 1,
+  class: "sh-login-section"
+};
+const _hoisted_6 = { class: "sh-auth-footer" };
+const _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("strong", { class: "bi-dot" }, null, -1 /* HOISTED */));
+const _hoisted_8 = {
+  key: 2,
   class: "sh-register-section"
 };
-const _hoisted_7 = {
+const _hoisted_9 = {
   key: 0,
   class: "sh-register-title"
 };
-const _hoisted_8 = {
+const _hoisted_10 = {
   key: 1,
   class: "sh-register-link"
 };
-const _hoisted_9 = { class: "sh-auth-footer" };
+const _hoisted_11 = { class: "sh-auth-footer" };
 
 var script = {
   __name: 'ShAuth',
@@ -6672,6 +6678,7 @@ userStore.setUser();
 const {user} = storeToRefs(userStore);
 const section = ref('login');
 const registerEndpoint = inject('registerEndpoint');
+const forgotEndpoint = inject('forgotEndpoint');
 const loginEndpoint = inject('loginEndpoint');
 const registrationFields = inject('registrationFields');
 const registerTitle = inject('registerTitle');
@@ -6682,7 +6689,12 @@ function goToSection(newSection){
   section.value = newSection;
 }
 watch(user,(newUser) => {
-  if(newUser.value) {
+  if(newUser.value && redirectLogin) {
+    router.push(redirectLogin);
+  }
+});
+onMounted(()=>{
+  if(user.value && redirectLogin){
     router.push(redirectLogin);
   }
 });
@@ -6692,6 +6704,10 @@ function loginSuccessful(res){
   window.location.href = redirectLogin;
 }
 
+const forgotSuccessful = ()=>{
+  shRepo.showToast('Reset link sent to your email');
+};
+
 return (_ctx, _cache) => {
   return (unref(user))
     ? (openBlock(), createElementBlock("div", _hoisted_1, [
@@ -6699,8 +6715,28 @@ return (_ctx, _cache) => {
         createElementVNode("strong", null, toDisplayString(unref(user).name), 1 /* TEXT */)
       ]))
     : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        (section.value === 'login')
+        (section.value === 'forgot')
           ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              createVNode(script$u, {
+                class: "sh-login-form",
+                fields: ['email'],
+                "action-label": "Send Reset Link",
+                action: unref(forgotEndpoint),
+                "success-callback": forgotSuccessful
+              }, null, 8 /* PROPS */, ["action"]),
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("strong", {
+                  onClick: _cache[0] || (_cache[0] = $event => (goToSection('login'))),
+                  class: "sh-register-link text-primary"
+                }, [
+                  _hoisted_4,
+                  createTextVNode(" Back to Login ")
+                ])
+              ])
+            ]))
+          : createCommentVNode("v-if", true),
+        (section.value === 'login')
+          ? (openBlock(), createElementBlock("div", _hoisted_5, [
               createVNode(script$u, {
                 class: "sh-login-form",
                 fields: ['email','password'],
@@ -6708,23 +6744,26 @@ return (_ctx, _cache) => {
                 action: unref(loginEndpoint),
                 "success-callback": loginSuccessful
               }, null, 8 /* PROPS */, ["action"]),
-              createElementVNode("div", _hoisted_3, [
-                _hoisted_4,
-                _hoisted_5,
+              createElementVNode("div", _hoisted_6, [
+                createElementVNode("strong", {
+                  class: "sh-forgot-link text-primary",
+                  onClick: _cache[1] || (_cache[1] = $event => (goToSection('forgot')))
+                }, "Forgotten password?"),
+                _hoisted_7,
                 createElementVNode("strong", {
-                  onClick: _cache[0] || (_cache[0] = $event => (goToSection('register'))),
+                  onClick: _cache[2] || (_cache[2] = $event => (goToSection('register'))),
                   class: "sh-register-link text-primary"
                 }, "Sign Up")
               ])
             ]))
           : createCommentVNode("v-if", true),
         (section.value === 'register')
-          ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          ? (openBlock(), createElementBlock("div", _hoisted_8, [
               (unref(registerTitle))
-                ? (openBlock(), createElementBlock("h3", _hoisted_7, toDisplayString(unref(registerTitle)), 1 /* TEXT */))
+                ? (openBlock(), createElementBlock("h3", _hoisted_9, toDisplayString(unref(registerTitle)), 1 /* TEXT */))
                 : createCommentVNode("v-if", true),
               (unref(registerSubTitle))
-                ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(registerSubTitle)), 1 /* TEXT */))
+                ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(unref(registerSubTitle)), 1 /* TEXT */))
                 : createCommentVNode("v-if", true),
               createVNode(script$u, {
                 class: "sh-login-form",
@@ -6733,9 +6772,9 @@ return (_ctx, _cache) => {
                 action: unref(registerEndpoint),
                 "success-callback": loginSuccessful
               }, null, 8 /* PROPS */, ["fields", "action"]),
-              createElementVNode("div", _hoisted_9, [
+              createElementVNode("div", _hoisted_11, [
                 createElementVNode("strong", {
-                  onClick: _cache[1] || (_cache[1] = $event => (goToSection('login'))),
+                  onClick: _cache[3] || (_cache[3] = $event => (goToSection('login'))),
                   class: "sh-register-link text-primary"
                 }, "Already have an account?")
               ])
@@ -6770,6 +6809,7 @@ const ShFrontend = {
     const swalPosition = options.swalPosition ?? 'top-end';
     const loginEndpoint = options.loginEndpoint ?? 'auth/login';
     const registerEndpoint = options.registerEndpoint ?? 'auth/register';
+    const forgotEndpoint = options.forgotEndpoint ?? 'auth/forgot-password';
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
@@ -6792,6 +6832,7 @@ const ShFrontend = {
     app.provide('loginUrl', loginUrl);
     app.provide('shFormElementClasses',defaultFormElementClasses);
     app.provide('noRecordsComponent',noRecordsComponent);
+    app.provide('forgotEndpoint',forgotEndpoint);
     window.swalPosition = swalPosition;
     if(options.router) {
       options.router.addRoute({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "4.4.6",
+  "version": "4.4.8",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",