验证码登录

assets/css/login.css

@@ -2,7 +2,8 @@
 .wt_login{
     background: #fff;
     text-align: center!important; 
-    width: 480px!important; 
+    width: 480px!important;
+    height: 470px!important;
     box-shadow: 0px 0px 5px 5px #ddd;
     border-radius: 8px;
 }
@@ -31,7 +32,7 @@
     
 }
 .wt_login_cantent p input{
-    width: 400px!important;
+    width: 400px;
     height: 52px;
     border-radius: 8px!important; 
 }

assets/js/controllers/loginCtrl.js

@@ -135,6 +135,14 @@ app.controller('LoginCtrl', ['$rootScope', '$scope', '$state', '$translate', '$l
             });
             return tmpAES.toString();
         }
+        // 验证码
+        $scope.verificationCodeImg = '';
+        // 获取验证码
+        $scope.getVerificationCodeImg = function(){
+            var fileURL = api_login.getVerificationCodeImg().getRequestedUrl();
+            $scope.verificationCodeImg = fileURL;
+        }
+        $scope.getVerificationCodeImg();
         //登录
         $scope.handleLoginClick = function (e) {
             // api_login.getLicense({}).then(function(res){
@@ -146,6 +154,24 @@ app.controller('LoginCtrl', ['$rootScope', '$scope', '$state', '$translate', '$l
                 ssoStr = location.search.replace('?', '').split('&')[0].split('=')[1];
                 ssoStr = Base64.decode(decodeURIComponent(ssoStr));
                 ssoJson = JSON.parse(ssoStr);
+            }else if(!$scope.loginForm.username || !$scope.loginForm.username.trim()){
+                SweetAlert.swal({
+                    title: "请输入用户名",
+                    type: "error"
+                })
+                return;
+            }else if(!$scope.loginForm.password || !$scope.loginForm.password.trim()){
+                SweetAlert.swal({
+                    title: "请输入密码",
+                    type: "error"
+                })
+                return;
+            }else if(!$scope.loginForm.captcha || !$scope.loginForm.captcha.trim()){
+                SweetAlert.swal({
+                    title: "请输入验证码",
+                    type: "error"
+                })
+                return;
             }
             var postData = $scope.isSSo ? { username: ssoJson.a, password: ssoJson.u, t: false } : $scope.loginForm;
             postData = {
@@ -174,6 +200,12 @@ app.controller('LoginCtrl', ['$rootScope', '$scope', '$state', '$translate', '$l
                         } else {
                             $scope.licensePassShow = true
                         }
+                    }else if(resp.state == 403){
+                        SweetAlert.swal({
+                            title: "验证码错误",
+                            type: "error"
+                        })
+                        $scope.getVerificationCodeImg();
                     } else {
                         api_login.getLicense({}).then(function (res) {
                             console.log(res);

assets/js/main.js

@@ -512,6 +512,9 @@ app.factory('api_report_data', ['UserRestangular', function (UserRestangular) {
 app.factory('api_login', ['UserRestangular', function (UserRestangular) {
     var loginService = UserRestangular.all("auth");
     return {
+        getVerificationCodeImg: function () {
+            return loginService.one('getCaptcha?' + Date.now(), {}, {'responseType':'arraybuffer'});
+        },
         onlineCount: function (data) {
             return loginService.customPOST(data, 'onlineCount', {});
         },

assets/views/login_login.html

@@ -112,6 +112,10 @@
                 <p>
                     <input ng-model="loginForm.password" type="password" placeholder='请输入密码' style="font-size:14px;color:#435063; " autocomplete />
                 </p>
+                <p>
+                    <input ng-model="loginForm.captcha" type="text" placeholder='请输入验证码' style="font-size:14px;color:#435063;width: 300px;" autocomplete />
+                    <img style="width: 100px;" ng-src="{{verificationCodeImg}}" ng-click="getVerificationCodeImg()">
+                </p>
                 <!-- 记住密码 wt -->
                 <!-- <p class="wt_checkbox">
                     <input type="checkbox" class="remember" ng-model="rememberID" ng-change="remember()">