<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>AIL-Framework</title> <link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png')}}"> <!-- Core CSS --> <link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet"> <!-- JS --> <script src="{{ url_for('static', filename='js/jquery.js')}}"></script> <script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script> <style> html, body { height: 100%; } body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } </style> </head> <body class="text-center"> <form class="form-signin" action="{{ url_for('root.change_password')}}" autocomplete="off" method="post"> <img class="mb-4" src="{{ url_for('static', filename='image/ail-project.png')}}" width="300"> <h1 class="h3 mb-3 text-secondary">Change Password</h1> <label for="inputPassword1" class="sr-only">Password</label> <input type="password" id="inputPassword1" name="password1" class="form-control {% if error %}is-invalid{% endif %}" placeholder="Password" autocomplete="new-password" required autofocus> <label for="inputPassword2" class="sr-only">Confirm Password</label> <input type="password" id="inputPassword2" name="password2" class="form-control {% if error %}is-invalid{% endif %}" placeholder="Confirm Password" value="" autocomplete="new-password" required> {% if error %} <div class="invalid-feedback"> {{error}} </div> {% endif %} <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button> <br> <br> <br> <h5 class="h3 mb-3 text-secondary">Password Requirements</h5> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Minimal length <span class="badge badge-primary badge-pill">10</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Upper characters: A-Z <span class="badge badge-primary badge-pill">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Lower characters: a-z <span class="badge badge-primary badge-pill">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Digits: 0-9 <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Maximum length <span class="badge badge-primary badge-pill">100</span> </li> </ul> </form> </body>