feat(flow): auto-resolve authentik sub and improve admin dropdown UX

backend/app/api/admin_catalog.py

@@ -83,7 +83,11 @@ def _sync_member_to_authentik(
         display_name=display_name,
         is_active=is_active,
     )
-    return {"authentik_user_id": result.user_id, "sync_action": result.action}
+    return {
+        "authentik_user_id": result.user_id,
+        "sync_action": result.action,
+        "authentik_sub": result.authentik_sub or "",
+    }
 
 
 @router.get("/systems")
@@ -332,17 +336,25 @@ def upsert_member(
     db: Session = Depends(get_db),
 ) -> MemberItem:
     users_repo = UsersRepository(db)
+    resolved_sub = payload.authentik_sub
     authentik_user_id = None
     if payload.sync_to_authentik:
+        seed_sub = payload.authentik_sub or (payload.email or "")
+        if not seed_sub:
+            raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="authentik_sub_or_email_required")
         sync = _sync_member_to_authentik(
-            authentik_sub=payload.authentik_sub,
+            authentik_sub=seed_sub,
             email=payload.email,
             display_name=payload.display_name,
             is_active=payload.is_active,
         )
         authentik_user_id = int(sync["authentik_user_id"])
+        if sync.get("authentik_sub"):
+            resolved_sub = str(sync["authentik_sub"])
+    if not resolved_sub:
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="authentik_sub_required")
     row = users_repo.upsert_by_sub(
-        authentik_sub=payload.authentik_sub,
+        authentik_sub=resolved_sub,
         email=payload.email,
         display_name=payload.display_name,
         is_active=payload.is_active,

backend/app/schemas/catalog.py

@@ -87,7 +87,7 @@ class MemberItem(BaseModel):
 
 
 class MemberUpsertRequest(BaseModel):
-    authentik_sub: str
+    authentik_sub: str | None = None
     email: str | None = None
     display_name: str | None = None
     is_active: bool = True

backend/app/services/authentik_admin_service.py

@@ -12,6 +12,7 @@ from app.core.config import Settings
 class AuthentikSyncResult:
     user_id: int
     action: str
+    authentik_sub: str | None = None
 
 
 class AuthentikAdminService:
@@ -66,10 +67,14 @@ class AuthentikAdminService:
                 patch_resp = client.patch(f"/api/v3/core/users/{user_pk}/", json=payload)
                 if patch_resp.status_code >= 400:
                     raise HTTPException(status_code=502, detail="authentik_update_failed")
-                return AuthentikSyncResult(user_id=user_pk, action="updated")
+                return AuthentikSyncResult(user_id=user_pk, action="updated", authentik_sub=existing.get("uid"))
 
             create_resp = client.post("/api/v3/core/users/", json=payload)
             if create_resp.status_code >= 400:
                 raise HTTPException(status_code=502, detail="authentik_create_failed")
             created = create_resp.json()
-            return AuthentikSyncResult(user_id=int(created["pk"]), action="created")
+            return AuthentikSyncResult(
+                user_id=int(created["pk"]),
+                action="created",
+                authentik_sub=created.get("uid"),
+            )

frontend/src/pages/admin/MembersPage.vue

@@ -28,7 +28,6 @@
 
     <el-dialog v-model="showCreateDialog" title="新增會員" @close="resetCreateForm">
       <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
-        <el-form-item label="Authentik Sub" prop="authentik_sub"><el-input v-model="createForm.authentik_sub" /></el-form-item>
         <el-form-item label="Email" prop="email"><el-input v-model="createForm.email" /></el-form-item>
         <el-form-item label="顯示名稱" prop="display_name"><el-input v-model="createForm.display_name" /></el-form-item>
         <el-form-item label="啟用"><el-switch v-model="createForm.is_active" /></el-form-item>
@@ -71,14 +70,13 @@ const showCreateDialog = ref(false)
 const createFormRef = ref()
 const creating = ref(false)
 const createForm = ref({
-  authentik_sub: '',
   email: '',
   display_name: '',
   is_active: true,
   sync_to_authentik: true
 })
 const createRules = {
-  authentik_sub: [{ required: true, message: '請輸入 Authentik Sub', trigger: 'blur' }]
+  email: [{ required: true, message: '請輸入 Email', trigger: 'blur' }]
 }
 
 const showEditDialog = ref(false)
@@ -107,7 +105,6 @@ async function load() {
 
 function resetCreateForm() {
   createForm.value = {
-    authentik_sub: '',
     email: '',
     display_name: '',
     is_active: true,

frontend/src/pages/admin/ModulesPage.vue

@@ -32,7 +32,9 @@
     <el-dialog v-model="showDialog" title="新增模組" @close="resetForm">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="System Key" prop="system_key">
-          <el-input v-model="form.system_key" placeholder="mkt" />
+          <el-select v-model="form.system_key" placeholder="選擇系統" filterable style="width: 100%">
+            <el-option v-for="s in systems" :key="s.system_key" :label="`${s.name} (${s.system_key})`" :value="s.system_key" />
+          </el-select>
         </el-form-item>
         <el-form-item label="Module Key" prop="module_key">
           <el-input v-model="form.module_key" placeholder="campaign" />
@@ -75,8 +77,10 @@ import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { getModules, createModule, updateModule } from '@/api/modules'
+import { getSystems } from '@/api/systems'
 
 const modules = ref([])
+const systems = ref([])
 const loading = ref(false)
 const error = ref(false)
 const errorMsg = ref('')
@@ -98,8 +102,9 @@ async function load() {
   loading.value = true
   error.value = false
   try {
-    const res = await getModules()
+    const [modulesRes, systemsRes] = await Promise.all([getModules(), getSystems()])
-    modules.value = res.data?.items || []
+    modules.value = modulesRes.data?.items || []
+    systems.value = systemsRes.data?.items || []
   } catch (err) {
     error.value = true
     errorMsg.value = err.response?.status === 422

frontend/src/pages/admin/PermissionGroupsPage.vue

@@ -36,7 +36,14 @@
               </el-select>
             </el-form-item>
             <el-form-item label="Authentik Sub">
-              <el-input v-model="memberForm.authentikSub" placeholder="authentik-sub-xxx" />
+              <el-select v-model="memberForm.authentikSub" placeholder="選擇會員" filterable allow-create default-first-option style="width: 100%">
+                <el-option
+                  v-for="m in members"
+                  :key="m.authentik_sub"
+                  :label="`${m.display_name || m.email || '(no-name)'} (${m.authentik_sub})`"
+                  :value="m.authentik_sub"
+                />
+              </el-select>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" :loading="addingMember" @click="handleAddMember" :disabled="!memberForm.groupKey || !memberForm.authentikSub">
@@ -177,12 +184,14 @@ import { getSystems } from '@/api/systems'
 import { getModules } from '@/api/modules'
 import { getCompanies } from '@/api/companies'
 import { getSites } from '@/api/sites'
+import { getMembers } from '@/api/members'
 
 const activeTab = ref('groups')
 const systems = ref([])
 const modules = ref([])
 const companies = ref([])
 const sites = ref([])
+const members = ref([])
 const actionOptions = ['view', 'edit', 'manage', 'admin']
 
 const filteredModuleOptions = computed(() => {
@@ -190,7 +199,9 @@ const filteredModuleOptions = computed(() => {
   return modules.value
     .filter(m => m.system_key === groupPermForm.system && !m.module_key.endsWith('.__system__'))
     .map(m => ({
-      value: m.module_key.split('.', 2)[1] || m.module_key,
+      value: m.module_key.startsWith(`${groupPermForm.system}.`)
+        ? m.module_key.slice(groupPermForm.system.length + 1)
+        : m.module_key,
       label: `${m.name} (${m.module_key})`
     }))
 })
@@ -226,16 +237,18 @@ async function loadGroups() {
 }
 
 async function loadCatalogs() {
-  const [systemsRes, modulesRes, companiesRes, sitesRes] = await Promise.all([
+  const [systemsRes, modulesRes, companiesRes, sitesRes, membersRes] = await Promise.all([
     getSystems(),
     getModules(),
     getCompanies(),
-    getSites()
+    getSites(),
+    getMembers()
   ])
   systems.value = systemsRes.data?.items || []
   modules.value = modulesRes.data?.items || []
   companies.value = companiesRes.data?.items || []
   sites.value = sitesRes.data?.items || []
+  members.value = membersRes.data?.items || []
 }
 
 // Create Group

frontend/src/pages/permissions/PermissionAdminPage.vue

@@ -199,7 +199,9 @@ const grantModuleOptions = computed(() => {
   return modules.value
     .filter(m => m.system_key === grantForm.system && !m.module_key.endsWith('.__system__'))
     .map(m => ({
-      value: m.module_key.split('.', 2)[1] || m.module_key,
+      value: m.module_key.startsWith(`${grantForm.system}.`)
+        ? m.module_key.slice(grantForm.system.length + 1)
+        : m.module_key,
       label: `${m.name} (${m.module_key})`
     }))
 })
@@ -268,7 +270,9 @@ const revokeModuleOptions = computed(() => {
   return modules.value
     .filter(m => m.system_key === revokeForm.system && !m.module_key.endsWith('.__system__'))
     .map(m => ({
-      value: m.module_key.split('.', 2)[1] || m.module_key,
+      value: m.module_key.startsWith(`${revokeForm.system}.`)
+        ? m.module_key.slice(revokeForm.system.length + 1)
+        : m.module_key,
       label: `${m.name} (${m.module_key})`
     }))
 })