User code clean and ui improve

8 files changed, 187 insertions, 141 deletions

diff --git a/templates/user/delete.tmpl b/templates/user/delete.tmpl
index 6493bef38e..fe29173560 100644
--- a/templates/user/delete.tmpl
+++ b/templates/user/delete.tmpl
@@ -2,12 +2,19 @@
 {{template "base/navbar" .}}
 <div id="body" class="container" data-page="user">
     {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <h4>Delete Account</h4>
+    <div id="repo-setting-container" class="col-md-10">
         {{template "base/alert" .}}
-        {{if not .Flash.ErrorMsg}}<p class="alert alert-danger">The operation will delete your account permanently. Sorry to see you go, but we know you'll back soon.</p>{{end}}
-        <div class="form-group">
-            <button type="submit" class="btn btn-danger btn-lg" href="#delete-account-modal" id="delete-account" data-toggle="modal">Delete Account</button>
+        <div class="panel panel-warning">
+            <div class="panel-heading">
+                Delete Account
+            </div>
+
+            <div class="panel-body">
+                {{if not .Flash.ErrorMsg}}<p class="alert alert-danger">The operation will delete your account permanently. Sorry to see you go, but we know you'll back soon.</p>{{end}}
+                <div class="form-group">
+                    <button type="submit" class="btn btn-danger btn-lg" href="#delete-account-modal" id="delete-account" data-toggle="modal">Delete Account</button>
+                </div>
+            </div>
         </div>
     </div>
 
diff --git a/templates/user/password.tmpl b/templates/user/password.tmpl
index c55d27fa1a..aaa4fe28f4 100644
--- a/templates/user/password.tmpl
+++ b/templates/user/password.tmpl
@@ -2,40 +2,47 @@
 {{template "base/navbar" .}}
 <div id="body" class="container" data-page="user">
     {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <div id="setting-pwd">
-            <h4>Password</h4>
-            <form class="form-horizontal" id="password-form" method="post" action="/user/settings/password">
-                {{.CsrfTokenHtml}}
-                {{template "base/alert" .}}
-                <div class="form-group">
-                    <label class="col-md-3 control-label">Old Password<strong class="text-danger">*</strong></label>
-                    <div class="col-md-7">
-                        <input type="password" name="oldpasswd" class="form-control" placeholder="Type your current password" required="required">
-                    </div>
-                </div>
+    <div id="repo-setting-container" class="col-md-10">
+        {{template "base/alert" .}}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Password
+            </div>
 
-                <div class="form-group">
-                    <label class="col-md-3 control-label">New Password<strong class="text-danger">*</strong></label>
-                    <div class="col-md-7">
-                        <input type="password" name="newpasswd" class="form-control" placeholder="Type your new password" required="required">
-                    </div>
-                </div>
+            <div class="panel-body">
+                <div class="col-md-8">
+                    <form class="form-horizontal" id="password-form" method="post" action="/user/settings/password">
+                        {{.CsrfTokenHtml}}
+                        <div class="form-group">
+                            <label class="col-md-3 control-label">Old Password<strong class="text-danger">*</strong></label>
+                            <div class="col-md-7">
+                                <input type="password" name="oldpasswd" class="form-control" placeholder="Type your current password" required="required">
+                            </div>
+                        </div>
 
-                <div class="form-group">
-                    <label class="col-md-3 control-label">Re-Type<strong class="text-danger">*</strong></label>
-                    <div class="col-md-7">
-                        <input type="password" name="retypepasswd" class="form-control" placeholder="Re-type your new password" required="required">
-                    </div>
-                </div>
+                        <div class="form-group">
+                            <label class="col-md-3 control-label">New Password<strong class="text-danger">*</strong></label>
+                            <div class="col-md-7">
+                                <input type="password" name="newpasswd" class="form-control" placeholder="Type your new password" required="required">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="col-md-3 control-label">Re-Type<strong class="text-danger">*</strong></label>
+                            <div class="col-md-7">
+                                <input type="password" name="retypepasswd" class="form-control" placeholder="Re-type your new password" required="required">
+                            </div>
+                        </div>
 
-                <div class="form-group">
-                    <div class="col-md-offset-3 col-md-7">
-                        <button type="submit" class="btn btn-primary">Change Password</button>&nbsp;&nbsp;
-                        <a href="/user/forget_password/">Forgot your password?</a>
-                    </div>
+                        <div class="form-group">
+                            <div class="col-md-offset-3 col-md-7">
+                                <button type="submit" class="btn btn-primary">Change Password</button>&nbsp;&nbsp;
+                                <a href="/user/forget_password/">Forgot your password?</a>
+                            </div>
+                        </div>
+                    </form>
                 </div>
-            </form>
+            </div>
         </div>
     </div>
 </div>
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 4c42be2483..0c9ada0130 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -9,6 +9,7 @@
             {{if .Owner.FullName}}<span id="user-full-name" class="center-block">{{.Owner.FullName}}</span>{{end}}
             <span id="user-name" class="center-block">{{.Owner.Name}}</span>
         </div>
+        
         <div class="profile-info">
             <ul class="list-group">
                 {{if .Owner.Location}}
diff --git a/templates/user/publickey.tmpl b/templates/user/publickey.tmpl
index bf9aac1136..49b6b9caac 100644
--- a/templates/user/publickey.tmpl
+++ b/templates/user/publickey.tmpl
@@ -2,56 +2,63 @@
 {{template "base/navbar" .}}
 <div id="body" class="container" data-page="user">
     {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <div id="ssh-keys">
-            <h4>SSH Keys</h4>
-            {{template "base/alert" .}}
-            <ul id="ssh-keys-list" class="list-group">
-                <li class="list-group-item"><span class="name">SSH Key's name</span></li>
-                {{range .Keys}}
-                <li class="list-group-item">
-                    <span class="name">{{.Name}}</span>
-                    <span class="print">({{.Fingerprint}})</span>
-                    <button href="#" class="btn btn-danger delete pull-right" rel="{{.Id}}" data-del="{{.Id}}">Delete</button>
-                </li>
-                {{end}}
-                <li class="list-group-item">
-                    <a class="btn btn-link btn-primary" href="#ssh-add-modal" id="ssh-add" data-toggle="modal">Add SSH Key</a>
-                </li>
-            </ul>
-            <div class="modal fade" id="ssh-add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                <div class="modal-dialog">
-                    <form class="modal-content form-horizontal" id="ssh-form" method="post" action="/user/settings/ssh/">
-                        {{.CsrfTokenHtml}}
-                        <div class="modal-header">
-                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                            <h4 class="modal-title" id="myModalLabel">Add SSH Key</h4>
-                        </div>
+    <div id="repo-setting-container" class="col-md-10">
+        {{template "base/alert" .}}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                SSH Keys
+            </div>
 
-                        <div class="modal-body">
-                            <div class="form-group">
-                                <label class="col-md-3 control-label">Key Name<strong class="text-danger">*</strong></label>
-                                <div class="col-md-8">
-                                    <input name="keyname" class="form-control" placeholder="Type your preferred name" required="required">
+            <div class="panel-body">
+                <div id="ssh-keys">
+                    <ul id="ssh-keys-list" class="list-group">
+                        <li class="list-group-item"><span class="name">SSH Key's name</span></li>
+                        {{range .Keys}}
+                        <li class="list-group-item">
+                            <span class="name">{{.Name}}</span>
+                            <span class="print">({{.Fingerprint}})</span>
+                            <button href="#" class="btn btn-danger delete pull-right" rel="{{.Id}}" data-del="{{.Id}}">Delete</button>
+                        </li>
+                        {{end}}
+                        <li class="list-group-item">
+                            <a class="btn btn-link btn-primary" href="#ssh-add-modal" id="ssh-add" data-toggle="modal">Add SSH Key</a>
+                        </li>
+                    </ul>
+                    <div class="modal fade" id="ssh-add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+                        <div class="modal-dialog">
+                            <form class="modal-content form-horizontal" id="ssh-form" method="post" action="/user/settings/ssh/">
+                                {{.CsrfTokenHtml}}
+                                <div class="modal-header">
+                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                                    <h4 class="modal-title" id="myModalLabel">Add SSH Key</h4>
                                 </div>
-                            </div>
 
-                            <div class="form-group">
-                                <label class="col-md-3 control-label">SSH Key<strong class="text-danger">*</strong></label>
-                                <div class="col-md-8">
-                                    <textarea name="key_content" class="form-control" placeholder="Type your key content" required="required"></textarea>
+                                <div class="modal-body">
+                                    <div class="form-group">
+                                        <label class="col-md-3 control-label">Key Name<strong class="text-danger">*</strong></label>
+                                        <div class="col-md-8">
+                                            <input name="keyname" class="form-control" placeholder="Type your preferred name" required="required">
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label class="col-md-3 control-label">SSH Key<strong class="text-danger">*</strong></label>
+                                        <div class="col-md-8">
+                                            <textarea name="key_content" class="form-control" placeholder="Type your key content" required="required"></textarea>
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
 
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                            <button type="submit" class="btn btn-primary">Save SSH Key</button>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                                    <button type="submit" class="btn btn-primary">Save SSH Key</button>
+                                </div>
+                            </form>
                         </div>
-                    </form>
+                    </div>
+                    <p><strong>Need help?</strong> Check out the guide to <a href="https://help.github.com/articles/generating-ssh-keys" target="_blank">generating SSH keys</a> or troubleshoot <a href="https://help.github.com/ssh-issues/" target="_blank">common SSH Problems</a></p>
                 </div>
             </div>
-            <p><strong>Need help?</strong> Check out the guide to <a href="https://help.github.com/articles/generating-ssh-keys" target="_blank">generating SSH keys</a> or troubleshoot <a href="https://help.github.com/ssh-issues/" target="_blank">common SSH Problems</a></p>
         </div>
     </div>
 </div>
diff --git a/templates/user/setting.tmpl b/templates/user/setting.tmpl
index bdcf9ce3b7..5d55d609b6 100644
--- a/templates/user/setting.tmpl
+++ b/templates/user/setting.tmpl
@@ -2,62 +2,67 @@
 {{template "base/navbar" .}}
 <div id="body" class="container" data-page="user">
     {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <div id="setting-pwd">
-            <h4>Account Profile</h4>
-            <form class="form-horizontal" id="password-form" method="post" action="/user/settings">
-                {{.CsrfTokenHtml}}
-                {{template "base/alert" .}}
-                <p>Your Email address is public and will be used for any account related notifications, and any web based operations made via the site.</p>
-                <div class="form-group">
-                    <label class="col-md-2 control-label" for="user-setting-username">Username<strong class="text-danger">*</strong></label>
-                    <div class="col-md-8">
-                        <input name="username" class="form-control" placeholder="Type your user name" required="required" value="{{.SignedUser.Name}}" title="{{.SignedUser.Name}}" id="user-setting-username">
-                        <p class="help-block hidden"><span class="text-danger">Caution : </span>your username is changing !</p>
+    <div id="repo-setting-container" class="col-md-10">
+        {{template "base/alert" .}}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Account Profile
+            </div>
+
+            <div class="panel-body">
+                <form class="form-horizontal" id="password-form" method="post" action="/user/settings">
+                    {{.CsrfTokenHtml}}
+                    <p>Your Email address is public and will be used for any account related notifications, and any web based operations made via the site.</p>
+                    <div class="form-group {{if .Err_UserName}}has-error has-feedback{{end}}">
+                        <label class="col-md-2 control-label" for="user-setting-username">Username<strong class="text-danger">*</strong></label>
+                        <div class="col-md-8">
+                            <input name="username" class="form-control" placeholder="Type your user name" required="required" value="{{.SignedUser.Name}}" title="{{.SignedUser.Name}}" id="user-setting-username">
+                            <p class="help-block hidden"><span class="text-danger">Caution : </span>your username is changing !</p>
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <label class="col-md-2 control-label">Full Name</label>
-                    <div class="col-md-8">
-                        <input name="fullname" class="form-control" placeholder="Type your full name" value="{{.SignedUser.FullName}}">
+                    <div class="form-group {{if .Err_FullName}}has-error has-feedback{{end}}">
+                        <label class="col-md-2 control-label">Full Name</label>
+                        <div class="col-md-8">
+                            <input name="fullname" class="form-control" placeholder="Type your full name" value="{{.SignedUser.FullName}}">
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <label class="col-md-2 control-label">Email<strong class="text-danger">*</strong></label>
-                    <div class="col-md-8">
-                        <input name="email" class="form-control" placeholder="Type your e-mail address" required="required" value="{{.SignedUser.Email}}">
+                    <div class="form-group {{if .Err_Email}}has-error has-feedback{{end}}">
+                        <label class="col-md-2 control-label">Email<strong class="text-danger">*</strong></label>
+                        <div class="col-md-8">
+                            <input name="email" class="form-control" placeholder="Type your e-mail address" required="required" value="{{.SignedUser.Email}}">
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <label class="col-md-2 control-label">Website</label>
-                    <div class="col-md-8">
-                        <input name="website" class="form-control" placeholder="Type your website URL" value="{{.SignedUser.Website}}">
+                    <div class="form-group {{if .Err_Website}}has-error has-feedback{{end}}">
+                        <label class="col-md-2 control-label">Website</label>
+                        <div class="col-md-8">
+                            <input name="website" class="form-control" placeholder="Type your website URL" value="{{.SignedUser.Website}}">
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <label class="col-md-2 control-label">Location</label>
-                    <div class="col-md-8">
-                        <input name="location" class="form-control" placeholder="Type your current location" value="{{.SignedUser.Location}}">
+                    <div class="form-group {{if .Err_Location}}has-error has-feedback{{end}}">
+                        <label class="col-md-2 control-label">Location</label>
+                        <div class="col-md-8">
+                            <input name="location" class="form-control" placeholder="Type your current location" value="{{.SignedUser.Location}}">
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group {{if .Err_Avatar}}has-error has-feedback{{end}}">
-                    <label class="col-md-2 control-label">Gravatar Email<strong class="text-danger">*</strong></label>
-                    <div class="col-md-8">
-                        <input name="avatar" class="form-control" placeholder="Type your Gravatar e-mail address" required="required" value="{{.SignedUser.AvatarEmail}}">
+                    <div class="form-group {{if .Err_Avatar}}has-error has-feedback{{end}}">
+                        <label class="col-md-2 control-label">Gravatar Email<strong class="text-danger">*</strong></label>
+                        <div class="col-md-8">
+                            <input name="avatar" class="form-control" placeholder="Type your Gravatar e-mail address" required="required" value="{{.SignedUser.AvatarEmail}}">
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <div class="col-md-offset-2 col-md-8">
-                        <button type="submit" class="btn btn-primary">Update Profile</button>
+                    <div class="form-group">
+                        <div class="col-md-offset-2 col-md-8">
+                            <button type="submit" class="btn btn-primary">Update Profile</button>
+                        </div>
                     </div>
-                </div>
-            </form>
+                </form>
+            </div>
         </div>
     </div>
 </div>
diff --git a/templates/user/setting_nav.tmpl b/templates/user/setting_nav.tmpl
index 387fe950b5..7ee7982bdd 100644
--- a/templates/user/setting_nav.tmpl
+++ b/templates/user/setting_nav.tmpl
@@ -1,12 +1,11 @@
-<div id="user-setting-nav" class="col-md-3">
-    <h4>Account Settings</h4>
+<div id="user-setting-nav" class="col-md-2 repo-setting-nav">
     <ul class="list-group">
-        <li class="list-group-item{{if .IsUserPageSetting}} list-group-item-success{{end}}"><a href="/user/settings">Account Profile</a></li>
-        <li class="list-group-item{{if .IsUserPageSettingSocial}} list-group-item-success{{end}}"><a href="/user/settings/social">Social Account</a></li>
-        <li class="list-group-item{{if .IsUserPageSettingPasswd}} list-group-item-success{{end}}"><a href="/user/settings/password">Password</a></li>
-        <!-- <li class="list-group-item{{if .IsUserPageSettingNotify}} list-group-item-success{{end}}"><a href="/user/setting/notification">Notifications</a></li> -->
-        <li class="list-group-item{{if .IsUserPageSettingSSH}} list-group-item-success{{end}}"><a href="/user/settings/ssh/">SSH Keys</a></li>
-        <!-- <li class="list-group-item{{if .IsUserPageSettingSecurity}} list-group-item-success{{end}}"><a href="/user/setting/security">Security</a></li> -->
-        <li class="list-group-item{{if .IsUserPageSettingDelete}} list-group-item-success{{end}}"><a href="/user/delete">Delete Account</a></li>
+        <li class="list-group-item{{if .IsUserPageSetting}} active{{end}}"><a href="/user/settings">Account Profile</a></li>
+        <li class="list-group-item{{if .IsUserPageSettingSocial}} active{{end}}"><a href="/user/settings/social">Social Account</a></li>
+        <li class="list-group-item{{if .IsUserPageSettingPasswd}} active{{end}}"><a href="/user/settings/password">Password</a></li>
+        <!-- <li class="list-group-item{{if .IsUserPageSettingNotify}} active{{end}}"><a href="/user/setting/notification">Notifications</a></li> -->
+        <li class="list-group-item{{if .IsUserPageSettingSSH}} active{{end}}"><a href="/user/settings/ssh/">SSH Keys</a></li>
+        <!-- <li class="list-group-item{{if .IsUserPageSettingSecurity}} active{{end}}"><a href="/user/setting/security">Security</a></li> -->
+        <li class="list-group-item{{if .IsUserPageSettingDelete}} active{{end}}"><a href="/user/delete">Delete Account</a></li>
     </ul>
 </div>
\ No newline at end of file
diff --git a/templates/user/signup.tmpl b/templates/user/signup.tmpl
index 578ffa9eed..209058c904 100644
--- a/templates/user/signup.tmpl
+++ b/templates/user/signup.tmpl
@@ -21,21 +21,21 @@
 		<div class="form-group {{if .Err_Email}}has-error has-feedback{{end}}">
 			<label class="col-md-4 control-label">Email: </label>
 			<div class="col-md-6">
-				<input name="email" class="form-control" placeholder="Type your e-mail address" value="{{.email}}" required="required" title="Email is not valid">
+				<input name="email" class="form-control" placeholder="Type your e-mail address" value="{{.email}}" required="required">
 			</div>
 		</div>
 
 		<div class="form-group {{if .Err_Password}}has-error has-feedback{{end}}">
 			<label class="col-md-4 control-label">Password: </label>
 			<div class="col-md-6">
-				<input name="passwd" type="password" class="form-control" placeholder="Type your password" required="required" title="Password must contain at least 6 characters">
+				<input name="passwd" type="password" class="form-control" placeholder="Type your password" required="required">
 			</div>
 		</div>
 
 		<div class="form-group {{if .Err_RetypePasswd}}has-error has-feedback{{end}}">
 			<label class="col-md-4 control-label">Re-type: </label>
 			<div class="col-md-6">
-				<input name="retypepasswd" type="password" class="form-control" placeholder="Re-type your password" required="required" title="Re-type Password must be same to Password">
+				<input name="retypepasswd" type="password" class="form-control" placeholder="Re-type your password" required="required">
 			</div>
 		</div>
 
diff --git a/templates/user/social.tmpl b/templates/user/social.tmpl
index f0b1132385..7814cc0956 100644
--- a/templates/user/social.tmpl
+++ b/templates/user/social.tmpl
@@ -2,15 +2,35 @@
 {{template "base/navbar" .}}
 <div id="body" class="container" data-page="user">
     {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <div id="ssh-keys">
-            <h4>Social Account</h4>
-            {{template "base/alert" .}}
-            <ul id="ssh-keys-list" class="list-group">
-                {{range .Socials}}
-                    <i class="fa {{Oauth2Icon .Type}} fa-3x"></i>
-                {{end}}
-            </ul>
+    <div id="repo-setting-container" class="col-md-10">
+        {{template "base/alert" .}}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Social Account
+            </div>
+
+            <div class="panel-body">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>Name</th>
+                            <th>Identity</th>
+                            <th>Op.</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{range .Socials}}
+                        <tr>
+                            <td><i class="fa {{Oauth2Icon .Type}} fa-2x"></i></td>
+                            <td>{{Oauth2Name .Type}}</td>
+                            <td>{{.Identity}}</td>
+                            <td><a href="/user/settings/social?remove={{.Id}}">Unbind</a></td>
+                        </tr>
+                        {{end}}
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </div>