Cleaner ui for admin, repo settings, and user settings page (#1269) (#1270)

11 files changed, 374 insertions, 417 deletions

diff --git a/templates/user/settings/account_link.tmpl b/templates/user/settings/account_link.tmpl
index fa14cb525b..4b19bea75c 100644
--- a/templates/user/settings/account_link.tmpl
+++ b/templates/user/settings/account_link.tmpl
@@ -1,35 +1,31 @@
 {{template "base/head" .}}
 <div class="user settings account_link">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.manage_account_links"}}
-				</h4>
-				<div class="ui attached segment">
-					<div class="ui key list">
-						<div class="item">
-							{{.i18n.Tr "settings.manage_account_links_desc"}}
-						</div>
-						{{if .AccountLinks}}
-						{{range $loginSource, $provider := .AccountLinks}}
-							<div class="item ui grid">
-								<div class="column">
-									<strong>{{$provider}}</strong>
-									{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
-									<div class="ui right">
-										<button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}">
-											{{$.i18n.Tr "settings.delete_key"}}
-										</button>
-									</div>
-								</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.manage_account_links"}}
+		</h4>
+		<div class="ui attached segment">
+			<div class="ui key list">
+				<div class="item">
+					{{.i18n.Tr "settings.manage_account_links_desc"}}
+				</div>
+				{{if .AccountLinks}}
+				{{range $loginSource, $provider := .AccountLinks}}
+					<div class="item ui grid">
+						<div class="column">
+							<strong>{{$provider}}</strong>
+							{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
+							<div class="ui right">
+								<button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}">
+									{{$.i18n.Tr "settings.delete_key"}}
+								</button>
 							</div>
-						{{end}}
-						{{end}}
+						</div>
 					</div>
-				</div>
+				{{end}}
+				{{end}}
 			</div>
 		</div>
 	</div>
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index b5bacf7765..d8ba6d65a7 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -1,63 +1,59 @@
 {{template "base/head" .}}
 <div class="user settings">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.manage_access_token"}}
-					<div class="ui right">
-						<div class="ui blue tiny show-panel button" data-panel="#add-access-token-panel">{{.i18n.Tr "settings.generate_new_token"}}</div>
-					</div>
-				</h4>
-				<div class="ui attached segment">
-					<div class="ui key list">
-						<div class="item">
-							{{.i18n.Tr "settings.tokens_desc"}}
-						</div>
-						{{range .Tokens}}
-							<div class="item ui grid">
-								<div class="one wide column">
-									<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
-								</div>
-								<div class="one wide column">
-									<i class="fa fa-send fa-2x left"></i>
-								</div>
-								<div class="eleven 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}}">
-										{{$.i18n.Tr "settings.delete_token"}}
-									</button>
-								</div>
-							</div>
-						{{end}}
-					</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.manage_access_token"}}
+			<div class="ui right">
+				<div class="ui blue tiny show-panel button" data-panel="#add-access-token-panel">{{.i18n.Tr "settings.generate_new_token"}}</div>
+			</div>
+		</h4>
+		<div class="ui attached segment">
+			<div class="ui key list">
+				<div class="item">
+					{{.i18n.Tr "settings.tokens_desc"}}
 				</div>
-				<br>
-				<div {{if not .HasError}}class="hide"{{end}} id="add-access-token-panel">
-					<h4 class="ui top attached header">
-						{{.i18n.Tr "settings.generate_new_token"}}
-					</h4>
-					<div class="ui attached segment">
-						<form class="ui form" action="{{.Link}}" method="post">
-							{{.CsrfTokenHtml}}
-							<p>{{.i18n.Tr "settings.new_token_desc"}}</p>
-							<div class="field {{if .Err_Name}}error{{end}}">
-								<label for="name">{{.i18n.Tr "settings.token_name"}}</label>
-								<input id="name" name="name" value="{{.name}}" autofocus required>
+				{{range .Tokens}}
+					<div class="item ui grid">
+						<div class="one wide column">
+							<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+						</div>
+						<div class="one wide column">
+							<i class="fa fa-send fa-2x left"></i>
+						</div>
+						<div class="eleven 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>
-							<button class="ui green button">
-								{{.i18n.Tr "settings.generate_token"}}
+						</div>
+						<div class="two wide column">
+							<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								{{$.i18n.Tr "settings.delete_token"}}
 							</button>
-						</form>
+						</div>
 					</div>
-				</div>
+				{{end}}
+			</div>
+		</div>
+		<br>
+		<div {{if not .HasError}}class="hide"{{end}} id="add-access-token-panel">
+			<h4 class="ui top attached header">
+				{{.i18n.Tr "settings.generate_new_token"}}
+			</h4>
+			<div class="ui attached segment">
+				<form class="ui form" action="{{.Link}}" method="post">
+					{{.CsrfTokenHtml}}
+					<p>{{.i18n.Tr "settings.new_token_desc"}}</p>
+					<div class="field {{if .Err_Name}}error{{end}}">
+						<label for="name">{{.i18n.Tr "settings.token_name"}}</label>
+						<input id="name" name="name" value="{{.name}}" autofocus required>
+					</div>
+					<button class="ui green button">
+						{{.i18n.Tr "settings.generate_token"}}
+					</button>
+				</form>
 			</div>
 		</div>
 	</div>
diff --git a/templates/user/settings/avatar.tmpl b/templates/user/settings/avatar.tmpl
index 93286c4957..72d2eb6ad4 100644
--- a/templates/user/settings/avatar.tmpl
+++ b/templates/user/settings/avatar.tmpl
@@ -1,49 +1,45 @@
 {{template "base/head" .}}
 <div class="user settings avatar">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.avatar"}}
-				</h4>
-				<div class="ui attached segment">
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.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}}
-						<div class="inline field">
-							<div class="ui radio checkbox">
-								<input name="source" value="lookup" type="radio" {{if not .SignedUser.UseCustomAvatar}}checked{{end}}>
-								<label>{{.i18n.Tr "settings.lookup_avatar_by_mail"}}</label>
-							</div>
-						</div>
-						<div class="field {{if .Err_Gravatar}}error{{end}}">
-							<label for="gravatar">Avatar {{.i18n.Tr "email"}}</label>
-							<input id="gravatar" name="gravatar" value="{{.SignedUser.AvatarEmail}}" />
-						</div>
-						{{end}}
+			<form class="ui form" action="{{.Link}}" method="post" enctype="multipart/form-data">
+				{{.CsrfTokenHtml}}
+				{{if not DisableGravatar}}
+				<div class="inline field">
+					<div class="ui radio checkbox">
+						<input name="source" value="lookup" type="radio" {{if not .SignedUser.UseCustomAvatar}}checked{{end}}>
+						<label>{{.i18n.Tr "settings.lookup_avatar_by_mail"}}</label>
+					</div>
+				</div>
+				<div class="field {{if .Err_Gravatar}}error{{end}}">
+					<label for="gravatar">Avatar {{.i18n.Tr "email"}}</label>
+					<input id="gravatar" name="gravatar" value="{{.SignedUser.AvatarEmail}}" />
+				</div>
+				{{end}}
 
-						<div class="inline field">
-							<div class="ui radio checkbox">
-								<input name="source" value="local" type="radio" {{if .SignedUser.UseCustomAvatar}}checked{{end}}>
-								<label>{{.i18n.Tr "settings.enable_custom_avatar"}}</label>
-							</div>
-						</div>
+				<div class="inline field">
+					<div class="ui radio checkbox">
+						<input name="source" value="local" type="radio" {{if .SignedUser.UseCustomAvatar}}checked{{end}}>
+						<label>{{.i18n.Tr "settings.enable_custom_avatar"}}</label>
+					</div>
+				</div>
 
-						<div class="inline field">
-							<label for="avatar">{{.i18n.Tr "settings.choose_new_avatar"}}</label>
-							<input name="avatar" type="file" >
-						</div>
+				<div class="inline field">
+					<label for="avatar">{{.i18n.Tr "settings.choose_new_avatar"}}</label>
+					<input name="avatar" type="file" >
+				</div>
 
-						<div class="field">
-							<button class="ui green button">{{$.i18n.Tr "settings.update_avatar"}}</button>
-							<a class="ui red button delete-post" data-request-url="{{.Link}}/delete" data-done-url="{{.Link}}">{{$.i18n.Tr "settings.delete_current_avatar"}}</a>
-						</div>
-					</form>
+				<div class="field">
+					<button class="ui green button">{{$.i18n.Tr "settings.update_avatar"}}</button>
+					<a class="ui red button delete-post" data-request-url="{{.Link}}/delete" data-done-url="{{.Link}}">{{$.i18n.Tr "settings.delete_current_avatar"}}</a>
 				</div>
-			</div>
+			</form>
 		</div>
 	</div>
 </div>
diff --git a/templates/user/settings/delete.tmpl b/templates/user/settings/delete.tmpl
index 08e8f75d9a..933f383a47 100644
--- a/templates/user/settings/delete.tmpl
+++ b/templates/user/settings/delete.tmpl
@@ -1,33 +1,29 @@
 {{template "base/head" .}}
 <div class="user settings delete">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached warning header">
-					{{.i18n.Tr "settings.delete_account"}}
-				</h4>
-				<div class="ui attached warning segment">
-					<div class="ui red message">
-						<p class="text left"><i class="octicon octicon-alert"></i> {{.i18n.Tr "settings.delete_prompt" | Str2html}}</p>
-					</div>
-					<form class="ui form" id="delete-form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						<input class="fake" type="password">
-						<div class="inline required field {{if .Err_Password}}error{{end}}">
-							<label for="password">{{.i18n.Tr "password"}}</label>
-							<input id="password" name="password" type="password" autofocus required>
-						</div>
-						<div class="ui red button delete-button" data-type="form" data-form="#delete-form">
-							{{.i18n.Tr "settings.confirm_delete_account"}}
-						</div>
-						<div>
-							<a href="{{AppSubUrl}}/user/forgot_password?email={{.Email}}">{{.i18n.Tr "auth.forgot_password"}}</a>
-						</div>
-					</form>
-				</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached warning header">
+			{{.i18n.Tr "settings.delete_account"}}
+		</h4>
+		<div class="ui attached warning segment">
+			<div class="ui red message">
+				<p class="text left"><i class="octicon octicon-alert"></i> {{.i18n.Tr "settings.delete_prompt" | Str2html}}</p>
 			</div>
+			<form class="ui form" id="delete-form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<input class="fake" type="password">
+				<div class="inline required field {{if .Err_Password}}error{{end}}">
+					<label for="password">{{.i18n.Tr "password"}}</label>
+					<input id="password" name="password" type="password" autofocus required>
+				</div>
+				<div class="ui red button delete-button" data-type="form" data-form="#delete-form">
+					{{.i18n.Tr "settings.confirm_delete_account"}}
+				</div>
+				<div>
+					<a href="{{AppSubUrl}}/user/forgot_password?email={{.Email}}">{{.i18n.Tr "auth.forgot_password"}}</a>
+				</div>
+			</form>
 		</div>
 	</div>
 </div>
diff --git a/templates/user/settings/email.tmpl b/templates/user/settings/email.tmpl
index 558145302f..f54a2fc833 100644
--- a/templates/user/settings/email.tmpl
+++ b/templates/user/settings/email.tmpl
@@ -1,59 +1,55 @@
 {{template "base/head" .}}
 <div class="user settings emails">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.manage_emails"}}
-				</h4>
-				<div class="ui attached segment">
-					<div class="ui email list">
-						<div class="item">
-							{{.i18n.Tr "settings.email_desc"}}
-						</div>
-						{{range .Emails}}
-							<div class="item ui grid">
-								<div class="column">
-									<strong>{{.Email}}</strong>
-									{{if .IsPrimary}}<span class="text red">{{$.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}}">
-												{{$.i18n.Tr "settings.delete_key"}}
-											</button>
-										</div>
-										{{if .IsActivated}}
-											<div class="ui right">
-												<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>
-												</form>
-											</div>
-										{{end}}
-									{{end}}
-								</div>
-							</div>
-						{{end}}
-					</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.manage_emails"}}
+		</h4>
+		<div class="ui attached segment">
+			<div class="ui email list">
+				<div class="item">
+					{{.i18n.Tr "settings.email_desc"}}
 				</div>
-				<div class="ui attached bottom segment">
-					<form class="ui form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						<div class="required field {{if .Err_Email}}error{{end}}">
-							<label for="email">{{.i18n.Tr "settings.add_new_email"}}</label>
-							<input id="email" name="email" type="email" autofocus required>
+				{{range .Emails}}
+					<div class="item ui grid">
+						<div class="column">
+							<strong>{{.Email}}</strong>
+							{{if .IsPrimary}}<span class="text red">{{$.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}}">
+										{{$.i18n.Tr "settings.delete_key"}}
+									</button>
+								</div>
+								{{if .IsActivated}}
+									<div class="ui right">
+										<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>
+										</form>
+									</div>
+								{{end}}
+							{{end}}
 						</div>
-						<button class="ui green button">
-							{{.i18n.Tr "settings.add_email"}}
-						</button>
-					</form>
-				</div>
+					</div>
+				{{end}}
 			</div>
 		</div>
+		<div class="ui attached bottom segment">
+			<form class="ui form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<div class="required field {{if .Err_Email}}error{{end}}">
+					<label for="email">{{.i18n.Tr "settings.add_new_email"}}</label>
+					<input id="email" name="email" type="email" autofocus required>
+				</div>
+				<button class="ui green button">
+					{{.i18n.Tr "settings.add_email"}}
+				</button>
+			</form>
+		</div>
 	</div>
 </div>
 
diff --git a/templates/user/settings/navbar.tmpl b/templates/user/settings/navbar.tmpl
index d8b69cf5d0..611c091ba4 100644
--- a/templates/user/settings/navbar.tmpl
+++ b/templates/user/settings/navbar.tmpl
@@ -1,32 +1,29 @@
-<div class="four wide column">
-	<div class="ui vertical menu">
-		<div class="header item">{{.i18n.Tr "settings"}}</div>
-		<a class="{{if .PageIsSettingsProfile}}active{{end}} item" href="{{AppSubUrl}}/user/settings">
-			{{.i18n.Tr "settings.profile"}}
-		</a>
-		<a class="{{if .PageIsSettingsAvatar}}active{{end}} item" href="{{AppSubUrl}}/user/settings/avatar">
-			{{.i18n.Tr "settings.avatar"}}
-		</a>
-		<a class="{{if .PageIsSettingsPassword}}active{{end}} item" href="{{AppSubUrl}}/user/settings/password">
-			{{.i18n.Tr "settings.password"}}
-		</a>
-		<a class="{{if .PageIsSettingsEmails}}active{{end}} item" href="{{AppSubUrl}}/user/settings/email">
-			{{.i18n.Tr "settings.emails"}}
-		</a>
-		<a class="{{if .PageIsSettingsSSHKeys}}active{{end}} item" href="{{AppSubUrl}}/user/settings/ssh">
-			{{.i18n.Tr "settings.ssh_keys"}}
-		</a>
-		<a class="{{if .PageIsSettingsApplications}}active{{end}} item" href="{{AppSubUrl}}/user/settings/applications">
-			{{.i18n.Tr "settings.applications"}}
-		</a>
-		<a class="{{if .PageIsSettingsTwofa}}active{{end}} item" href="{{AppSubUrl}}/user/settings/two_factor">
-			{{.i18n.Tr "settings.twofa"}}
-		</a>
-		<a class="{{if .PageIsSettingsAccountLink}}active{{end}} item" href="{{AppSubUrl}}/user/settings/account_link">
-			{{.i18n.Tr "settings.account_link"}}
-		</a>
-		<a class="{{if .PageIsSettingsDelete}}active{{end}} item" href="{{AppSubUrl}}/user/settings/delete">
-			{{.i18n.Tr "settings.delete"}}
-		</a>
-	</div>
-</div>
+<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
+	<a class="{{if .PageIsSettingsProfile}}active{{end}} item" href="{{AppSubUrl}}/user/settings">
+		{{.i18n.Tr "settings.profile"}}
+	</a>
+	<a class="{{if .PageIsSettingsAvatar}}active{{end}} item" href="{{AppSubUrl}}/user/settings/avatar">
+		{{.i18n.Tr "settings.avatar"}}
+	</a>
+	<a class="{{if .PageIsSettingsPassword}}active{{end}} item" href="{{AppSubUrl}}/user/settings/password">
+		{{.i18n.Tr "settings.password"}}
+	</a>
+	<a class="{{if .PageIsSettingsEmails}}active{{end}} item" href="{{AppSubUrl}}/user/settings/email">
+		{{.i18n.Tr "settings.emails"}}
+	</a>
+	<a class="{{if .PageIsSettingsSSHKeys}}active{{end}} item" href="{{AppSubUrl}}/user/settings/ssh">
+		{{.i18n.Tr "settings.ssh_keys"}}
+	</a>
+	<a class="{{if .PageIsSettingsApplications}}active{{end}} item" href="{{AppSubUrl}}/user/settings/applications">
+		{{.i18n.Tr "settings.applications"}}
+	</a>
+	<a class="{{if .PageIsSettingsTwofa}}active{{end}} item" href="{{AppSubUrl}}/user/settings/two_factor">
+		{{.i18n.Tr "settings.twofa"}}
+	</a>
+	<a class="{{if .PageIsSettingsAccountLink}}active{{end}} item" href="{{AppSubUrl}}/user/settings/account_link">
+		{{.i18n.Tr "settings.account_link"}}
+	</a>
+	<a class="{{if .PageIsSettingsDelete}}active{{end}} item" href="{{AppSubUrl}}/user/settings/delete">
+		{{.i18n.Tr "settings.delete"}}
+	</a>
+</div>
\ No newline at end of file
diff --git a/templates/user/settings/password.tmpl b/templates/user/settings/password.tmpl
index d97eb4f140..53872c901d 100644
--- a/templates/user/settings/password.tmpl
+++ b/templates/user/settings/password.tmpl
@@ -1,44 +1,40 @@
 {{template "base/head" .}}
 <div class="user settings password">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.change_password"}}
-				</h4>
-				<div class="ui attached segment">
-					{{if or (.SignedUser.IsLocal) (.SignedUser.IsOAuth2)}}
-					<form class="ui form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						{{if .SignedUser.IsPasswordSet}}
-						<div class="required field {{if .Err_OldPassword}}error{{end}}">
-							<label for="old_password">{{.i18n.Tr "settings.old_password"}}</label>
-							<input id="old_password" name="old_password" type="password" autocomplete="off" autofocus required>
-						</div>
-						{{end}}
-						<div class="required field {{if .Err_Password}}error{{end}}">
-							<label for="password">{{.i18n.Tr "settings.new_password"}}</label>
-							<input id="password" name="password" type="password" autocomplete="off" required>
-						</div>
-						<div class="required field {{if .Err_Password}}error{{end}}">
-							<label for="retype">{{.i18n.Tr "settings.retype_new_password"}}</label>
-							<input id="retype" name="retype" type="password" autocomplete="off" required>
-						</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.change_password"}}
+		</h4>
+		<div class="ui attached segment">
+			{{if or (.SignedUser.IsLocal) (.SignedUser.IsOAuth2)}}
+			<form class="ui form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				{{if .SignedUser.IsPasswordSet}}
+				<div class="required field {{if .Err_OldPassword}}error{{end}}">
+					<label for="old_password">{{.i18n.Tr "settings.old_password"}}</label>
+					<input id="old_password" name="old_password" type="password" autocomplete="off" autofocus required>
+				</div>
+				{{end}}
+				<div class="required field {{if .Err_Password}}error{{end}}">
+					<label for="password">{{.i18n.Tr "settings.new_password"}}</label>
+					<input id="password" name="password" type="password" autocomplete="off" required>
+				</div>
+				<div class="required field {{if .Err_Password}}error{{end}}">
+					<label for="retype">{{.i18n.Tr "settings.retype_new_password"}}</label>
+					<input id="retype" name="retype" type="password" autocomplete="off" required>
+				</div>
 
-						<div class="field">
-							<button class="ui green button">{{$.i18n.Tr "settings.change_password"}}</button>
-							<a href="{{AppSubUrl}}/user/forgot_password?email={{.Email}}">{{.i18n.Tr "auth.forgot_password"}}</a>
-						</div>
-					</form>
-					{{else}}
-					<div class="ui info message">
-						<p class="text left">{{$.i18n.Tr "settings.password_change_disabled"}}</p>
-					</div>
-					{{end}}
+				<div class="field">
+					<button class="ui green button">{{$.i18n.Tr "settings.change_password"}}</button>
+					<a href="{{AppSubUrl}}/user/forgot_password?email={{.Email}}">{{.i18n.Tr "auth.forgot_password"}}</a>
 				</div>
+			</form>
+			{{else}}
+			<div class="ui info message">
+				<p class="text left">{{$.i18n.Tr "settings.password_change_disabled"}}</p>
 			</div>
+			{{end}}
 		</div>
 	</div>
 </div>
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index f01e6e9739..091c2e2c53 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -1,54 +1,50 @@
 {{template "base/head" .}}
 <div class="user settings profile">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.public_profile"}}
-				</h4>
-				<div class="ui attached segment">
-					<p>{{.i18n.Tr "settings.profile_desc"}}</p>
-					<form class="ui form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						<div class="required field {{if .Err_Name}}error{{end}}">
-							<label for="username">{{.i18n.Tr "username"}}<span class="text red hide" id="name-change-prompt"> {{.i18n.Tr "settings.change_username_prompt"}}</span></label>
-							<input id="username" name="name" value="{{.SignedUser.Name}}" data-name="{{.SignedUser.Name}}" autofocus required {{if not .SignedUser.IsLocal}}disabled{{end}}>
-							{{if not .SignedUser.IsLocal}}
-							<p class="help text blue">{{$.i18n.Tr "settings.password_username_disabled"}}</p>
-							{{end}}
-						</div>
-						<div class="field {{if .Err_FullName}}error{{end}}">
-							<label for="full_name">{{.i18n.Tr "settings.full_name"}}</label>
-							<input id="full_name" name="full_name" value="{{.SignedUser.FullName}}">
-						</div>
-						<div class="required field {{if .Err_Email}}error{{end}}">
-							<label for="email">{{.i18n.Tr "email"}}</label>
-							<input id="email" name="email" value="{{.SignedUser.Email}}">
-						</div>
-						<div class="inline field">
-							<div class="ui checkbox" id="keep-email-private">
-								<label class="poping up" data-content="{{.i18n.Tr "settings.keep_email_private_popup"}}"><strong>{{.i18n.Tr "settings.keep_email_private"}}</strong></label>
-								<input name="keep_email_private" type="checkbox" {{if .SignedUser.KeepEmailPrivate}}checked{{end}}>
-							</div>
-						</div>
-						<div class="field {{if .Err_Website}}error{{end}}">
-							<label for="website">{{.i18n.Tr "settings.website"}}</label>
-							<input id="website" name="website" type="url" value="{{.SignedUser.Website}}">
-						</div>
-						<div class="field">
-							<label for="location">{{.i18n.Tr "settings.location"}}</label>
-							<input id="location" name="location"  value="{{.SignedUser.Location}}">
-						</div>
-
-						<div class="field">
-							<button class="ui green button">{{$.i18n.Tr "settings.update_profile"}}</button>
-						</div>
-					</form>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.public_profile"}}
+		</h4>
+		<div class="ui attached segment">
+			<p>{{.i18n.Tr "settings.profile_desc"}}</p>
+			<form class="ui form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<div class="required field {{if .Err_Name}}error{{end}}">
+					<label for="username">{{.i18n.Tr "username"}}<span class="text red hide" id="name-change-prompt"> {{.i18n.Tr "settings.change_username_prompt"}}</span></label>
+					<input id="username" name="name" value="{{.SignedUser.Name}}" data-name="{{.SignedUser.Name}}" autofocus required {{if not .SignedUser.IsLocal}}disabled{{end}}>
+					{{if not .SignedUser.IsLocal}}
+					<p class="help text blue">{{$.i18n.Tr "settings.password_username_disabled"}}</p>
+					{{end}}
+				</div>
+				<div class="field {{if .Err_FullName}}error{{end}}">
+					<label for="full_name">{{.i18n.Tr "settings.full_name"}}</label>
+					<input id="full_name" name="full_name" value="{{.SignedUser.FullName}}">
+				</div>
+				<div class="required field {{if .Err_Email}}error{{end}}">
+					<label for="email">{{.i18n.Tr "email"}}</label>
+					<input id="email" name="email" value="{{.SignedUser.Email}}">
+				</div>
+				<div class="inline field">
+					<div class="ui checkbox" id="keep-email-private">
+						<label class="poping up" data-content="{{.i18n.Tr "settings.keep_email_private_popup"}}"><strong>{{.i18n.Tr "settings.keep_email_private"}}</strong></label>
+						<input name="keep_email_private" type="checkbox" {{if .SignedUser.KeepEmailPrivate}}checked{{end}}>
+					</div>
+				</div>
+				<div class="field {{if .Err_Website}}error{{end}}">
+					<label for="website">{{.i18n.Tr "settings.website"}}</label>
+					<input id="website" name="website" type="url" value="{{.SignedUser.Website}}">
+				</div>
+				<div class="field">
+					<label for="location">{{.i18n.Tr "settings.location"}}</label>
+					<input id="location" name="location"  value="{{.SignedUser.Location}}">
+				</div>
 
+				<div class="field">
+					<button class="ui green button">{{$.i18n.Tr "settings.update_profile"}}</button>
 				</div>
-			</div>
+			</form>
+
 		</div>
 	</div>
 </div>
diff --git a/templates/user/settings/sshkeys.tmpl b/templates/user/settings/sshkeys.tmpl
index 72344df3ed..bb4a6c6a83 100644
--- a/templates/user/settings/sshkeys.tmpl
+++ b/templates/user/settings/sshkeys.tmpl
@@ -1,70 +1,66 @@
 {{template "base/head" .}}
 <div class="user settings sshkeys">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.manage_ssh_keys"}}
-					<div class="ui right">
-						<div class="ui blue tiny show-panel button" data-panel="#add-ssh-key-panel">{{.i18n.Tr "settings.add_key"}}</div>
-					</div>
-				</h4>
-				<div class="ui attached segment">
-					<div class="ui key list">
-						<div class="item">
-							{{.i18n.Tr "settings.ssh_desc"}}
-						</div>
-						{{range .Keys}}
-							<div class="item ui grid">
-								<div class="one wide column">
-									<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
-								</div>
-								<div class="one wide column">
-									<i class="mega-octicon octicon-key left"></i>
-								</div>
-								<div class="eleven wide column">
-									<strong>{{.Name}}</strong>
-									<div class="print meta">
-										{{.Fingerprint}}
-									</div>
-									<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}}">
-										{{$.i18n.Tr "settings.delete_key"}}
-									</button>
-								</div>
-							</div>
-						{{end}}
-					</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.manage_ssh_keys"}}
+			<div class="ui right">
+				<div class="ui blue tiny show-panel button" data-panel="#add-ssh-key-panel">{{.i18n.Tr "settings.add_key"}}</div>
+			</div>
+		</h4>
+		<div class="ui attached segment">
+			<div class="ui key list">
+				<div class="item">
+					{{.i18n.Tr "settings.ssh_desc"}}
 				</div>
-				<br>
-				<p>{{.i18n.Tr "settings.ssh_helper" "https://help.github.com/articles/generating-ssh-keys" "https://help.github.com/ssh-issues/" | Str2html}}</p>
-				<div {{if not .HasError}}class="hide"{{end}} id="add-ssh-key-panel">
-					<h4 class="ui top attached header">
-						{{.i18n.Tr "settings.add_new_key"}}
-					</h4>
-					<div class="ui attached segment">
-						<form class="ui form" action="{{.Link}}" method="post">
-							{{.CsrfTokenHtml}}
-							<div class="field {{if .Err_Title}}error{{end}}">
-								<label for="title">{{.i18n.Tr "settings.key_name"}}</label>
-								<input id="ssh-key-title" name="title" value="{{.title}}" autofocus required>
+				{{range .Keys}}
+					<div class="item ui grid">
+						<div class="one wide column">
+							<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
+						</div>
+						<div class="one wide column">
+							<i class="mega-octicon octicon-key left"></i>
+						</div>
+						<div class="eleven wide column">
+							<strong>{{.Name}}</strong>
+							<div class="print meta">
+								{{.Fingerprint}}
 							</div>
-							<div class="field {{if .Err_Content}}error{{end}}">
-								<label for="content">{{.i18n.Tr "settings.key_content"}}</label>
-								<textarea id="ssh-key-content" name="content" required>{{.content}}</textarea>
+							<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>
-							<button class="ui green button">
-								{{.i18n.Tr "settings.add_key"}}
+						</div>
+						<div class="two wide column">
+							<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+								{{$.i18n.Tr "settings.delete_key"}}
 							</button>
-						</form>
+						</div>
 					</div>
-				</div>
+				{{end}}
+			</div>
+		</div>
+		<br>
+		<p>{{.i18n.Tr "settings.ssh_helper" "https://help.github.com/articles/generating-ssh-keys" "https://help.github.com/ssh-issues/" | Str2html}}</p>
+		<div {{if not .HasError}}class="hide"{{end}} id="add-ssh-key-panel">
+			<h4 class="ui top attached header">
+				{{.i18n.Tr "settings.add_new_key"}}
+			</h4>
+			<div class="ui attached segment">
+				<form class="ui form" action="{{.Link}}" method="post">
+					{{.CsrfTokenHtml}}
+					<div class="field {{if .Err_Title}}error{{end}}">
+						<label for="title">{{.i18n.Tr "settings.key_name"}}</label>
+						<input id="ssh-key-title" name="title" value="{{.title}}" autofocus required>
+					</div>
+					<div class="field {{if .Err_Content}}error{{end}}">
+						<label for="content">{{.i18n.Tr "settings.key_content"}}</label>
+						<textarea id="ssh-key-content" name="content" required>{{.content}}</textarea>
+					</div>
+					<button class="ui green button">
+						{{.i18n.Tr "settings.add_key"}}
+					</button>
+				</form>
 			</div>
 		</div>
 	</div>
diff --git a/templates/user/settings/twofa.tmpl b/templates/user/settings/twofa.tmpl
index fd214e4f7f..c6a7a7cba0 100644
--- a/templates/user/settings/twofa.tmpl
+++ b/templates/user/settings/twofa.tmpl
@@ -1,35 +1,31 @@
 {{template "base/head" .}}
 <div class="user settings delete">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.twofa"}}
-				</h4>
-				<div class="ui attached segment">
-					<p>{{.i18n.Tr "settings.twofa_desc"}}</p>
-					{{if .TwofaEnrolled}}
-                    <p>{{$.i18n.Tr "settings.twofa_is_enrolled" | Str2html }}</p>
-                    <form class="ui form" action="{{.Link}}/regenerate_scratch" method="post" enctype="multipart/form-data">
-						{{.CsrfTokenHtml}}
-                        <p>{{.i18n.Tr "settings.regenerate_scratch_token_desc"}}</p>
-                        <button class="ui blue button">{{$.i18n.Tr "settings.twofa_scratch_token_regenerate"}}</button>
-                    </form>
-                    <form class="ui form" action="{{.Link}}/disable" method="post" enctype="multipart/form-data" id="disable-form">
-						{{.CsrfTokenHtml}}
-						<p>{{.i18n.Tr "settings.twofa_disable_note"}}</p>
-						<div class="ui red button delete-button" data-type="form" data-form="#disable-form">{{$.i18n.Tr "settings.twofa_disable"}}</div>
-                    </form>
-                    {{else}}
-                    <p>{{.i18n.Tr "settings.twofa_not_enrolled"}}</p>
-                    <div class="inline field">
-						<a class="ui green button" href="{{.Link}}/enroll">{{$.i18n.Tr "settings.twofa_enroll"}}</a>
-					</div>
-                    {{end}}
-				</div>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.twofa"}}
+		</h4>
+		<div class="ui attached segment">
+			<p>{{.i18n.Tr "settings.twofa_desc"}}</p>
+			{{if .TwofaEnrolled}}
+			<p>{{$.i18n.Tr "settings.twofa_is_enrolled" | Str2html }}</p>
+			<form class="ui form" action="{{.Link}}/regenerate_scratch" method="post" enctype="multipart/form-data">
+				{{.CsrfTokenHtml}}
+				<p>{{.i18n.Tr "settings.regenerate_scratch_token_desc"}}</p>
+				<button class="ui blue button">{{$.i18n.Tr "settings.twofa_scratch_token_regenerate"}}</button>
+			</form>
+			<form class="ui form" action="{{.Link}}/disable" method="post" enctype="multipart/form-data" id="disable-form">
+				{{.CsrfTokenHtml}}
+				<p>{{.i18n.Tr "settings.twofa_disable_note"}}</p>
+				<div class="ui red button delete-button" data-type="form" data-form="#disable-form">{{$.i18n.Tr "settings.twofa_disable"}}</div>
+			</form>
+			{{else}}
+			<p>{{.i18n.Tr "settings.twofa_not_enrolled"}}</p>
+			<div class="inline field">
+				<a class="ui green button" href="{{.Link}}/enroll">{{$.i18n.Tr "settings.twofa_enroll"}}</a>
 			</div>
+			{{end}}
 		</div>
 	</div>
 </div>
diff --git a/templates/user/settings/twofa_enroll.tmpl b/templates/user/settings/twofa_enroll.tmpl
index bc2dc271eb..9238fb61a5 100644
--- a/templates/user/settings/twofa_enroll.tmpl
+++ b/templates/user/settings/twofa_enroll.tmpl
@@ -1,31 +1,27 @@
 {{template "base/head" .}}
 <div class="user settings delete">
+	{{template "user/settings/navbar" .}}
 	<div class="ui container">
-		<div class="ui grid">
-			{{template "user/settings/navbar" .}}
-			<div class="twelve wide column content">
-				{{template "base/alert" .}}
-				<h4 class="ui top attached header">
-					{{.i18n.Tr "settings.twofa_enroll"}}
-				</h4>
-				<div class="ui attached segment">
-					<p>{{.i18n.Tr "settings.scan_this_image"}}</p>
-                    <img src="{{.QrUri}}" alt="{{.TwofaSecret}}">
-                    <p>{{.i18n.Tr "settings.or_enter_secret" .TwofaSecret}}
-                    <p>{{.i18n.Tr "settings.then_enter_passcode"}}
-                    <form class="ui form" action="{{.Link}}" method="post">
-						{{.CsrfTokenHtml}}
-						<div class="inline required field {{if .Err_Passcode}}error{{end}}">
-							<label for="passcode">{{.i18n.Tr "passcode"}}</label>
-							<input id="passcode" name="passcode" autofocus required>
-						</div>
-						<div class="inline field">
-							<label></label>
-							<button class="ui green button">{{.i18n.Tr "auth.verify"}}</button>
-						</div>
-					</form>
+		{{template "base/alert" .}}
+		<h4 class="ui top attached header">
+			{{.i18n.Tr "settings.twofa_enroll"}}
+		</h4>
+		<div class="ui attached segment">
+			<p>{{.i18n.Tr "settings.scan_this_image"}}</p>
+			<img src="{{.QrUri}}" alt="{{.TwofaSecret}}">
+			<p>{{.i18n.Tr "settings.or_enter_secret" .TwofaSecret}}
+			<p>{{.i18n.Tr "settings.then_enter_passcode"}}
+			<form class="ui form" action="{{.Link}}" method="post">
+				{{.CsrfTokenHtml}}
+				<div class="inline required field {{if .Err_Passcode}}error{{end}}">
+					<label for="passcode">{{.i18n.Tr "passcode"}}</label>
+					<input id="passcode" name="passcode" autofocus required>
 				</div>
-			</div>
+				<div class="inline field">
+					<label></label>
+					<button class="ui green button">{{.i18n.Tr "auth.verify"}}</button>
+				</div>
+			</form>
 		</div>
 	</div>
 </div>