chengma/cmbone
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add auth provider boundary

Browse Source
This commit is contained in:
QiuSW
2026-07-08 23:37:19 +08:00
parent 811a9c889f
commit 5aaac0b166
19 changed files with 788 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/modules/auth/LoginPage.vue
+42 -9
View File
@@ -1,15 +1,40 @@
<script setup lang="ts">
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { DashboardOutlined } from '@ant-design/icons-vue'
import { GetAuthMode, GetAuthProviders, Login } from '../../../bindings/cmbone/internal/services/authservice'
type ProviderOption = {
value: string
label: string
description: string
enabled: boolean
}
const router = useRouter()
const username = ref('')
const password = ref('')
const provider = ref('local')
const providers = ref<ProviderOption[]>([])
const errorMessage = ref('')
const isSubmitting = ref(false)
function submitLogin() {
router.push('/dashboard')
onMounted(async () => {
providers.value = await GetAuthProviders()
provider.value = await GetAuthMode()
})
async function submitLogin() {
errorMessage.value = ''
isSubmitting.value = true
try {
await Login(provider.value, username.value, password.value)
await router.push('/dashboard')
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : String(error)
} finally {
isSubmitting.value = false
}
}
</script>
@@ -34,23 +59,31 @@ function submitLogin() {
<label class="block">
<span class="mb-1 block text-sm font-medium">Provider</span>
<select v-model="provider" class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm outline-none focus:border-slate-500 dark:border-slate-700 dark:bg-slate-950">
<option value="local">Local</option>
<option value="remote">Remote</option>
<option v-for="item in providers" :key="item.value" :value="item.value" :disabled="!item.enabled">
{{ item.label }}{{ item.enabled ? '' : '（未配置）' }}
</option>
</select>
<span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">
{{ providers.find((item) => item.value === provider)?.description || '登录 provider' }}
</span>
</label>
<label class="block">
<span class="mb-1 block text-sm font-medium">账号</span>
<input v-model="username" class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm outline-none focus:border-slate-500 dark:border-slate-700 dark:bg-slate-950" autocomplete="username" />
<input v-model="username" class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm outline-none focus:border-slate-500 dark:border-slate-700 dark:bg-slate-950" autocomplete="username" placeholder="请输入账号" />
</label>
<label class="block">
<span class="mb-1 block text-sm font-medium">密码</span>
<input v-model="password" class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm outline-none focus:border-slate-500 dark:border-slate-700 dark:bg-slate-950" type="password" autocomplete="current-password" />
<input v-model="password" class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm outline-none focus:border-slate-500 dark:border-slate-700 dark:bg-slate-950" type="password" autocomplete="current-password" placeholder="请输入密码" />
</label>
<button class="h-10 w-full rounded-md bg-slate-950 text-sm font-medium text-white hover:bg-slate-800 dark:bg-white dark:text-slate-950 dark:hover:bg-slate-200" type="submit">
进入应用
<p v-if="errorMessage" class="rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900/50 dark:bg-rose-950/40 dark:text-rose-200">
{{ errorMessage }}
</p>
<button class="h-10 w-full rounded-md bg-slate-950 text-sm font-medium text-white hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-white dark:text-slate-950 dark:hover:bg-slate-200" type="submit" :disabled="isSubmitting">
{{ isSubmitting ? '登录中' : '进入应用' }}
</button>
</form>
</section>