auth-center/views/auth/login.html

auth center with TOTP

{% extends './layout.html' %}

{% block title %}
<title>{{__('Sign in to system')}}</title>
{% endblock %}

{% block content %}
<h1 class="header-title">{{__('Sign in to system')}}</h1>
<div class="bg-white rounded mb-3">
  <nav class="navbar border-bottom navbar-expand navbar-tabs justify-content-center">
    <ul class="navbar-nav nav-justified flex-grow-1">
      <li class="nav-item">
        <a href="javascript:;" class="J_login_nav nav-link active" data-target="account">{{__('Account Login')}}</a>
      </li>
      <li class="nav-item">
        <a href="javascript:;" class="J_login_nav nav-link" data-target="scan">{{__('Scan Login')}}</a>
      </li>
    </ul>
  </nav>
  <form id="J_account_login" class="p-3" action="{{_routes.session}}" method="POST">
    <input type="hidden" name="_csrf" value="{{_csrf}}">
    <div class="form-group">
      <input class="form-control" type="text" name="email" id="J_email" placeholder="{{__('Email')}}">
    </div>
    <div class="form-group">
      <input class="form-control" type="password" name="password" placeholder="{{__('Password')}}">
    </div>
    {% if isTOTP %}
    <div class="form-group">
      <div class="input-group">
        <input class="form-control" type="text" name="token" autocomplete="off" placeholder="{{__('Dynamic token')}}">
        <span class="input-group-append">
          <button class="btn btn-default send-btn" type="button" id="J_send">{{__('Send')}}</button>
        </span>
      </div>
    </div>
    {% endif %}
    {% if terms %}
    <p>
      <input id="terms" type="checkbox" value="1" name="terms">
      <label for="terms">{{__('I have read and agree to')}}</label>
      <a href="{{terms}}" target="_blank">{{__('the terms of use.')}}</a>
    </p>
    {% endif %}
    <div class="form-group">
      <button id="J_submit" type="submit" class="btn btn-primary btn-block">{{__('Sign In')}}</button>
    </div>
    {% if messages.error %}
    <div class="alert alert-warning" id="J_tips">{{__(messages.error)}}</div>
    {% elseif messages.success %}
    <div class="alert alert-success" id="J_tips">{{__(messages.success)}}</div>
    {% else %}
    <div class="alert" style="display: none;" id="J_tips"></div>
    {% endif %}
  </form>
  <div id="J_scan_login" class="p-3" style="display: none;" data-action="{{_routes.qrcode}}" data-url="{{_routes.scan}}">
    <div class="qrcode-img mx-auto">
      <canvas id="qrcode"></canvas>
      <div class="qrcode-error" style="display: none;">
        <p class="J_error_msg"></p>
        <button class="J_refresh btn btn-primary" type="button">{{__('Refresh QRCode')}}</button>
      </div>
    </div>
  </div>
</div>
<div class="bottom-link">
  <a href="{{_routes.password_reset}}">{{__('Lost your password?')}}</a>
</div>
{% endblock %}

{% block foot %}
<script src="{{staticRoot}}/login.js"></script>
{% endblock %}