手机验证码

options/locale/locale_en-US.ini

@@ -407,6 +407,7 @@ mobile_number_retrieve_password=Phone number retrieve password
 mobile_login=Mobile login
 account_password_login=Account password login
 cloud_brain_user_login=Cloud brain user login
+modify_phone_number=Modify phone number
 
 
 [mail]

options/locale/locale_zh-CN.ini

@@ -411,6 +411,7 @@ mobile_number_retrieve_password=手机号找回密码
 mobile_login=手机登录
 account_password_login=账号密码登录
 cloud_brain_user_login=云脑1用户登录
+modify_phone_number=修改手机号
 
 
 [mail]

templates/user/auth/forgot_passwd.tmpl

@@ -1,13 +1,13 @@
 {{template "base/head" .}}
 <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
 	<a class="active item" rel="nofollow" href="{{AppSubUrl}}/user/forgot_password">
-		{{/* 手机验证码登陆 .i18n.Tr "auth.login_userpass" */}}
-		邮箱找回密码
+		{{.i18n.Tr "phone.email_retrieve_password"}}
 	</a>
+	{{if .EnablePhone }}
 	<a class="item" rel="nofollow" href="{{AppSubUrl}}/user/forgot_password?type=phone">
-		{{/* .i18n.Tr "auth.login_userpass" */}}
-		手机号找回密码
+		{{.i18n.Tr "phone.mobile_number_retrieve_password"}}
 	</a>
+	{{end}}
 </div>
 <div class="user forgot password">
 	<div class="ui middle very relaxed page grid">

templates/user/auth/phone_verify.tmpl

@@ -52,6 +52,7 @@
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
+    position: relative;
   }
 
   .__phone-verify-code .phone-c .phone-num-c input {
@@ -62,6 +63,21 @@
     outline: none;
   }
 
+  .__phone-verify-code .phone-c .modify-phone-number {
+    position: absolute;
+    left: 100%;
+    width: 200px;
+    height: 100%;
+    margin-left: 10px;
+    display: none;
+  }
+
+  .__phone-verify-code .phone-c .modify-phone-number a {
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(0, 102, 255, 1);
+  }
+
   .__phone-verify-code .slide-bar-wrap {
     display: flex;
     height: 38px;
@@ -141,7 +157,7 @@
     margin: 0;   
     height: 16px;
     width: 16px;
-    margin-top: -6px;
+    margin-top: -5px;
   }
 
   .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger.sucess {
@@ -253,7 +269,6 @@
     width: 100% !important;
     padding: 9.5px 14px;
     box-sizing: border-box;
-    border: none;
     outline: none;
   }
 </style>
@@ -270,9 +285,10 @@
     </div>
     <div class="field phone-num-c">
       <input class="phoneNumber" style="width:100% !important" name="phone_number" value="{{.phone_number}}" placeholder="{{.i18n.Tr "phone.phone_number"}}" required autocomplete="off" />
+      <div class="modify-phone-number"><div style="display:flex;align-items:center;height:100%;"><a>{{.i18n.Tr "phone.modify_phone_number"}}</a></div></div>
     </div>
   </div>
-  <div class="slide-bar-wrap" style="display:flex;">
+  <div class="slide-bar-wrap">
     <div class="slide-bar-label  _label-c required" style=""></div>
     <div class="slide-bar-c" style="flex:1;">
       <div class="slide-bar-bg">
@@ -339,6 +355,14 @@
         this.eventInit();
         this.refreshImages();
         var wrap = this.dom.closest('div.use-type');
+        var readonly = wrap.attr('readonly');
+        if (readonly) {
+          this.dom.find('.phone-area-c select').attr('disabled', true);
+          this.dom.find('.phone-num-c input').attr('disabled', true);
+          this.dom.find('.slide-bar-wrap').hide();
+          this.dom.find('.verify-code-c').hide();
+          this.dom.find('.modify-phone-number').show();
+        }
         var oldPhoneNum = wrap.attr('ophonenumber');
         if (oldPhoneNum) {
           this.dom.find('input.phoneNumber').val(oldPhoneNum);
@@ -362,7 +386,7 @@
         var verifyCodeNoRequired = wrap.attr('verifycodenorequired');
         if (verifyCodeNoRequired) {
           this.dom.find('input.verifyCode').removeAttr('required');
-        }
+        }        
       };
 
       PhoneVerifyCode.prototype.eventInit = function () {
@@ -444,10 +468,10 @@
             },
             error: function(err) {
               self.dom.find('.slide-bar').addClass('error');
-                self.dom.find('.slide-trigger').addClass('error');
-                setTimeout(function () {
-                  self.refreshImages();
-                }, 300);
+              self.dom.find('.slide-trigger').addClass('error');
+              setTimeout(function () {
+                self.refreshImages();
+              }, 300);
             }
           });
         }
@@ -487,13 +511,17 @@
                 if (res && res.Code === 0) {
                   self.countDown();
                 } else {
-                   $('body').toast({
-                    message: res.Message,
-                    showProgress: 'bottom',
-                    showIcon:'warning circle',
-                    class: 'warning',
-                    position: 'top right',
-                  });
+                  if ($('.ui.negative.message').length) {
+                    $('.ui.negative.message').eq(0).show().find('p').text(res.Message);
+                  } else {
+                    $('body').toast({
+                      message: res.Message,
+                      showProgress: 'bottom',
+                      showIcon:'warning circle',
+                      class: 'warning',
+                      position: 'top right',
+                    });
+                  }
                   self.refreshImages();
                 }
               },
@@ -503,6 +531,14 @@
             });
           }
         });
+
+        this.dom.find('.modify-phone-number a').on('click', function() {
+          self.dom.find('.phone-area-c select').attr('disabled', false);
+          self.dom.find('.phone-num-c input').attr('disabled', false);
+          self.dom.find('.slide-bar-wrap').css('display', 'flex');
+          self.dom.find('.verify-code-c').css('display', 'flex');
+          self.dom.find('.modify-phone-number').hide();
+        });
       };
     
       PhoneVerifyCode.prototype.refreshImages = function () {

templates/user/auth/signin_navbar.tmpl

@@ -1,8 +1,10 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI .EnableCloudBrain}}
 <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
+	{{if .EnablePhone }}
 	<a class="{{if .PageIsPhoneLogin}}active{{end}} item" rel="nofollow" href="{{AppSubUrl}}/user/login/phone">
 		{{.i18n.Tr "phone.mobile_login"}}
 	</a>
+	{{end}}
 	<a class="{{if .PageIsLogin}}active{{end}} item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 		{{.i18n.Tr "phone.account_password_login"}}
 	</a>

templates/user/settings/profile.tmpl

@@ -4,6 +4,9 @@
 	<div class="alert" style="top: 0;"></div>
 	<div class="ui container">
 		{{template "base/alert" .}}
+		<div style="display:none;" class="ui negative message">
+			<p></p>
+		</div>
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "settings.public_profile"}}
 		</h4>
@@ -36,10 +39,14 @@
 				{{if .EnablePhone }}
 					<div class="field required" style="width:391px;">
 						<label for="phone">{{.i18n.Tr "phone.phone_number"}}</label>
-						<div class="use-type" usetype="2" ophonenumber="{{.SignedUser.PhoneNumber}}" verifycodenorequired="true">
+						<div class="use-type" usetype="2" ophonenumber="{{.SignedUser.PhoneNumber}}" readonly="true" verifycodenorequired="true">
 							{{template "user/auth/phone_verify" .}}
 						</div>
 					</div>
+					<style>
+						.use-type .modify-phone-number { display: flex;}
+						.use-type .slide-bar-wrap, .use-type .verify-code-c{ display: none; }							
+					</style>
 				{{end}}
 				<div class="field {{if .Err_Description}}error{{end}}">
 					<label for="description">{{$.i18n.Tr "user.user_bio"}}</label>