Skip to content

Commit 773358c

Browse files
chakrihackerchakrihacker
committed
fix(react): remove unnecessary div
1 parent 119cbfa commit 773358c

3 files changed

Lines changed: 251 additions & 260 deletions

File tree

‎packages/react/src/components/auth0/my-account/user-mfa-management.tsx‎

Lines changed: 137 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -201,162 +201,157 @@ function UserMFAMgmtView({ logic, handlers }: UserMFAMgmtViewProps) {
201201

202202
return (
203203
<StyledScope style={currentStyles.variables}>
204-
<div>
205-
{isLoading ? (
206-
<div className="flex items-center justify-center py-16">{loader || <Spinner />}</div>
207-
) : (
208-
<Card
209-
className={cn(
210-
'py-10 px-8 sm:py-8 sm:px-6',
211-
currentStyles.classes?.['UserMFAMgmt-card'],
212-
)}
213-
>
214-
<CardContent>
215-
{error ? (
216-
<MFAErrorState
217-
title={t('component_error_title')}
218-
description={t('component_error_description')}
219-
/>
220-
) : (
221-
<>
222-
{!hideHeader && (
223-
<>
224-
<CardTitle
225-
id="mfa-management-title"
226-
className="text-2xl text-(length:--font-size-heading) font-medium text-left"
227-
>
228-
{t('title')}
229-
</CardTitle>
230-
<CardDescription
231-
id="mfa-management-desc"
232-
className="text-sm text-(length:--font-size-paragraph) text-muted-foreground text-left"
233-
>
234-
{t('description')}
235-
</CardDescription>
236-
</>
237-
)}
238-
{showActiveOnly && hasNoActiveFactors ? (
239-
<MFAEmptyState message={t('no_active_mfa')} />
240-
) : (
241-
<List
242-
className="flex flex-col gap-0 w-full"
243-
aria-labelledby="mfa-management-title"
244-
aria-describedby="mfa-management-desc"
204+
{isLoading ? (
205+
<div className="flex items-center justify-center py-16">{loader || <Spinner />}</div>
206+
) : (
207+
<Card
208+
className={cn('py-10 px-8 sm:py-8 sm:px-6', currentStyles.classes?.['UserMFAMgmt-card'])}
209+
>
210+
<CardContent>
211+
{error ? (
212+
<MFAErrorState
213+
title={t('component_error_title')}
214+
description={t('component_error_description')}
215+
/>
216+
) : (
217+
<>
218+
{!hideHeader && (
219+
<>
220+
<CardTitle
221+
id="mfa-management-title"
222+
className="text-2xl text-(length:--font-size-heading) font-medium text-left"
245223
>
246-
{visibleFactorTypes.map((factorType) => {
247-
const factors = factorsByType[factorType] || [];
248-
const activeFactors = factors.filter((f) => f.enrolled);
249-
const isEnabledFactor = factorConfig?.[factorType]?.enabled !== false;
250-
const hasActiveFactors = activeFactors.length > 0;
251-
252-
return (
253-
<ListItem
254-
key={factorType}
255-
className={cn(
256-
'w-full p-0 m-0 py-6 gap-3',
257-
!isEnabledFactor && 'opacity-50 pointer-events-none',
258-
)}
259-
aria-disabled={!isEnabledFactor}
260-
tabIndex={0}
261-
aria-label={t(`${factorType}.title`)}
262-
>
263-
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
264-
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
265-
<span
266-
className={cn(
267-
'break-words text-card-foreground whitespace-normal text-base text-(length:--font-size-body) font-medium',
268-
)}
269-
id={`factor-title-${factorType}`}
270-
>
271-
{t(`${factorType}.title`)}
272-
</span>
224+
{t('title')}
225+
</CardTitle>
226+
<CardDescription
227+
id="mfa-management-desc"
228+
className="text-sm text-(length:--font-size-paragraph) text-muted-foreground text-left"
229+
>
230+
{t('description')}
231+
</CardDescription>
232+
</>
233+
)}
234+
{showActiveOnly && hasNoActiveFactors ? (
235+
<MFAEmptyState message={t('no_active_mfa')} />
236+
) : (
237+
<List
238+
className="flex flex-col gap-0 w-full"
239+
aria-labelledby="mfa-management-title"
240+
aria-describedby="mfa-management-desc"
241+
>
242+
{visibleFactorTypes.map((factorType) => {
243+
const factors = factorsByType[factorType] || [];
244+
const activeFactors = factors.filter((f) => f.enrolled);
245+
const isEnabledFactor = factorConfig?.[factorType]?.enabled !== false;
246+
const hasActiveFactors = activeFactors.length > 0;
273247

274-
{hasActiveFactors && (
275-
<Badge
276-
variant="success"
277-
size="sm"
278-
className="shrink-0"
279-
aria-label={t('enabled')}
280-
>
281-
{t('enabled')}
282-
</Badge>
248+
return (
249+
<ListItem
250+
key={factorType}
251+
className={cn(
252+
'w-full p-0 m-0 py-6 gap-3',
253+
!isEnabledFactor && 'opacity-50 pointer-events-none',
254+
)}
255+
aria-disabled={!isEnabledFactor}
256+
tabIndex={0}
257+
aria-label={t(`${factorType}.title`)}
258+
>
259+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
260+
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
261+
<span
262+
className={cn(
263+
'break-words text-card-foreground whitespace-normal text-base text-(length:--font-size-body) font-medium',
283264
)}
284-
</div>
265+
id={`factor-title-${factorType}`}
266+
>
267+
{t(`${factorType}.title`)}
268+
</span>
285269

286-
{!readOnly && (
287-
<Button
288-
size="default"
289-
variant="outline"
290-
className="text-sm w-full sm:w-auto shrink-0"
291-
onClick={() => onEnrollFactor(factorType)}
292-
disabled={disableEnroll || !isEnabledFactor}
293-
aria-label={t(`${factorType}.button-text`)}
294-
aria-describedby={`factor-title-${factorType}`}
270+
{hasActiveFactors && (
271+
<Badge
272+
variant="success"
273+
size="sm"
274+
className="shrink-0"
275+
aria-label={t('enabled')}
295276
>
296-
{t(`${factorType}.button-text`)}
297-
</Button>
277+
{t('enabled')}
278+
</Badge>
298279
)}
299280
</div>
300281

301-
{!hasActiveFactors && (
302-
<p
303-
className={cn(
304-
'font-normal text-sm text-(length:--font-size-paragraph) text-muted-foreground text-left break-words',
305-
)}
306-
id={`factor-desc-${factorType}`}
282+
{!readOnly && (
283+
<Button
284+
size="default"
285+
variant="outline"
286+
className="text-sm w-full sm:w-auto shrink-0"
287+
onClick={() => onEnrollFactor(factorType)}
288+
disabled={disableEnroll || !isEnabledFactor}
289+
aria-label={t(`${factorType}.button-text`)}
290+
aria-describedby={`factor-title-${factorType}`}
307291
>
308-
{t(`${factorType}.description`)}
309-
</p>
292+
{t(`${factorType}.button-text`)}
293+
</Button>
310294
)}
295+
</div>
311296

312-
{hasActiveFactors && (
313-
<FactorsList
314-
factors={activeFactors}
315-
factorType={factorType}
316-
readOnly={readOnly}
317-
isEnabledFactor={isEnabledFactor}
318-
onDeleteFactor={onDeleteFactor}
319-
isDeletingFactor={isDeleting}
320-
disableDelete={disableDelete}
321-
styling={styling}
322-
customMessages={customMessages}
323-
/>
324-
)}
325-
</ListItem>
326-
);
327-
})}
328-
</List>
329-
)}
330-
</>
331-
)}
332-
</CardContent>
333-
</Card>
334-
)}
335-
{enrollFactor && (
336-
<UserMFASetupForm
337-
open={dialogOpen}
338-
onClose={handleCloseDialog}
339-
factorType={enrollFactor}
340-
enrollMfa={enrollMfa}
341-
confirmEnrollment={confirmEnrollment}
342-
onSuccess={handleEnrollSuccess}
343-
onError={handleEnrollError}
344-
schema={schema}
345-
styling={styling}
346-
customMessages={customMessages}
347-
/>
348-
)}
349-
<DeleteFactorConfirmation
350-
open={isDeleteDialogOpen}
351-
onOpenChange={(open) => !isDeleting && setIsDeleteDialogOpen(open)}
352-
factorToDelete={factorToDelete}
353-
isDeletingFactor={isDeleting}
354-
onConfirm={handleConfirmDelete}
355-
onCancel={() => setIsDeleteDialogOpen(false)}
297+
{!hasActiveFactors && (
298+
<p
299+
className={cn(
300+
'font-normal text-sm text-(length:--font-size-paragraph) text-muted-foreground text-left break-words',
301+
)}
302+
id={`factor-desc-${factorType}`}
303+
>
304+
{t(`${factorType}.description`)}
305+
</p>
306+
)}
307+
308+
{hasActiveFactors && (
309+
<FactorsList
310+
factors={activeFactors}
311+
factorType={factorType}
312+
readOnly={readOnly}
313+
isEnabledFactor={isEnabledFactor}
314+
onDeleteFactor={onDeleteFactor}
315+
isDeletingFactor={isDeleting}
316+
disableDelete={disableDelete}
317+
styling={styling}
318+
customMessages={customMessages}
319+
/>
320+
)}
321+
</ListItem>
322+
);
323+
})}
324+
</List>
325+
)}
326+
</>
327+
)}
328+
</CardContent>
329+
</Card>
330+
)}
331+
{enrollFactor && (
332+
<UserMFASetupForm
333+
open={dialogOpen}
334+
onClose={handleCloseDialog}
335+
factorType={enrollFactor}
336+
enrollMfa={enrollMfa}
337+
confirmEnrollment={confirmEnrollment}
338+
onSuccess={handleEnrollSuccess}
339+
onError={handleEnrollError}
340+
schema={schema}
356341
styling={styling}
357342
customMessages={customMessages}
358343
/>
359-
</div>
344+
)}
345+
<DeleteFactorConfirmation
346+
open={isDeleteDialogOpen}
347+
onOpenChange={(open) => !isDeleting && setIsDeleteDialogOpen(open)}
348+
factorToDelete={factorToDelete}
349+
isDeletingFactor={isDeleting}
350+
onConfirm={handleConfirmDelete}
351+
onCancel={() => setIsDeleteDialogOpen(false)}
352+
styling={styling}
353+
customMessages={customMessages}
354+
/>
360355
</StyledScope>
361356
);
362357
}

0 commit comments

Comments
 (0)