GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-08-08 07:03:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update confirmation dialog styles and props in UserProfile.vue, FileList.vue, PluginCard.vue, and dashboard.vue

Browse Source
This commit is contained in:
jxxghp
2024-05-06 17:37:47 +08:00
parent cad8964841
commit c44b20bae3
9 changed files with 179 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
src/views/setting/AccountSettingAccount.vue
View File

@@ -85,10 +85,8 @@ async function loadAccountInfo() {
const user: User = await api.get('user/current')
console.log(user)
accountInfo.value = user
if (!accountInfo.value.avatar)
accountInfo.value.avatar = avatar1
}
catch (error) {
if (!accountInfo.value.avatar) accountInfo.value.avatar = avatar1
} catch (error) {
console.log(error)
}
}
@@ -105,12 +103,9 @@ async function saveAccountInfo() {
}
try {
const result: { [key: string]: any } = await api.put('user/', accountInfo.value)
if (result.success)
$toast.success('用户信息保存成功！')
else
$toast.error(`用户信息保存失败：${result.message}！`)
}
catch (error) {
if (result.success) $toast.success('用户信息保存成功！')
else $toast.error(`用户信息保存失败：${result.message}！`)
} catch (error) {
console.log(error)
}
}
@@ -121,8 +116,7 @@ async function loadAllUsers() {
const result: User[] = await api.get('/user/')
allUsers.value = result
}
catch (error) {
} catch (error) {
console.log(error)
}
}
@@ -134,12 +128,10 @@ async function deleteUser(user: User) {
if (result.success) {
$toast.success('用户删除成功！')
loadAllUsers()
}
else {
} else {
$toast.error(`用户删除失败：${result.message}！`)
}
}
catch (error) {
} catch (error) {
console.log(error)
}
}
@@ -153,12 +145,10 @@ async function deactivateUser(user: User) {
if (result.success) {
$toast.success('用户冻结成功！')
loadAllUsers()
}
else {
} else {
$toast.error(`用户冻结失败：${result.message}！`)
}
}
catch (error) {
} catch (error) {
console.log(error)
}
}
@@ -175,12 +165,10 @@ async function addUser() {
$toast.success('用户新增成功！')
loadAllUsers()
addUserDialog.value = false
}
else {
} else {
$toast.error(`用户新增失败：${result.message}！`)
}
}
catch (error) {
} catch (error) {
console.log(error)
}
}
@@ -194,12 +182,10 @@ async function getOtpUri() {
secret.value = result.data.secret
qrCode.value = result.data.uri
otpDialog.value = true
}
else {
} else {
$toast.error(`获取otp uri失败：${result.message}！`)
}
}
catch (error) {
} catch (error) {
console.log(error)
}
}
@@ -211,12 +197,10 @@ async function disableOtp() {
if (result.success) {
accountInfo.value.is_otp = false
$toast.success('关闭登录双重验证成功！')
}
else {
} else {
$toast.error(`关闭otp失败：${result.message}！`)
}
}
catch (error) {
} catch (error) {
console.log(error)
}
}
@@ -228,18 +212,19 @@ async function judgeOtpPassword() {
return
}
try {
const result: { [key: string]: any } = await api.post('user/otp/judge', { uri: otpUri.value, otpPassword: otpPassword.value })
const result: { [key: string]: any } = await api.post('user/otp/judge', {
uri: otpUri.value,
otpPassword: otpPassword.value,
})
if (result.success) {
$toast.success('开启登录双重验证成功！')
otpDialog.value = false
accountInfo.value.is_otp = true
}
else {
} else {
$toast.error(`开启otp失败：${result.message}！`)
}
}
catch (error) {
} catch (error) {
console.log(error)
}
}
@@ -258,23 +243,13 @@ onMounted(() => {
<VCard title="个人信息">
<VCardText class="d-flex">
<!-- 👉 Avatar -->
<VAvatar
rounded="lg"
size="100"
class="me-6"
:image="accountInfo.avatar"
/>
<VAvatar rounded="lg" size="100" class="me-6" :image="accountInfo.avatar" />
<!-- 👉 Upload Photo -->
<form class="d-flex flex-column justify-center gap-5">
<div class="d-flex flex-wrap gap-2">
<VBtn
color="primary"
@click="refInputEl?.click()"
>
<VIcon
icon="mdi-cloud-upload-outline"
/>
<VBtn color="primary" @click="refInputEl?.click()">
<VIcon icon="mdi-cloud-upload-outline" />
<span class="d-none d-sm-block ms-2">上传头像</span>
</VBtn>
@@ -285,17 +260,10 @@ onMounted(() => {
accept=".jpeg,.png,.jpg,GIF"
hidden
@input="changeAvatar"
>
/>
<VBtn
type="reset"
color="error"
variant="tonal"
@click="resetAvatar"
>
<VIcon
icon="mdi-refresh"
/>
<VBtn type="reset" color="error" variant="tonal" @click="resetAvatar">
<VIcon icon="mdi-refresh" />
<span class="d-none d-sm-block ms-2">重置</span>
</VBtn>
@@ -304,16 +272,12 @@ onMounted(() => {
variant="tonal"
@click.stop="accountInfo.is_otp ? disableOtp() : getOtpUri()"
>
<VIcon
icon="mdi-account-key"
/>
<span class="d-none d-sm-block ms-2">{{ accountInfo.is_otp ? "关闭验证" : "双重验证" }}</span>
<VIcon icon="mdi-account-key" />
<span class="d-none d-sm-block ms-2">{{ accountInfo.is_otp ? '关闭验证' : '双重验证' }}</span>
</VBtn>
</div>
<p class="text-body-1 mb-0">
允许 JPG、GIF 或 PNG 格式， 最大尺寸 800K。
</p>
<p class="text-body-1 mb-0">允许 JPG、GIF 或 PNG 格式， 最大尺寸 800K。</p>
</form>
</VCardText>
@@ -324,33 +288,16 @@ onMounted(() => {
<VForm class="mt-6">
<VRow>
<!-- 👉 Name -->
<VCol
md="6"
cols="12"
>
<VTextField
v-model="accountInfo.name"
readonly
label="用户名"
/>
<VCol md="6" cols="12">
<VTextField v-model="accountInfo.name" readonly label="用户名" />
</VCol>
<!-- 👉 Email -->
<VCol
cols="12"
md="6"
>
<VTextField
v-model="accountInfo.email"
label="邮箱"
type="email"
/>
<VCol cols="12" md="6">
<VTextField v-model="accountInfo.email" label="邮箱" type="email" />
</VCol>
<VCol
cols="12"
md="6"
>
<VCol cols="12" md="6">
<!-- 👉 new password -->
<VTextField
v-model="newPassword"
@@ -362,32 +309,20 @@ onMounted(() => {
/>
</VCol>
<VCol
cols="12"
md="6"
>
<VCol cols="12" md="6">
<!-- 👉 confirm password -->
<VTextField
v-model="confirmPassword"
:type="isConfirmPasswordVisible ? 'text' : 'password'"
:append-inner-icon="
isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
"
:append-inner-icon="isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
label="确认新密码"
@click:append-inner="
isConfirmPasswordVisible = !isConfirmPasswordVisible
"
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
/>
</VCol>
<!-- 👉 Form Actions -->
<VCol
cols="12"
class="d-flex flex-wrap gap-4"
>
<VBtn @click="saveAccountInfo">
保存
</VBtn>
<VCol cols="12" class="d-flex flex-wrap gap-4">
<VBtn @click="saveAccountInfo"> 保存 </VBtn>
</VCol>
</VRow>
</VForm>
@@ -395,10 +330,7 @@ onMounted(() => {
</VCard>
</VCol>
<VCol
v-if="accountInfo.is_superuser"
cols="12"
>
<VCol v-if="accountInfo.is_superuser" cols="12">
<!-- 👉 Accounts -->
<VCard title="所有用户">
<template #append>
@@ -409,76 +341,38 @@ onMounted(() => {
<VTable class="text-no-wrap">
<thead>
<tr>
<th scope="col">
用户名
</th>
<th scope="col">
邮箱
</th>
<th scope="col">
状态
</th>
<th scope="col">
管理员
</th>
<th
scope="col"
class="w-5"
/>
<th scope="col">用户名</th>
<th scope="col">邮箱</th>
<th scope="col">状态</th>
<th scope="col">管理员</th>
<th scope="col" class="w-5" />
</tr>
</thead>
<tbody>
<tr
v-for="user in allUsers"
:key="user.name"
>
<tr v-for="user in allUsers" :key="user.name">
<td>
{{ user.name }}
</td>
<td>{{ user.email }}</td>
<td>
<VChip
v-if="user.is_active"
color="success"
text-color="white"
>
激活
</VChip>
<VChip
v-else
color="error"
text-color="white"
>
冻结
</VChip>
<VChip v-if="user.is_active" color="success" text-color="white"> 激活 </VChip>
<VChip v-else color="error" text-color="white"> 冻结 </VChip>
</td>
<td>{{ user.is_superuser ? "是" : "否" }}</td>
<td>{{ user.is_superuser ? '是' : '否' }}</td>
<td>
<IconBtn v-show="accountInfo.is_superuser && accountInfo.name !== user.name">
<VIcon icon="mdi-dots-vertical" />
<VMenu
activator="parent"
close-on-content-click
>
<VMenu activator="parent" close-on-content-click>
<VList>
<VListItem
variant="plain"
@click="deactivateUser(user)"
>
<VListItem variant="plain" @click="deactivateUser(user)">
<template #prepend>
<VIcon icon="mdi-lock" />
</template>
<VListItemTitle>
{{
user.is_active ? "冻结" : "解冻"
}}
{{ user.is_active ? '冻结' : '解冻' }}
</VListItemTitle>
</VListItem>
<VListItem
variant="plain"
base-color="error"
@click="deleteUser(user)"
>
<VListItem variant="plain" base-color="error" @click="deleteUser(user)">
<template #prepend>
<VIcon icon="mdi-delete" />
</template>
@@ -495,85 +389,50 @@ onMounted(() => {
</VCol>
</VRow>
<!-- =弹窗 -->
<VDialog
v-model="addUserDialog"
max-width="50rem"
persistent
z-index="1010"
>
<VDialog v-model="addUserDialog" max-width="50rem" persistent z-index="1010">
<!-- Dialog Content -->
<VCard title="新增用户">
<VCardText>
<VForm @submit.prevent="() => {}">
<VRow>
<VCol
cols="12"
md="6"
>
<VTextField
v-model="userForm.name"
label="用户名"
:rules="[requiredValidator]"
/>
<VCol cols="12" md="6">
<VTextField v-model="userForm.name" label="用户名" :rules="[requiredValidator]" />
</VCol>
<VCol
cols="12"
md="6"
>
<VCol cols="12" md="6">
<VTextField
v-model="userForm.password"
label="密码"
:rules="[requiredValidator]"
:type="isPasswordVisible ? 'text' : 'password'"
:append-inner-icon="
isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
"
:append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
@click:append-inner="isPasswordVisible = !isPasswordVisible"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<VTextField
v-model="userForm.email"
:rules="[requiredValidator]"
label="邮箱"
/>
<VCol cols="12" md="6">
<VTextField v-model="userForm.email" :rules="[requiredValidator]" label="邮箱" />
</VCol>
</VRow>
</VForm>
</VCardText>
<VCardActions>
<VBtn @click="addUserDialog = false">
取消
</VBtn>
<VBtn @click="addUserDialog = false"> 取消 </VBtn>
<VSpacer />
<VBtn @click="addUser">
确定
</VBtn>
<VBtn @click="addUser"> 确定 </VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- 双重验证弹窗 -->
<VDialog
v-model="otpDialog"
max-width="45rem"
persistent
z-index="1010"
>
<VDialog v-model="otpDialog" max-width="45rem" persistent z-index="1010">
<!-- 开启双重验证弹窗内容 -->
<VCard>
<DialogCloseBtn @click="otpDialog = false" />
<VCardText>
<h4 class="text-h4 text-center mb-6 mt-5">
登录双重验证
</h4><h5 class="text-h5 font-weight-medium mb-2">
身份验证器
</h5>
<h4 class="text-h4 text-center mb-6 mt-5">登录双重验证</h4>
<h5 class="text-h5 font-weight-medium mb-2">身份验证器</h5>
<p class="mb-6">
使用像Google Authenticator、Microsoft Authenticator、Authy或1Password这样的身份验证器应用程序，扫描二维码。它将为您生成一个6位数的代码，供您在下方输入。
使用像Google Authenticator、Microsoft
Authenticator、Authy或1Password这样的身份验证器应用程序，扫描二维码。它将为您生成一个6位数的代码，供您在下方输入。
</p>
<div class="my-6">
<QrcodeVue class="mx-auto" :value="qrCode" :size="200" max-width="25rem" />
@@ -597,14 +456,12 @@ onMounted(() => {
variant="outlined"
/>
<div class="d-flex justify-end flex-wrap gap-4">
<VBtn variant="outlined" color="secondary" @click="otpDialog = false">
取消
</VBtn>
<VBtn variant="outlined" color="secondary" @click="otpDialog = false"> 取消 </VBtn>
<VBtn @click="judgeOtpPassword">
确定
<template #append>
<template #prepend>
<VIcon icon="mdi-check" />
</template>
确定
</VBtn>
</div>
</VForm>