[AdminBundle] New login styling

src/Kunstmaan/AdminBundle/Form/Authentication/NewPasswordType.php

@@ -5,7 +5,6 @@
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\PasswordType;
 use Symfony\Component\Form\Extension\Core\Type\RepeatedType;
-use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\FormBuilderInterface;
 
 final class NewPasswordType extends AbstractType
@@ -23,10 +22,10 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 'second_options' => [
                     'label' => 'settings.user.repeatedpassword',
                 ],
+                'attr' => [
+                    'autocomplete' => 'new-password',
+                ],
             ])
-            ->add('submit', SubmitType::class, [
-                'label' => 'security.resetting.reset',
-                'attr' => ['class' => 'btn btn-primary btn--raise-on-hover'],
-            ]);
+        ;
     }
 }

src/Kunstmaan/AdminBundle/Form/Authentication/PasswordRequestType.php

@@ -3,7 +3,6 @@
 namespace Kunstmaan\AdminBundle\Form\Authentication;
 
 use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
 
@@ -13,12 +12,9 @@ public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
             ->add('email', TextType::class, [
-                'label' => 'settings.user.email',
-                'attr' => ['class' => 'form-control form-group--icon-in-control__form-control'],
+                'label' => 'security.resetting.email',
+                'required' => true,
             ])
-            ->add('submit', SubmitType::class, [
-                'label' => 'settings.user.password',
-                'attr' => ['class' => 'btn btn-primary btn--raise-on-hover'],
-            ]);
+        ;
     }
 }

src/Kunstmaan/AdminBundle/Resources/translations/messages.en.yml

@@ -9,7 +9,11 @@ pages:
     movingconfirmation: You are moving "%title%" to "%target%", are you sure?
 
 security:
+    general:
+        logged_in_as: 'Logged in as %username%'
+        logout: 'Logout'
     login:
+        title: 'Log in to %websitetitle%'
         username: Username
         password: Password
         submit: Submit
@@ -19,6 +23,12 @@ security:
     resetting:
         mail:
             subject: 'Password reset'
+            content:
+                description: If you lost your password or wish to reset it,<br />use the link below to get started
+                footer: If you did not request a password reset, you can safely ignore this email. Only a person with access to your email can reset your account password.
+                link: Reset your password
+                powered_by: Powered by
+                title: Password reset
         send_email_success: 'An email has been sent to your address'
         user_not_found: 'User not found'
         password_set_success: 'Your password has been changed.'
@@ -31,7 +41,8 @@ security:
             new_password_confirmation: 'Repeat new password'
             submit: 'Change password'
         success:
-            flash: 'The password for "%username%" has been changed.'
+            continue: Login
+            message: 'The password for "%username%" has been changed.'
 
 # Modules
 modules:

src/Kunstmaan/AdminBundle/Resources/translations/messages.nl.yml

@@ -133,7 +133,11 @@ toolbar:
     title: Exceptions
     message: "<strong>%X%</strong> exception(s) veroorzaakt door <strong>%Y%</strong> events"
 security:
+  general:
+    logged_in_as: 'Ingelogd als %username%'
+    logout: 'Uitloggen'
   login:
+    title: 'Log in op %websitetitle%'
     username: Gebruikersnaam
     password: Wachtwoord
     submit: Inloggen
@@ -143,6 +147,12 @@ security:
   resetting:
     mail:
       subject: 'Wachtwoord vergeten'
+      content:
+        title: 'Wachtwoord vergeten'
+        description: 'Klik op de link hieronder om uw wachtwoord opnieuw in te stellen.'
+        link: 'Wachtwoord instellen'
+        footer: 'Als u geen nieuw wachtwoord heeft aangevraagd, dan mag u deze email negeren.'
+        powered_by: 'Powered by'
     send_email_success: 'Een email is verzonden naar jouw emailadres'
     user_not_found: 'Gebruiker niet gevonden.'
     password_set_success: 'Uw wachtwoord is aangepast.'

src/Kunstmaan/AdminBundle/Resources/ui/scssnext/01-quarks/_colors.scss

@@ -22,4 +22,6 @@
     --color-error: #FA1A57;
     --color-disabled: #2E2B29;
     --color-text: #2E2B29;
+    --highlight-color-bg: #01A1E6;
+    --highlight-color-fg: var(--color-greyscale-000);
 }

src/Kunstmaan/AdminBundle/Resources/ui/scssnext/02-atoms/_all.scss

@@ -5,4 +5,5 @@
    Never add styles directly to this file
    ========================================================================== */
 
-// @import "...";
+@import "forms/all";
+@import "buttons";

src/Kunstmaan/AdminBundle/Resources/ui/scssnext/02-atoms/_buttons.scss

@@ -0,0 +1,92 @@
+/* ==========================================================================
+    Buttons
+   ========================================================================== */
+
+.btn {
+    padding: 0;
+
+    background: none;
+    box-shadow: none;
+
+    border-radius: 3px;
+    border: none;
+
+    line-height: 1;
+
+    transition: $snip-ease-sine-in-out background-color .3s, $snip-ease-sine-in-out color .3s;
+
+    &:hover,
+    &:focus {
+        outline: none;
+    }
+}
+
+.btn--primary {
+    background-color: var(--highlight-color-bg);
+
+    color: var(--highlight-color-fg);
+
+    &:hover,
+    &:focus {
+        background-color: var(--color-kuma-primary);
+
+        color: var(--highlight-color-fg);
+    }
+}
+
+.btn--secondary {
+    background-color: var(--color-kuma-primary);
+
+    color: var(--color-greyscale-500);
+
+    &:hover,
+    &:focus {
+        background-color: var(--color-kuma-secondary-2);
+
+        color: var(--highlight-color-fg);
+    }
+}
+
+.btn--inverted {
+    background-color: var(--color-greyscale-500);
+
+    color: var(--color-kuma-primary);
+
+    &:hover,
+    &:focus {
+        background-color: var(--color-greyscale-400);
+
+        color: var(--color-kuma-primary);
+    }
+}
+
+.btn--inverted-grey {
+    background-color: var(--color-greyscale-500);
+
+    color: var(--color-greyscale-100);
+
+    &:hover,
+    &:focus {
+        background-color: var(--color-greyscale-400);
+
+        color: var(--color-greyscale-000);
+    }
+}
+
+.btn--lg {
+    padding: 25px 40px;
+
+    font-size: 18px;
+}
+
+.btn--md {
+    padding: 1em 25px;
+
+    font-size: 15px;
+}
+
+.btn--sm {
+    padding: 10px 15px;
+
+    font-size: 14px;
+}

src/Kunstmaan/AdminBundle/Resources/ui/scssnext/02-atoms/forms/_all.scss

@@ -0,0 +1,6 @@
+/* ==========================================================================
+    Forms
+   ========================================================================== */
+
+@import "form-group";
+@import "form-control";

src/Kunstmaan/AdminBundle/Resources/ui/scssnext/02-atoms/forms/_form-control.scss

@@ -0,0 +1,24 @@
+/* ==========================================================================
+    form control
+   ========================================================================== */
+
+
+.form-control {
+    width: 100%;
+    max-width: 380px;
+    height: 55px;
+    padding: 17px;
+
+
+    outline: none;
+    border: 2px solid transparent;
+    border-radius: 3px;
+
+
+    &:focus,
+    &:active {
+        box-shadow: inset 0 1px 3px rgba(#2E2B29, .5);
+
+        border-color: var(--color-kuma-secondary-1);
+    }
+}

src/Kunstmaan/AdminBundle/Resources/ui/scssnext/02-atoms/forms/_form-group.scss

@@ -0,0 +1,12 @@
+/* ==========================================================================
+    form group
+   ========================================================================== */
+.form-group--icon-in-control {
+    .form-control {
+        padding-left: 3rem;
+    }
+}
+
+.form-group--icon-in-control__icon {
+    top: 4.4rem;
+}

src/Kunstmaan/AdminBundle/Resources/ui/scssnext/03-molecules/_all.scss

@@ -6,3 +6,4 @@
    ========================================================================== */
 
 // @import "...";
+@import "login";