From b8451190d85af255a94b02cdfdd6d375015b3864 Mon Sep 17 00:00:00 2001
From: AJ ONeal <coolaj86@gmail.com>
Date: Sun, 28 Oct 2018 16:46:16 -0600
Subject: [PATCH] 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
---
options/locale/locale_en-US.ini | 7 +++++-
routers/user/auth.go | 26 ++++++++++++++++++++--
templates/user/auth/link_account.tmpl | 32 +++++++++++++++++++++------
templates/user/auth/signin_inner.tmpl | 14 ++++++++++--
templates/user/auth/signup_inner.tmpl | 14 ++++++++++--
5 files changed, 79 insertions(+), 14 deletions(-)
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 6855e0376b37..a0babf7a1986 100644
--- 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 a4a0ee3e6a0f..25aa437efdbb 100644
--- 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 73aafd6feb80..339ca855dd93 100644
--- 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 019bda570ca4..bf1cc055f456 100644
--- 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 cd969276b9d5..25b50dad8669 100644
--- 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}}