Packages

api_management_console

0.1.1
0.2.0 0.1.2 0.1.1 0.1.0

A Phoenix LiveView library for real-time API route management — discover, toggle, audit, and guard your routes from a dashboard

HexDocs

Current section

Files

Jump to
Readme
4 Versions
5 Dependencies
Dependants
Files
Activity
api_management_console priv templates login.html.eex
Raw

priv/templates/login.html.eex 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title><%= @app_name %> — Login</title>

  <meta name="csrf-token" content="<%= @csrf_token %>">

  <style>

    html, body { background: #f8fafc; margin: 0; }

    .login-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-family: system-ui, sans-serif; }

    .login-card { background: #fff; border-radius: 16px; padding: 2rem; width: 360px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

    .login-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.25rem 0; }

    .login-subtitle { color: #6b7280; font-size: 0.85rem; margin-bottom: 1.5rem; }

    .login-input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; margin-bottom: 0.75rem; box-sizing: border-box; }

    .login-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }

    .login-btn { width: 100%; padding: 0.6rem; background: #3b82f6; color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }

    .login-btn:hover { background: #2563eb; }

    .login-error { background: #fef2f2; color: #991b1b; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.8rem; margin-bottom: 0.75rem; }

    @media (prefers-color-scheme: dark) {

      html, body { background: #0f172a; }

      .login-card { background: #1e293b; }

      .login-title { color: #e2e8f0; }

      .login-subtitle { color: #94a3b8; }

      .login-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }

    }

  </style>

</head>

<body>

  <div class="login-wrapper">

    <div class="login-card">

      <h1 class="login-title"><%= @app_name %></h1>

      <p class="login-subtitle">Sign in to manage your API routes</p>



      <%= if @error do %>

        <div class="login-error"><%= @error %></div>

      <% end %>



      <form method="post" action="">

        <input type="hidden" name="_csrf_token" value="<%= @csrf_token %>">

        <input type="text" name="username" placeholder="Username" value="<%= @username %>" class="login-input" autocomplete="username">

        <input type="password" name="password" placeholder="Password" class="login-input" autocomplete="current-password">

        <button type="submit" class="login-btn">Sign In</button>

      </form>

    </div>

  </div>

</body>

</html>