add mfa listing use build-in forms

src/frontend/src/enums/ApiEndpoints.tsx

@@ -50,6 +50,7 @@ export enum ApiEndpoints {
   icons = 'icons/',
   selectionlist_list = 'selection/',
   selectionlist_detail = 'selection/:id/',
+  securtiy_settings = '_allauth/app/v1/config',
 
   // Barcode API endpoints
   barcode = 'barcode/',

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -68,24 +68,19 @@ export function SecurityContent() {
       <Title order={5}>
         <Trans>Multifactor</Trans>
       </Title>
-      {isLoadingProvider ? (
-        <Loader />
+
+      {isMfaEnabled ? (
+        <MfaContent />
       ) : (
-        <>
-          {isMfaEnabled ? (
-            <MfaContent />
-          ) : (
-            <Alert
-              icon={<IconAlertCircle size='1rem' />}
-              title={t`Not enabled`}
-              color='yellow'
-            >
-              <Trans>
-                Multifactor authentication is not configured for your account{' '}
-              </Trans>
-            </Alert>
-          )}
-        </>
+        <Alert
+          icon={<IconAlertCircle size='1rem' />}
+          title={t`Not enabled`}
+          color='yellow'
+        >
+          <Trans>
+            Multifactor authentication is not configured for your account{' '}
+          </Trans>
+        </Alert>
       )}
 
       <Title order={5}>

src/frontend/src/states/ApiState.tsx

@@ -4,13 +4,13 @@ import { createJSONStorage, persist } from 'zustand/middleware';
 import { api } from '../App';
 import { emptyServerAPI } from '../defaults/defaults';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
-import type { AuthProps, ServerAPIProps } from './states';
+import type { SecuritySetting, ServerAPIProps } from './states';
 
 interface ServerApiStateProps {
   server: ServerAPIProps;
   setServer: (newServer: ServerAPIProps) => void;
   fetchServerApiState: () => void;
-  auth_settings?: AuthProps;
+  auth_settings?: SecuritySetting;
 }
 
 export const useServerApiState = create<ServerApiStateProps>()(
@@ -31,11 +31,11 @@ export const useServerApiState = create<ServerApiStateProps>()(
 
         // Fetch login/SSO behaviour
         await api
-          .get(apiUrl(ApiEndpoints.sso_providers), {
+          .get(apiUrl(ApiEndpoints.securtiy_settings), {
             headers: { Authorization: '' }
           })
           .then((response) => {
-            set({ auth_settings: response.data });
+            set({ auth_settings: response.data.data });
           })
           .catch(() => {
             console.error('ERR: Error fetching SSO information');

src/frontend/src/states/states.tsx

@@ -59,6 +59,26 @@ export interface AuthProps {
   password_forgotten_enabled: boolean;
 }
 
+export interface SecuritySetting {
+  account: {
+    authentication_method: string;
+  };
+  socialaccount: { providers: Provider[] };
+  mfa: {
+    supported_types: string[];
+  };
+  usersessions: {
+    track_activity: boolean;
+  };
+}
+
+export interface Provider {
+  id: string;
+  name: string;
+  flows: string[];
+  client_id: string;
+}
+
 export interface Provider {
   id: string;
   name: string;