login.ejs 2.16 KB
<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
    <style>
      #login {
        font-family: 'Archivo', sans-serif;
        /* font-family: 'PT Serif', serif; */
        font-size:3rem;
        font-weight: bold;
      }

      div#login_wrapper{
        border: 20px transparent white;
        padding: 5px 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 450px; height: 250px;
        margin-left: -220px;
        margin-top: -170px;

        display: flex; flex-direction:column; justify-content:center; align-items: center;
      }

    </style>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container">
      <div id="login_wrapper">
        <h3 class="mb-3" id="login">Login</h3>

      <form class="user-form" action="/login" method="post">

        <div class="form-group row">
          <label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username</label>
          <div class="col-sm-9">
            <input type="text" id="username" name="username" value="<%= username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>">
            <% if(errors.username){ %>
              <span class="invalid-feedback"><%= errors.username %></span>
            <% } %>
          </div>
        </div>

        <div class="form-group row">
          <label for="password" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password</label>
          <div class="col-sm-9">
            <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>">
            <% if(errors.password){ %>
              <span class="invalid-feedback"><%= errors.password %></span>
            <% } %>
          </div>
        </div>

        <% if(errors.login){ %>
          <div class="invalid-feedback d-block"><%= errors.login %></div>
        <% } %>

        <div class="mt-3" style="float:right">
          <input class="btn btn-outline-primary" type="submit" value="Submit">
        </div>
      </form>

      </div>
      

    </div>
  </body>
</html>