add: userManger(the UI for login/register)

src/App.vue

@@ -67,6 +67,10 @@
           ref="launcher"></cb-lanuch-manager>
       </div>
     </div>
+
+    <cb-login-dialog
+      :is-visible="loginDialogVisibility"
+      :on-close="handleLoginDialogClose"></cb-login-dialog>
   </div>
 </template>
 
@@ -82,14 +86,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 +138,16 @@ export default {
         },
 
         handleUserMenu: function (command) {
-            if (command == 'login')
-                connector.login('admin', 'admin')
+            if (command == 'login') {
+                this.loginMode = command
+                this.loginDialogVisibility = true
+            }
             else if (command == 'logout')
                 connector.logout()
+        },
+
+        handleLoginDialogClose: function() {
+            this.loginDialogVisibility = false
         }
     }
 }

src/components/CodeManager.vue

@@ -305,7 +305,7 @@ export default {
         //
         handleCourseAdd: function () {
             if ( ! connector.isAuthenticated ) {
-                this.$message( _t( '未登录用户不能创建课程' ) )
+                this.$message( _t( '未登陆用户不能创建课程' ) )
                 return
             }
 

src/components/LoginDialog.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="cb-user">
+      <el-dialog
+        width="25%"
+        :visible="dialogVisible"
+        :close-on-click-modal="false"
+        :before-close="handleDialogClose">
+        <el-form 
+          :model="ruleForm"
+          status-icon
+          :rules="rules"
+          ref="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 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 style="text-align: center;">
+            <el-button
+              v-if="isLogin"
+              style="width: 100%;"
+              type="primary" 
+              @click="onLogin('ruleForm')">登陆</el-button>
+            <el-button
+              v-if="isRegister"
+              style="width: 100%;"
+              type="primary" 
+              @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>
+    </div>
+</template>
+
+<script>
+
+import connector from '../connector.js'
+
+export default {
+
+    name: "LoginDialog",
+
+    props: {
+        isVisible: {
+            type: Boolean,
+            default: false
+        },
+
+        loginMode: {
+            type: String,
+            default: "login"
+        },
+
+        onClose: {
+            type: Function,
+            default: () => {}
+        }
+    },
+
+    watch: {
+        isVisible: function(newVal, oldVal) {
+            if (newVal != oldVal && newVal) {
+                this.dialogVisible = true
+            }
+        },
+
+        loginMode: function(newVal, 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,
+            isLogin: true,
+            isRegister: false,
+            isRetrivePass: false,
+        }
+    },
+    mounted() {
+        connector.$on( 'api-login', (success) => {
+            console.log("login result: " + success);
+            if (success) {
+              this.dialogVisible = false;
+              connector.showSuccess('登陆成功');
+            }
+        } );
+    },
+    methods: {
+        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;
+            }
+        },
+
+        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() {
+            console.log("visible: " + this.dialogVisible);
+            this.dialogVisible = false;
+            this.onClose();
+        },
+    }
+}
+</script>
+
+<style>
+.el-input__inner {
+    width: 100%;
+}
+.el-link.el-link--primary {
+    margin-left: 10px;
+}
+</style>

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

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 LoginDialog from './components/LoginDialog.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-login-dialog', LoginDialog)
 
 new Vue({
   render: h => h(App),