mmpSearch/pages/login.md

4.5 KiB

layout title permalink
default Login - MMPSearch /login/

  <div class="tabs is-centered is-boxed is-medium mb-6">
    {% include sidebar.html %}
  </div>

  <div class="columns is-centered">
    <div class="column is-6">
      <div class="box p-5" style="border: 1px solid #cfe8fc; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
        <div class="has-text-centered mb-5">
          <span class="icon is-large has-text-info"><i class="fa-solid fa-user-circle fa-3x"></i></span>
          <h1 class="title is-4 mt-2 has-text-grey-dark" id="auth-title">Acesse sua conta</h1>
          <p class="subtitle is-6 has-text-grey">Para enviar projetos e samples.</p>
        </div>

        <form id="login-form">
          <div class="field"><label class="label">Usuário</label><div class="control has-icons-left"><input class="input" type="text" name="username" required><span class="icon is-small is-left"><i class="fa-solid fa-user"></i></span></div></div>
          <div class="field"><label class="label">Senha</label><div class="control has-icons-left"><input class="input" type="password" name="password" required><span class="icon is-small is-left"><i class="fa-solid fa-lock"></i></span></div></div>
          <div class="field mt-5"><button type="submit" class="button is-info is-fullwidth">Entrar</button></div>
          <p class="has-text-centered mt-3 is-size-7">Não tem conta? <a href="#" id="toggle-register">Crie uma agora</a>.</p>
        </form>

        <form id="register-form" class="is-hidden">
          <div class="field"><label class="label">Criar Usuário</label><div class="control has-icons-left"><input class="input" type="text" name="username" required><span class="icon is-small is-left"><i class="fa-solid fa-user-plus"></i></span></div></div>
          <div class="field"><label class="label">Criar Senha</label><div class="control has-icons-left"><input class="input" type="password" name="password" required><span class="icon is-small is-left"><i class="fa-solid fa-lock"></i></span></div></div>
          <div class="field mt-5"><button type="submit" class="button is-success is-fullwidth">Cadastrar</button></div>
          <p class="has-text-centered mt-3 is-size-7">Já tem conta? <a href="#" id="toggle-login">Fazer Login</a>.</p>
        </form>

        <div id="auth-message" class="notification is-light mt-4 is-hidden"></div>
      </div>
    </div>
  </div>
</div>