Login form updated

Simounet · Jan 9, 2024 · 2d0e6d9 · 2d0e6d9
1 parent 6f551ad
commit 2d0e6d9
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 26 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/index.html b/index.html
@@ -30,17 +30,17 @@
     {if="!$myUser"}
         <div class="user-login">
             {if="($configurationManager->get('articleDisplayAnonymous')=='0')"}
-                <h3>{function="_t('YOU_MUST_BE_LOGGED')"}</h3>
-                <p>{function="_t('IF_ADMIN_THEN_CONFIG')"}</p>
+                <img src="images/leed-logo.svg" alt="" class="login-logo">
+                <h1 class="login-title">{function="_t('LEEDVIBES_AUTHENTICATION')"}</h1>
             {/if}
-            <form action="action.php?action=login" class="settings__fields" method="POST">
-                <input type="text" name="login" placeholder="{function="_t('LOGIN')"}"/>
-                <input type="password" name="password" placeholder="{function="_t('PASSWORD')"}"/>
-                <label class="rememberMe">
+            <form action="action.php?action=login" class="login-form" method="POST">
+                <input type="text" name="login" class="login-input" placeholder="{function="_t('LOGIN')"}" autocapitalize="none" autofocus/>
+                <input type="password" name="password" class="login-input" placeholder="{function="_t('PASSWORD')"}"/>
+                <label class="login-remember-me">
                     <input type="checkbox" name="rememberMe" />
                     <span>{function="_t('REMEMBER_ME')"}</span>
                 </label>
-                <input type="submit" value="{function="_t('LEEDVIBES_CONNECTION')"}" />
+                <input type="submit" class="login-submit" value="{function="_t('LEEDVIBES_CONNECTION')"}" />
             </form>
         </div>
     {else}

diff --git a/locale/en.json b/locale/en.json
@@ -1,6 +1,7 @@
 {
   "LEEDVIBES_ADD_TO_FAVORITES": "Add to favorites",
   "LEEDVIBES_ALL_FEEDS": "All feeds",
+  "LEEDVIBES_AUTHENTICATION": "Authentication",
   "LEEDVIBES_CONNECTION": "Connection",
   "LEEDVIBES_FEED_MARK_AS_READ": "Mark as read all the events from the $1's feed",
   "LEEDVIBES_FOLDER_MARK_AS_READ": "Mark as read all the events from the $1's folder",

diff --git a/locale/fr.json b/locale/fr.json
@@ -1,6 +1,7 @@
 {
   "LEEDVIBES_ADD_TO_FAVORITES": "Ajouter aux favoris",
   "LEEDVIBES_ALL_FEEDS": "Tous les flux",
+  "LEEDVIBES_AUTHENTICATION": "Authentification",
   "LEEDVIBES_CONNECTION": "Connexion",
   "LEEDVIBES_FEED_MARK_AS_READ": "Marquer comme lus tous les événements du flux $1",
   "LEEDVIBES_FOLDER_MARK_AS_READ": "Marquer comme lus tous les événements du dossier $1",

diff --git a/sass/style.scss b/sass/style.scss
@@ -185,7 +185,7 @@ $border-color-active: white;
         color: $sidebar-color;
     }
 
-    .settings__fields {
+    .login-form {
         padding: 20%;
     }
 
@@ -713,6 +713,7 @@ html:not(.no-js) .feed--closed {
 
 .user-login {
     margin: 1em auto;
+    min-width: 250px;
     flex-direction: column;
 }
 
@@ -758,21 +759,53 @@ button.settings-item {
     }
 }
 
-.settings__fields input[type='text'],
-.settings__fields input[type='password'] {
-    min-width: 7em;
-    width: 35%;
+.login-form {
+    width: 100%;
+}
+
+.login-title {
+    margin-bottom: 20px;
+    font-size: 2rem;
+
+    @media($breakpoint-max) {
+        margin-bottom: 10px;
+    }
 }
 
-.settings__fields input[type='text'],
-.settings__fields input[type='password'],
-.settings__fields input[type='submit'] {
+.login-logo {
+    margin-top: 20px;
+    margin-bottom: 40px;
+    width: 100px;
+    filter: invert(100%);
+
+    @media($breakpoint-max) {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        width: 50px;
+    }
+}
+
+.login-input {
+    width: 60%;
+}
+
+.login-input,
+.login-submit {
     display: block;
-    margin: 0.4em auto;
+    margin: 0.4em auto 10px;
     padding: 0.5em;
     color: $sidebar-color-bg-darken;
 }
 
+.login-submit {
+    margin-top: 40px;
+}
+
+.login-remember-me {
+    display: block;
+    margin: 20px 0;
+}
+
 .extra-settings {
     display: flex;
     justify-content: center;