]> git.ipfire.org Git - ipfire.org.git/commitdiff
auth: Redesign the login page
authorMichael Tremer <michael.tremer@ipfire.org>
Sat, 24 Jun 2023 16:04:24 +0000 (16:04 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Sat, 24 Jun 2023 16:04:24 +0000 (16:04 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/templates/auth/login.html
src/templates/base.html

index 238e06fb6ebe09f1de63fdf919bdd5ad9cf7ac6c..0ffdcbd7fc8b4fb01212728d3583be3b7cebf3d4 100644 (file)
@@ -2,56 +2,54 @@
 
 {% block title %}{{ _("Log In") }}{% end block %}
 
-{% block container_large %}
-       <div class="row justify-content-center my-5">
-               <div class="col-12 col-md-8 col-lg-6 col-xl-4 text-center">
-                       <h2 class="mb-1">
-                               IPFire<span class="text-primary">_</span>People
-                       </h2>
-                       <h6>{{ _("Log In") }}</h6>
-
-                       {% if incorrect %}
-                               <p class="text-danger my-3">
-                                       {{ _("You entered an invalid username or password") }}
-                               </h6>
-                       {% end %}
-
-                       <form class="my-5" action="" method="POST">
-                               {% raw xsrf_form_html() %}
-
-                               {% if next %}<input type="hidden" name="next" value="{{ next }}">{% end %}
-
-                               <div class="mb-3">
-                                       <input type="text" class="form-control form-control-lg"
-                                               name="username" placeholder="{{ _("Username") }}"
-                                               value="{{ username or "" }}" required autofocus>
+{% block container %}
+       <section class="section">
+               <div class="container">
+                       <div class="columns is-centered">
+                               <div class="column is-one-third">
+                                       <h1 class="title is-1">
+                                               IPFire<span class="has-text-primary">_</span>
+                                       </h1>
+                                       <h4 class="subtitle is-4">{{ _("Log In") }}</h4>
+
+                                       <div class="block">
+                                               <form action="" method="POST">
+                                                       {% raw xsrf_form_html() %}
+
+                                                       {% if next %}<input type="hidden" name="next" value="{{ next }}">{% end %}
+
+                                                       <div class="field">
+                                                               <div class="control">
+                                                                       <input class="input is-medium {% if incorrect %}is-danger{% end %}"
+                                                                               type="text" name="username" {% if username %}value="{{ username }}"{% end %}
+                                                                               placeholder="{{ _("Username") }}" required autofocus>
+                                                               </div>
+                                                       </div>
+
+                                                       <div class="field">
+                                                               <div class="control">
+                                                                       <input class="input is-medium {% if incorrect %}is-danger{% end %}"
+                                                                               type="password" name="password" placeholder="{{ _("Password") }}" required>
+                                                               </div>
+                                                       </div>
+
+                                                       <div class="field">
+                                                               <div class="control">
+                                                                       <button class="button is-primary is-medium is-fullwidth">
+                                                                               {{ _("Log In") }}
+                                                                       </button>
+                                                               </div>
+                                                       </div>
+
+                                                       <div class="field has-text-centered">
+                                                               <a class="text-muted" href="/password-reset{% if incorrect %}?username={{ username }}{% end %}">
+                                                                       {{ _("Did you forget your password?") }}
+                                                               </a>
+                                                       </div>
+                                               </form>
+                                       </div>
                                </div>
-
-                               <div class="mb-3">
-                                       <input type="password" class="form-control form-control-lg"
-                                               name="password" placeholder="{{ _("Password") }}" required>
-                               </div>
-
-                               <div class="d-grid">
-                                       <button type="submit" class="btn btn-primary mb-2">
-                                               {{ _("Log in") }}
-                                       </button>
-                               </div>
-
-                               <p class="small">
-                                       <a class="text-muted" href="//people.ipfire.org/password-reset{% if incorrect %}?username={{ username }}{% end %}">
-                                               {{ _("Did you forget your password?") }}
-                                       </a>
-                               </p>
-                       </form>
-
-                       <h6>{{ _("New to IPFire?") }}</h6>
-
-                       <div class="d-grid">
-                               <a class="btn btn-dark btn-sm" href="https://people.ipfire.org/register">
-                                       {{ _("Register") }}
-                               </a>
                        </div>
                </div>
-       </div>
+       </section>
 {% end block %}
index c0d2f1dfedd8ff1c337e47a59a41684bf9cefd22..4e5d3344535c9c2f1ebae243361966dfcf7041c5 100644 (file)
        </head>
 
        <body>
-               {% block container_large %}
-                       <nav class="navbar" role="navigation" aria-label="main navigation">
-                               <div class="container">
-                                       <div class="navbar-brand">
-                                               <a class="navbar-item is-size-4" href="/">
-                                                       <strong>
-                                                               IPFire<span class="has-text-primary">_</span>
-
-                                                               {% if hostname.startswith("fireinfo.") %}
-                                                                       {{ _("Fireinfo") }}
-                                                               {% elif hostname.startswith("nopaste.") %}
-                                                                       {{ _("Nopaste") }}
-                                                               {% elif hostname.startswith("people.") %}
-                                                                       {{ _("People") }}
-                                                               {% elif hostname.startswith("location.") %}
-                                                                       {{ _("Location") }}
-                                                               {% elif hostname.startswith("wiki.") %}
-                                                                       {{ _("Wiki") }}
-                                                               {% end %}
-                                                       </strong>
-                                               </a>
-                                               <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMainMenu">
-                                                       <span aria-hidden="true"></span>
-                                                       <span aria-hidden="true"></span>
-                                                       <span aria-hidden="true"></span>
-                                               </a>
-                                       </div>
-                                       <div class="navbar-menu" id="navbarMainMenu">
-                                               {% block menu %}
-                                                       {% if hostname.startswith("www.") or hostname.startswith("dev.") %}
-                                                               <div class="navbar-end">
-                                                                       <a class="navbar-item {% if request.path == "/about" %}active{% end %}" href="/about">{{ _("About") }}</a>
-
-                                                                       <a class="navbar-item {% if request.path.startswith("/download") %}active{% end %}" href="/download">{{ _("Download") }}</a>
+               <nav class="navbar" role="navigation" aria-label="main navigation">
+                       <div class="container">
+                               <div class="navbar-brand">
+                                       <a class="navbar-item is-size-4" href="/">
+                                               <strong>
+                                                       IPFire<span class="has-text-primary">_</span>
+
+                                                       {% if hostname.startswith("fireinfo.") %}
+                                                               {{ _("Fireinfo") }}
+                                                       {% elif hostname.startswith("nopaste.") %}
+                                                               {{ _("Nopaste") }}
+                                                       {% elif hostname.startswith("people.") %}
+                                                               {{ _("People") }}
+                                                       {% elif hostname.startswith("location.") %}
+                                                               {{ _("Location") }}
+                                                       {% elif hostname.startswith("wiki.") %}
+                                                               {{ _("Wiki") }}
+                                                       {% end %}
+                                               </strong>
+                                       </a>
+                                       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMainMenu">
+                                               <span aria-hidden="true"></span>
+                                               <span aria-hidden="true"></span>
+                                               <span aria-hidden="true"></span>
+                                       </a>
+                               </div>
+                               <div class="navbar-menu" id="navbarMainMenu">
+                                       {% block menu %}
+                                               {% if hostname.startswith("www.") or hostname.startswith("dev.") %}
+                                                       <div class="navbar-end">
+                                                               <a class="navbar-item {% if request.path == "/about" %}active{% end %}" href="/about">{{ _("About") }}</a>
 
-                                                                       <a class="navbar-item {% if request.path.startswith("/blog") %}active{% end %}" href="/blog">{{ _("Blog") }}</a>
+                                                               <a class="navbar-item {% if request.path.startswith("/download") %}active{% end %}" href="/download">{{ _("Download") }}</a>
 
-                                                                       <a class="navbar-item {% if request.path == "/help" %}active{% end %}" href="/help">{{ _("Help") }}</a>
+                                                               <a class="navbar-item {% if request.path.startswith("/blog") %}active{% end %}" href="/blog">{{ _("Blog") }}</a>
 
-                                                                       <div class="navbar-item">
-                                                                               <button class="button is-lwl" href="https://store.lightningwirelabs.com/?utm_source={{ hostname }}&utm_medium=navigation">
-                                                                                       <p class="has-text-centered has-text-weight-bold is-uppercase">
-                                                                                               {{ _("Buy") }}
-                                                                                       </p>
-                                                                               </button>
-                                                                       </div>
+                                                               <a class="navbar-item {% if request.path == "/help" %}active{% end %}" href="/help">{{ _("Help") }}</a>
 
-                                                                       <div class="navbar-item">
-                                                                               <button class="button is-primary" href="https://www.ipfire.org/donate">
-                                                                                       <p class="has-text-centered has-text-weight-bold is-uppercase">
-                                                                                               {{ _("Donate") }}
-                                                                                       </p>
-                                                                               </button>
-                                                                       </div>
+                                                               <div class="navbar-item">
+                                                                       <button class="button is-lwl" href="https://store.lightningwirelabs.com/?utm_source={{ hostname }}&utm_medium=navigation">
+                                                                               <p class="has-text-centered has-text-weight-bold is-uppercase">
+                                                                                       {{ _("Buy") }}
+                                                                               </p>
+                                                                       </button>
                                                                </div>
-                                                       {% elif hostname == "fireinfo.ipfire.org" %}
-                                                               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                               aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                                       <span class="fas fa-bars"></span>
-                                                               </button>
-
-                                                               <div class="collapse navbar-collapse" id="navbar">
-                                                                       <ul class="navbar-nav ml-auto">
-                                                                               {% if current_user and current_user.is_staff() %}
-                                                                                       <li class="nav-item">
-                                                                                               <a class="nav-link {% if request.path.startswith("/admin") %}active{% end %}" href="/admin">
-                                                                                                       {{ _("Admin") }}
-                                                                                               </a>
-                                                                                       </li>
-                                                                               {% end %}
 
-                                                                               <li class="nav-item">
-                                                                                       <a class="nav-link {% if request.path.startswith("/vendors") %}active{% end %}" href="/vendors">
-                                                                                               {{ _("Vendors") }}
-                                                                                       </a>
-                                                                               </li>
-                                                                       </ul>
+                                                               <div class="navbar-item">
+                                                                       <button class="button is-primary" href="https://www.ipfire.org/donate">
+                                                                               <p class="has-text-centered has-text-weight-bold is-uppercase">
+                                                                                       {{ _("Donate") }}
+                                                                               </p>
+                                                                       </button>
                                                                </div>
-                                                       {% elif hostname == "location.ipfire.org" %}
-                                                               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                               aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                                       <span class="fas fa-bars"></span>
-                                                               </button>
-
-                                                               <div class="collapse navbar-collapse" id="navbar">
-                                                                       <ul class="navbar-nav ml-auto">
+                                                       </div>
+                                               {% elif hostname == "fireinfo.ipfire.org" %}
+                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                               <span class="fas fa-bars"></span>
+                                                       </button>
+
+                                                       <div class="collapse navbar-collapse" id="navbar">
+                                                               <ul class="navbar-nav ml-auto">
+                                                                       {% if current_user and current_user.is_staff() %}
                                                                                <li class="nav-item">
-                                                                                       <a class="nav-link {% if request.path == "/how-to-use" %}active{% end %}" href="/how-to-use">
-                                                                                               {{ _("How To Use") }}
+                                                                                       <a class="nav-link {% if request.path.startswith("/admin") %}active{% end %}" href="/admin">
+                                                                                               {{ _("Admin") }}
                                                                                        </a>
                                                                                </li>
+                                                                       {% end %}
 
-                                                                               <li class="nav-item">
-                                                                                       <a class="nav-link {% if request.path == "/download" %}active{% end %}" href="/download">
-                                                                                               {{ _("Download") }}
-                                                                                       </a>
-                                                                               </li>
-                                                                       </ul>
+                                                                       <li class="nav-item">
+                                                                               <a class="nav-link {% if request.path.startswith("/vendors") %}active{% end %}" href="/vendors">
+                                                                                       {{ _("Vendors") }}
+                                                                               </a>
+                                                                       </li>
+                                                               </ul>
+                                                       </div>
+                                               {% elif hostname == "location.ipfire.org" %}
+                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                               <span class="fas fa-bars"></span>
+                                                       </button>
+
+                                                       <div class="collapse navbar-collapse" id="navbar">
+                                                               <ul class="navbar-nav ml-auto">
+                                                                       <li class="nav-item">
+                                                                               <a class="nav-link {% if request.path == "/how-to-use" %}active{% end %}" href="/how-to-use">
+                                                                                       {{ _("How To Use") }}
+                                                                               </a>
+                                                                       </li>
 
-                                                                       <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
-                                                                               {{ _("Donate") }}
-                                                                       </a>
-                                                               </div>
-                                                       {% elif hostname == "nopaste.ipfire.org" %}
+                                                                       <li class="nav-item">
+                                                                               <a class="nav-link {% if request.path == "/download" %}active{% end %}" href="/download">
+                                                                                       {{ _("Download") }}
+                                                                               </a>
+                                                                       </li>
+                                                               </ul>
+
+                                                               <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
+                                                                       {{ _("Donate") }}
+                                                               </a>
+                                                       </div>
+                                               {% elif hostname == "nopaste.ipfire.org" %}
+                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                               <span class="fas fa-bars"></span>
+                                                       </button>
+
+                                                       <div class="collapse navbar-collapse" id="navbar">
+                                                               <ul class="navbar-nav ml-auto">
+                                                                       <li class="nav-item">
+                                                                               <a class="nav-link" href="/?mode=upload">{{ _("Upload File") }}</a>
+                                                                       </li>
+                                                               </ul>
+                                                       </div>
+                                               {% elif hostname.startswith("people.") %}
+                                                       {% if current_user %}
                                                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                                                                                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                                                                        <span class="fas fa-bars"></span>
                                                                </button>
 
                                                                <div class="collapse navbar-collapse" id="navbar">
-                                                                       <ul class="navbar-nav ml-auto">
+                                                                       <ul class="navbar-nav ml-auto mr-3">
                                                                                <li class="nav-item">
-                                                                                       <a class="nav-link" href="/?mode=upload">{{ _("Upload File") }}</a>
+                                                                                       <a class="nav-link {% if request.path == "/users/%s" % current_user.uid %}active{% end %}" href="/users/{{ current_user.uid }}">
+                                                                                               {{ _("My Profile") }}
+                                                                                       </a>
                                                                                </li>
-                                                                       </ul>
-                                                               </div>
-                                                       {% elif hostname.startswith("people.") %}
-                                                               {% if current_user %}
-                                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                                               <span class="fas fa-bars"></span>
-                                                                       </button>
 
-                                                                       <div class="collapse navbar-collapse" id="navbar">
-                                                                               <ul class="navbar-nav ml-auto mr-3">
+                                                                               {% if current_user.is_staff() %}
                                                                                        <li class="nav-item">
-                                                                                               <a class="nav-link {% if request.path == "/users/%s" % current_user.uid %}active{% end %}" href="/users/{{ current_user.uid }}">
-                                                                                                       {{ _("My Profile") }}
+                                                                                               <a class="nav-link {% if request.path == "/users" %}active{% end %}" href="/users">
+                                                                                                       {{ _("Users") }}
                                                                                                </a>
                                                                                        </li>
 
-                                                                                       {% if current_user.is_staff() %}
-                                                                                               <li class="nav-item">
-                                                                                                       <a class="nav-link {% if request.path == "/users" %}active{% end %}" href="/users">
-                                                                                                               {{ _("Users") }}
-                                                                                                       </a>
-                                                                                               </li>
-
-                                                                                               <li class="nav-item">
-                                                                                                       <a class="nav-link {% if request.path.startswith("/groups") %}active{% end %}" href="/groups">
-                                                                                                               {{ _("Groups") }}
-                                                                                                       </a>
-                                                                                               </li>
-
-                                                                                               <li class="nav-item">
-                                                                                                       <a class="nav-link {% if request.path == "/stats" %}active{% end %}" href="/stats">
-                                                                                                               {{ _("Stats") }}
-                                                                                                       </a>
-                                                                                               </li>
-                                                                                       {% end %}
-
-                                                                                       {% if current_user.has_sip() %}
-                                                                                               <li class="nav-item">
-                                                                                                       <a class="nav-link {% if request.path.startswith("/conferences") %}active{% end %}" href="/conferences">
-                                                                                                               {{ _("Conferences") }}
-                                                                                                       </a>
-                                                                                               </li>
-                                                                                       {% end %}
-                                                                               </ul>
-
-                                                                               <form class="my-2 my-lg-0" action="/search" method="GET">
-                                                                                       <input class="form-control form-control-sm mr-sm-2" type="search" name="q"
-                                                                                               placeholder="{{ _("Search") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
-                                                                               </form>
-                                                                       </div>
-                                                               {% end %}
-                                                       {% elif hostname == "wiki.ipfire.org" %}
-                                                               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
-                                                                               aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-                                                                       <span class="fas fa-bars"></span>
-                                                               </button>
+                                                                                       <li class="nav-item">
+                                                                                               <a class="nav-link {% if request.path.startswith("/groups") %}active{% end %}" href="/groups">
+                                                                                                       {{ _("Groups") }}
+                                                                                               </a>
+                                                                                       </li>
 
-                                                               <div class="collapse navbar-collapse" id="navbar">
-                                                                       <form class=" ml-auto my-2 my-lg-0" action="/search" method="GET">
-                                                                               <input class="form-control form-control-sm" type="search" name="q"
-                                                                                       placeholder="{{ _("Search...") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
-                                                                       </form>
+                                                                                       <li class="nav-item">
+                                                                                               <a class="nav-link {% if request.path == "/stats" %}active{% end %}" href="/stats">
+                                                                                                       {{ _("Stats") }}
+                                                                                               </a>
+                                                                                       </li>
+                                                                               {% end %}
 
-                                                                       <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
-                                                                               {{ _("Donate") }}
-                                                                       </a>
+                                                                               {% if current_user.has_sip() %}
+                                                                                       <li class="nav-item">
+                                                                                               <a class="nav-link {% if request.path.startswith("/conferences") %}active{% end %}" href="/conferences">
+                                                                                                       {{ _("Conferences") }}
+                                                                                               </a>
+                                                                                       </li>
+                                                                               {% end %}
+                                                                       </ul>
+
+                                                                       <form class="my-2 my-lg-0" action="/search" method="GET">
+                                                                               <input class="form-control form-control-sm mr-sm-2" type="search" name="q"
+                                                                                       placeholder="{{ _("Search") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
+                                                                       </form>
                                                                </div>
                                                        {% end %}
-                                               {% end block %}
-                                       </div>
+                                               {% elif hostname == "wiki.ipfire.org" %}
+                                                       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+                                                                       aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                                                               <span class="fas fa-bars"></span>
+                                                       </button>
+
+                                                       <div class="collapse navbar-collapse" id="navbar">
+                                                               <form class=" ml-auto my-2 my-lg-0" action="/search" method="GET">
+                                                                       <input class="form-control form-control-sm" type="search" name="q"
+                                                                               placeholder="{{ _("Search...") }}" aria-label="{{ _("Search") }}" value="{% try %}{{ q }}{% except %}{% end %}">
+                                                               </form>
+
+                                                               <a class="btn btn-primary ml-lg-2" href="https://www.ipfire.org/donate">
+                                                                       {{ _("Donate") }}
+                                                               </a>
+                                                       </div>
+                                               {% end %}
+                                       {% end block %}
                                </div>
-                       </nav>
+                       </div>
+               </nav>
 
-                       {% block container %}
-                               <div class="container">
-                                       {% block content %}{% end block %}
-                               </div>
-                       {% end block %}
+               {% block container %}
+                       <div class="container">
+                               {% block content %}{% end block %}
+                       </div>
                {% end block %}
 
                {% block footer %}