Sign-in form style and bootstrap validation

.idea/sshConfigs.xml

@@ -2,9 +2,9 @@
 <project version="4">
   <component name="SshConfigs">
     <configs>
-      <sshConfig authType="PASSWORD" host="giftopic.fr" id="818b2043-4522-45d1-a6aa-6e33d67df9a2" port="4352" customName="giftopic-dev" nameFormat="CUSTOM" username="giftopic-dev" />
-      <sshConfig authType="PASSWORD" host="giftopic.fr" id="8723ba75-f241-4c47-b5e4-bb4d58cd78d4" port="4351" nameFormat="DESCRIPTIVE" username="database" />
-      <sshConfig authType="PASSWORD" host="giftopic.fr" id="5170af19-1f09-4309-be27-9e349cd19dbf" port="4352" customName="giftopic-dev" nameFormat="CUSTOM" username="giftopic-dev" />
+      <sshConfig authType="PASSWORD" host="giftopic.fr" id="818b2043-4522-45d1-a6aa-6e33d67df9a2" port="4352" customName="FTP - dev" nameFormat="CUSTOM" username="giftopic-dev" />
+      <sshConfig authType="PASSWORD" host="giftopic.fr" id="8723ba75-f241-4c47-b5e4-bb4d58cd78d4" port="4351" customName="VPS (database)" nameFormat="CUSTOM" username="database" />
+      <sshConfig authType="PASSWORD" host="giftopic.fr" id="93d33a7c-eaf3-44e8-875c-483e7ae21b1c" port="4351" customName="SSH" nameFormat="CUSTOM" username="giftopic" />
     </configs>
   </component>
 </project>

.idea/webServers.xml

@@ -3,11 +3,10 @@
   <component name="WebServers">
     <option name="servers">
       <webServer id="e6d3992e-8264-446c-add3-a518ae9e1f20" name="giftopic-dev" url="https://dev.giftopic.fr">
-        <fileTransfer host="giftopic.fr" port="4352" accessType="SFTP">
+        <fileTransfer accessType="SFTP" host="giftopic.fr" port="4352" sshConfigId="818b2043-4522-45d1-a6aa-6e33d67df9a2" sshConfig="FTP - dev">
           <advancedOptions>
             <advancedOptions dataProtectionLevel="Private" passiveMode="true" shareSSLContext="true" />
           </advancedOptions>
-          <option name="port" value="4352" />
         </fileTransfer>
       </webServer>
     </option>

assets/css/components/messages.scss

@@ -1,3 +1,11 @@
 #messages {
   display: none;
 }
+button.ui-dialog-titlebar-close {
+  &:focus {
+    outline: none;
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}

assets/css/main.scss

@@ -1,8 +0,0 @@
-@import "~bootstrap/scss/bootstrap";
-
-@import "base/fonts";
-
-@import "components/messages";
-
-@import "layouts/page";
-@import "layouts/header";

assets/css/pages/main.scss

@@ -0,0 +1,8 @@
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+
+@import "../base/fonts";
+
+@import "../components/messages";
+
+@import "../layouts/page";
+@import "../layouts/header";

assets/css/pages/security/sign-in.scss

@@ -0,0 +1,5 @@
+#sign-in {
+  display: inline-block;
+  border: 1px solid rgba(0, 0, 0, .25);
+  padding: 5px;
+}

assets/js/forms.js

@@ -0,0 +1,14 @@
+const $ = require('jquery');
+
+$(function () {
+    /* Form validation */
+    $('.form-validation').each(function (idx, form) {
+        $(form).on('submit', function (event) {
+            if (form.checkValidity() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            $(form).addClass('was-validated');
+        });
+    });
+});

assets/js/main.js

@@ -2,5 +2,6 @@ require('bootstrap/dist/js/bootstrap.bundle.min');
 
 require('@fortawesome/fontawesome-free/css/all.min.css');
 
-require('../css/main.scss');
+require('../css/pages/main.scss');
 require('../js/messages.js');
+require('../js/forms.js');

assets/js/security/sign-in.js

@@ -0,0 +1 @@
+require('../../css/pages/security/sign-in.scss');

templates/security/sign-in.html.twig

@@ -3,29 +3,43 @@
 
 {% block title %}{% trans %}sign.in{% endtrans %}{% endblock %}
 
+{% block stylesheets %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('security/sign-in') }}
+{% endblock %}
+
 {% block body %}
     <h1>{% trans %}sign.in{% endtrans %}</h1>
 
-    <section>
-        <form method="POST">
+    <section id="sign-in">
+        <form method="POST" class="form-validation" novalidate>
             <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
 
-            <div>
-                <label for="email">{% trans %}user.email{% endtrans %}</label>
-                <input type="email" value="{{ username }}" name="email" id="email" required autofocus>
+            <div class="form-group">
+                <label for="email" class="sr-only">{% trans %}user.email{% endtrans %}</label>
+                <input type="email" value="{{ username }}" name="email" id="email" class="form-control" placeholder="{% trans %}user.email{% endtrans %}" required autofocus>
+                <div class="invalid-feedback">{% trans %}user.invalid.email{% endtrans %}</div>
             </div>
 
-            <div>
-                <label for="password">{% trans %}user.password{% endtrans %}</label>
-                <input type="password" name="password" id="password" required>
+            <div class="form-group">
+                <label for="password" class="sr-only">{% trans %}user.password{% endtrans %}</label>
+                <input type="password" name="password" id="password" class="form-control" placeholder="{% trans %}user.password{% endtrans %}" required>
+                <div class="invalid-feedback">{% trans %}user.invalid.password{% endtrans %}</div>
             </div>
 
-            <div>
-                <label for="remember_me">{% trans %}sign.remember_me{% endtrans %}</label>
+            <div class="form-group">
                 <input type="checkbox" name="_remember_me" id="remember_me">
+                <label for="remember_me">{% trans %}sign.remember_me{% endtrans %}</label>
             </div>
 
+            <div class="form-group">
                 <button class="btn btn-lg btn-primary" type="submit">{% trans %}sign.in{% endtrans %}</button>
+            </div>
         </form>
     </section>
 {% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('security/sign-in') }}
+{% endblock %}

translations/security+intl-icu.en.xlf

@@ -54,6 +54,22 @@
                     <target>Password</target>
                 </segment>
             </unit>
+
+
+            <group id="invalid">
+                <unit id="email">
+                    <segment>
+                        <source>user.invalid.email</source>
+                        <target>You must provide a valid email</target>
+                    </segment>
+                </unit>
+                <unit id="password">
+                    <segment>
+                        <source>user.invalid.password</source>
+                        <target>You must provide a password</target>
+                    </segment>
+                </unit>
+            </group>
         </group>
     </file>
 </xliff>

translations/security+intl-icu.fr.xlf

@@ -55,6 +55,21 @@
                     <target>Mot de passe</target>
                 </segment>
             </unit>
+
+            <group id="invalid">
+                <unit id="email">
+                    <segment>
+                        <source>user.invalid.email</source>
+                        <target>Vous devez renseigner une adresse mail valide</target>
+                    </segment>
+                </unit>
+                <unit id="password">
+                    <segment>
+                        <source>user.invalid.password</source>
+                        <target>Vous devez renseigner un mot de passe</target>
+                    </segment>
+                </unit>
+            </group>
         </group>
     </file>
 </xliff>

webpack.config.js

@@ -44,8 +44,7 @@ Encore
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
     .addEntry('main', './assets/js/main.js')
-    //.addEntry('page1', './assets/js/page1.js')
-    //.addEntry('page2', './assets/js/page2.js')
+    .addEntry('security/sign-in', './assets/js/security/sign-in.js')
 
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()