use tabs to switch between account link flows

options/locale/locale_en-US.ini

@@ -4,13 +4,17 @@ home = Home
 dashboard = Dashboard
 explore = Explore
 help = Help
+auth_link_signup_tab = Register New Account
+auth_link_signup_title = Add Email and Password (for Account Recovery)
+auth_link_signup_submit = Complete Account
+auth_link_signin_tab = Link to Existing Account
+auth_link_signin_title = Sign In to Authorize Linked Account
+auth_link_signin_submit = Link Account
 sign_in = Sign In
 sign_in_with = Sign In With
 sign_out = Sign Out
 sign_up = Register
-add_recovery = Add Email and Password (for Account Recovery)
 link_account = Link Account
-link_account_signin_or_signup = Sign in with existing credentials to link your existing account to this account. Or register a new one.
 register = Register
 website = Website
 version = Version

templates/user/auth/link_account.tmpl

@@ -1,20 +1,30 @@
 {{template "base/head" .}}
+
 <div class="user link-account">
 	<div class="ui middle very relaxed page grid">
 		<div class="column">
-			<p class="large center">
-				{{.i18n.Tr "link_account_signin_or_signup"}}
-			</p>
-		</div>
-	</div>
-</div>
 
-{{if or .user_name_exists .email_exists}}
+			<div class="ui tabular menu">
-<div class="ui user signin container icon">
+				<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
-{{template "user/auth/signin_inner" .}}
+				<div class="item {{if not (or .user_name_exists .email_exists)}}active{{end}}"
+					data-tab="auth-link-signup-tab">
+					{{.i18n.Tr "auth_link_signup_tab"}}
+				</div>
+				<div class="item {{if or .user_name_exists .email_exists}}active{{end}}" data-tab="auth-link-signin-tab">
+					{{.i18n.Tr "auth_link_signin_tab"}}
+				</div>
+			</div>
+			
+			<div class="ui tab" data-tab="auth-link-signup-tab">
+				{{template "user/auth/signup_inner" .}}
+			</div>
+			<div class="ui tab" data-tab="auth-link-signin-tab">
+				<div class="ui user signin container icon">
+					{{template "user/auth/signin_inner" .}}
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
-{{else}}
-{{template "user/auth/signup_inner" .}}
-{{end}}
 
 {{template "base/footer" .}}

templates/user/auth/signin_inner.tmpl

@@ -2,7 +2,11 @@
 		{{template "base/alert" .}}
 		{{end}}
 		<h4 class="ui top attached header center">
+			{{if .LinkAccountMode}}
+				{{.i18n.Tr "auth_link_signin_title"}}
+			{{else}}
 				{{.i18n.Tr "auth.login_userpass"}}
+			{{end}}
 		</h4>
 		<div class="ui attached segment">
 			<form class="ui form" action="{{.SignInLink}}" method="post">
@@ -27,7 +31,13 @@
 
 			<div class="inline field">
 				<label></label>
-				<button class="ui green button">{{.i18n.Tr "sign_in"}}</button>
+				<button class="ui green button">
+					{{if .LinkAccountMode}}
+						{{.i18n.Tr "auth_link_signin_submit"}}
+					{{else}}
+						{{.i18n.Tr "sign_in"}}
+					{{end}}
+				</button>
 				<a href="{{AppSubUrl}}/user/forgot_password">{{.i18n.Tr "auth.forgot_password"}}</a>
 			</div>
 

templates/user/auth/signup_inner.tmpl

@@ -5,7 +5,7 @@
 				{{.CsrfTokenHtml}}
 				<h3 class="ui top attached header">
 					{{if .LinkAccountMode}}
-						{{.i18n.Tr "add_recovery"}}
+						{{.i18n.Tr "auth_link_signup_title"}}
 					{{else}}
 						{{.i18n.Tr "sign_up"}}
 					{{end}}
@@ -46,7 +46,13 @@
 
 						<div class="inline field">
 							<label></label>
-							<button class="ui green button">{{.i18n.Tr "auth.create_new_account"}}</button>
+							<button class="ui green button">
+								{{if .LinkAccountMode}}
+									{{.i18n.Tr "auth_link_signup_submit"}}
+								{{else}}
+									{{.i18n.Tr "auth.create_new_account"}}
+								{{end}}
+							</button>
 						</div>
 
 						{{if not .LinkAccountMode}}