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

improve 2fa setup instructions

Browse source
This commit is contained in:
Niklas Fiekas 2018-05-06 18:56:27 +02:00
parent f9cbf7a087
commit 9fd3ba4b2a
2 changed files with 34 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/views/account/setupTwoFactor.scala.html
View file

@ -8,27 +8,37 @@
}
@account.layout(title = title, active = "twofactor", evenMoreCss = cssTag("material.form.css"), evenMoreJs = moreJs) {
<div class="content_box small_box high">
<div class="content_box small_box high twofactor">
<h1 class="lichess_title">Setup two-factor authentication</h1>
<p class="explanation">
Get an authenticator app, scan the QR code and enter your password and
the token provided by the app for confirmation.
Two-factor authentication adds another layer of security to your account.
</p>
<form class="material form" action="@routes.Account.setupTwoFactor" method="POST">
<div style="width: 276px; height: 275px; padding: 10px; background: white; margin: 2em auto;">
<div id="qrcode" style="width: 256px; height: 256px;"></div>
</div>
@base.form.hidden(form("secret"))
@passwdFormField(form("passwd"), trans.password())
@base.form.group(form("token"), Html("Token")) { field =>
@base.form.input(field, typ = "text", required = true)
@errMsg(form("token"))
}
@errMsg(form)
<br><br>
<div class="button-container">
<button type="submit" class="submit button text">Enable two-factor authentication</button>
</div>
<ol>
<li>
<p class="explanation">Get an app for two-factor authentication, for example Google Authenticator for <a class="blue" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a> or <a class="blue" href="https://itunes.apple.com/de/app/google-authenticator/id388497605">iOS.</a></p>
</li>
<li>
<p class="explanation">Scan the QR code with the app.</p>
<div style="width: 276px; height: 275px; padding: 10px; background: white; margin: 2em auto;">
<div id="qrcode" style="width: 256px; height: 256px;"></div>
</div>
</li>
<li>
<p class="explanation">Enter your password and the token generated by the app to complete the setup. From then on you will need a token every time you log in.</p>
@base.form.hidden(form("secret"))
@passwdFormField(form("passwd"), trans.password())
@base.form.group(form("token"), Html("Token")) { field =>
@base.form.input(field, typ = "text", required = true)
@errMsg(form("token"))
}
@errMsg(form)
<br><br>
<div class="button-container">
<button type="submit" class="submit button text">Enable two-factor authentication</button>
</div>
</li>
</ol>
</form>
</div>
}

7
public/stylesheets/account.css
View file

@ -24,6 +24,13 @@ form.material.form {
color: #d59120;
}
.twofactor ol li {
list-style: decimal;
}
.twofactor p.explanation {
margin-bottom: 2em;
}
.oauth .top {
display: flex;
align-items: center;