Add UI for logging in with Discord
and clean up that god-awful login popup a little bit...just a little
This commit is contained in:
Ben Visness
parent
eb6cd6e89c
commit
6b03c3760a
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 256 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.402516,0,0,0.410256,60.3774,109.538)">
|
||||
<rect x="-150" y="-267" width="636" height="117" style="fill:rgb(88,101,242);"/>
|
||||
</g>
|
||||
<g transform="matrix(0.266745,0,0,0.266745,60.1574,11.1482)">
|
||||
<g id="图层_2">
|
||||
<g id="Discord_Logos">
|
||||
<g id="Discord_Logo_-_Large_-_White">
|
||||
<path d="M170.85,20.2L198.15,20.2C204.73,20.2 210.297,21.227 214.85,23.28C219.042,25.042 222.602,28.034 225.06,31.86C227.361,35.639 228.54,39.996 228.46,44.42C228.511,48.864 227.285,53.231 224.93,57C222.303,60.982 218.545,64.088 214.14,65.92C209.313,68.12 203.33,69.217 196.19,69.21L170.85,69.21L170.85,20.2ZM195.91,56.74C200.343,56.74 203.75,55.633 206.13,53.42C208.57,51.054 209.873,47.745 209.7,44.35C209.85,41.202 208.699,38.127 206.52,35.85C204.387,33.73 201.177,32.667 196.89,32.66L188.35,32.66L188.35,56.74L195.91,56.74Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M269.34,69.13C265.738,68.228 262.293,66.788 259.12,64.86L259.12,53.24C261.89,55.255 265.009,56.74 268.32,57.62C271.942,58.725 275.704,59.301 279.49,59.33C280.797,59.4 282.102,59.174 283.31,58.67C284.17,58.23 284.6,57.67 284.6,57.09C284.619,56.435 284.365,55.801 283.9,55.34C283.101,54.726 282.164,54.317 281.17,54.15L272.77,52.26C267.957,51.14 264.54,49.59 262.52,47.61C260.471,45.543 259.381,42.707 259.52,39.8C259.486,37.194 260.437,34.668 262.18,32.73C264.248,30.543 266.855,28.939 269.74,28.08C273.452,26.913 277.329,26.356 281.22,26.43C284.852,26.396 288.474,26.819 292,27.69C294.848,28.365 297.583,29.449 300.12,30.91L300.12,41.91C297.741,40.53 295.184,39.483 292.52,38.8C289.634,38.026 286.658,37.636 283.67,37.64C279.283,37.64 277.09,38.387 277.09,39.88C277.075,40.559 277.47,41.183 278.09,41.46C279.289,41.97 280.544,42.332 281.83,42.54L288.83,43.8C293.377,44.6 296.767,46 299,48C301.233,50 302.353,52.927 302.36,56.78C302.432,60.898 300.308,64.758 296.79,66.9C293.103,69.373 287.84,70.607 281,70.6C277.067,70.606 273.149,70.112 269.34,69.13Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M318.9,67.66C315.158,65.941 312.003,63.158 309.83,59.66C307.803,56.23 306.764,52.304 306.83,48.32C306.77,44.338 307.864,40.423 309.98,37.05C312.235,33.607 315.447,30.896 319.22,29.25C323.807,27.251 328.778,26.282 333.78,26.41C340.78,26.41 346.59,27.88 351.21,30.82L351.21,43.65C349.452,42.468 347.532,41.549 345.51,40.92C343.246,40.205 340.884,39.851 338.51,39.87C334.17,39.87 330.773,40.663 328.32,42.25C326.06,43.511 324.655,45.905 324.655,48.493C324.655,51.041 326.016,53.403 328.22,54.68C330.6,56.287 334.053,57.09 338.58,57.09C340.916,57.096 343.241,56.759 345.48,56.09C347.522,55.504 349.484,54.668 351.32,53.6L351.32,66C345.91,69.154 339.731,70.754 333.47,70.62C328.451,70.757 323.467,69.744 318.9,67.66Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M368.64,67.66C364.856,65.932 361.645,63.155 359.39,59.66C357.265,56.238 356.161,52.278 356.21,48.25C356.142,44.27 357.248,40.356 359.39,37C361.657,33.594 364.854,30.907 368.6,29.26C377.799,25.528 388.101,25.528 397.3,29.26C401.031,30.894 404.215,33.568 406.47,36.96C408.597,40.328 409.693,44.247 409.62,48.23C409.67,52.254 408.577,56.211 406.47,59.64C404.239,63.138 401.044,65.917 397.27,67.64C388.133,71.558 377.777,71.558 368.64,67.64L368.64,67.66ZM389.91,55.24C391.657,53.436 392.584,50.989 392.47,48.48C392.592,45.994 391.662,43.568 389.91,41.8C388.01,40.058 385.483,39.159 382.91,39.31C380.339,39.175 377.818,40.072 375.91,41.8C374.164,43.571 373.239,45.996 373.36,48.48C373.247,50.987 374.169,53.433 375.91,55.24C377.8,57.004 380.328,57.925 382.91,57.79C385.494,57.94 388.028,57.017 389.91,55.24Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M451.69,29L451.69,44.14C449.6,42.893 447.191,42.285 444.76,42.39C441.03,42.39 438.15,43.53 436.15,45.79C434.15,48.05 433.15,51.56 433.15,56.32L433.15,69.2L416,69.2L416,28.25L432.8,28.25L432.8,41.25C433.733,36.49 435.24,32.98 437.32,30.72C439.36,28.472 442.286,27.228 445.32,27.32C447.56,27.259 449.771,27.842 451.69,29Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M508.67,18.8L508.67,69.2L491.52,69.2L491.52,60C490.227,63.275 487.903,66.041 484.9,67.88C481.585,69.769 477.814,70.71 474,70.6C470.411,70.684 466.878,69.698 463.85,67.77C460.918,65.865 458.581,63.172 457.11,60C455.504,56.499 454.705,52.681 454.77,48.83C454.657,44.837 455.508,40.875 457.25,37.28C458.851,33.988 461.351,31.214 464.46,29.28C467.656,27.344 471.334,26.349 475.07,26.41C483.23,26.41 488.713,29.957 491.52,37.05L491.52,18.8L508.67,18.8ZM489,55C490.766,53.261 491.722,50.857 491.63,48.38C491.705,45.976 490.747,43.652 489,42C484.971,38.719 479.139,38.719 475.11,42C473.368,43.69 472.425,46.045 472.52,48.47C472.431,50.918 473.384,53.292 475.14,55C476.995,56.725 479.47,57.63 482,57.51C484.575,57.652 487.102,56.746 489,55Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M107.7,8.07C99.347,4.246 90.528,1.533 81.47,0C80.23,2.216 79.109,4.496 78.11,6.83C68.461,5.376 58.649,5.376 49,6.83C48.001,4.496 46.879,2.216 45.64,-0C36.576,1.546 27.752,4.265 19.39,8.09C2.79,32.65 -1.71,56.6 0.54,80.21C10.261,87.392 21.143,92.855 32.71,96.36C35.315,92.857 37.62,89.14 39.6,85.25C35.838,83.845 32.208,82.112 28.75,80.07C29.66,79.41 30.55,78.73 31.41,78.07C51.768,87.644 75.372,87.644 95.73,78.07C96.6,78.78 97.49,79.46 98.39,80.07C94.926,82.115 91.288,83.852 87.52,85.26C89.498,89.149 91.803,92.862 94.41,96.36C105.987,92.869 116.877,87.409 126.6,80.22C129.24,52.84 122.09,29.11 107.7,8.07ZM42.45,65.69C36.18,65.69 31,60 31,53C31,46 36,40.26 42.43,40.26C48.86,40.26 54,46 53.89,53C53.78,60 48.84,65.69 42.45,65.69ZM84.69,65.69C78.41,65.69 73.25,60 73.25,53C73.25,46 78.25,40.26 84.69,40.26C91.13,40.26 96.23,46 96.12,53C96.01,60 91.08,65.69 84.69,65.69Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<ellipse cx="242.92" cy="24.93" rx="8.55" ry="7.68" style="fill:white;"/>
|
||||
<path d="M234.36,37.9C239.829,40.199 246.001,40.199 251.47,37.9L251.47,69.42L234.36,69.42L234.36,37.9Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,18 @@
|
|||
<div class="tc pa3">
|
||||
Need an account? <a href="{{ .RegisterUrl }}">Sign up.</a>
|
||||
</div>
|
||||
|
||||
<div class="mt3 tc">
|
||||
<div class="b mb1">Third-party login</div>
|
||||
<div class="flex flex-column g1">
|
||||
<a href="{{ .LoginWithDiscordUrl }}" class="db br2 overflow-hidden flex" title="Log in with Discord">
|
||||
<img
|
||||
src="{{ static "discord-login.svg" }}"
|
||||
alt="Log in with Discord"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,25 @@
|
|||
{{ else }}
|
||||
<a class="register pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
|
||||
<a class="login pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
|
||||
<div id="login-popup">
|
||||
<form action="{{ .Header.LoginActionUrl }}" method="post" class="ma0">
|
||||
<div id="login-popup" class="pa3 bt bb ba-ns bw1 b--theme-dark">
|
||||
<form action="{{ .Header.LoginActionUrl }}" method="post" class="ma0 flex flex-column">
|
||||
<input type="text" name="username" class="w-100" value="" placeholder="Username" />
|
||||
<input type="password" name="password" class="w-100 mt1" value="" placeholder="Password" />
|
||||
<a class="db" style="padding: 0.5rem 0;" href="{{ .Header.ForgotPasswordUrl }}">Forgot your password?</a>
|
||||
<a class="db mt1" href="{{ .Header.ForgotPasswordUrl }}">Forgot your password?</a>
|
||||
<input type="hidden" name="redirect" value="{{ $.CurrentUrl }}">
|
||||
<div class="pt2">
|
||||
<input type="submit" value="Log In" />
|
||||
<div class="mt2">
|
||||
<input type="submit" value="Log In" class="w-100" />
|
||||
</div>
|
||||
<div class="mt3 tc">
|
||||
<div class="b mb1">Third-party login</div>
|
||||
<div class="flex flex-column g1">
|
||||
<a href="{{ .Header.LoginWithDiscordUrl }}" class="db br2 overflow-hidden flex" title="Log in with Discord">
|
||||
<img
|
||||
src="{{ static "discord-login.svg" }}"
|
||||
alt="Log in with Discord"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -166,7 +177,6 @@
|
|||
const loginLink = document.getElementById("login-link");
|
||||
|
||||
if (loginPopup !== null) {
|
||||
|
||||
loginLink.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
loginPopup.classList.toggle("open");
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Reference in New Issue