deepcrayon/lila
deepcrayon/lila
1
0
Fork 0
Code Releases Activity

more auth pages UI

Browse source
This commit is contained in:
Thibault Duplessis 2019-03-21 18:18:03 +07:00
parent 01ab40db0c
commit c6de2fe57f
16 changed files with 165 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/controllers/LilaController.scala
View file

@ -213,7 +213,7 @@ private[controllers] trait LilaController
protected def NoTor(res: => Fu[Result])(implicit ctx: Context) =
if (Env.security.tor isExitNode HTTPRequest.lastRemoteAddress(ctx.req))
Unauthorized(views.html.auth.tor()).fuccess
Unauthorized(views.html.auth.bits.tor()).fuccess
else res
protected def NoEngine[A <: Result](a: => Fu[A])(implicit ctx: Context): Fu[Result] =

1
app/ui/scalatags.scala
View file

@ -33,6 +33,7 @@ trait ScalatagsSnippets extends Cap {
def iconTag(icon: Char): Tag = iconTag(icon.toString)
def iconTag(icon: String): Tag = i(dataIcon := icon)
def iconTag(icon: String, text: Frag): Tag = i(dataIcon := icon, cls := "text")(text)
val styleTag = tag("style")(`type` := "text/css")
lazy val dataBotAttr = attr("data-bot").empty

59
app/views/auth/bits.scala
View file

@ -1,7 +1,7 @@
package views.html
package auth
import play.api.data.Form
import play.api.data.{ Form, Field }
import lila.api.Context
import lila.app.templating.Environment._
@ -12,6 +12,19 @@ import controllers.routes
object bits {
def formFields(username: Field, password: Field, emailOption: Option[Field], register: Boolean)(implicit ctx: Context) = frag(
form3.group(username, if (register) trans.username.frag() else trans.usernameOrEmail.frag()) { f =>
frag(
form3.input(f)(autofocus := true),
p(cls := "error exists none")(trans.usernameAlreadyUsed.frag())
)
},
form3.password(password, trans.password.frag()),
emailOption.map { email =>
form3.group(email, trans.email.frag())(form3.input(_, typ = "email"))
}
)
def passwordReset(form: Form[_], captcha: lila.common.Captcha, ok: Option[Boolean] = None)(implicit ctx: Context) =
views.html.base.layout(
title = trans.passwordReset.txt(),
@ -74,4 +87,48 @@ object bits {
)
)
}
def checkYourEmailBanner(userEmail: lila.security.EmailConfirm.UserEmail) = frag(
styleTag("""
body { margin-top: 45px; }
#email_confirm {
height: 40px;
background: #3893E8;
color: #fff!important;
font-size: 1.3em;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
border-bottom: 1px solid #666;
box-shadow: 0 5px 6px rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
#email_confirm a {
color: #fff!important;
text-decoration: underline;
margin-left: 1em;
}
"""),
div(id := "email_confirm")(
s"Almost there, ${userEmail.username}! Now check your email (${userEmail.email.conceal}) for signup confirmation.",
a(href := routes.Auth.checkYourEmail)("Click here for help")
)
)
def tor()(implicit ctx: Context) =
views.html.base.layout(
responsive = true,
title = "Tor exit node"
) {
main(cls := "page-small box box-pad")(
h1(cls := "text", dataIcon := "2")("Ooops"),
p("Sorry, you can't signup to lichess through TOR!"),
p("As an Anonymous user, you can play, train, and use all lichess features.")
)
}
}

105
app/views/auth/checkYourEmail.scala.html
View file

@ -1,54 +1,55 @@
@(userEmail: Option[lila.security.EmailConfirm.UserEmail], form: Option[Form[_]] = None)(implicit ctx: Context)
@auth.layout(title = "Check your email") {
<div class="content_box small_box signup email_confirm @if(form.exists(_.hasErrors)){error}else{anim}">
<div class="signup_box">
<h1 class="lichess_title is-green text" data-icon="E">@trans.checkYourEmail()</h1>
<p>@trans.weHaveSentYouAnEmailClickTheLink()</p>
<h2>Not receiving it?</h2>
<ol>
<li>
<h3>@trans.ifYouDoNotSeeTheEmailCheckOtherPlaces()</h3>
</li>
@userEmail.map(_.email).map { email =>
<li>
<h3>Make sure your email address is correct:</h3><br />
<form action="@routes.Auth.fixEmail" method="POST">
<input
id="new_email"
type="email"
required="required"
name="email"
value="@form.flatMap(_("email").value).getOrElse(email.value)"
pattern="^((?!^@{email.value}$).)*$" />
<script>
var email = document.getElementById("new_email");
var currentError = "This is already your current email.";
email.setCustomValidity(currentError);
email.addEventListener("input", function() {
email.setCustomValidity(email.validity.patternMismatch ? currentError : "");
});
</script>
<button type="submit">Change it</button>
@form.map { f =>
@errMsg(f("email"))
}
</form>
</li>
}
<li>
<h3>Wait up to 10 minutes.</h3><br />
Depending on your email provider, it can take a while to arrive.
</li>
<li>
<h3>Still not getting it?</h3><br />
Did you make sure your email address is correct?<br />
Did you wait 10 minutes?<br />
If so, <a class="blue", href="@routes.Account.emailConfirmHelp">proceed to this page to solve the issue</a>.
</li>
</ol>
<br />
<br />
</div>
</div>
}
@base.layout(
title = "Check your email",
responsive = true,
moreCss = responsiveCssTag("email-confirm")
) {
<main class="page-small box box-pad email-confirm @if(form.exists(_.hasErrors)){error}else{anim}">
<h1 class="is-green text" data-icon="E">@trans.checkYourEmail()</h1>
<p>@trans.weHaveSentYouAnEmailClickTheLink()</p>
<h2>Not receiving it?</h2>
<ol>
<li>
<h3>@trans.ifYouDoNotSeeTheEmailCheckOtherPlaces()</h3>
</li>
@userEmail.map(_.email).map { email =>
<li>
<h3>Make sure your email address is correct:</h3>
<br /><br />
<form action="@routes.Auth.fixEmail" method="POST">
<input
id="new_email"
type="email"
required="required"
name="email"
value="@form.flatMap(_("email").value).getOrElse(email.value)"
pattern="^((?!^@{email.value}$).)*$" />
<script>
var email = document.getElementById("new_email");
var currentError = "This is already your current email.";
email.setCustomValidity(currentError);
email.addEventListener("input", function() {
email.setCustomValidity(email.validity.patternMismatch ? currentError : "");
});
</script>
<button type="submit" class="button">Change it</button>
@form.map { f =>
@errMsg(f("email"))
}
</form>
</li>
}
<li>
<h3>Wait up to 10 minutes.</h3><br />
Depending on your email provider, it can take a while to arrive.
</li>
<li>
<h3>Still not getting it?</h3><br />
Did you make sure your email address is correct?<br />
Did you wait 10 minutes?<br />
If so, <a class="blue", href="@routes.Account.emailConfirmHelp">proceed to this page to solve the issue</a>.
</li>
</ol>
</main>
}.toHtml

35
app/views/auth/emailConfirmBanner.scala.html
View file

@ -1,35 +0,0 @@
@(userEmail: lila.security.EmailConfirm.UserEmail)
<style type="text/css">
body {
margin-top: 45px;
}
#email_confirm {
height: 40px;
background: #3893E8;
color: #fff!important;
font-size: 1.3em;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
border-bottom: 1px solid #666;
box-shadow: 0 5px 6px rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
#email_confirm a {
color: #fff!important;
text-decoration: underline;
margin-left: 1em;
}
</style>
<div id="email_confirm">
Almost there, @userEmail.username! Now check your email (@userEmail.email.conceal) for signup confirmation.
<a href="@routes.Auth.checkYourEmail">Click here for help</a>
</div>

11
app/views/auth/formFields.scala.html
View file

@ -1,11 +0,0 @@
@(username: Field, password: Field, emailOption: Option[Field], register: Boolean)(implicit ctx: Context)
@import lila.app.ui.ScalatagsTwirlForm._
@form3.group(username, if(register) trans.username.frag() else trans.usernameOrEmail.frag()) { f =>
@form3.inputHtml(f)(*.autofocus := true)
<p class="error exists none">@trans.usernameAlreadyUsed()</p>
}
@form3.group(password, trans.password.frag())(form3.input(_, typ = "password"))
@emailOption.map { email =>
@form3.group(email, trans.email.frag())(form3.input(_, typ = "email"))
}

6
app/views/auth/layout.scala.html
View file

@ -1,6 +0,0 @@
@(title: String, moreJs: Html = emptyHtml, formCss: Boolean = false, csp: Option[lila.common.ContentSecurityPolicy] = None)(body: Html)(implicit ctx: Context)
@base.layout(
title = title,
moreCss = cssTags(List("user-signup.css" -> true, "form3.css" -> formCss)),
moreJs = moreJs,
csp = csp)(body).toHtml

2
app/views/auth/login.scala
View file

@ -30,7 +30,7 @@ object login {
)(
div(cls := "one-factor")(
form3.globalError(form),
auth.formFields(form("username"), form("password"), none, register = false),
auth.bits.formFields(form("username"), form("password"), none, register = false),
form3.submit(trans.signIn.frag(), icon = none)
),
div(cls := "two-factor none")(

2
app/views/auth/signup.scala
View file

@ -33,7 +33,7 @@ object signup {
action := routes.Auth.signupPost,
method := "post"
)(
auth.formFields(form("username"), form("password"), form("email").some, register = true),
auth.bits.formFields(form("username"), form("password"), form("email").some, register = true),
input(id := "signup-fp-input", name := "fp", tpe := "hidden"),
div(cls := "form-group text", dataIcon := "")(
trans.computersAreNotAllowedToPlay.frag(), br,

16
app/views/auth/tor.scala.html
View file

@ -1,16 +0,0 @@
@()(implicit ctx: Context)
@auth.layout(
title = "Tor exit node") {
<div class="content_box small_box signup">
<div class="signup_box">
<h1 class="lichess_title text" data-icon="2">Ooops</h1>
<p>
Sorry, you can't signup to lichess through TOR!
<br />
<br />
As an Anonymous user, you can play, train, and use all lichess features.
</p>
</div>
</div>
}

2
app/views/base/layout.scala
View file

@ -198,7 +198,7 @@ object layout {
"This is an empty lichess preview website for developers. ",
a(href := "https://lichess.org")("Go to lichess.org instead")
),
lila.security.EmailConfirm.cookie.get(ctx.req).map(views.html.auth.emailConfirmBanner(_)),
lila.security.EmailConfirm.cookie.get(ctx.req).map(views.html.auth.bits.checkYourEmailBanner(_)),
playing option zenToggle,
if (responsive) siteHeader.responsive(playing)
else siteHeader.old(playing),

41
ui/site/css/_email-confirm.scss Normal file
View file

@ -0,0 +1,41 @@
.email-confirm {
h2 {
font-size: 1.7em;
margin-top: 2em;
}
h3 {
@extend %base-font;
font-size: 1.2em;
display: inline;
}
@keyframes appear {
from { opacity: 0; }
30% { transform: translateY(0); }
to { opacity: 1; transform: translateY(0); }
}
ol li {
margin: 2em 0;
list-style: decimal inside;
}
&.anim {
h2,
ol li {
opacity: 0;
transform: translateY(100px);
animation: appear 3s forwards;
animation-delay: 2s;
}
ol li:nth-child(2) {
animation-delay: 6s;
}
ol li:nth-child(3) {
animation-delay: 10s;
}
ol li:nth-child(4) {
animation-delay: 14s;
}
ol li:nth-child(5) {
animation-delay: 18s;
}
}
}

2
ui/site/css/build/_email-confirm.scss Normal file
View file

@ -0,0 +1,2 @@
@import '../../../common/css/plugin';
@import '../email-confirm';

2
ui/site/css/build/email-confirm.dark.scss Normal file
View file

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'email-confirm';

2
ui/site/css/build/email-confirm.light.scss Normal file
View file

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'email-confirm';

2
ui/site/css/build/email-confirm.transp.scss Normal file
View file

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'email-confirm';