fix js translation + add style to login page

data/www/css/main.css

@@ -192,19 +192,24 @@ button.purple:hover {
 .alert {
     margin: 10px 30px 20px 30px;
     padding: 20px 50px;
-    flex: 1;
     align-self: stretch;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    border-radius: 4px;
 }
 
 .alert-success {
     color: rgb(14, 239, 95);
     border: 1px solid rgb(14, 239, 95);
     background: rgba(14, 239, 95, .2);
-    border-radius: 4px;
+}
+
+.alert-error {
+    color: rgb(239, 14, 93);
+    border: 1px solid rgb(239, 14, 93);
+    background: rgba(239, 14, 93, .2);
 }
 
 
@@ -599,3 +604,41 @@ footer {
 footer .version {
     opacity: 0.3;
 }
+
+.login-page {
+    max-width: 600px;
+    padding-top: 50px;
+}
+
+.card {
+    background: white;
+    border-radius: 6px;
+    padding: 50px 50px;
+    color: #333;
+}
+
+.card form {
+    padding: 0;
+}
+
+.card form .form-group  {
+    margin: 0 0 30px 0;
+    padding: 0;
+}
+.card form .form-group .widget {
+    flex: 1;
+}
+
+.card form .form-group label {
+    text-align: left;
+}
+
+.card button[type=submit] {
+    margin: 0 auto;
+}
+
+.card h3 {
+    text-align: center;
+    font-size: 36px;
+    margin: 0 0 40px 0;
+}

data/www/js/auth.js

@@ -83,7 +83,7 @@ jQuery(document).ready(function ($) {
     });
 
     $(document).on('click', '.user-delete', function () {
-        if (confirm(l.auth_user_delete_confirmation)) {
+        if (confirm(l.js_auth_user_delete_confirmation)) {
             const $tr = $(this).parents('tr:eq(0)');
             $tr.remove();
             updateTable();

data/www/js/fleet.js

@@ -103,7 +103,7 @@ jQuery(document).ready(function ($) {
     });
 
     $(document).on('click', '.screen-delete', function () {
-        if (confirm(l.fleet_screen_delete_confirmation)) {
+        if (confirm(l.js_fleet_screen_delete_confirmation)) {
             const $tr = $(this).parents('tr:eq(0)');
             $tr.remove();
             updateTable();

data/www/js/slideshow.js

@@ -170,7 +170,7 @@ jQuery(document).ready(function ($) {
     });
 
     $(document).on('click', '.slide-delete', function () {
-        if (confirm(l.slideshow_slide_delete_confirmation)) {
+        if (confirm(l.js_slideshow_slide_delete_confirmation)) {
             const $tr = $(this).parents('tr:eq(0)');
             $tr.remove();
             updateTable();

lang/en.json

@@ -135,6 +135,12 @@
     "common_unknown_ipaddr": "Unknown IP address",
     "common_empty": "[Empty]",
     "logout": "Logout",
+    "login_error_not_found": "Bad credentials",
+    "login_error_bad_credentials": "Bad credentials",
+    "login_form_title": "Sign in",
+    "login_form_username": "Username",
+    "login_form_password": "Password",
+    "login_form_submit": "Connect",
 
     "enum_animation_speed_slower": "Slower",
     "enum_animation_speed_slow": "Slow",

lang/fr.json

@@ -135,6 +135,12 @@
     "common_unknown_ipaddr": "Adresse IP inconnue",
     "common_empty": "[Vide]",
     "logout": "Déconnexion",
+    "login_error_not_found": "Identifiants invalides",
+    "login_error_bad_credentials": "Identifiants invalides",
+    "login_form_title": "Connexion",
+    "login_form_username": "Identifiant",
+    "login_form_password": "Mot de passe",
+    "login_form_submit": "Valider",
 
     "enum_animation_speed_slower": "Très lent",
     "enum_animation_speed_slow": "Lent",

views/auth/login.jinja.html

@@ -13,11 +13,34 @@
 {% endblock %}
 
 {% block page %}
-    Hello
+    <div class="login-page">
+
+        {% if login_error %}
+            <div class="alert alert-error">
+                {{ t('login_error_' ~ login_error) }}
+            </div>
+        {% endif %}
+
+        <div class="card">
+            <h3>
+                {{ l.login_form_title }}
+            </h3>
             <form action="{{ url_for('login') }}" method="post">
-    error: {{ login_error }}
+                <div class="form-group">
-        <input type="text" name="username" />
+                    <label for="password">{{ l.login_form_username }}</label>
-        <input type="password" name="password" />
+                    <div class="widget">
-        <button type="submit">Login</button>
+                        <input type="text" name="username" required="required" />
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="password">{{ l.login_form_password }}</label>
+                    <div class="widget">
+                        <input type="password" name="password" required="required" />
+                    </div>
+                </div>
+                <button type="submit">{{ l.login_form_submit }}</button>
             </form>
+        </div>
+
+    </div>
 {% endblock %}

views/base.jinja.html

@@ -111,6 +111,7 @@
     var l = {
         'js_slideshow_slide_delete_confirmation': '{{ l.slideshow_slide_delete_confirmation }}',
         'js_fleet_screen_delete_confirmation': '{{ l.js_fleet_screen_delete_confirmation }}',
+        'js_auth_user_delete_confirmation': '{{ l.js_auth_user_delete_confirmation }}',
         'js_sysinfo_restart_confirmation': '{{ l.js_sysinfo_restart_confirmation }}',
         'js_sysinfo_restart_loading': '{{ l.js_sysinfo_restart_loading }}'
     };