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:
AJ ONeal 2018-10-28 16:46:16 -06:00 committed by techknowlogick
parent a2ee2a3c67
commit b8451190d8
5 changed files with 79 additions and 14 deletions

View File

@ -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.

View File

@ -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)
}

View File

@ -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" .}}

View File

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

View File

@ -4,7 +4,11 @@
<form class="ui form" action="{{.SignUpLink}}" method="post">
{{.CsrfTokenHtml}}
<h3 class="ui top attached header">
{{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}}