Skip to content

Commit 6fca50a

Browse files
jv18creatorjv18creator
committed
fix(admin-ui): save form value of client in state while navigating between tabs #1341
Signed-off-by: Jeet Viramgama <[email protected]>
1 parent 01017a3 commit 6fca50a

13 files changed

+212
-272
lines changed

‎admin-ui/app/routes/Apps/Gluu/GluuTypeAheadForDn.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ function GluuTypeAheadForDn({
3535
onPaginate = () => {},
3636
maxResults = undefined,
3737
isLoading = false,
38-
placeholder = undefined
38+
placeholder = undefined,
39+
onChange
3940
}) {
4041
const { t } = useTranslation()
4142
const [open, setOpen] = useState(false)
@@ -83,6 +84,7 @@ function GluuTypeAheadForDn({
8384
: item.dn,
8485
),
8586
)
87+
onChange?.(selected)
8688
}}
8789
disabled={disabled}
8890
id={name}

‎admin-ui/app/styles/components/wizard.scss

+8-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
.wizard {
55
display: flex;
66
align-items: center;
7+
overflow-x: auto;
8+
}
9+
10+
.wizard-wrapper {
11+
max-width: 70vw;
12+
margin: 0 auto;
713
}
814

915
.wizard-step {
@@ -60,8 +66,8 @@
6066
}
6167

6268
@media (max-width: breakpoint-max('md', $grid-breakpoints)) {
63-
.wizard {
64-
flex-wrap: wrap;
69+
.wizard-wrapper {
70+
max-width: 100vw;
6571
}
6672

6773
.wizard-step {

‎admin-ui/plugins/auth-server/components/Clients/ClientAdvancedPanel.js

+30-47
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react'
1+
import React, { useEffect, useState } from 'react'
22
import { Col, Container, FormGroup, InputGroup, CustomInput } from 'Components'
33
import GluuBooleanSelectBox from 'Routes/Apps/Gluu/GluuBooleanSelectBox'
44
import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
@@ -20,23 +20,19 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
2020
const request_uri_id = 'request_uri_id'
2121
const requestUris = []
2222

23-
const [expirable, setExpirable] = useState(
24-
client.expirationDate ? client.expirationDate : false,
23+
const [expirable] = useState(
24+
formik.values.expirationDate ? formik.values.expirationDate : false,
2525
)
2626
const [scopesModal, setScopesModal] = useState(false)
2727
const [expirationDate, setExpirationDate] = useState(expirable ? dayjs(expirable) : undefined)
2828
const handler = () => {
2929
setScopesModal(!scopesModal)
3030
}
3131

32-
function handleExpirable() {
33-
setExpirable(!expirable)
34-
}
35-
36-
scripts = scripts
37-
.filter((item) => item.scriptType == 'person_authentication')
38-
.filter((item) => item.enabled)
39-
.map((item) => (item.name))
32+
const filteredScripts = scripts
33+
?.filter((item) => item.scriptType == 'person_authentication')
34+
?.filter((item) => item.enabled)
35+
?.map((item) => (item.name))
4036
function uriValidator(uri) {
4137
return uri
4238
}
@@ -46,26 +42,15 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
4642
}
4743
return total.filter((item) => partial.includes(item))
4844
}
49-
const [softwareSection, setSoftwareSection] = useState(false)
50-
const [cibaSection, setCibaSection] = useState(false)
5145

52-
function handleCibaSection() {
53-
setCibaSection(!cibaSection)
54-
}
55-
function handleSoftwareSection() {
56-
setSoftwareSection(!softwareSection)
57-
}
58-
function emailValidator(email) {
59-
return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
60-
email,
61-
)
62-
}
63-
function getScopeMapping(exitingScopes, scopes) {
64-
if (!exitingScopes) {
65-
exitingScopes = []
46+
useEffect(() => {
47+
// Listen for changes on expirable input switch
48+
if (!formik.values.expirable) {
49+
formik.setFieldValue('expirationDate', null)
50+
setExpirationDate(null)
6651
}
67-
return scopes.filter((item) => exitingScopes.includes(item.dn))
68-
}
52+
}, [formik.values.expirable])
53+
6954
return (
7055
<Container>
7156
<ClientShowSpontaneousScopes handler={handler} isOpen={scopesModal} />
@@ -78,7 +63,7 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
7863
id="subjectType"
7964
name="subjectType"
8065
disabled={viewOnly}
81-
defaultValue={client.subjectType}
66+
defaultValue={formik.values.subjectType}
8267
onChange={formik.handleChange}
8368
>
8469
<option value="">{t('actions.choose')}...</option>
@@ -91,18 +76,18 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
9176

9277
<GluuToogleRow
9378
name="persistClientAuthorizations"
94-
lsize={9}
95-
rsize={3}
79+
lsize={3}
80+
rsize={9}
9681
formik={formik}
9782
label="fields.persist_client_authorizations"
98-
value={client.persistClientAuthorizations}
83+
value={formik.values.persistClientAuthorizations}
9984
doc_category={DOC_CATEGORY}
10085
disabled={viewOnly}
10186
/>
10287
<GluuBooleanSelectBox
10388
name="allowSpontaneousScopes"
10489
label="fields.allow_spontaneous_scopes"
105-
value={client.allowSpontaneousScopes}
90+
value={formik.values.allowSpontaneousScopes}
10691
formik={formik}
10792
lsize={3}
10893
rsize={9}
@@ -142,7 +127,7 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
142127
label="fields.initiateLoginUri"
143128
name="initiateLoginUri"
144129
formik={formik}
145-
value={client.initiateLoginUri}
130+
value={formik.values.initiateLoginUri}
146131
doc_category={DOC_CATEGORY}
147132
disabled={viewOnly}
148133
/>
@@ -151,7 +136,7 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
151136
label="fields.requestUris"
152137
formik={formik}
153138
placeholder={t('Enter a valid request uri eg') + ' https://...'}
154-
value={client.requestUris || []}
139+
value={formik.values.requestUris || []}
155140
options={requestUris}
156141
validator={uriValidator}
157142
inputId={request_uri_id}
@@ -164,8 +149,8 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
164149
name="defaultAcrValues"
165150
label="fields.defaultAcrValues"
166151
formik={formik}
167-
value={getMapping(client.defaultAcrValues, scripts)}
168-
options={scripts}
152+
value={getMapping(formik.values.defaultAcrValues, filteredScripts)}
153+
options={filteredScripts}
169154
doc_category={DOC_CATEGORY}
170155
lsize={3}
171156
rsize={9}
@@ -175,8 +160,8 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
175160
name="authorizedAcrValues"
176161
label="fields.authorizedAcrValues"
177162
formik={formik}
178-
value={getMapping(client.authorizedAcrValues, scripts)}
179-
options={scripts}
163+
value={getMapping(formik.values.authorizedAcrValues, filteredScripts)}
164+
options={filteredScripts}
180165
doc_category={DOC_CATEGORY}
181166
lsize={3}
182167
rsize={9}
@@ -188,43 +173,41 @@ function ClientAdvancedPanel({ client, scripts, formik, viewOnly }) {
188173
rsize={9}
189174
formik={formik}
190175
label="fields.defaultPromptLogin"
191-
value={client.jansDefaultPromptLogin}
176+
value={formik.values.jansDefaultPromptLogin}
192177
doc_category={DOC_CATEGORY}
193178
disabled={viewOnly}
194179
/>
195180
<GluuInputRow
196181
label="fields.tls_client_auth_subject_dn"
197182
name="tlsClientAuthSubjectDn"
198183
formik={formik}
199-
value={client.tlsClientAuthSubjectDn}
184+
value={formik.values.tlsClientAuthSubjectDn}
200185
doc_category={DOC_CATEGORY}
201186
disabled={viewOnly}
202187
/>
203188

204189
<FormGroup row>
205190
<Col sm={6}>
206-
{client.expirable && (
207191
<GluuToogleRow
208192
name="expirable"
209193
formik={formik}
210194
label="fields.is_expirable_client"
211-
value={client.expirable?.length ? true : false}
212-
handler={handleExpirable}
195+
value={formik.values.expirable}
213196
doc_category={DOC_CATEGORY}
214197
lsize={6}
215198
rsize={6}
216199
disabled={viewOnly}
217200
/>
218-
)}
219201
</Col>
220202
<Col sm={6}>
221-
{client.expirable?.length ? (
203+
{formik.values.expirable ? (
222204
<FormGroup row>
223205
<Col sm={12}>
224206
<LocalizationProvider dateAdapter={AdapterDayjs}>
225207
<DateTimePicker
226208
id="expirationDate"
227209
name="expirationDate"
210+
disablePast
228211
value={expirationDate}
229212
onChange={(date) => {
230213
formik.setFieldValue('expirationDate', new Date(date))

0 commit comments

Comments
 (0)