From a2583c05917b9da450c9d76d49fb9986a1f55e35 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Tue, 13 Aug 2024 18:40:50 +0800
Subject: [PATCH] add mobile and email filed for user

---
 api/handler/user_handler.go                   | 29 ++++++--
 api/store/model/user.go                       |  2 +
 api/store/vo/user.go                          |  2 +
 web/src/assets/css/login.styl                 |  3 +-
 web/src/assets/css/member.styl                |  2 -
 .../{ResetAccount.vue => BindMobile.vue}      | 35 ++++++----
 web/src/components/LoginDialog.vue            | 66 +++++++++++--------
 web/src/components/ResetPass.vue              |  6 +-
 web/src/components/SendMsg.vue                | 12 +++-
 web/src/views/Login.vue                       |  4 +-
 web/src/views/LoginCallback.vue               | 25 ++++++-
 web/src/views/Member.vue                      |  7 +-
 web/src/views/Register.vue                    | 22 +++++--
 web/src/views/admin/Users.vue                 |  4 +-
 web/vue.config.js                             |  2 +-
 15 files changed, 152 insertions(+), 69 deletions(-)
 rename web/src/components/{ResetAccount.vue => BindMobile.vue} (73%)

diff --git a/api/handler/user_handler.go b/api/handler/user_handler.go
index 25127eda..ac9cc240 100644
--- a/api/handler/user_handler.go
+++ b/api/handler/user_handler.go
@@ -58,6 +58,8 @@ func (h *UserHandler) Register(c *gin.Context) {
 	var data struct {
 		RegWay     string `json:"reg_way"`
 		Username   string `json:"username"`
+		Mobile     string `json:"mobile"`
+		Email      string `json:"email"`
 		Password   string `json:"password"`
 		Code       string `json:"code"`
 		InviteCode string `json:"invite_code"`
@@ -85,8 +87,15 @@ func (h *UserHandler) Register(c *gin.Context) {
 
 	// 检查验证码
 	var key string
-	if data.RegWay == "email" || data.RegWay == "mobile" {
-		key = CodeStorePrefix + data.Username
+	if data.RegWay == "email" {
+		key = CodeStorePrefix + data.Email
+		code, err := h.redis.Get(c, key).Result()
+		if err != nil || code != data.Code {
+			resp.ERROR(c, "验证码错误")
+			return
+		}
+	} else if data.RegWay == "mobile" {
+		key = CodeStorePrefix + data.Mobile
 		code, err := h.redis.Get(c, key).Result()
 		if err != nil || code != data.Code {
 			resp.ERROR(c, "验证码错误")
@@ -106,7 +115,17 @@ func (h *UserHandler) Register(c *gin.Context) {
 
 	// check if the username is existing
 	var item model.User
-	res := h.DB.Where("username = ?", data.Username).First(&item)
+	session := h.DB.Session(&gorm.Session{})
+	if data.Mobile != "" {
+		session = session.Where("mobile = ?", data.Mobile)
+		data.Username = data.Mobile
+	} else if data.Email != "" {
+		session = session.Where("email = ?", data.Email)
+		data.Username = data.Email
+	} else if data.Username != "" {
+		session = session.Where("username = ?", data.Username)
+	}
+	session.First(&item)
 	if item.Id > 0 {
 		resp.ERROR(c, "该用户名已经被注册")
 		return
@@ -115,6 +134,8 @@ func (h *UserHandler) Register(c *gin.Context) {
 	salt := utils.RandString(8)
 	user := model.User{
 		Username:   data.Username,
+		Mobile:     data.Mobile,
+		Email:      data.Email,
 		Password:   utils.GenPassword(data.Password, salt),
 		Avatar:     "/images/avatar/user.png",
 		Salt:       salt,
@@ -134,7 +155,7 @@ func (h *UserHandler) Register(c *gin.Context) {
 		user.Nickname = fmt.Sprintf("极客学长@%d", utils.RandomNumber(6))
 	}
 
-	res = h.DB.Create(&user)
+	res := h.DB.Create(&user)
 	if res.Error != nil {
 		resp.ERROR(c, "保存数据失败")
 		logger.Error(res.Error)
diff --git a/api/store/model/user.go b/api/store/model/user.go
index bc2bafec..6a6e5829 100644
--- a/api/store/model/user.go
+++ b/api/store/model/user.go
@@ -4,6 +4,8 @@ type User struct {
 	BaseModel
 	Username    string
 	Nickname    string
+	Email       string
+	Mobile      string
 	Password    string
 	Avatar      string
 	Salt        string // 密码盐
diff --git a/api/store/vo/user.go b/api/store/vo/user.go
index 8e0faabe..06d9d55d 100644
--- a/api/store/vo/user.go
+++ b/api/store/vo/user.go
@@ -4,6 +4,8 @@ type User struct {
 	BaseVo
 	Username    string   `json:"username"`
 	Nickname    string   `json:"nickname"`
+	Mobile      string   `json:"mobile"`
+	Email       string   `json:"email"`
 	Avatar      string   `json:"avatar"`
 	Salt        string   `json:"salt"`          // 密码盐
 	Power       int      `json:"power"`         // 剩余算力
diff --git a/web/src/assets/css/login.styl b/web/src/assets/css/login.styl
index bf8b6c49..57d11521 100644
--- a/web/src/assets/css/login.styl
+++ b/web/src/assets/css/login.styl
@@ -96,7 +96,8 @@
           font-size 20px
           background: #E9F1F6;
           padding: 8px;
-          border-radius: 50%;
+          border-radius: 50%
+          cursor pointer
         }
         .iconfont.icon-wechat {
           color #0bc15f
diff --git a/web/src/assets/css/member.styl b/web/src/assets/css/member.styl
index 7147db4a..c1f61bb5 100644
--- a/web/src/assets/css/member.styl
+++ b/web/src/assets/css/member.styl
@@ -4,8 +4,6 @@
 
   .el-dialog {
     .el-dialog__body {
-      padding-top 10px
-
       .pay-container {
         .amount {
           text-align center
diff --git a/web/src/components/ResetAccount.vue b/web/src/components/BindMobile.vue
similarity index 73%
rename from web/src/components/ResetAccount.vue
rename to web/src/components/BindMobile.vue
index 04446884..9fa4d54e 100644
--- a/web/src/components/ResetAccount.vue
+++ b/web/src/components/BindMobile.vue
@@ -6,14 +6,12 @@
       :before-close="close"
       :title="title"
   >
-    <div class="form" id="bind-mobile-form">
-      <el-alert v-if="username !== ''" type="info" show-icon :closable="false" style="margin-bottom: 20px;">
-        <p>当前绑定账号：{{ username }}，只允许使绑定有效的手机号或者邮箱地址作为登录账号。</p>
-      </el-alert>
+    <div class="form">
+      <div class="text-center">当前已绑手机号：{{ mobile }}</div>
 
       <el-form :model="form" label-width="120px">
-        <el-form-item label="新账号">
-          <el-input v-model="form.username"/>
+        <el-form-item label="手机号">
+          <el-input v-model="form.mobile"/>
         </el-form-item>
         <el-form-item label="验证码">
           <el-row :gutter="20">
@@ -21,7 +19,7 @@
               <el-input v-model="form.code" maxlength="6"/>
             </el-col>
             <el-col :span="8">
-              <send-msg size="" :receiver="form.username"/>
+              <send-msg size="" :receiver="form.username" type="mobile"/>
             </el-col>
           </el-row>
         </el-form-item>
@@ -44,26 +42,31 @@ import SendMsg from "@/components/SendMsg.vue";
 import {ElMessage} from "element-plus";
 import {httpPost} from "@/utils/http";
 import {validateEmail, validateMobile} from "@/utils/validate";
+import {checkSession} from "@/store/cache";
 
 const props = defineProps({
   show: Boolean,
-  username: String
 });
 
 const showDialog = computed(() => {
   return props.show
 })
 
-const title = ref('重置登录账号')
+const title = ref('绑定手机')
+const mobile = ref('')
 const form = ref({
-  username: '',
+  mobile: '',
   code: ''
 })
 
+checkSession().then(user => {
+  mobile.value = user.mobile
+})
+
 const emits = defineEmits(['hide']);
 
 const save = () => {
-  if (!validateMobile(form.value.username) && !validateEmail(form.value.username)) {
+  if (!validateMobile(form.value.mobile) && !validateEmail(form.value.mobile)) {
     return ElMessage.error("请输入合法的手机号/邮箱地址")
   }
   if (form.value.code === '') {
@@ -87,7 +90,15 @@ const close = function () {
 </script>
 
 <style lang="stylus" scoped>
-#bind-mobile-form {
+.form {
+  .text-center {
+    text-align center
+    padding-bottom 15px
+    font-size 14px
+    color #a1a1a1
+    font-weight 700
+  }
+
   .el-form-item__content {
     .el-row {
       width 100%
diff --git a/web/src/components/LoginDialog.vue b/web/src/components/LoginDialog.vue
index b6cdd66e..c04da964 100644
--- a/web/src/components/LoginDialog.vue
+++ b/web/src/components/LoginDialog.vue
@@ -47,25 +47,29 @@
         </div>
 
         <el-row class="btn-row" :gutter="20">
-          <el-col :span="12">
+          <el-col :span="24">
             <el-button class="login-btn" type="primary" size="large" @click="submitLogin">登录</el-button>
           </el-col>
-          <el-col :span="12">
-            <span class="text">
-              还没有账号？
-              <el-tag @click="login = false">注册</el-tag>
-            </span>
-            <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
-          </el-col>
         </el-row>
 
-        <el-row v-if="wechatLoginURL !== ''">
-          <div class="c-login">
-            <div class="text">其他登录方式：</div>
-            <div class="login-type">
-              <a class="wechat-login" :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
+        <el-row>
+          <el-col :span="12">
+            <div class="reg">
+              还没有账号？
+              <el-button type="primary" class="forget" size="small" @click="login = false">注册</el-button>
+
+              <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
             </div>
-          </div>
+          </el-col>
+
+          <el-col :span="12">
+            <div class="c-login" v-if="wechatLoginURL !== ''">
+              <div class="text">其他登录方式：</div>
+              <div class="login-type">
+                <a class="wechat-login" :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
+              </div>
+            </div>
+          </el-col>
         </el-row>
       </el-form>
     </div>
@@ -77,7 +81,7 @@
             <div class="block">
               <el-input placeholder="手机号码"
                         size="large"
-                        v-model="data.username"
+                        v-model="data.mobile"
                         maxlength="11"
                         autocomplete="off">
                 <template #prefix>
@@ -102,7 +106,7 @@
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.username"/>
+                  <send-msg size="large" :receiver="data.mobile" type="mobile"/>
                 </el-col>
               </el-row>
             </div>
@@ -111,7 +115,7 @@
             <div class="block">
               <el-input placeholder="邮箱地址"
                         size="large"
-                        v-model="data.username"
+                        v-model="data.email"
                         autocomplete="off">
                 <template #prefix>
                   <el-icon>
@@ -135,7 +139,7 @@
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.username"/>
+                  <send-msg size="large" :receiver="data.email" type="email"/>
                 </el-col>
               </el-row>
             </div>
@@ -257,8 +261,10 @@ watch(() => props.show, (newValue) => {
 
 const login = ref(true)
 const data = ref({
-  username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS,
+  username: "",
+  password: "",
+  mobile: "",
+  email: "",
   repass: "",
   code: "",
   invite_code: ""
@@ -353,15 +359,15 @@ const doLogin = (verifyData) => {
 
 // 注册操作
 const submitRegister = () => {
-  if (data.value.username === '') {
+  if (activeName.value === 'username' && data.value.username === '') {
     return ElMessage.error('请输入用户名');
   }
 
-  if (activeName.value === 'mobile' && !validateMobile(data.value.username)) {
+  if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
     return ElMessage.error('请输入合法的手机号');
   }
 
-  if (activeName.value === 'email' && !validateEmail(data.value.username)) {
+  if (activeName.value === 'email' && !validateEmail(data.value.email)) {
     return ElMessage.error('请输入合法的邮箱地址');
   }
 
@@ -468,8 +474,6 @@ const close = function () {
 
     .c-login {
       display flex
-      padding-top 20px
-
       .text {
         font-size 16px
         color #a1a1a1
@@ -482,7 +486,7 @@ const close = function () {
         justify-content center
 
         .iconfont {
-          font-size 20px
+          font-size 18px
           background: #E9F1F6;
           padding: 8px;
           border-radius: 50%;
@@ -492,6 +496,16 @@ const close = function () {
         }
       }
     }
+
+    .reg {
+      height 50px
+      display flex
+      align-items center
+
+      .el-button {
+        margin-left 10px
+      }
+    }
   }
 
   .register-box {
diff --git a/web/src/components/ResetPass.vue b/web/src/components/ResetPass.vue
index 992bb025..0f6f9c4f 100644
--- a/web/src/components/ResetPass.vue
+++ b/web/src/components/ResetPass.vue
@@ -10,13 +10,13 @@
       <div class="form">
 
         <el-form :model="form" label-width="80px" label-position="left">
-          <el-form-item label="用户名">
-            <el-input v-model="form.username" placeholder="手机号/邮箱地址"/>
+          <el-form-item label="手机号">
+            <el-input v-model="form.username" placeholder="手机号"/>
           </el-form-item>
           <el-form-item label="验证码">
             <div class="code-box">
               <el-input v-model="form.code" maxlength="6"/>
-              <send-msg size="" :receiver="form.username" style="margin-left: 10px; min-width: 100px"/>
+              <send-msg size="" :receiver="form.username" type="mobile"/>
             </div>
             <el-row :gutter="20">
               <el-col :span="12">
diff --git a/web/src/components/SendMsg.vue b/web/src/components/SendMsg.vue
index f39714a0..87a15a79 100644
--- a/web/src/components/SendMsg.vue
+++ b/web/src/components/SendMsg.vue
@@ -21,6 +21,10 @@ import {getSystemInfo} from "@/store/cache";
 const props = defineProps({
   receiver: String,
   size: String,
+  type: {
+    type: String,
+    default: 'mobile'
+  }
 });
 const btnText = ref('发送验证码')
 const canSend = ref(true)
@@ -32,9 +36,13 @@ getSystemInfo().then(res => {
 })
 
 const sendMsg = () => {
-  if (!validateMobile(props.receiver) && !validateEmail(props.receiver)) {
-    return showMessageError("请输入合法的手机号/邮箱地址")
+  if (!validateMobile(props.receiver) && props.type === 'mobile') {
+    return showMessageError("请输入合法的手机号")
   }
+  if (!validateEmail(props.receiver) && props.type === 'email') {
+    return showMessageError("请输入合法的邮箱地址")
+  }
+  
   if (enableVerify.value) {
     captchaRef.value.loadCaptcha()
   } else {
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 05b443e9..6545274a 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -48,7 +48,7 @@
             <el-divider class="divider">其他登录方式</el-divider>
 
             <div class="clogin">
-              <a class="wechat-login" :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
+              <a :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
             </div>
           </div>
         </div>
@@ -76,6 +76,7 @@ import {setUserToken} from "@/store/session";
 import ResetPass from "@/components/ResetPass.vue";
 import {showMessageError} from "@/utils/dialog";
 import Captcha from "@/components/Captcha.vue";
+import QRCode from "qrcode";
 
 const router = useRouter();
 const title = ref('Geek-AI');
@@ -161,7 +162,6 @@ const doLogin = (verifyData) => {
     showMessageError('登录失败，' + e.message)
   })
 }
-
 </script>
 
 <style lang="stylus" scoped>
diff --git a/web/src/views/LoginCallback.vue b/web/src/views/LoginCallback.vue
index 1b9110f8..d6d4573b 100644
--- a/web/src/views/LoginCallback.vue
+++ b/web/src/views/LoginCallback.vue
@@ -24,7 +24,8 @@
             </div>
           </template>
           <template #extra>
-            <el-button type="primary" @click="finishLogin">我知道了</el-button>
+            <el-button type="primary" class="copy-user-info" :data-clipboard-text="'用户名：'+username+' 密码：'+password">复制</el-button>
+            <el-button type="danger" @click="finishLogin">关闭</el-button>
           </template>
       </el-result>
     </el-dialog>
@@ -33,12 +34,14 @@
 </template>
 
 <script setup>
-import {ref} from "vue"
+import {onMounted, onUnmounted, ref} from "vue"
 import {useRouter} from "vue-router"
 import {ElMessage, ElMessageBox} from "element-plus";
 import {httpGet} from "@/utils/http";
 import {setUserToken} from "@/store/session";
 import {isMobile} from "@/utils/libs";
+import Clipboard from "clipboard";
+import {showMessageError, showMessageOK} from "@/utils/dialog";
 
 const winHeight = ref(window.innerHeight)
 const loading = ref(true)
@@ -74,7 +77,25 @@ if (code === "") {
     })
   })
 }
+
+const clipboard = ref(null)
+onMounted(() => {
+  clipboard.value = new Clipboard('.copy-user-info');
+  clipboard.value.on('success', () => {
+    showMessageOK('复制成功！');
+  })
+
+  clipboard.value.on('error', () => {
+    showMessageError('复制失败！');
+  })
+})
+
+onUnmounted(() => {
+  clipboard.value.destroy();
+})
+
 const finishLogin = () => {
+  show.value = false
   if (isMobile()) {
     router.push('/mobile')
   } else {
diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue
index 5cfca464..3a1475f4 100644
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -10,7 +10,7 @@
               <el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
             </el-col>
             <el-col :span="12">
-              <el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
+              <el-button type="primary" @click="showBindMobileDialog = true">绑定手机</el-button>
             </el-col>
             <el-col :span="24">
               <el-button type="success" @click="showRedeemVerifyDialog = true">兑换码核销
@@ -93,8 +93,7 @@
       <password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
                        @logout="logout"/>
 
-      <bind-mobile v-if="isLogin" :show="showBindMobileDialog" :username="user.username"
-                   @hide="showBindMobileDialog = false"/>
+      <bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false"/>
 
       <redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback"/>
 
@@ -143,7 +142,7 @@ import {InfoFilled, SuccessFilled} from "@element-plus/icons-vue";
 import {checkSession, getSystemInfo} from "@/store/cache";
 import UserProfile from "@/components/UserProfile.vue";
 import PasswordDialog from "@/components/PasswordDialog.vue";
-import BindMobile from "@/components/ResetAccount.vue";
+import BindMobile from "@/components/BindMobile.vue";
 import RedeemVerify from "@/components/RedeemVerify.vue";
 import {useRouter} from "vue-router";
 import {removeUserToken} from "@/store/session";
diff --git a/web/src/views/Register.vue b/web/src/views/Register.vue
index 979b7a7f..2e5ee34e 100644
--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -41,7 +41,7 @@
                         </el-input>
                       </el-col>
                       <el-col :span="12">
-                        <send-msg size="large" :receiver="data.username"/>
+                        <send-msg size="large" :receiver="data.username" type="mobile"/>
                       </el-col>
                     </el-row>
                   </div>
@@ -50,7 +50,7 @@
                   <div class="block">
                     <el-input placeholder="邮箱地址"
                               size="large"
-                              v-model="data.username"
+                              v-model="data.email"
                               autocomplete="off">
                       <template #prefix>
                         <el-icon>
@@ -74,7 +74,7 @@
                         </el-input>
                       </el-col>
                       <el-col :span="12">
-                        <send-msg size="large" :receiver="data.username"/>
+                        <send-msg size="large" :receiver="data.email" type="email"/>
                       </el-col>
                     </el-row>
                   </div>
@@ -135,13 +135,17 @@
 
               <el-row class="btn-row" :gutter="20">
                 <el-col :span="24">
-                  <el-button class="login-btn" type="primary" size="large" @click="submitRegister">注册</el-button>
+                  <el-button class="login-btn" type="primary" size="large" @click="submitRegister" >注册</el-button>
                 </el-col>
               </el-row>
 
-              <el-row class="text-line">
-                已经有账号？
-                <el-link type="primary" @click="router.push('/login')">登录</el-link>
+              <el-row class="text-line" :gutter="24">
+                <el-col :span="12">
+                  <el-link type="primary" @click="router.push('/login')">登录</el-link>
+                </el-col>
+                <el-col :span="12">
+                  <el-link type="primary" @click="router.push('/')">首页</el-link>
+                </el-col>
               </el-row>
             </el-form>
 
@@ -375,6 +379,10 @@ const doSubmitRegister = (verifyData) => {
           justify-content center
           padding-top 10px;
           font-size 14px;
+
+          .el-col {
+            text-align center
+          }
         }
       }
     }
diff --git a/web/src/views/admin/Users.vue b/web/src/views/admin/Users.vue
index 518bdbb4..73ab35d6 100644
--- a/web/src/views/admin/Users.vue
+++ b/web/src/views/admin/Users.vue
@@ -262,9 +262,7 @@ const removeUser = function (user) {
   ).then(() => {
     httpGet('/api/admin/user/remove', {id: user.id}).then(() => {
       ElMessage.success('操作成功！')
-      users.value.items = removeArrayItem(users.value.items, user, function (v1, v2) {
-        return v1.id === v2.id
-      })
+      fetchUserList(users.value.page, users.value.page_size)
     }).catch((e) => {
       ElMessage.error('操作失败，' + e.message)
     })
diff --git a/web/vue.config.js b/web/vue.config.js
index 44b57a45..b5007883 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -19,7 +19,7 @@ module.exports = defineConfig({
     outputDir: 'dist',
     crossorigin: "anonymous",
     devServer: {
-        allowedHosts: ['127.0.0.1:5678'],
+        allowedHosts: "all",
         port: 8888,
     }
 })