Merge pull request #7 from leozhang2018/move-login-page

Change user login page into dex.

Author: panxunying

custom-web/static/bootstrap.css renamed to custom-web/static/css/bootstrap.css

@@ -29,9 +29,11 @@ a {
 }
 
 .bottom {
-  display: flex;
-  align-items: center;
-  float: right;
+  width: 100%;
+  display: block;
+  align-items: right;
+  text-align: right;
+  margin-top: 5px;
   padding: 0 10px;
 }
 
@@ -67,7 +69,7 @@ a {
   min-height: 100vh;
   padding: 30px 30px;
   text-align: left;
-  background: rgba(0, 0, 0, 0.04) url("./img/login.jpg") top left repeat;
+  background: rgba(0, 0, 0, 0.04) url("../img/login.jpg") top left repeat;
   background-size: cover;
   border-radius: 100% 0 0 100%;
   opacity: 1;
@@ -89,7 +91,7 @@ a {
 
 .login .login-inner-form {
   width: 100%;
-  max-width: 350px;
+  max-width: 380px;
   color: #717171;
   text-align: center;
 }
@@ -121,6 +123,39 @@ a {
   text-align: left;
 }
 
+.login .login-inner-form .form-group .input--suffix {
+  position: relative;
+  font-size: 14px;
+  display: inline-block;
+  width: 100%;
+}
+
+.login .login-inner-form .form-group .input__suffix{
+  position: absolute;
+  top: 0;
+  right: 5px;
+  height: 100%;
+  color: #c0c4cc;
+  text-align: center;
+}
+
+.login .login-inner-form .form-group .input__suffix .input__suffix-inner{
+  pointer-events: all;
+  padding-right: 10px;
+}
+
+.login .login-inner-form .form-group .input__suffix .input__suffix-inner .iconfont{
+  height: 100%;
+  width: 25px;
+  text-align: center;
+  line-height: 38px;
+  cursor: pointer;
+}
+
+.login .login-inner-form .form-group .input__suffix .input__suffix-inner .iconfont:hover{
+  color: #909399;
+}
+
 .login .login-inner-form .error-text {
   margin-bottom: 5px;
   color: #f56c6c;
@@ -141,11 +176,10 @@ a {
 }
 
 .login .login-inner-form .btn-md {
-  padding: 10px 30px 10px 30px;
+  padding: 8px 30px 8px 30px;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 1px;
-  border-radius: 50px;
   cursor: pointer;
 }
 
@@ -325,25 +359,63 @@ input[type="radio"] {
   margin-top: 15px;
 }
 
-.details .auth-types {
-  margin: 10px auto 0;
-  padding: 20px;
+.details .divider{
+  height: 1px;
+  background: #ccc;
+  width: 100%;
+  margin: 12px 0;
+}
+
+.details .desc{
+  font-size: 14px;
+  color: #464a4e;
+  font-weight: 400;
+  display: block;
+  margin-top: 35px;
+}
+
+.details .auth-types{
+  text-align: right;
+  margin-top: 15px;
+}
+
+.details .auth-types .methods-desc{
+  font-weight: 400;
+  font-size: 14px;
 }
 
 .details .auth-types a {
   display: inline-block;
-  width: 100%;
-  height: 45px;
-  margin-bottom: 15px;
-  color: white;
+  margin: 0px 5px;
+  color: #007bff;
   font-weight: 400;
-  font-size: 18px;
+  font-size: 14px;
   transition: all 0.3s;
   user-select: none;
 }
 
 .details .auth-types a:hover {
   text-decoration: none;
+  border-color: #007bff;
+  color: #007bff;
+}
+
+.details .auth-types a .iconfont {
+  font-size: 25px;
+  vertical-align: bottom;
+}
+
+.details .auth-types .function-btn{
+  color: #717171;
+}
+
+.details .auth-types .function-btn:hover{
+  color: #007bff;
+}
+
+
+.details .auth-types .divide {
+  color: #ced4da;
 }
 
 .details .auth-types p {
@@ -354,22 +426,13 @@ input[type="radio"] {
 }
 
 .details .auth-types .login-button-show {
-  display: block;
-  line-height: 45px;
-  letter-spacing: 1px;
-  background: #376bff;
-  border-radius: 5px;
+  display: inline-block;
+  line-height: 35px;
 }
 
-.details .auth-types .login-button-show:hover {
-  background: #2c5ce4;
-}
 
 .details .auth-types .login-button-show .iconfont {
   position: relative;
-  top: 2px;
-  margin-right: 3px;
-  font-size: 26px;
 }
 
 .grant-access-container .heading {

custom-web/static/main.css renamed to custom-web/static/css/main.css

@@ -0,0 +1,58 @@
+const hostname = window.location.hostname;
+const protocol = window.location.protocol;
+
+// login();
+var dex = new Vue({
+    el: "#dex-login",
+    delimiters: ["{{{", "}}}"],
+    data: {
+        loginForm: {
+            account: "",
+            password: "",
+        },
+        showRegistration:false,
+        showLoginError:false,
+        showPassword:false
+    },
+    methods: {
+        async login() {
+            const payload = this.loginForm;
+            try {
+                const userInfoRes = await axios.post("/api/v1/login", payload);
+                const userInfo = userInfoRes.data;
+                if (userInfo) {
+                    store.set("userInfo", userInfo);
+                    const roleBindingRes = await axios.get(
+                        `/api/v1/userbindings?uid=${userInfo.uid}`,
+                        {
+                            headers: {
+                                Authorization: `Bearer ${userInfo.token}`,
+                            },
+                        }
+                    );
+                    const roleBinding = roleBindingRes.data;
+                    if (roleBinding) {
+                        const role = roleBinding.map((item) => item.role);
+                        store.set("role", role);
+                        window.location.href = `${protocol}//${hostname}/v1/projects`;
+                    }
+                }
+            } 
+            catch (error) {
+                this.showLoginError = true;
+            }
+
+        },
+        async registrationCheck(){
+            const registrationRes = await axios.get(`/api/v1/features/RegisterTrigger`);
+            if (registrationRes.data && registrationRes.data.enabled) {
+                this.showRegistration = true
+              } else {
+                this.showRegistration = false
+              }
+        }
+    },
+    mounted() {
+        this.registrationCheck();
+    },
+});

custom-web/static/js/axios.min.js

@@ -22,4 +22,9 @@ <h3>高效研发从现在开始</h3>
 </div>
 </body>
 
-</html>
+</html>
+<script src="{{ url .ReqPath "static/js/axios.min.js" }}"></script>
+<script src="{{ url .ReqPath "static/js/store.min.js" }}"></script>
+<script src="{{ url .ReqPath "static/js/vue.min.js" }}"></script>
+<script src="{{ url .ReqPath "static/js/main.js" }}"></script>
+

custom-web/static/js/main.js

@@ -23,16 +23,16 @@
         href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:200,300,400,500,600,700" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:200,300,400,500,600,700"
         media="all" onload="this.media='all'" />
-    <link href="{{ url .ReqPath "static/bootstrap.css" }}" rel="stylesheet">
-    <link href="{{ url .ReqPath "static/main.css" }}" rel="stylesheet">
+    <link href="{{ url .ReqPath "static/css/bootstrap.css" }}" rel="stylesheet">
+    <link href="{{ url .ReqPath "static/css/main.css" }}" rel="stylesheet">
     <link href="{{ url .ReqPath "theme/styles.css" }}" rel="stylesheet">
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_1282370_mbsho89kty9.css"
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1282370_f2amwt7wbik.css"
     media="all" onload="this.media='all'" />
-    <title>第三方登录</title>
+    <title>登录</title>
 </head>
 
 <body>
-    <div style="height: 100%; display: flex; flex-direction: column">
+    <div id="dex-login" style="height: 100%; display: flex; flex-direction: column">
         <div class="login tab-box" style="height: 100%">
             <div class="container-fluid">
                 <div class="row">