From 6b03c3760a52e657f13cf7cdad0c2bd1f62baa45 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Thu, 4 May 2023 22:07:23 -0500 Subject: [PATCH] Add UI for logging in with Discord and clean up that god-awful login popup a little bit...just a little --- public/discord-login.svg | 24 ++++++++++++++++++++++++ public/style.css | 24 +++++++++--------------- src/rawdata/scss/_header.scss | 26 +++++++------------------- src/templates/src/auth_login.html | 12 ++++++++++++ src/templates/src/include/header.html | 22 ++++++++++++++++------ src/templates/types.go | 15 ++++++++------- src/website/auth.go | 18 ++++++++++-------- src/website/base_data.go | 13 +++++++------ 8 files changed, 93 insertions(+), 61 deletions(-) create mode 100644 public/discord-login.svg diff --git a/public/discord-login.svg b/public/discord-login.svg new file mode 100644 index 0000000..0e1c8fb --- /dev/null +++ b/public/discord-login.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/style.css b/public/style.css index e2f0530..574382b 100644 --- a/public/style.css +++ b/public/style.css @@ -4602,7 +4602,7 @@ code, .code { .pa2, .tab, figure, header .root-item > a, header .submenu > a { padding: 0.5rem; } -.pa3, header #login-popup { +.pa3 { padding: 1rem; } .pa4 { @@ -7422,7 +7422,7 @@ article code { color: #ccc; color: var(--theme-color-dimmest); } -.b--dimmest, .optionbar, blockquote, .post-content th, .post-content td, header #login-popup { +.b--dimmest, .optionbar, blockquote, .post-content th, .post-content td { border-color: #bbb; border-color: var(--dimmest-color); } @@ -8936,25 +8936,19 @@ header #login-popup { background-color: var(--login-popup-background); color: black; color: var(--fg-font-color); - border-width: 1px; - border-style: dashed; visibility: hidden; position: absolute; z-index: 12; - margin-top: 10px; - right: 0px; - top: 20px; - width: 290px; - max-height: 0px; overflow: hidden; - opacity: 0; - transition: all 0.2s; } + right: 0; + top: 100%; + width: 100%; } header #login-popup.open { - max-height: 170px; - opacity: 1; visibility: visible; } - header #login-popup label { - padding-right: 10px; } + @media screen and (min-width: 35em) { + header #login-popup { + top: 2.2rem; + width: 17rem; } } @font-face { font-family: icons; diff --git a/src/rawdata/scss/_header.scss b/src/rawdata/scss/_header.scss index 3a403e0..1460410 100644 --- a/src/rawdata/scss/_header.scss +++ b/src/rawdata/scss/_header.scss @@ -130,33 +130,21 @@ header { @include usevar(background-color, login-popup-background); @include usevar(color, fg-font-color); - @extend .pa3; - - border-width: 1px; - border-style: dashed; - @extend .b--dimmest; - visibility: hidden; position: absolute; z-index: 12; - margin-top: 10px; - right: 0px; - top: 20px; - width: 290px; - max-height: 0px; overflow: hidden; - opacity: 0; - - transition: all 0.2s; + right: 0; + top: 100%; + width: 100%; &.open { - max-height: 170px; - opacity: 1; visibility: visible; } - - label { - padding-right:10px; + + @media #{$breakpoint-not-small} { + top: 2.2rem; + width: 17rem; } } } diff --git a/src/templates/src/auth_login.html b/src/templates/src/auth_login.html index 666611f..4a40738 100644 --- a/src/templates/src/auth_login.html +++ b/src/templates/src/auth_login.html @@ -37,6 +37,18 @@
Need an account? Sign up.
+ +
+
Third-party login
+
+ + Log in with Discord + +
+
diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html index 60f4532..751dfaa 100644 --- a/src/templates/src/include/header.html +++ b/src/templates/src/include/header.html @@ -13,14 +13,25 @@ {{ else }} Register Log in -
-
+
+ - Forgot your password? + Forgot your password? -
- +
+ +
+
+
Third-party login
+
+ + Log in with Discord + +
@@ -166,7 +177,6 @@ const loginLink = document.getElementById("login-link"); if (loginPopup !== null) { - loginLink.onclick = (e) => { e.preventDefault(); loginPopup.classList.toggle("open"); diff --git a/src/templates/types.go b/src/templates/types.go index acbf187..d72acf0 100644 --- a/src/templates/types.go +++ b/src/templates/types.go @@ -38,13 +38,14 @@ func (bd *BaseData) AddImmediateNotice(class, content string) { } type Header struct { - AdminUrl string - UserProfileUrl string - UserSettingsUrl string - LoginActionUrl string - LogoutActionUrl string - ForgotPasswordUrl string - RegisterUrl string + AdminUrl string + UserProfileUrl string + UserSettingsUrl string + LoginActionUrl string + LogoutActionUrl string + ForgotPasswordUrl string + RegisterUrl string + LoginWithDiscordUrl string HMNHomepageUrl string ProjectIndexUrl string diff --git a/src/website/auth.go b/src/website/auth.go index 1cbae09..7ffd6f6 100644 --- a/src/website/auth.go +++ b/src/website/auth.go @@ -24,9 +24,10 @@ var UsernameRegex = regexp.MustCompile(`^[0-9a-zA-Z][\w-]{2,29}$`) type LoginPageData struct { templates.BaseData - RedirectUrl string - RegisterUrl string - ForgotPasswordUrl string + RedirectUrl string + RegisterUrl string + ForgotPasswordUrl string + LoginWithDiscordUrl string } func LoginPage(c *RequestContext) ResponseData { @@ -38,10 +39,11 @@ func LoginPage(c *RequestContext) ResponseData { var res ResponseData res.MustWriteTemplate("auth_login.html", LoginPageData{ - BaseData: getBaseData(c, "Log in", nil), - RedirectUrl: redirect, - RegisterUrl: hmnurl.BuildRegister(redirect), - ForgotPasswordUrl: hmnurl.BuildRequestPasswordReset(), + BaseData: getBaseData(c, "Log in", nil), + RedirectUrl: redirect, + RegisterUrl: hmnurl.BuildRegister(redirect), + ForgotPasswordUrl: hmnurl.BuildRequestPasswordReset(), + LoginWithDiscordUrl: hmnurl.BuildLoginWithDiscord(redirect), }, c.Perf) return res } @@ -122,7 +124,7 @@ func Login(c *RequestContext) ResponseData { } func LoginWithDiscord(c *RequestContext) ResponseData { - destinationUrl := c.URL().Query().Get("redirectTo") + destinationUrl := c.URL().Query().Get("redirect") if c.CurrentUser != nil { return c.Redirect(destinationUrl, http.StatusSeeOther) } diff --git a/src/website/base_data.go b/src/website/base_data.go index d6a95c6..8f391c5 100644 --- a/src/website/base_data.go +++ b/src/website/base_data.go @@ -63,12 +63,13 @@ func getBaseData(c *RequestContext, title string, breadcrumbs []templates.Breadc IsProjectPage: !project.IsHMN(), Header: templates.Header{ - AdminUrl: hmnurl.BuildAdminApprovalQueue(), // TODO(asaf): Replace with general-purpose admin page - UserSettingsUrl: hmnurl.BuildUserSettings(""), - LoginActionUrl: hmnurl.BuildLoginAction(c.FullUrl()), - LogoutActionUrl: hmnurl.BuildLogoutAction(c.FullUrl()), - ForgotPasswordUrl: hmnurl.BuildRequestPasswordReset(), - RegisterUrl: hmnurl.BuildRegister(""), + AdminUrl: hmnurl.BuildAdminApprovalQueue(), // TODO(asaf): Replace with general-purpose admin page + UserSettingsUrl: hmnurl.BuildUserSettings(""), + LoginActionUrl: hmnurl.BuildLoginAction(c.FullUrl()), + LogoutActionUrl: hmnurl.BuildLogoutAction(c.FullUrl()), + ForgotPasswordUrl: hmnurl.BuildRequestPasswordReset(), + RegisterUrl: hmnurl.BuildRegister(""), + LoginWithDiscordUrl: hmnurl.BuildLoginWithDiscord(c.FullUrl()), HMNHomepageUrl: hmnurl.BuildHomepage(), ProjectIndexUrl: hmnurl.BuildProjectIndex(1),