From 3e7ccef847e20f4b06de9f01a96687b6e76a4478 Mon Sep 17 00:00:00 2001
From: devecor <devecor@163.com>
Date: Sun, 25 Oct 2020 17:26:36 +0800
Subject: [PATCH 1/2] add: userManger(the UI for login/register)

---
 src/App.vue                    |  37 +++++--
 src/components/UserManager.vue | 174 +++++++++++++++++++++++++++++++++
 src/connector.js               |  10 +-
 src/main.js                    |   2 +
 4 files changed, 215 insertions(+), 8 deletions(-)
 create mode 100644 src/components/UserManager.vue

diff --git a/src/App.vue b/src/App.vue
index 177fccc..0b79ad6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,7 +42,8 @@
               <el-dropdown-item command="logout" divided>{{ $t( '注销' ) }}</el-dropdown-item>
             </template>
             <template v-else>
-              <el-dropdown-item command="login">{{ $t( '登陆' ) }}</el-dropdown-item>
+              <el-dropdown-item command="login">{{ $t( '登录' ) }}</el-dropdown-item>
+              <el-dropdown-item command="register">{{ $t( '注册' ) }}</el-dropdown-item>
             </template>
             <el-dropdown-item command="profile" divided>{{ $t( '设置' ) }}</el-dropdown-item>
           </el-dropdown-menu>
@@ -67,12 +68,18 @@
           ref="launcher"></cb-lanuch-manager>
       </div>
     </div>
+
+    <cb-user-manager
+      :is-visible="loginDialogVisibility"
+      :login-mode="loginMode"
+      :on-close="handleLoginDialogClose"></cb-user-manager>
   </div>
 </template>
 
 <script>
 import connector from './connector.js'
 import { setLocale } from './plugins/gettext.js'
+// import UserManager from './components/UserManager.vue'
 
 export default {
     name: 'app',
@@ -82,14 +89,19 @@ export default {
             logonName: '',
             isAuthenticated: false,
             pageIndex: 0,
-            coursework: undefined
+            coursework: undefined,
+
+            loginDialogVisibility: false,
+            loginMode: "login"
         }
     },
     mounted() {
         connector.$on( 'api-login', (success) => {
             this.isAuthenticated = success
-            if (success)
-                connector.getLogon()
+            if (success) {
+              connector.getLogon()
+              this.loginDialogVisibility = false
+            }
         } )
         connector.$on( 'api-logout', (success) => {
             this.isAuthenticated = !success
@@ -129,10 +141,21 @@ export default {
         },
 
         handleUserMenu: function (command) {
-            if (command == 'login')
-                connector.login('admin', 'admin')
-            else if (command == 'logout')
+            if (command == 'login') {
+                this.loginMode = command
+                this.loginDialogVisibility = true
+            }
+            else if (command == 'logout') {
                 connector.logout()
+            }
+            else if (command == 'register') {
+                this.loginMode = command
+                this.loginDialogVisibility = true
+            }
+        },
+
+        handleLoginDialogClose: function() {
+            this.loginDialogVisibility = false
         }
     }
 }
diff --git a/src/components/UserManager.vue b/src/components/UserManager.vue
new file mode 100644
index 0000000..1a79013
--- /dev/null
+++ b/src/components/UserManager.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="cb-user">
+      <el-dialog
+        title="请输入"
+        :visible="dialogVisible"
+        width="30%"
+        :close-on-click-modal="false"
+        :before-close="handleDialogClose">
+        <el-form 
+          :model="ruleForm"
+          status-icon
+          :rules="rules"
+          ref="ruleForm"
+          label-width="130px"
+          class="demo-ruleForm">
+          <el-form-item label="账户" prop="name">
+            <el-input v-model="ruleForm.name" autocomplete="off" placeholder="用户名/邮箱/手机号"></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="pass">
+            <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
+          </el-form-item>
+          <el-form-item v-if="isRegister" label="确认密码" prop="checkPass">
+            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button v-if="isRegister" 
+              type="primary" 
+              @click="submitForm('ruleForm')"
+              :disabled="enableLoginBtn">注册</el-button>
+            <el-button v-else 
+              type="primary" 
+              @click="submitForm('ruleForm')"
+              :disabled="enableLoginBtn">登录</el-button>
+            <el-button @click="resetForm('ruleForm')">清空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+
+import connector from '../connector.js'
+
+export default {
+
+    name: "UserManger",
+
+    props: {
+        isVisible: {
+            type: Boolean,
+            default: false
+        },
+
+        loginMode: {
+            type: String,
+            default: "login"
+        },
+
+        onClose: {
+            type: Function,
+            default: () => {}
+        }
+    },
+
+    watch: {
+        isVisible: function(newVal, oldVal) {
+            console.log("new: " + newVal + "    " + "old: " + oldVal);
+            if (newVal != oldVal && newVal) {
+                this.dialogVisible = true
+            }
+        },
+
+        loginMode: function(newVal, oldVal) {
+            console.log("new: " + newVal + "    " + "old: " + oldVal);
+            if (newVal !== oldVal) {
+                if (newVal === "login") {
+                    this.isRegister = false
+                }
+                else if (newVal === "register") {
+                    this.isRegister = true
+                }
+            }
+        }
+    },
+
+    data() {
+
+        var validatePass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入密码'));
+            } else {
+                if (this.ruleForm.checkPass !== '') {
+                    this.$refs.ruleForm.validateField('checkPass');
+                }
+                callback();
+            }
+        };
+        var validatePass2 = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请再次输入密码'));
+            } else if (value !== this.ruleForm.pass) {
+               callback(new Error('两次输入密码不一致!'));
+            } else {
+               callback();
+            }
+        };
+        var validateName = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入用户名'));
+            } else {
+                callback();
+            }
+        };
+
+        return {
+            ruleForm: {
+                name: '',
+                pass: '',
+                checkPass: '',
+            },
+            rules: {
+                name: [
+                    { validator: validateName, trigger: 'blur'}
+                ],
+                pass: [
+                    { validator: validatePass, trigger: 'blur' }
+                ],
+                checkPass: [
+                    { validator: validatePass2, trigger: 'blur' }
+                ],
+            },
+            dialogVisible: false,
+            isRegister: false,
+            enableLoginBtn: false
+        }
+    },
+    mounted() {
+        connector.$on( 'api-login', (success) => {
+            console.log("login result: " + success);
+            if (success) {
+              this.dialogVisible = false;
+              connector.showSuccess('登录成功');
+            }
+        } );
+    },
+    methods: {
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    let name = this.ruleForm.name
+                    let pass = this.ruleForm.pass
+                    connector.login(name, pass)
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+
+        handleDialogClose() {
+            console.log("visible: " + this.dialogVisible);
+            this.dialogVisible = false;
+            this.onClose();
+        },
+    }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/connector.js b/src/connector.js
index a96d228..1827791 100644
--- a/src/connector.js
+++ b/src/connector.js
@@ -184,13 +184,21 @@ export default new Vue({
     },
     methods: {
         showError(err) {
-            Vue.prototype.$message( {
+            this.$message( {
                 type: 'warning',
                 message: err,
                 showClose: true,
                 duration: 15000
             } )
         },
+        showSuccess(msg) {
+            this.$message({
+                type: 'success',
+                message: msg,
+                showClose: true,
+                duration: 5000
+            })
+        },
         sendRequest(api, paras, event, options) {
             let opt = !options ? {} : options
             const loading = opt.loading
diff --git a/src/main.js b/src/main.js
index 804275f..84821ba 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import CodeManager from './components/CodeManager.vue'
 import BufferManager from './components/BufferManager.vue'
 import BuildManager from './components/BuildManager.vue'
 import LaunchManager from './components/LaunchManager.vue'
+import UserManager from './components/UserManager.vue'
 
 import I18nPlugin from './plugins/gettext.js'
 Vue.use(I18nPlugin)
@@ -15,6 +16,7 @@ Vue.component('cb-code-manager', CodeManager)
 Vue.component('cb-buffer-manager', BufferManager)
 Vue.component('cb-build-manager', BuildManager)
 Vue.component('cb-lanuch-manager', LaunchManager)
+Vue.component('cb-user-manager', UserManager)
 
 new Vue({
   render: h => h(App),

From 707b22271e62818bbb576ee46354487bdb68b15b Mon Sep 17 00:00:00 2001
From: devecor <devecor@163.com>
Date: Mon, 26 Oct 2020 23:47:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9:=20=E7=99=BB=E9=99=86?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E7=BB=9F=E4=B8=80=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  16 +--
 src/components/CodeManager.vue                |   2 +-
 .../{UserManager.vue => LoginDialog.vue}      | 110 +++++++++++++-----
 src/main.js                                   |   4 +-
 4 files changed, 87 insertions(+), 45 deletions(-)
 rename src/components/{UserManager.vue => LoginDialog.vue} (56%)

diff --git a/src/App.vue b/src/App.vue
index 0b79ad6..e591cdb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,8 +42,7 @@
               <el-dropdown-item command="logout" divided>{{ $t( '注销' ) }}</el-dropdown-item>
             </template>
             <template v-else>
-              <el-dropdown-item command="login">{{ $t( '登录' ) }}</el-dropdown-item>
-              <el-dropdown-item command="register">{{ $t( '注册' ) }}</el-dropdown-item>
+              <el-dropdown-item command="login">{{ $t( '登陆' ) }}</el-dropdown-item>
             </template>
             <el-dropdown-item command="profile" divided>{{ $t( '设置' ) }}</el-dropdown-item>
           </el-dropdown-menu>
@@ -69,17 +68,15 @@
       </div>
     </div>
 
-    <cb-user-manager
+    <cb-login-dialog
       :is-visible="loginDialogVisibility"
-      :login-mode="loginMode"
-      :on-close="handleLoginDialogClose"></cb-user-manager>
+      :on-close="handleLoginDialogClose"></cb-login-dialog>
   </div>
 </template>
 
 <script>
 import connector from './connector.js'
 import { setLocale } from './plugins/gettext.js'
-// import UserManager from './components/UserManager.vue'
 
 export default {
     name: 'app',
@@ -145,13 +142,8 @@ export default {
                 this.loginMode = command
                 this.loginDialogVisibility = true
             }
-            else if (command == 'logout') {
+            else if (command == 'logout')
                 connector.logout()
-            }
-            else if (command == 'register') {
-                this.loginMode = command
-                this.loginDialogVisibility = true
-            }
         },
 
         handleLoginDialogClose: function() {
diff --git a/src/components/CodeManager.vue b/src/components/CodeManager.vue
index e28bf36..ddc508a 100644
--- a/src/components/CodeManager.vue
+++ b/src/components/CodeManager.vue
@@ -305,7 +305,7 @@ export default {
         //
         handleCourseAdd: function () {
             if ( ! connector.isAuthenticated ) {
-                this.$message( _t( '未登录用户不能创建课程' ) )
+                this.$message( _t( '未登陆用户不能创建课程' ) )
                 return
             }
 
diff --git a/src/components/UserManager.vue b/src/components/LoginDialog.vue
similarity index 56%
rename from src/components/UserManager.vue
rename to src/components/LoginDialog.vue
index 1a79013..fbe454c 100644
--- a/src/components/UserManager.vue
+++ b/src/components/LoginDialog.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="cb-user">
       <el-dialog
-        title="请输入"
+        width="25%"
         :visible="dialogVisible"
-        width="30%"
         :close-on-click-modal="false"
         :before-close="handleDialogClose">
         <el-form 
@@ -11,27 +10,38 @@
           status-icon
           :rules="rules"
           ref="ruleForm"
-          label-width="130px"
-          class="demo-ruleForm">
+          label-width="auto"
+          class="ruleForm">
           <el-form-item label="账户" prop="name">
             <el-input v-model="ruleForm.name" autocomplete="off" placeholder="用户名/邮箱/手机号"></el-input>
           </el-form-item>
-          <el-form-item label="密码" prop="pass">
+          <el-form-item v-if="!isRetrivePass" label="密码" prop="pass">
             <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
           </el-form-item>
           <el-form-item v-if="isRegister" label="确认密码" prop="checkPass">
             <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
           </el-form-item>
-          <el-form-item>
-            <el-button v-if="isRegister" 
+          <el-form-item style="text-align: center;">
+            <el-button
+              v-if="isLogin"
+              style="width: 100%;"
               type="primary" 
-              @click="submitForm('ruleForm')"
-              :disabled="enableLoginBtn">注册</el-button>
-            <el-button v-else 
+              @click="onLogin('ruleForm')">登陆</el-button>
+            <el-button
+              v-if="isRegister"
+              style="width: 100%;"
               type="primary" 
-              @click="submitForm('ruleForm')"
-              :disabled="enableLoginBtn">登录</el-button>
-            <el-button @click="resetForm('ruleForm')">清空</el-button>
+              @click="onRegister('ruleForm')">注册</el-button>
+            <el-button
+              v-if="isRetrivePass"
+              style="width: 100%;"
+              type="primary"
+              @click="onRetrivePass('ruleForm')">找回密码</el-button>
+          </el-form-item>
+          <el-form-item style="text-align: right;">
+            <el-link :underline="false" v-if="!isRetrivePass" type="primary" @click="onRetrivePass('ruleForm')">忘记密码</el-link>
+            <el-link :underline="false" v-if="isLogin || isRetrivePass" type="primary" @click="onRegister('ruleForm')">注册</el-link>
+            <el-link :underline="false" v-if="isRegister || isRetrivePass" type="primary" @click="onLogin('ruleForm')">登陆</el-link>
           </el-form-item>
         </el-form>
       </el-dialog>
@@ -44,7 +54,7 @@ import connector from '../connector.js'
 
 export default {
 
-    name: "UserManger",
+    name: "LoginDialog",
 
     props: {
         isVisible: {
@@ -65,14 +75,12 @@ export default {
 
     watch: {
         isVisible: function(newVal, oldVal) {
-            console.log("new: " + newVal + "    " + "old: " + oldVal);
             if (newVal != oldVal && newVal) {
                 this.dialogVisible = true
             }
         },
 
         loginMode: function(newVal, oldVal) {
-            console.log("new: " + newVal + "    " + "old: " + oldVal);
             if (newVal !== oldVal) {
                 if (newVal === "login") {
                     this.isRegister = false
@@ -131,8 +139,9 @@ export default {
                 ],
             },
             dialogVisible: false,
+            isLogin: true,
             isRegister: false,
-            enableLoginBtn: false
+            isRetrivePass: false,
         }
     },
     mounted() {
@@ -140,25 +149,60 @@ export default {
             console.log("login result: " + success);
             if (success) {
               this.dialogVisible = false;
-              connector.showSuccess('登录成功');
+              connector.showSuccess('登陆成功');
             }
         } );
     },
     methods: {
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    let name = this.ruleForm.name
-                    let pass = this.ruleForm.pass
-                    connector.login(name, pass)
-                } else {
-                    console.log('error submit!!');
+        onLogin(formName) {
+            if (this.isLogin) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        let name = this.ruleForm.name;
+                        let pass = this.ruleForm.pass;
+                        connector.login(name, pass);
+                        return true;
+                    }
                     return false;
-                }
-            });
+                });
+            }
+            else {
+                this.isLogin = true;
+                this.isRegister = false;
+                this.isRetrivePass = false;
+            }
+        },
+
+        onRegister(formName) {
+            if(this.isRegister) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        connector.showError("现在还不能注册");
+                        return true;
+                    }
+                    return false;
+                });
+            } else {
+                this.isLogin = false;
+                this.isRetrivePass = false;
+                this.isRegister = true;
+            }
         },
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
+        
+        onRetrivePass(formName) {
+            if(this.isRetrivePass) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        connector.showError("现在还不能找回密码");
+                        return true;
+                    }
+                    return false;
+                });
+            } else {
+                this.isRetrivePass = true;
+                this.isLogin = false;
+                this.isRegister = false;
+            }
         },
 
         handleDialogClose() {
@@ -171,4 +215,10 @@ export default {
 </script>
 
 <style>
+.el-input__inner {
+    width: 100%;
+}
+.el-link.el-link--primary {
+    margin-left: 10px;
+}
 </style>
diff --git a/src/main.js b/src/main.js
index 84821ba..e4a644c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import CodeManager from './components/CodeManager.vue'
 import BufferManager from './components/BufferManager.vue'
 import BuildManager from './components/BuildManager.vue'
 import LaunchManager from './components/LaunchManager.vue'
-import UserManager from './components/UserManager.vue'
+import LoginDialog from './components/LoginDialog.vue'
 
 import I18nPlugin from './plugins/gettext.js'
 Vue.use(I18nPlugin)
@@ -16,7 +16,7 @@ Vue.component('cb-code-manager', CodeManager)
 Vue.component('cb-buffer-manager', BufferManager)
 Vue.component('cb-build-manager', BuildManager)
 Vue.component('cb-lanuch-manager', LaunchManager)
-Vue.component('cb-user-manager', UserManager)
+Vue.component('cb-login-dialog', LoginDialog)
 
 new Vue({
   render: h => h(App),