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
This commit is contained in:
		
							parent
							
								
									a2ee2a3c67
								
							
						
					
					
						commit
						b8451190d8
					
				
					 5 changed files with 79 additions and 14 deletions
				
			
		|  | @ -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. | ||||
|  |  | |||
|  | @ -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) | ||||
| } | ||||
|  |  | |||
|  | @ -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" .}} | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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}} | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue