UX of link account (Step 1) (#5006)

* Show either sign up OR sign in

* disambiguate fresh start from adding recovery options

* use tabs to switch between account link flows

* add active to tab body as well

* changes as per discussion

* handle specific error; fix missing err typo

Author: AJ ONeal

options/locale/locale_en-US.ini

@@ -9,7 +9,6 @@ sign_in_with = Sign In With
 sign_out = Sign Out
 sign_up = Register
 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
@@ -230,6 +229,12 @@ twofa_passcode_incorrect = Your passcode is incorrect. If you misplaced your dev
 twofa_scratch_token_incorrect = Your scratch code is incorrect.
 login_userpass = Sign In
 login_openid = OpenID
+oauth_signup_tab = Register New Account
+oauth_signup_title = Add Email and Password (for Account Recovery)
+oauth_signup_submit = Complete Account
+oauth_signin_tab = Link to Existing Account
+oauth_signin_title = Sign In to Authorize Linked Account
+oauth_signin_submit = Link Account
 openid_connect_submit = Connect
 openid_connect_title = Connect to an existing account
 openid_connect_desc = The chosen OpenID URI is unknown. Associate it with a new account here.

routers/user/auth.go

@@ -664,8 +664,30 @@ func LinkAccount(ctx *context.Context) {
 		return
 	}
 
-	ctx.Data["user_name"] = gothUser.(goth.User).NickName
-	ctx.Data["email"] = gothUser.(goth.User).Email
+	uname := gothUser.(goth.User).NickName
+	email := gothUser.(goth.User).Email
+	ctx.Data["user_name"] = uname
+	ctx.Data["email"] = email
+
+	if len(email) != 0 {
+		u, err := models.GetUserByEmail(email)
+		if err != nil && !models.IsErrUserNotExist(err) {
+			ctx.ServerError("UserSignIn", err)
+			return
+		}
+		if u != nil {
+			ctx.Data["user_exists"] = true
+		}
+	} else if len(uname) != 0 {
+		u, err := models.GetUserByName(uname)
+		if err != nil && !models.IsErrUserNotExist(err) {
+			ctx.ServerError("UserSignIn", err)
+			return
+		}
+		if u != nil {
+			ctx.Data["user_exists"] = true
+		}
+	}
 
 	ctx.HTML(200, tplLinkAccount)
 }

templates/user/auth/link_account.tmpl

@@ -1,15 +1,33 @@
 {{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 class="ui tabular menu">
+				<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
+				<div class="item {{if not .user_exists}}active{{end}}"
+					data-tab="auth-link-signup-tab">
+					{{.i18n.Tr "auth.oauth_signup_tab"}}
+				</div>
+				<div class="item {{if .user_exists}}active{{end}}"
+					data-tab="auth-link-signin-tab">
+					{{.i18n.Tr "auth.oauth_signin_tab"}}
+				</div>
+			</div>
+			
+			<div class="ui tab {{if not .user_exists}}active{{end}}"
+				data-tab="auth-link-signup-tab">
+				{{template "user/auth/signup_inner" .}}
+			</div>
+			<div class="ui tab {{if .user_exists}}active{{end}}"
+				data-tab="auth-link-signin-tab">
+				<div class="ui user signin container icon">
+					{{template "user/auth/signin_inner" .}}
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
-<div class="ui user signin container icon">
-{{template "user/auth/signin_inner" .}}
-</div>
-{{template "user/auth/signup_inner" .}}
+
 {{template "base/footer" .}}

templates/user/auth/signin_inner.tmpl

@@ -2,7 +2,11 @@
 		{{template "base/alert" .}}
 		{{end}}
 		<h4 class="ui top attached header center">
-			{{.i18n.Tr "auth.login_userpass"}}
+			{{if .LinkAccountMode}}
+				{{.i18n.Tr "auth.oauth_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.oauth_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

@@ -4,7 +4,11 @@
 			<form class="ui form" action="{{.SignUpLink}}" method="post">
 				{{.CsrfTokenHtml}}
 				<h3 class="ui top attached header">
-					{{.i18n.Tr "sign_up"}}
+					{{if .LinkAccountMode}}
+						{{.i18n.Tr "auth.oauth_signup_title"}}
+					{{else}}
+						{{.i18n.Tr "sign_up"}}
+					{{end}}
 				</h3>
 				<div class="ui attached segment">
 					{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister)}}
@@ -47,7 +51,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.oauth_signup_submit"}}
+								{{else}}
+									{{.i18n.Tr "auth.create_new_account"}}
+								{{end}}
+							</button>
 						</div>
 
 						{{if not .LinkAccountMode}}