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

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 6855e0376b3738f28b914a55c534247a1dc81c07..a0babf7a19865535a82a4bba5b12bb6afa313081 100644 (file)
--- a/options/locale/locale_en-US.ini
+++ b/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.

diff --git a/routers/user/auth.go b/routers/user/auth.go
index a4a0ee3e6a0ffb074a58396c0c6f24ff9dc5c72d..25aa437efdbbd4647b1f8914952cf0e36d06c0cc 100644 (file)
--- a/routers/user/auth.go
+++ b/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)
 }

diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 73aafd6feb8046cd4eb2476efec983858d746557..339ca855dd936e2961886ba0245463c1abe4362d 100644 (file)
--- a/templates/user/auth/link_account.tmpl
+++ b/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" .}}

diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl
index 019bda570ca4cfe001003cdf812fcfd685f36ed7..bf1cc055f456fdfde0de17fc83f3a24b1581173b 100644 (file)
--- a/templates/user/auth/signin_inner.tmpl
+++ b/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>
 

diff --git a/templates/user/auth/signup_inner.tmpl b/templates/user/auth/signup_inner.tmpl
index cd969276b9d56884c565acf330154c2677d4919a..25b50dad8669d3b8827d2244d17792d925c4ffc8 100644 (file)
--- a/templates/user/auth/signup_inner.tmpl
+++ b/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}}