people: Update design of login page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index bf5fd31a9cdb30f89a435b5ce6a4cdd77b9055ea..8c4f3724dfb0d4a39b9f375cc6f44b915beab86f 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -81,10 +81,10 @@ $navbar-height:                             5.625rem;
 
 $navbar-nav-link-padding-x:    1.875rem;
 
-$navbar-light-color:                $dark;
+/*$navbar-light-color:                $dark;
 $navbar-light-hover-color:          $black;
 $navbar-light-active-color:         $black;
-$navbar-light-disabled-color:       $light;
+$navbar-light-disabled-color:       $light; */
 
 // Buttons
 $btn-box-shadow:                       0px 4px 4px rgba(255, 46, 83, 0.17);

diff --git a/src/templates/auth/login.html b/src/templates/auth/login.html
index d359dd4392e50799117c1be640793c955685522e..c7ae6c0dccce12055acaa356bcdc012468c0f137 100644 (file)
--- a/src/templates/auth/login.html
+++ b/src/templates/auth/login.html
@@ -2,51 +2,50 @@
 
 {% block title %}{{ _("Log In") }}{% end block %}
 
-{% block content %}
+{% block container_large %}
        <div class="row justify-content-center my-5">
-               <div class="col col-md-4">
-                       <div class="card {% if incorrect %}border-danger{% end %} mb-5">
-                               <div class="card-body">
-                                       <h5 class="card-title text-center mb-4">{{ _("Log In") }}</h5>
-
-                                       {% if incorrect %}
-                                               <h6 class="card-subtitle mb-4 text-danger text-center">
-                                                       {{ _("You entered an invalid username or password") }}
-                                               </h6>
-                                       {% end %}
-
-                                       <form action="" method="POST">
-                                               {% raw xsrf_form_html() %}
-
-                                               {% if next %}<input type="hidden" name="next" value="{{ next }}">{% end %}
-
-                                               <div class="form-group">
-                                                       <input type="text" class="form-control form-control-lg"
-                                                               name="username" placeholder="{{ _("Username") }}"
-                                                               value="{{ username or "" }}" required autofocus>
-                                               </div>
-
-                                               <div class="form-group">
-                                                       <input type="password" class="form-control form-control-lg"
-                                                               name="password" placeholder="{{ _("Password") }}" required>
-                                               </div>
-
-                                               <button type="submit" class="btn btn-primary btn-block">
-                                                       {{ _("Log in") }}
-                                               </button>
-                                       </form>
-
-                                       <p class="card-text text-center small mt-3">
-                                               <a class="text-muted" href="//people.ipfire.org/password-reset{% if incorrect %}?username={{ username }}{% end %}">
-                                                       {{ _("Did you forget your password?") }}
-                                               </a>
-                                       </p>
+               <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="form-group">
+                                       <input type="text" class="form-control form-control-lg"
+                                               name="username" placeholder="{{ _("Username") }}"
+                                               value="{{ username or "" }}" required autofocus>
                                </div>
-                       </div>
 
-                       <h6 class="text-center mb-2">{{ _("New to IPFire?") }}</h6>
+                               <div class="form-group">
+                                       <input type="password" class="form-control form-control-lg"
+                                               name="password" placeholder="{{ _("Password") }}" required>
+                               </div>
+
+                               <button type="submit" class="btn btn-primary btn-block mb-2">
+                                       {{ _("Log in") }}
+                               </button>
+
+                               <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>
 
-                       <a class="btn btn-secondary btn-block" href="https://people.ipfire.org/register">
+                       <a class="btn btn-dark btn-sm btn-block" href="https://people.ipfire.org/register">
                                {{ _("Register") }}
                        </a>
                </div>

diff --git a/src/templates/base.html b/src/templates/base.html
index 0101b3656970410ec58cc076d9a429d9c6228d29..ddfddf47e21ddb5a4e7b7099a818da0f1b075535 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -20,199 +20,201 @@
                {% block head %}{% end block %}
        </head>
 
-       <body id="page-top" class="{{ hostname.replace(".", "-") }}">
-               <nav class="navbar navbar-light navbar-expand-lg">
-                       <div class="container">
-                               <a class="navbar-brand" href="/">
-                                       IPFire<span class="text-primary">_</span>
-
-                                       {% if hostname == "fireinfo.ipfire.org" %}
-                                               {{ _("Fireinfo") }}
-                                       {% elif hostname == "location.ipfire.org" %}
-                                               {{ _("Location") }}
-                                       {% elif hostname == "mirrors.ipfire.org" %}
-                                               {{ _("Mirrors") }}
-                                       {% elif hostname == "people.ipfire.org" %}
-                                               {{ _("People") }}
-                                       {% elif hostname == "wiki.ipfire.org" %}
-                                               {{ _("Wiki") }}
-                                       {% end %}
-                               </a>
-
-                               {% block menu %}
-                                       {% if hostname in ("www.ipfire.org", "dev.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 d-sm-block d-md-block d-lg-none">
-                                                                       <a class="nav-link {% if request.path == "/" %}active{% end %}" href="/">{{ _("Home") }}</a>
-                                                               </li>
-
-                                                               <li class="nav-item">
-                                                                       <a class="nav-link {% if request.path == "/about" %}active{% end %}" href="/about">{{ _("About") }}</a>
-                                                               </li>
-
-                                                               <li class="nav-item">
-                                                                       <a class="nav-link {% if request.path.startswith("/download") %}active{% end %}" href="/download">{{ _("Download") }}</a>
-                                                               </li>
-
-                                                               <li class="nav-item">
-                                                                       <a class="nav-link {% if request.path == "/support" %}active{% end %}" href="/support">{{ _("Support") }}</a>
-                                                               </li>
-
-                                                               <li class="nav-item">
-                                                                       <a class="nav-link {% if request.path.startswith("/blog") %}active{% end %}" href="/blog">{{ _("Blog") }}</a>
-                                                               </li>
-                                                       </ul>
-
-                                                       <a class="btn btn-primary mt-2 mt-lg-0 ml-lg-2" href="/donate">
-                                                               {{ _("Donate") }}
-                                                       </a>
-
-                                                       <a class="btn btn-lwl mt-2 mt-lg-0 ml-lg-2" href="https://store.lightningwirelabs.com/">
-                                                               {{ _("Buy") }}
-                                                       </a>
-                                               </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>
-                                       {% 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>
-
-                                                               <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 == "people.ipfire.org" %}
-                                               {% if current_user %}
+       <body class="{{ hostname.replace(".", "-") }}">
+               {% block container_large %}
+                       <nav class="navbar navbar-light navbar-expand-lg">
+                               <div class="container">
+                                       <a class="navbar-brand" href="/">
+                                               IPFire<span class="text-primary">_</span>
+
+                                               {% if hostname == "fireinfo.ipfire.org" %}
+                                                       {{ _("Fireinfo") }}
+                                               {% elif hostname == "location.ipfire.org" %}
+                                                       {{ _("Location") }}
+                                               {% elif hostname == "mirrors.ipfire.org" %}
+                                                       {{ _("Mirrors") }}
+                                               {% elif hostname == "people.ipfire.org" %}
+                                                       {{ _("People") }}
+                                               {% elif hostname == "wiki.ipfire.org" %}
+                                                       {{ _("Wiki") }}
+                                               {% end %}
+                                       </a>
+
+                                       {% block menu %}
+                                               {% if hostname in ("www.ipfire.org", "dev.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 mr-3">
+                                                               <ul class="navbar-nav ml-auto">
+                                                                       <li class="nav-item d-sm-block d-md-block d-lg-none">
+                                                                               <a class="nav-link {% if request.path == "/" %}active{% end %}" href="/">{{ _("Home") }}</a>
+                                                                       </li>
+
                                                                        <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>
+                                                                               <a class="nav-link {% if request.path == "/about" %}active{% end %}" href="/about">{{ _("About") }}</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("/download") %}active{% end %}" href="/download">{{ _("Download") }}</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 == "/support" %}active{% end %}" href="/support">{{ _("Support") }}</a>
+                                                                       </li>
+
+                                                                       <li class="nav-item">
+                                                                               <a class="nav-link {% if request.path.startswith("/blog") %}active{% end %}" href="/blog">{{ _("Blog") }}</a>
+                                                                       </li>
+                                                               </ul>
+
+                                                               <a class="btn btn-primary mt-2 mt-lg-0 ml-lg-2" href="/donate">
+                                                                       {{ _("Donate") }}
+                                                               </a>
+
+                                                               <a class="btn btn-lwl mt-2 mt-lg-0 ml-lg-2" href="https://store.lightningwirelabs.com/">
+                                                                       {{ _("Buy") }}
+                                                               </a>
+                                                       </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 == "/stats" %}active{% end %}" href="/stats">
-                                                                                               {{ _("Stats") }}
+                                                                                       <a class="nav-link {% if request.path.startswith("/admin") %}active{% end %}" href="/admin">
+                                                                                               {{ _("Admin") }}
                                                                                        </a>
                                                                                </li>
                                                                        {% end %}
 
-                                                                       {% if current_user.has_sip() %}
+                                                                       <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>
+
+                                                                       <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 == "people.ipfire.org" %}
+                                                       {% 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">
                                                                                <li class="nav-item">
-                                                                                       <a class="nav-link {% if request.path.startswith("/conferences") %}active{% end %}" href="/conferences">
-                                                                                               {{ _("Conferences") }}
+                                                                                       <a class="nav-link {% if request.path == "/users/%s" % current_user.uid %}active{% end %}" href="/users/{{ current_user.uid }}">
+                                                                                               {{ _("My Profile") }}
                                                                                        </a>
                                                                                </li>
-                                                                       {% end %}
-                                                               </ul>
 
-                                                               <form class="form-inline 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 %}">
+                                                                               {% 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="form-inline 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>
+
+                                                       <div class="collapse navbar-collapse" id="navbar">
+                                                               <form class="form-inline 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 %}
-                                       {% 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="form-inline 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>
-
-               {% block container %}
-                       <div class="container">
-                               {% block content %}{% end block %}
-                       </div>
+                                       {% end block %}
+                               </div>
+                       </nav>
+
+                       {% block container %}
+                               <div class="container">
+                                       {% block content %}{% end block %}
+                               </div>
+                       {% end block %}
                {% end block %}
 
                {% block footer %}

diff --git a/src/web/__init__.py b/src/web/__init__.py
index 255d5e6828c21eda5b302c1b8ba557ce3c018402..5bf19dd14467aa1da2416b738be3bcaf379e9cf9 100644 (file)
--- a/src/web/__init__.py
+++ b/src/web/__init__.py
@@ -274,7 +274,7 @@ class Application(tornado.web.Application):
                ])
 
                # people.ipfire.org
-               self.add_handlers(r"people\.ipfire\.org", [
+               self.add_handlers(r"people\.ipfire\.(org|rocks)", [
                        (r"/", people.IndexHandler),
                        (r"/activate/([a-z_][a-z0-9_-]{0,31})/(\w+)", auth.ActivateHandler),
                        (r"/conferences", people.ConferencesHandler),