@solidstarters/solid-core-ui 1.1.71 → 1.1.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/components/auth/AuthLayout.js +3 -3
  2. package/dist/components/auth/AuthLayout.js.map +1 -1
  3. package/dist/components/auth/AuthLayout.tsx +3 -3
  4. package/dist/components/auth/SolidLogin.js +5 -5
  5. package/dist/components/auth/SolidLogin.js.map +1 -1
  6. package/dist/components/auth/SolidLogin.tsx +6 -6
  7. package/dist/components/auth/SolidRegister.js +4 -4
  8. package/dist/components/auth/SolidRegister.js.map +1 -1
  9. package/dist/components/auth/SolidRegister.tsx +5 -5
  10. package/dist/components/common/GeneralSettings.d.ts.map +1 -1
  11. package/dist/components/common/GeneralSettings.js +48 -48
  12. package/dist/components/common/GeneralSettings.js.map +1 -1
  13. package/dist/components/common/GeneralSettings.tsx +293 -285
  14. package/dist/components/core/users/CreateUser.d.ts.map +1 -1
  15. package/dist/components/core/users/CreateUser.js +16 -16
  16. package/dist/components/core/users/CreateUser.js.map +1 -1
  17. package/dist/components/core/users/CreateUser.tsx +173 -171
  18. package/dist/helpers/registry.js +2 -1
  19. package/dist/helpers/registry.js.map +1 -1
  20. package/dist/helpers/registry.ts +2 -1
  21. package/dist/redux/api/solidSettingsApi.d.ts +2 -1
  22. package/dist/redux/api/solidSettingsApi.d.ts.map +1 -1
  23. package/dist/redux/api/solidSettingsApi.js +11 -1
  24. package/dist/redux/api/solidSettingsApi.js.map +1 -1
  25. package/dist/redux/api/solidSettingsApi.tsx +8 -0
  26. package/package.json +1 -1
  27. package/src/components/auth/AuthLayout.tsx +3 -3
  28. package/src/components/auth/SolidLogin.tsx +6 -6
  29. package/src/components/auth/SolidRegister.tsx +5 -5
  30. package/src/components/common/GeneralSettings.tsx +293 -285
  31. package/src/components/core/users/CreateUser.tsx +173 -171
  32. package/src/helpers/registry.ts +2 -1
  33. package/src/redux/api/solidSettingsApi.tsx +8 -0
package/dist/components/common/GeneralSettings.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client"
2
- import { useCreateSolidSettingsMutation, useLazyGetSolidSettingsQuery, useUpdateSolidSettingsMutation } from '@/redux/api/solidSettingsApi';
2
+ import { useBulkUpdateSolidSettingsMutation, useCreateSolidSettingsMutation, useLazyGetSolidSettingsQuery, useUpdateSolidSettingsMutation } from '@/redux/api/solidSettingsApi';
3
3
  import { useFormik } from 'formik';
4
4
  import { Button } from 'primereact/button';
5
5
  import { InputText } from 'primereact/inputtext';
@@ -13,15 +13,11 @@ import { usePathname } from 'next/navigation';
13
13
 
14
14
  export const GeneralSettings = () => {
15
15
  const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery()
16
-
17
16
  useEffect(() => {
18
17
  trigger("") // Fetch settings on mount
19
18
  }, [trigger])
20
19
  const pathname = usePathname();
21
- const [updateSolidSettings] = useUpdateSolidSettingsMutation();
22
- const [
23
- createSolidSettings,
24
- ] = useCreateSolidSettingsMutation();
20
+ const [bulkUpdateSolidSettings] = useBulkUpdateSolidSettingsMutation();
25
21
  const toast = useRef<Toast>(null);
26
22
 
27
23
  const showToast = (severity: "success" | "error", summary: string, detail: string) => {
@@ -33,44 +29,54 @@ export const GeneralSettings = () => {
33
29
  });
34
30
  };
35
31
  const initialValues = {
36
- iamAllowPublicRegistration: solidSettingsData?.data?.records?.[0]?.iamAllowPublicRegistration || false,
37
- iamPasswordRegistrationEnabled: solidSettingsData?.data?.records?.[0]?.iamPasswordRegistrationEnabled || false,
38
- iamPasswordLessRegistrationEnabled: solidSettingsData?.data?.records?.[0]?.iamPasswordLessRegistrationEnabled || false,
39
- iamActivateUserOnRegistration: solidSettingsData?.data?.records?.[0]?.iamActivateUserOnRegistration || false,
40
- iamGoogleOAuthEnabled: solidSettingsData?.data?.records?.[0]?.iamGoogleOAuthEnabled || false,
41
- shouldQueueEmails: solidSettingsData?.data?.records?.[0]?.shouldQueueEmails || false,
42
- shouldQueueSms: solidSettingsData?.data?.records?.[0]?.shouldQueueSms || false,
43
- authPagesTheme: solidSettingsData?.data?.records?.[0]?.authPagesTheme || "light",
44
- authPagesLayout: solidSettingsData?.data?.records?.[0]?.authPagesLayout || "center",
45
- appTnc: solidSettingsData?.data?.records?.[0]?.appTnc || "",
46
- appPrivacyPolicy: solidSettingsData?.data?.records?.[0]?.appPrivacyPolicy || "",
47
- iamDefaultRole: solidSettingsData?.data?.records?.[0]?.iamDefaultRole || "Admin",
48
- appTitle: solidSettingsData?.data?.records?.[0]?.appTitle || "SolidX",
49
- appDescription: solidSettingsData?.data?.records?.[0]?.appDescription || "appDescription",
32
+ allowPublicRegistration: solidSettingsData?.data?.allowPublicRegistration || false,
33
+ iamPasswordRegistrationEnabled: solidSettingsData?.data?.iamPasswordRegistrationEnabled || false,
34
+ passwordlessRegistration: solidSettingsData?.data?.passwordlessRegistration || false,
35
+ activateUserOnRegistration: solidSettingsData?.data?.activateUserOnRegistration || false,
36
+ iamGoogleOAuthEnabled: solidSettingsData?.data?.iamGoogleOAuthEnabled || false,
37
+ shouldQueueEmails: solidSettingsData?.data?.shouldQueueEmails || false,
38
+ shouldQueueSms: solidSettingsData?.data?.shouldQueueSms || false,
39
+ authPagesTheme: solidSettingsData?.data?.authPagesTheme || "light",
40
+ authPagesLayout: solidSettingsData?.data?.authPagesLayout || "center",
41
+ appTnc: solidSettingsData?.data?.appTnc || "",
42
+ appPrivacyPolicy: solidSettingsData?.data?.appPrivacyPolicy || "",
43
+ defaultRole: solidSettingsData?.data?.defaultRole || "Admin",
44
+ appTitle: solidSettingsData?.data?.appTitle || "SolidX",
45
+ appDescription: solidSettingsData?.data?.appDescription || "appDescription",
50
46
  };
51
47
  const formik = useFormik({
52
48
  initialValues: initialValues,
53
49
  enableReinitialize: true,
54
50
  onSubmit: async (values) => {
55
51
  try {
56
- const formData = new FormData()
52
+ const updatedSettings: Record<string, any> = {};
53
+
54
+ const currentSettings = solidSettingsData?.data || {};
55
+
56
+ // Compare values and collect only changed ones
57
57
  Object.entries(values).forEach(([key, value]) => {
58
- if (typeof value === "boolean") {
59
- formData.append(key, value ? "true" : "");
60
- } else {
61
- formData.append(key, value.toString());
58
+ const currentValue = currentSettings[key];
59
+
60
+ // Handle boolean, string, null values consistently
61
+ const normalizedCurrent = currentValue === undefined || currentValue === null ? "" : currentValue;
62
+ const normalizedValue = value === undefined || value === null ? "" : value;
63
+
64
+ if (normalizedCurrent !== normalizedValue) {
65
+ updatedSettings[key] = value;
62
66
  }
63
67
  });
64
- if (solidSettingsData?.data?.records?.length > 0) {
65
- await updateSolidSettings({
66
- id: solidSettingsData?.data?.records?.[0]?.id,
67
- data: formData,
68
- }).unwrap()
69
- showToast("success", "Success", "General Settings Updated");
70
- } else {
71
- createSolidSettings(formData)
72
- showToast("success", "Success", "General Settings Created");
68
+
69
+ if (Object.keys(updatedSettings).length === 0) {
70
+ showToast("success", "No Changes", "No settings were updated");
71
+ return;
72
+ }
73
+ const response = await bulkUpdateSolidSettings({
74
+ data: { settings: updatedSettings },
75
+ }).unwrap();
76
+ if (response.statusCode === 200) {
77
+ showToast("success", "Ypdated", "Settings updated")
73
78
  }
79
+
74
80
  } catch (error) {
75
81
  showToast("error", "Failed", "Something went wrong");
76
82
  }
@@ -93,27 +99,28 @@ export const GeneralSettings = () => {
93
99
  <div className="page-parent-wrapper">
94
100
  <Toast ref={toast} />
95
101
  <div className="solid-form-wrapper">
96
- <form onSubmit={formik.handleSubmit}>
97
- <div className="page-header secondary-border-bottom">
98
- <div className="form-wrapper-title">Settings</div>
99
- <div className="gap-3 flex">
100
- <Button label="Save" size="small" onClick={() => showError()} type="submit" />
101
- <CancelButton />
102
+ <div className="solid-form-section">
103
+ <form onSubmit={formik.handleSubmit}>
104
+ <div className="page-header secondary-border-bottom">
105
+ <div className="form-wrapper-title">Settings</div>
106
+ <div className="gap-3 flex">
107
+ <Button label="Save" size="small" onClick={() => showError()} type="submit" />
108
+ <CancelButton />
109
+ </div>
102
110
  </div>
103
- </div>
104
- <div className="p-4 solid-form-content">
105
- {pathname.includes("app-settings") &&
106
- <>
107
- <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo </p>
108
- <div className='formgrid grid'>
109
- <div className='col-8'>
110
- <div className="formgrid grid">
111
- <div className="col-6">
112
- <div className="formgrid grid align-items-center">
113
- <div className="col-5">
114
- <label className="form-field-label">App Logo</label>
115
- </div>
116
- {/* <div className="col-7">
111
+ <div className="p-4 solid-form-content">
112
+ {pathname.includes("app-settings") &&
113
+ <>
114
+ <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo </p>
115
+ <div className='formgrid grid'>
116
+ <div className='col-8'>
117
+ <div className="formgrid grid">
118
+ <div className="col-6">
119
+ <div className="formgrid grid align-items-center">
120
+ <div className="col-5">
121
+ <label className="form-field-label">App Logo</label>
122
+ </div>
123
+ {/* <div className="col-7">
117
124
  <InputText
118
125
  type="text"
119
126
  id="appTitle"
@@ -122,284 +129,285 @@ export const GeneralSettings = () => {
122
129
  value={formik.values.appTitle}
123
130
  />
124
131
  </div> */}
132
+ </div>
125
133
  </div>
126
134
  </div>
127
135
  </div>
128
136
  </div>
129
- </div>
130
- <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
137
+ <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
131
138
 
132
- <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Title & Description Details </p>
133
- <div className='formgrid grid'>
134
- <div className='col-8'>
135
- <div className="formgrid grid">
136
- <div className="col-6">
137
- <div className="formgrid grid align-items-center">
138
- <div className="col-5">
139
- <label className="form-field-label">App Title</label>
140
- </div>
141
- <div className="col-7">
142
- <InputText
143
- type="text"
144
- id="appTitle"
145
- name="appTitle"
146
- onChange={formik.handleChange}
147
- value={formik.values.appTitle}
148
- />
139
+ <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Title & Description Details </p>
140
+ <div className='formgrid grid'>
141
+ <div className='col-8'>
142
+ <div className="formgrid grid">
143
+ <div className="col-6">
144
+ <div className="formgrid grid align-items-center">
145
+ <div className="col-5">
146
+ <label className="form-field-label">App Title</label>
147
+ </div>
148
+ <div className="col-7">
149
+ <InputText
150
+ type="text"
151
+ id="appTitle"
152
+ name="appTitle"
153
+ onChange={formik.handleChange}
154
+ value={formik.values.appTitle}
155
+ />
156
+ </div>
149
157
  </div>
150
158
  </div>
151
- </div>
152
- <div className="col-6">
153
- <div className="formgrid grid align-items-center">
154
- <div className="col-5">
155
- <label className="form-field-label">Description</label>
156
- </div>
157
- <div className="col-7">
158
- <InputText
159
- type="text"
160
- id="appDescription"
161
- name="appDescription"
162
- onChange={formik.handleChange}
163
- value={formik.values.appDescription}
164
- />
159
+ <div className="col-6">
160
+ <div className="formgrid grid align-items-center">
161
+ <div className="col-5">
162
+ <label className="form-field-label">Description</label>
163
+ </div>
164
+ <div className="col-7">
165
+ <InputText
166
+ type="text"
167
+ id="appDescription"
168
+ name="appDescription"
169
+ onChange={formik.handleChange}
170
+ value={formik.values.appDescription}
171
+ />
172
+ </div>
165
173
  </div>
166
174
  </div>
167
175
  </div>
168
176
  </div>
169
177
  </div>
170
- </div>
171
- <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
178
+ <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
172
179
 
173
- <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Policies Links </p>
174
- <div className='formgrid grid'>
175
- <div className='col-8'>
176
- <div className="formgrid grid">
177
- <div className="col-6 mt-3">
178
- <div className="formgrid grid align-items-center">
179
- <div className="col-5">
180
- <label className="form-field-label">Terms and Conditions Link</label>
181
- </div>
182
- <div className="col-7">
183
- <InputText
184
- type="text"
185
- id="appTnc"
186
- name="appTnc"
187
- onChange={formik.handleChange}
188
- value={formik.values.appTnc}
189
- />
180
+ <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Policies Links </p>
181
+ <div className='formgrid grid'>
182
+ <div className='col-8'>
183
+ <div className="formgrid grid">
184
+ <div className="col-6 mt-3">
185
+ <div className="formgrid grid align-items-center">
186
+ <div className="col-5">
187
+ <label className="form-field-label">Terms and Conditions Link</label>
188
+ </div>
189
+ <div className="col-7">
190
+ <InputText
191
+ type="text"
192
+ id="appTnc"
193
+ name="appTnc"
194
+ onChange={formik.handleChange}
195
+ value={formik.values.appTnc}
196
+ />
197
+ </div>
190
198
  </div>
191
199
  </div>
192
- </div>
193
- <div className="col-6 mt-3">
194
- <div className="formgrid grid align-items-center">
195
- <div className="col-5">
196
- <label className="form-field-label">Privacy Policy Link</label>
197
- </div>
198
- <div className="col-7">
199
- <InputText
200
- type="text"
201
- id="appPrivacyPolicy"
202
- name="appPrivacyPolicy"
203
- onChange={formik.handleChange}
204
- value={formik.values.appPrivacyPolicy}
205
- />
200
+ <div className="col-6 mt-3">
201
+ <div className="formgrid grid align-items-center">
202
+ <div className="col-5">
203
+ <label className="form-field-label">Privacy Policy Link</label>
204
+ </div>
205
+ <div className="col-7">
206
+ <InputText
207
+ type="text"
208
+ id="appPrivacyPolicy"
209
+ name="appPrivacyPolicy"
210
+ onChange={formik.handleChange}
211
+ value={formik.values.appPrivacyPolicy}
212
+ />
213
+ </div>
206
214
  </div>
207
215
  </div>
208
216
  </div>
209
217
  </div>
210
218
  </div>
211
- </div>
212
- </>
213
- }
214
- {pathname.includes("authentication-settings") &&
215
- <>
216
- <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>User Authentication </p>
217
- <div className='formgrid grid'>
218
- <div className='col-8'>
219
- <div className="formgrid grid">
220
- <div className="col-6">
221
- <div className="formgrid grid align-items-center">
222
- <div className="col-5">
223
- <label className="form-field-label">Public Registration</label>
224
- </div>
225
- <div className="col-7">
226
- <InputSwitch
227
- name="iamAllowPublicRegistration"
228
- checked={formik.values.iamAllowPublicRegistration}
229
- onChange={(e) => formik.setFieldValue("iamAllowPublicRegistration", e.value)}
230
- />
219
+ </>
220
+ }
221
+ {pathname.includes("authentication-settings") &&
222
+ <>
223
+ <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>User Authentication </p>
224
+ <div className='formgrid grid'>
225
+ <div className='col-8'>
226
+ <div className="formgrid grid">
227
+ <div className="col-6">
228
+ <div className="formgrid grid align-items-center">
229
+ <div className="col-5">
230
+ <label className="form-field-label">Public Registration</label>
231
+ </div>
232
+ <div className="col-7">
233
+ <InputSwitch
234
+ name="allowPublicRegistration"
235
+ checked={formik.values.allowPublicRegistration}
236
+ onChange={(e) => formik.setFieldValue("allowPublicRegistration", e.value)}
237
+ />
238
+ </div>
231
239
  </div>
232
240
  </div>
233
- </div>
234
- <div className="col-6">
235
- <div className="formgrid grid align-items-center">
236
- <div className="col-5">
237
- <label className="form-field-label">Signup with Password</label>
238
- </div>
239
- <div className="col-7">
240
- <InputSwitch
241
- name="iamPasswordRegistrationEnabled"
242
- checked={formik.values.iamPasswordRegistrationEnabled}
243
- onChange={(e) => formik.setFieldValue("iamPasswordRegistrationEnabled", e.value)}
244
- />
241
+ <div className="col-6">
242
+ <div className="formgrid grid align-items-center">
243
+ <div className="col-5">
244
+ <label className="form-field-label">Signup with Password</label>
245
+ </div>
246
+ <div className="col-7">
247
+ <InputSwitch
248
+ name="iamPasswordRegistrationEnabled"
249
+ checked={formik.values.iamPasswordRegistrationEnabled}
250
+ onChange={(e) => formik.setFieldValue("iamPasswordRegistrationEnabled", e.value)}
251
+ />
252
+ </div>
245
253
  </div>
246
254
  </div>
247
- </div>
248
- <div className="col-6 mt-3">
249
- <div className="formgrid grid align-items-center">
250
- <div className="col-5">
251
- <label className="form-field-label">Signup without Password</label>
252
- </div>
253
- <div className="col-7">
254
- <InputSwitch
255
- name="iamPasswordLessRegistrationEnabled"
256
- checked={formik.values.iamPasswordLessRegistrationEnabled}
257
- onChange={(e) => formik.setFieldValue("iamPasswordLessRegistrationEnabled", e.value)}
258
- />
255
+ <div className="col-6 mt-3">
256
+ <div className="formgrid grid align-items-center">
257
+ <div className="col-5">
258
+ <label className="form-field-label">Signup without Password</label>
259
+ </div>
260
+ <div className="col-7">
261
+ <InputSwitch
262
+ name="passwordlessRegistration"
263
+ checked={formik.values.passwordlessRegistration}
264
+ onChange={(e) => formik.setFieldValue("passwordlessRegistration", e.value)}
265
+ />
266
+ </div>
259
267
  </div>
260
268
  </div>
261
- </div>
262
- <div className="col-6 mt-3">
263
- <div className="formgrid grid align-items-center">
264
- <div className="col-5">
265
- <label className="form-field-label">Auto Activate User on Registration </label>
266
- </div>
267
- <div className="col-7">
268
- <InputSwitch
269
- name="iamActivateUserOnRegistration"
270
- checked={formik.values.iamActivateUserOnRegistration}
271
- onChange={(e) => formik.setFieldValue("iamActivateUserOnRegistration", e.value)}
272
- />
269
+ <div className="col-6 mt-3">
270
+ <div className="formgrid grid align-items-center">
271
+ <div className="col-5">
272
+ <label className="form-field-label">Auto Activate User on Registration </label>
273
+ </div>
274
+ <div className="col-7">
275
+ <InputSwitch
276
+ name="activateUserOnRegistration"
277
+ checked={formik.values.activateUserOnRegistration}
278
+ onChange={(e) => formik.setFieldValue("activateUserOnRegistration", e.value)}
279
+ />
280
+ </div>
273
281
  </div>
274
282
  </div>
275
- </div>
276
- <div className="col-6 mt-3">
277
- <div className="formgrid grid align-items-center">
278
- <div className="col-5">
279
- <label className="form-field-label">Allow Login/ Signup with Google </label>
280
- </div>
281
- <div className="col-7">
282
- <InputSwitch
283
- name="iamGoogleOAuthEnabled"
284
- checked={formik.values.iamGoogleOAuthEnabled}
285
- onChange={(e) => formik.setFieldValue("iamGoogleOAuthEnabled", e.value)}
286
- />
283
+ <div className="col-6 mt-3">
284
+ <div className="formgrid grid align-items-center">
285
+ <div className="col-5">
286
+ <label className="form-field-label">Allow Login/ Signup with Google </label>
287
+ </div>
288
+ <div className="col-7">
289
+ <InputSwitch
290
+ name="iamGoogleOAuthEnabled"
291
+ checked={formik.values.iamGoogleOAuthEnabled}
292
+ onChange={(e) => formik.setFieldValue("iamGoogleOAuthEnabled", e.value)}
293
+ />
294
+ </div>
287
295
  </div>
288
296
  </div>
289
297
  </div>
290
298
  </div>
291
299
  </div>
292
- </div>
293
- <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
294
- <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Layout</p>
295
- <div className='formgrid grid'>
296
- <div className='col-8'>
297
- <div className="flex align-items-center gap-3">
298
- <div className="flex align-items-center">
299
- <RadioButton
300
- inputId="authPagesLayout-left"
301
- name="authPagesLayout"
302
- value="left"
303
- checked={formik.values.authPagesLayout === "left"}
304
- onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
305
- />
306
- <label htmlFor="authPagesLayout-left" className="ml-2">Left</label>
307
- </div>
308
- <div className="flex align-items-center">
309
- <RadioButton
310
- inputId="authPagesLayout-center"
311
- name="authPagesLayout"
312
- value="center"
313
- checked={formik.values.authPagesLayout === "center"}
314
- onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
315
- />
316
- <label htmlFor="authPagesLayout-center" className="ml-2">Center</label>
317
- </div>
318
- <div className="flex align-items-center">
319
- <RadioButton
320
- inputId="authPagesLayout-right"
321
- name="authPagesLayout"
322
- value="right"
323
- checked={formik.values.authPagesLayout === "right"}
324
- onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
325
- />
326
- <label htmlFor="authPagesLayout-right" className="ml-2">Right</label>
300
+ <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
301
+ <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Layout</p>
302
+ <div className='formgrid grid'>
303
+ <div className='col-8'>
304
+ <div className="flex align-items-center gap-3">
305
+ <div className="flex align-items-center">
306
+ <RadioButton
307
+ inputId="authPagesLayout-left"
308
+ name="authPagesLayout"
309
+ value="left"
310
+ checked={formik.values.authPagesLayout === "left"}
311
+ onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
312
+ />
313
+ <label htmlFor="authPagesLayout-left" className="ml-2">Left</label>
314
+ </div>
315
+ <div className="flex align-items-center">
316
+ <RadioButton
317
+ inputId="authPagesLayout-center"
318
+ name="authPagesLayout"
319
+ value="center"
320
+ checked={formik.values.authPagesLayout === "center"}
321
+ onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
322
+ />
323
+ <label htmlFor="authPagesLayout-center" className="ml-2">Center</label>
324
+ </div>
325
+ <div className="flex align-items-center">
326
+ <RadioButton
327
+ inputId="authPagesLayout-right"
328
+ name="authPagesLayout"
329
+ value="right"
330
+ checked={formik.values.authPagesLayout === "right"}
331
+ onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
332
+ />
333
+ <label htmlFor="authPagesLayout-right" className="ml-2">Right</label>
334
+ </div>
327
335
  </div>
328
336
  </div>
329
337
  </div>
330
- </div>
331
- <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
332
- <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Theme</p>
333
- <div className='formgrid grid'>
334
- <div className='col-8'>
335
- <div className="flex align-items-center gap-3">
336
- <div className="flex align-items-center">
337
- <RadioButton
338
- inputId="theme-light"
339
- name="authPagesTheme"
340
- value="light"
341
- checked={formik.values.authPagesTheme === "light"}
342
- onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
343
- />
344
- <label htmlFor="theme-light" className="ml-2">Solid Light</label>
345
- </div>
346
- <div className="flex align-items-center">
347
- <RadioButton
348
- inputId="theme-dark"
349
- name="authPagesTheme"
350
- value="dark"
351
- checked={formik.values.authPagesTheme === "dark"}
352
- onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
353
- />
354
- <label htmlFor="theme-dark" className="ml-2">Solid Dark</label>
338
+ <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
339
+ <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Theme</p>
340
+ <div className='formgrid grid'>
341
+ <div className='col-8'>
342
+ <div className="flex align-items-center gap-3">
343
+ <div className="flex align-items-center">
344
+ <RadioButton
345
+ inputId="theme-light"
346
+ name="authPagesTheme"
347
+ value="light"
348
+ checked={formik.values.authPagesTheme === "light"}
349
+ onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
350
+ />
351
+ <label htmlFor="theme-light" className="ml-2">Solid Light</label>
352
+ </div>
353
+ <div className="flex align-items-center">
354
+ <RadioButton
355
+ inputId="theme-dark"
356
+ name="authPagesTheme"
357
+ value="dark"
358
+ checked={formik.values.authPagesTheme === "dark"}
359
+ onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
360
+ />
361
+ <label htmlFor="theme-dark" className="ml-2">Solid Dark</label>
362
+ </div>
355
363
  </div>
356
364
  </div>
357
365
  </div>
358
- </div>
359
- </>
360
- }
366
+ </>
367
+ }
361
368
 
362
- {pathname.includes("misc-settings") &&
363
- <>
364
- <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Misc Details</p>
365
- <div className='formgrid grid'>
366
- <div className='col-8'>
367
- <div className="formgrid grid">
368
- <div className="col-6">
369
- <div className="formgrid grid align-items-center">
370
- <div className="col-5">
371
- <label className="form-field-label">Use queue for sending emails</label>
372
- </div>
373
- <div className="col-7">
374
- <InputSwitch
375
- name="shouldQueueEmails"
376
- checked={formik.values.shouldQueueEmails}
377
- onChange={(e) => formik.setFieldValue("shouldQueueEmails", e.value)}
378
- />
369
+ {pathname.includes("misc-settings") &&
370
+ <>
371
+ <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Misc Details</p>
372
+ <div className='formgrid grid'>
373
+ <div className='col-8'>
374
+ <div className="formgrid grid">
375
+ <div className="col-6">
376
+ <div className="formgrid grid align-items-center">
377
+ <div className="col-5">
378
+ <label className="form-field-label">Use queue for sending emails</label>
379
+ </div>
380
+ <div className="col-7">
381
+ <InputSwitch
382
+ name="shouldQueueEmails"
383
+ checked={formik.values.shouldQueueEmails}
384
+ onChange={(e) => formik.setFieldValue("shouldQueueEmails", e.value)}
385
+ />
386
+ </div>
379
387
  </div>
380
388
  </div>
381
- </div>
382
- <div className="col-6">
383
- <div className="formgrid grid align-items-center">
384
- <div className="col-5">
385
- <label className="form-field-label">Use queue for sending SMS</label>
386
- </div>
387
- <div className="col-7">
388
- <InputSwitch
389
- name="shouldQueueSms"
390
- checked={formik.values.shouldQueueSms}
391
- onChange={(e) => formik.setFieldValue("shouldQueueSms", e.value)}
392
- />
389
+ <div className="col-6">
390
+ <div className="formgrid grid align-items-center">
391
+ <div className="col-5">
392
+ <label className="form-field-label">Use queue for sending SMS</label>
393
+ </div>
394
+ <div className="col-7">
395
+ <InputSwitch
396
+ name="shouldQueueSms"
397
+ checked={formik.values.shouldQueueSms}
398
+ onChange={(e) => formik.setFieldValue("shouldQueueSms", e.value)}
399
+ />
400
+ </div>
393
401
  </div>
394
402
  </div>
395
403
  </div>
396
404
  </div>
397
405
  </div>
398
- </div>
399
- </>
400
- }
401
- </div>
402
- </form>
406
+ </>
407
+ }
408
+ </div>
409
+ </form>
410
+ </div>
403
411
  </div>
404
412
  </div>
405
413
  )