user/setting: improve UI

conf/locale/locale_en-US.ini

@@ -309,7 +309,7 @@ email_deletion = Email Deletion
 email_deletion_desc = Deleting this email address will remove related information from your account. Do you want to continue?
 email_deletion_success = Email has been deleted successfully!
 add_new_email = Add new email address
-add_email = Add email
+add_email = Add Email
 add_email_confirmation_sent = A new confirmation email has been sent to '%s', please check your inbox within the next %d hours to complete the confirmation process.
 add_email_success = Your new email address was successfully added.
 

conf/locale/locale_zh-CN.ini

@@ -168,6 +168,14 @@ reset_password_helper=单击此处重置密码
 password_too_short=密码长度不能少于 6 位！
 non_local_account=非本地类型的帐户无法通过 Gogs 修改密码。
 
+login_two_factor=两步验证登录
+login_two_factor_passcode=动态令牌
+login_two_factor_enter_recovery_code=输入两步验证恢复密钥
+login_two_factor_recovery=两步验证恢复登录
+login_two_factor_recovery_code=恢复密钥
+login_two_factor_enter_passcode=输入两步验证动态令牌
+login_two_factor_invalid_recovery_code=恢复密钥已经被使用或是无效的
+
 [mail]
 activate_account=请激活您的帐户
 activate_email=请验证您的邮箱地址
@@ -255,6 +263,7 @@ profile=个人信息
 password=修改密码
 avatar=头像设置
 ssh_keys=SSH 密钥
+security=帐户安全
 repos=仓库列表
 orgs=组织列表
 applications=授权应用
@@ -314,7 +323,7 @@ ssh_key_name_used=使用相同名称的公开密钥已经存在！
 key_name=密钥名称
 key_content=密钥内容
 add_key_success=新的 SSH 密钥 '%s' 添加成功！
-delete_key=删除
+delete_key=删除密钥
 ssh_key_deletion=删除 SSH 公钥操作
 ssh_key_deletion_desc=删除该 SSH 公钥将删除所有与您帐户相关的访问权限。是否继续?
 ssh_key_deletion_success=SSH 公钥删除成功！
@@ -324,10 +333,30 @@ no_activity=没有最近活动
 key_state_desc=该密钥在 7 天内被使用过
 token_state_desc=该令牌在 7 天内被使用过
 
-manage_social=管理关联社交帐户
-social_desc=以下是与您帐户所关联的社交帐号，如果您发现有陌生的关联，请立即解除绑定！
-unbind=解除绑定
-unbind_success=社交帐号解除绑定成功！
+two_factor=两步验证
+two_factor_status=当前状态：
+two_factor_on=开启
+two_factor_off=关闭
+two_factor_enable=启用两步验证
+two_factor_disable=关闭两步验证
+two_factor_view_recovery_codes=查看并备份 <a href="%s%s">恢复密钥</a> 到一个安全的地方，当您无法使用认证应用时可以使用恢复密钥作为临时令牌。
+two_factor_http=对于 HTTP/HTTPS 操作，您不再能够使用用户名和密码作为凭据。请创建和使用 <a href="%[1]s%[2]s"> 个人操作令牌</a> 作为您的凭据，如 <code>[3]s%</code>。
+two_factor_enable_title=启用两步验证
+two_factor_scan_qr=请使用您的认证应用扫描以下二维码︰
+two_factor_or_enter_secret=或者直接输入密钥：
+two_factor_then_enter_passcode=然后输入动态令牌：
+two_factor_verify=验证令牌
+two_factor_invalid_passcode=您输入的动态令牌无效，请重试！
+two_factor_enable_error=启用两步验证失败：%v
+two_factor_enable_success=两步验证登录启用成功！
+two_factor_recovery_codes_title=两步验证恢复密钥
+two_factor_recovery_codes_desc=当您无法使用认证应用时，可以使用恢复密钥作为临时令牌。每个恢复密钥只能被使用一次，<b>请务必将它们保存在一个安全的地方</b>。
+two_factor_regenerate_recovery_codes=重新生成恢复密钥
+two_factor_regenerate_recovery_codes_error=重新生成恢复密钥失败：%v
+two_factor_regenerate_recovery_codes_success=新的恢复密钥生成成功！
+two_factor_disable_title=关闭两步验证
+two_factor_disable_desc=关闭两步验证后，您的帐户安全等级将变低。是否继续？
+two_factor_disable_success=两步验证登录关闭成功！
 
 manage_access_token=管理个人操作令牌
 generate_new_token=生成新的令牌

public/css/gogs.css

@@ -136,6 +136,9 @@ code.wrap {
 .ui.form .ui.button {
   font-weight: normal;
 }
+.ui.form .box.field {
+  padding-left: 27px;
+}
 .ui.menu,
 .ui.vertical.menu,
 .ui.segment {
@@ -2339,9 +2342,6 @@ footer .ui.language .menu {
 .repository.wiki.view > .markdown h6:first-of-type {
   margin-top: 0;
 }
-.repository.settings.options .box.field {
-  padding-left: 27px;
-}
 .repository.settings.collaboration .collaborator.list {
   padding: 0;
 }
@@ -2862,6 +2862,14 @@ footer .ui.language .menu {
 .user.settings .email.list .item:not(:first-child) .button {
   margin-top: -10px;
 }
+.user.settings .email.list .item .ui.primary.label {
+  margin-top: -5px;
+}
+.user.settings.sshkeys .right.floated.button,
+.user.settings.applications .right.floated.button {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .user.settings.security .two-factor .toggle.button {
   margin-top: -5px;
 }

public/less/_base.less

@@ -140,6 +140,9 @@ pre, code {
 		.ui.button {
 			font-weight: normal;
 		}
+		.box.field {
+			padding-left: 27px;
+		}
 	}
 
 	&.menu,

public/less/_repository.less

@@ -1326,12 +1326,6 @@
 	}
 
 	&.settings {
-		&.options {
-			.box.field {
-				padding-left: 27px;
-			}
-		}
-
 		&.collaboration {
 			.collaborator.list {
 				padding: 0;

public/less/_user.less

@@ -18,6 +18,16 @@
 					margin-top: -10px;
 				}
 			}
+			.item .ui.primary.label {
+				margin-top: -5px;
+			}
+		}
+		&.sshkeys,
+		&.applications {
+			.right.floated.button {
+		    padding-top: 1rem;
+		    padding-bottom: 1rem;
+			}
 		}
 		&.security {
 			.two-factor .toggle.button {

templates/repo/settings/collaboration.tmpl

@@ -31,7 +31,7 @@
 								</div>
 							</div>
 							<div class="ui two wide column">
-								<button class="ui red tiny button inline text-thin delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								<button class="ui red tiny button inline delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 									{{$.i18n.Tr "repo.settings.delete_collaborator"}}
 								</button>
 							</div>

templates/user/settings/applications.tmpl

@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="user settings">
+<div class="user settings applications">
 	<div class="ui container">
 		<div class="ui grid">
 			{{template "user/settings/navbar" .}}
@@ -24,14 +24,14 @@
 								<div class="one wide column">
 									<i class="fa fa-send fa-2x left"></i>
 								</div>
-								<div class="eleven wide column">
+								<div class="ten wide column">
 									<strong>{{.Name}}</strong>
 									<div class="activity meta">
 										<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
 									</div>
 								</div>
-								<div class="two wide column">
-									<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								<div class="right floated button">
+									<button class="ui red tiny basic button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 										{{$.i18n.Tr "settings.delete_token"}}
 									</button>
 								</div>

templates/user/settings/avatar.tmpl

@@ -9,7 +9,6 @@
 					{{.i18n.Tr "settings.avatar"}}
 				</h4>
 				<div class="ui attached segment">
-
 					<form class="ui form" action="{{.Link}}" method="post" enctype="multipart/form-data">
 						{{.CSRFTokenHTML}}
 						{{if not DisableGravatar}}
@@ -19,7 +18,7 @@
 								<label>{{.i18n.Tr "settings.lookup_avatar_by_mail"}}</label>
 							</div>
 						</div>
-						<div class="field {{if .Err_Gravatar}}error{{end}}">
+						<div class="inline box field {{if .Err_Gravatar}}error{{end}}">
 							<label for="gravatar">Avatar {{.i18n.Tr "email"}}</label>
 							<input id="gravatar" name="gravatar" value="{{.LoggedUser.AvatarEmail}}" />
 						</div>
@@ -32,7 +31,7 @@
 							</div>
 						</div>
 
-						<div class="inline field">
+						<div class="inline box field">
 							<label for="avatar">{{.i18n.Tr "settings.choose_new_avatar"}}</label>
 							<input name="avatar" type="file" >
 						</div>

templates/user/settings/email.tmpl

@@ -17,20 +17,20 @@
 							<div class="item ui grid">
 								<div class="column">
 									<strong>{{.Email}}</strong>
-									{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
+									{{if .IsPrimary}}<span class="ui green tiny primary label">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
 									{{if not .IsPrimary}}
 										<div class="ui right">
-											<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+											<button class="ui red tiny basic button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 												{{$.i18n.Tr "settings.delete_key"}}
 											</button>
 										</div>
 										{{if .IsActivated}}
-											<div class="ui right">
+											<div class="right floated">
 												<form action="{{$.Link}}" method="post">
 													{{$.CSRFTokenHTML}}
 													<input name="_method" type="hidden" value="PRIMARY">
 													<input name="id" type="hidden" value="{{.ID}}">
-													<button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
+													<button class="ui green tiny basic button">{{$.i18n.Tr "settings.primary_email"}}</button>
 												</form>
 											</div>
 										{{end}}

templates/user/settings/organizations.tmpl

@@ -16,14 +16,14 @@
 						<div class="ui middle aligned divided list">
 							{{range .Orgs}}
 							<div class="item">
-								<div class="right floated content">
-									<button class="ui red tiny button inline text-thin delete-button" data-url="{{$.Link}}/leave" data-id="{{.ID}}">
+								<div class="right floated">
+									<button class="ui red tiny basic button inline delete-button" data-url="{{$.Link}}/leave" data-id="{{.ID}}">
 										{{$.i18n.Tr "org.members.leave"}}
 									</button>
 								</div>
 								<img class="ui mini image" src="{{.RelAvatarLink}}">
 								<div class="content">
-										<a href="{{.HomeLink}}">{{.Name}}</a>
+									<a href="{{.HomeLink}}">{{.Name}}</a>
 								</div>
 							</div>
 							{{end}}

templates/user/settings/repositories.tmpl

@@ -29,8 +29,8 @@
 								</a> 
 								<span class="ui text light grey">{{.Size | FileSize}}</span>
 								{{if not (eq .OwnerID $.LoggedUserID)}}
-								<div class="right floated content">
-									<a class="ui red tiny button inline text-thin delete-button" href="" data-url="{{$.Link}}/leave" data-id="{{.ID}}">{{$.i18n.Tr "settings.repos.leave"}}</a>
+								<div class="right floated">
+									<a class="ui red tiny basic button inline delete-button" href="" data-url="{{$.Link}}/leave" data-id="{{.ID}}">{{$.i18n.Tr "settings.repos.leave"}}</a>
 								</div>
 								{{end}}
 							</div>

templates/user/settings/sshkeys.tmpl

@@ -24,7 +24,7 @@
 								<div class="one wide column">
 									<i class="mega-octicon octicon-key left"></i>
 								</div>
-								<div class="eleven wide column">
+								<div class="ten wide column">
 									<strong>{{.Name}}</strong>
 									<div class="print meta">
 										{{.Fingerprint}}
@@ -33,8 +33,8 @@
 										<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> —  <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
 									</div>
 								</div>
-								<div class="two wide column">
-									<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								<div class="right floated button">
+									<button class="ui red tiny basic button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 										{{$.i18n.Tr "settings.delete_key"}}
 									</button>
 								</div>