Skip to content

Commit ded5daa

Browse files
officialmeritinfosofficialmeritinfos
committed
update: added loading feature to buttons in ajax request
1 parent ac3d560 commit ded5daa

40 files changed

+1642
-167
lines changed

‎config/authkit.php‎

Lines changed: 214 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -986,67 +986,233 @@
986986
],
987987
],
988988

989-
/**
990-
* Form submission configuration.
991-
*
992-
* AuthKit supports two UX modes for submitting forms:
993-
* - 'http': Standard form POST with full page navigation (SSR).
994-
* - 'ajax': Submit via JavaScript (fetch/XHR) and handle responses client-side.
995-
*
996-
* This is a package-wide default. Pages may later override this per-form if needed.
997-
*/
989+
/*
990+
|--------------------------------------------------------------------------
991+
| Form Submission UI
992+
|--------------------------------------------------------------------------
993+
|
994+
| These options control the client-side loading/busy state applied when an
995+
| AuthKit-managed form is submitted.
996+
|
997+
| The loading system is intended to work for both:
998+
| - normal HTTP submissions
999+
| - AJAX submissions handled by the AuthKit browser runtime
1000+
|
1001+
| Design goals:
1002+
| - prevent duplicate submissions
1003+
| - provide visible feedback while a request is in progress
1004+
| - remain configurable without hard-coding one loading style
1005+
| - allow future extension for custom HTML, components, or external libraries
1006+
|
1007+
*/
9981008
'forms' => [
9991009

1000-
/**
1001-
* Global submission mode.
1002-
*
1003-
* Allowed: 'http', 'ajax'
1004-
*/
1010+
/*
1011+
|--------------------------------------------------------------------------
1012+
| Submission Mode
1013+
|--------------------------------------------------------------------------
1014+
|
1015+
| Controls the default form transport mode used by AuthKit pages.
1016+
|
1017+
| Supported values:
1018+
| - http : regular browser form submission
1019+
| - ajax : JavaScript-driven submission through the AuthKit runtime
1020+
|
1021+
*/
10051022
'mode' => 'http',
10061023

1007-
/**
1008-
* AJAX defaults (used when mode='ajax').
1009-
*
1010-
* These values are intentionally generic so consumers can plug any JS driver:
1011-
* Alpine, htmx, Livewire, custom fetch, etc.
1012-
*/
1024+
/*
1025+
|--------------------------------------------------------------------------
1026+
| AJAX Form Settings
1027+
|--------------------------------------------------------------------------
1028+
|
1029+
| These options are used when forms are submitted through the AuthKit
1030+
| JavaScript runtime.
1031+
|
1032+
*/
10131033
'ajax' => [
10141034

1015-
/**
1016-
* HTML attribute used to mark forms as AuthKit-AJAX enabled.
1017-
* Your JS can query this attribute and attach submit handlers.
1018-
*
1019-
* Example:
1020-
* <form data-authkit-ajax="1">...</form>
1021-
*/
1035+
/*
1036+
|--------------------------------------------------------------------------
1037+
| AJAX Marker Attribute
1038+
|--------------------------------------------------------------------------
1039+
|
1040+
| Forms containing this attribute are treated as AuthKit AJAX forms by
1041+
| the browser runtime.
1042+
|
1043+
*/
10221044
'attribute' => 'data-authkit-ajax',
10231045

1024-
/**
1025-
* Whether AuthKit should attempt to submit as JSON by default.
1026-
* If true, JS should send:
1027-
* - Accept: application/json
1028-
* - Content-Type: application/json (or formdata if you prefer)
1029-
*
1030-
* If false, JS can submit as FormData and still set Accept: application/json.
1031-
*/
1046+
/*
1047+
|--------------------------------------------------------------------------
1048+
| JSON Submission
1049+
|--------------------------------------------------------------------------
1050+
|
1051+
| When true, AJAX submissions are sent as JSON payloads by default.
1052+
| When false, FormData is used.
1053+
|
1054+
*/
10321055
'submit_json' => true,
10331056

1034-
/**
1035-
* Default behavior after a successful AJAX submission.
1036-
*
1037-
* - 'redirect': Redirect to a URL returned by server, or to fallback_redirect.
1038-
* - 'none': Do nothing automatically; consumer JS handles it.
1039-
*/
1057+
/*
1058+
|--------------------------------------------------------------------------
1059+
| Success Behavior
1060+
|--------------------------------------------------------------------------
1061+
|
1062+
| Controls what the runtime should do after a successful AJAX form
1063+
| submission.
1064+
|
1065+
| Supported values:
1066+
| - redirect : follow redirect intent from the response when available
1067+
| - none : do not redirect automatically
1068+
|
1069+
*/
10401070
'success_behavior' => 'redirect',
10411071

1042-
/**
1043-
* Fallback redirect used when success_behavior='redirect'
1044-
* and the server does not provide a redirect URL.
1045-
*
1046-
* If null, JS decides.
1047-
*/
1072+
/*
1073+
|--------------------------------------------------------------------------
1074+
| Fallback Redirect
1075+
|--------------------------------------------------------------------------
1076+
|
1077+
| Optional URL used when success behavior is "redirect" but the server
1078+
| response does not provide its own redirect target.
1079+
|
1080+
*/
10481081
'fallback_redirect' => null,
10491082
],
1083+
1084+
/*
1085+
|--------------------------------------------------------------------------
1086+
| Loading State
1087+
|--------------------------------------------------------------------------
1088+
|
1089+
| Controls the client-side busy/loading state applied to submit actions
1090+
| while a form request is being processed.
1091+
|
1092+
| This system is configuration-driven so consumers may later customize:
1093+
| - loading text
1094+
| - spinner-only behavior
1095+
| - spinner + text behavior
1096+
| - custom HTML loaders
1097+
|
1098+
| Future versions may also support custom Blade components or external
1099+
| library integrations without changing the overall config shape.
1100+
|
1101+
*/
1102+
'loading' => [
1103+
1104+
/*
1105+
|--------------------------------------------------------------------------
1106+
| Enable Loading State
1107+
|--------------------------------------------------------------------------
1108+
|
1109+
| When true, AuthKit applies a temporary busy state to the submit
1110+
| button while a submission is in progress.
1111+
|
1112+
*/
1113+
'enabled' => true,
1114+
1115+
/*
1116+
|--------------------------------------------------------------------------
1117+
| Prevent Double Submission
1118+
|--------------------------------------------------------------------------
1119+
|
1120+
| When true, AuthKit ignores repeated submit attempts while the current
1121+
| form is already submitting.
1122+
|
1123+
*/
1124+
'prevent_double_submit' => true,
1125+
1126+
/*
1127+
|--------------------------------------------------------------------------
1128+
| Disable Submit Control
1129+
|--------------------------------------------------------------------------
1130+
|
1131+
| When true, submit buttons are disabled during the active submission
1132+
| window.
1133+
|
1134+
*/
1135+
'disable_submit' => true,
1136+
1137+
/*
1138+
|--------------------------------------------------------------------------
1139+
| Set ARIA Busy
1140+
|--------------------------------------------------------------------------
1141+
|
1142+
| When true, AuthKit adds aria-busy="true" to the form during
1143+
| submission to improve accessibility and machine-readable state.
1144+
|
1145+
*/
1146+
'set_aria_busy' => true,
1147+
1148+
/*
1149+
|--------------------------------------------------------------------------
1150+
| Loading Presentation Type
1151+
|--------------------------------------------------------------------------
1152+
|
1153+
| Controls the built-in visual style applied to the submit button while
1154+
| submitting.
1155+
|
1156+
| Supported values:
1157+
| - text : replace the label with loading text only
1158+
| - spinner : show spinner only
1159+
| - spinner_text : show spinner and loading text
1160+
| - custom_html : render configured HTML markup
1161+
|
1162+
*/
1163+
'type' => 'spinner_text',
1164+
1165+
/*
1166+
|--------------------------------------------------------------------------
1167+
| Loading Text
1168+
|--------------------------------------------------------------------------
1169+
|
1170+
| Default text displayed while a form submission is in progress.
1171+
|
1172+
| This may later be overridden per form from resolved schema submit
1173+
| configuration.
1174+
|
1175+
*/
1176+
'text' => 'Processing...',
1177+
1178+
/*
1179+
|--------------------------------------------------------------------------
1180+
| Show Text
1181+
|--------------------------------------------------------------------------
1182+
|
1183+
| When false, AuthKit may hide loading text even for loading types that
1184+
| normally support text output.
1185+
|
1186+
*/
1187+
'show_text' => true,
1188+
1189+
/*
1190+
|--------------------------------------------------------------------------
1191+
| Custom Loading HTML
1192+
|--------------------------------------------------------------------------
1193+
|
1194+
| Optional HTML markup used when the loading type is set to
1195+
| "custom_html".
1196+
|
1197+
| This should be a small inline-safe snippet such as:
1198+
| - <span class="my-loader" aria-hidden="true"></span>
1199+
| - <svg ...></svg>
1200+
|
1201+
| Leave null to use only built-in loading behavior.
1202+
|
1203+
*/
1204+
'html' => null,
1205+
1206+
/*
1207+
|--------------------------------------------------------------------------
1208+
| Loading State Class
1209+
|--------------------------------------------------------------------------
1210+
|
1211+
| CSS class applied to the submit control while loading is active.
1212+
|
1213+
*/
1214+
'class' => 'authkit-btn--loading',
1215+
],
10501216
],
10511217

10521218
/**
@@ -2007,6 +2173,7 @@
20072173
*/
20082174
'field' => 'authkit::form.field',
20092175
'fields' => 'authkit::form.fields',
2176+
'option_items' => 'authkit::form.option-items',
20102177
],
20112178

20122179
/**

‎dist/css/themes/bootstrap-amber-silk.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-aurora.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-forest.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-imperial-gold.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-ivory-gold.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-midnight-blue.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-neutral.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-noir-grid.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap-ocean-mist.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)