Add modal to change username

Signed-off-by: Unknwon <joe2010xtmf@163.com>

conf/locale/locale_en-US.ini

@@ -191,6 +191,10 @@ website = Website
 location = Location
 update_profile = Update Profile
 update_profile_success = Your profile has been successfully updated.
+change_username = Username Changed
+change_username_desc = Username has been changed, do you want to continue? This will affect all links relate to your account.
+continue = Continue
+cancel = Cancel
 
 change_password = Change Password
 old_password = Current Password

conf/locale/locale_zh-CN.ini

@@ -191,6 +191,10 @@ website = 个人网站
 location = 所在地区
 update_profile = 更新信息
 update_profile_success = 您的个人信息更新成功！
+change_username = 用户名将被修改
+change_username_desc = 用户名被修改，您确定要继续操作吗？这将会影响到所有与您帐户有关的链接。
+continue = 继续操作
+cancel = 取消操作
 
 change_password = 修改密码
 old_password = 当前密码

public/ng/css/ui.css

@@ -796,6 +796,17 @@ ul.menu-radius > li:last-child > a {
   border: 1px solid #b05c10;
   background-color: #fcecdd;
 }
+.white-popup-block {
+  background: #FFF;
+  padding: 20px 30px;
+  text-align: left;
+  max-width: 650px;
+  margin: 40px auto;
+  position: relative;
+}
+.white-popup-block p {
+  font-size: 14px;
+}
 table th,
 table td {
   padding: .3em .6em;

public/ng/js/gogs.js

@@ -297,9 +297,31 @@ function initCore() {
 
 function initUserSetting() {
     // Confirmation of change username in user profile page.
-    $('#user-profile-form').submit(function (e) {
-        var $username = $('#username');
-        if (($username.data('uname') != $username.val()) && !confirm('Username has been changed, do you want to continue?')) {
+    var $username = $('#username');
+    var $form = $('#user-profile-form');
+    var confimed = false;
+    $('.popup-modal').magnificPopup({
+        modal: true,
+        callbacks: {
+            open: function () {
+                if (($username.data('uname') == $username.val())) {
+                    $.magnificPopup.close();
+                    $form.submit();
+                }
+            }
+        }
+    });
+    $(document).on('click', '.popup-modal-dismiss', function (e) {
+        e.preventDefault();
+        $.magnificPopup.close();
+    });
+    $('#modal-submit').click(function(){
+        $.magnificPopup.close();
+        confimed = true;
+        $form.submit();
+    });
+    $form.submit(function (e) {
+        if (($username.data('uname') != $username.val()) && !confimed) {
             e.preventDefault();
             return true;
         }

public/ng/less/ui/alert.less

@@ -41,7 +41,15 @@
   border: 1px solid darken(@alertOrangeColor,10%);
   background-color: lighten(@alertOrangeColor,45%);
 }
-
-
-
+.white-popup-block {
+    background: #FFF;
+    padding: 20px 30px;
+    text-align: left;
+    max-width: 650px;
+    margin: 40px auto;
+    position: relative;
+    p {
+        font-size: 14px;
+    }
+}
 

templates/ng/base/head.tmpl

@@ -24,12 +24,14 @@
 		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/ui.css">
 		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/gogs.css">
 		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/tipsy.css">
+		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/magnific-popup.css">
 		<link rel="stylesheet" href="{{AppSubUrl}}/ng/fonts/octicons.css">
 		<link rel="stylesheet" href="{{AppSubUrl}}/css/github.min.css">
 
 		<!-- JavaScript -->
     	<script src="{{AppSubUrl}}/ng/js/lib/lib.js"></script>
     	<script src="{{AppSubUrl}}/ng/js/lib/jquery.tipsy.js"></script>
+    	<script src="{{AppSubUrl}}/ng/js/lib/jquery.magnific-popup.min.js"></script>
         <script src="{{AppSubUrl}}/ng/js/utils/tabs.js"></script>
         <script src="{{AppSubUrl}}/ng/js/utils/preview.js"></script>
 		<script src="{{AppSubUrl}}/ng/js/gogs.js"></script>

templates/user/settings/profile.tmpl

@@ -22,6 +22,13 @@
                                 <label class="req" for="username">{{.i18n.Tr "username"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.SignedUser.Name}}" data-uname="{{.SignedUser.Name}}" required />
                             </div>
+                            <div class="white-popup-block mfp-hide" id="change-username-modal">
+                                <h1 class="text-red">{{.i18n.Tr "settings.change_username"}}</h1>
+                                <p>{{.i18n.Tr "settings.change_username_desc"}}</p>
+                                <br>
+                                <button class="btn btn-red btn-large btn-radius" id="modal-submit">{{.i18n.Tr "settings.continue"}}</button>
+                                <button class="btn btn-large btn-radius popup-modal-dismiss">{{.i18n.Tr "settings.cancel"}}</button>
+                            </div>
                             <div class="field">
                                 <label for="full-name">{{.i18n.Tr "settings.full_name"}}</label>
                                 <input class="ipt ipt-large ipt-radius {{if .Err_FullName}}ipt-error{{end}}" id="full-name" name="fullname" type="text" value="{{.SignedUser.FullName}}" />
@@ -44,7 +51,7 @@
                             </div>
                             <div class="field">
                                 <label></label>
-                                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.update_profile"}}</button>
+                                <button class="btn btn-green btn-large btn-radius popup-modal" href="#change-username-modal">{{.i18n.Tr "settings.update_profile"}}</button>
                             </div>
                         </form>
                     </div>