ew-construct oidc

src/store/user.js

@@ -10,6 +10,7 @@ export const useUserStore = defineStore({
   state: () => ({
     nickname: '',
     username: '',
+    email: '',
     token: '',
     role: '',
     avatar: '',

src/utils/i18n/zh_CN.json

@@ -457,5 +457,8 @@
   },
   "UserToken": {
     "One": "用户Token"
+  },
+  "Email": {
+    "One": "邮箱"
   }
 }

src/views/login/login.vue

@@ -93,10 +93,10 @@ import webauthImage from '@/assets/webauth.png';
 import defaultImage from '@/assets/oidc.png';
 
 const providerImageMap = {
-  google: googleImage,
-  github: githubImage,
-  oidc: oidcImage,
-  webauth: webauthImage,
+  Google: googleImage,
+  GitHub: githubImage,
+  OIDC: oidcImage,
+  WebAuth: webauthImage,
   default: defaultImage,
 };
 

src/views/my/info.vue

@@ -5,12 +5,15 @@
         <el-form-item :label="T('Username')">
           <div>{{ userStore.username }}</div>
         </el-form-item>
+        <el-form-item :label="T('Email')">
+          <div>{{ userStore.email }}</div>
+        </el-form-item>
         <el-form-item :label="T('Password')" prop="password">
           <el-button type="danger" @click="showChangePwd">{{ T('ChangePassword') }}</el-button>
         </el-form-item>
         <el-form-item label="OIDC">
           <el-table :data="oidcData" border fit>
-            <el-table-column :label="T('Platform')" prop="third_type" align="center"></el-table-column>
+            <el-table-column :label="T('IdP')" prop="op" align="center"></el-table-column>
             <el-table-column :label="T('Status')" prop="status" align="center">
               <template #default="{ row }">
                 <el-tag v-if="row.status === 1" type="success">{{ T('HasBind') }}</el-tag>
@@ -55,7 +58,7 @@
   }
   getMyOauth()
   const toBind = async (row) => {
-    const res = await bind({ op: row.third_type }).catch(_ => false)
+    const res = await bind({ op: row.op}).catch(_ => false)
     if (res) {
       const { code, url } = res.data
       window.open(url)
@@ -70,7 +73,7 @@
     if (!cf) {
       return false
     }
-    const res = await unbind({ op: row.third_type }).catch(_ => false)
+    const res = await unbind({ op: row.op }).catch(_ => false)
     if (res) {
       getMyOauth()
     }

src/views/oauth/index.vue

@@ -11,7 +11,8 @@
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="ID" align="center"/>
-        <el-table-column prop="op" :label="T('Platform')" align="center"/>
+        <el-table-column prop="op" :label="T('IdP')" align="center"/>
+        <el-table-column prop="oauth_type" :label="T('Type')" align="center"/>
         <el-table-column prop="auto_register" :label="T('AutoRegister')" align="center"/>
         <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
         <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
@@ -34,17 +35,20 @@
     </el-card>
     <el-dialog v-model="formVisible" :title="!formData.id?T('Create') :T('Update')" width="800">
       <el-form class="dialog-form" ref="form" :model="formData" :rules="rules" label-width="120px">
-        <el-form-item label="Type" prop="op">
-          <el-radio-group v-model="formData.op" :disabled="!!formData.id">
-            <el-radio v-for="item in ops" :key="item.value" :value="item.value" style="display: block">
+        <el-form-item label="Type" prop="">
+          <el-radio-group v-model="formData.oauth_type" :disabled="!!formData.id">
+            <el-radio v-for="item in types" :key="item.value" :value="item.value" style="display: block">
               {{ item.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item v-if="formData.op === 'oidc'" label="Issuer" prop="issuer">
+        <el-form-item v-if="formData.oauth_type === 'oidc'" label="IdP" prop="op">
+          <el-input v-model="formData.op" :placeholder="T('Your IdP Name')"></el-input>
+        </el-form-item>
+        <el-form-item v-if="formData.oauth_type === 'oidc'" label="Issuer" prop="issuer">
           <el-input v-model="formData.issuer" :placeholder="`${T('Check your IdP docs, without')} '/.well-known/openid-configuration'`"></el-input>
         </el-form-item>
-        <el-form-item v-show="formData.op === 'oidc'" label="Scopes" prop="scopes">
+        <el-form-item v-show="formData.oauth_type === 'oidc'" label="Scopes" prop="scopes">
           <el-input v-model="formData.scopes" :placeholder="`${T('Optional, default is')} 'openid,profile,email'`" ></el-input>
         </el-form-item>
         <el-form-item label="ClientId" prop="client_id">
@@ -85,8 +89,8 @@
     page: 1,
     page_size: 10,
   })
-  const ops = [
-    { value: 'github', label: 'Github' },
+  const types = [
+    { value: 'github', label: 'GitHub' },
     { value: 'google', label: 'Google' },
     { value: 'oidc',   label: 'OIDC'   }
   ]
@@ -134,6 +138,7 @@
   const formData = reactive({
     id: 0,
     op: '',
+    oauth_type: '',
     issuer: '',
     client_id: '',
     client_secret: '',
@@ -145,13 +150,14 @@
     client_id: [{ required: true, message: T('ParamRequired', { param: 'client_id' }), trigger: 'blur' }],
     client_secret: [{ required: true, message: T('ParamRequired', { param: 'client_secret' }), trigger: 'blur' }],
     redirect_url: [{ required: true, message: T('ParamRequired', { param: 'redirect_url' }), trigger: 'blur' }],
-    op: [{ required: true, message: T('ParamRequired', { param: 'op' }), trigger: 'blur' }],
+    oauth_type: [{ required: true, message: T('ParamRequired', { param: 'oauth_type' }), trigger: 'blur' }],
     issuer: [{ required: true, message: T('ParamRequired', { param: 'issuer' }), trigger: 'blur' }],
   }
   const toEdit = (row) => {
     formVisible.value = true
     formData.id = row.id
     formData.op = row.op
+    formData.oauth_type = row.oauth_type
     formData.issuer = row.issuer
     formData.client_id = row.client_id
     formData.client_secret = row.client_secret
@@ -164,6 +170,7 @@
     formVisible.value = true
     formData.id = 0
     formData.op = ''
+    formData.oauth_type = ''
     formData.issuer = ''
     formData.client_id = ''
     formData.client_secret = ''

src/views/user/composables/edit.js

@@ -38,6 +38,7 @@ export function useSubmit (form, id) {
   const router = useRouter()
   const rules = reactive({
     username: [{ required: true, message: T('ParamRequired', { param: T('Username') }) }],
+    email: [{ required: true, message: T('ParamRequired', { param: T('Email') }) }],
     group_id: [{ required: true, message: T('ParamRequired', { param: T('Group') }) }],
     // nickname: [{ required: true, message: '昵称是必须的' }],
     status: [{ required: true, message: T('ParamRequired', { param: T('Status') }) }],

src/views/user/edit.vue

@@ -4,6 +4,9 @@
       <el-form-item :label="T('Username')" prop="username">
         <el-input v-model="form.username"></el-input>
       </el-form-item>
+      <el-form-item :label="T('Email')" prop="email">
+        <el-input v-model="form.email"></el-input>
+      </el-form-item>
       <el-form-item :label="T('Nickname')" prop="nickname">
         <el-input v-model="form.nickname"></el-input>
       </el-form-item>

src/views/user/index.vue

@@ -15,6 +15,7 @@
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="ID" align="center"></el-table-column>
         <el-table-column prop="username" :label="T('Username')" align="center"/>
+        <el-table-column prop="email" :label="T('Email')" align="center"/>
         <el-table-column prop="nickname" :label="T('Nickname')" align="center"/>
         <el-table-column :label="T('Group')" align="center">
           <template #default="{row}">