Fix some issues with the signup states. Redirect to finalize signup i…

…f applicable. Sort translations correctly. Show/hide password.
BeWelcome · May 18, 2024 · 8415a52 · 8415a52
1 parent d65246b
commit 8415a52
Show file tree

Hide file tree

Showing 15 changed files with 133 additions and 34 deletions.
diff --git a/assets/js/password/showhide.js b/assets/js/password/showhide.js
@@ -0,0 +1,21 @@
+const passwordField = document.querySelector('input[type="password"]');
+const showHidePasswordButton = document.getElementById("password_show_hide");
+const showHidePassword = (event) => {
+    if (passwordField.type === 'text') {
+        passwordField.type = 'password';
+        showHidePasswordButton.innerHTML="<svg class=\"\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n" +
+            "                              <path class=\"block\" d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"></path>\n" +
+            "                              <circle class=\"block\" cx=\"12\" cy=\"12\" r=\"3\"></circle>\n" +
+            "                            </svg>";
+    } else {
+        passwordField.type = 'text';
+        showHidePasswordButton.innerHTML="<svg class=\"\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n" +
+            "                              <path class=\"\" d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\"></path>\n" +
+            "                              <path class=\"\" d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\"></path>\n" +
+            "                              <path class=\"\" d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\"></path>\n" +
+            "                              <line class=\"\" x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"></line>\n" +
+            "                            </svg>";
+    }
+}
+
+showHidePasswordButton.addEventListener("click", showHidePassword);
diff --git a/assets/js/signup.js → assets/js/signup/finalize.js b/assets/js/signup.js → assets/js/signup/finalize.js
@@ -115,4 +115,15 @@ for (let radio of accommodationRadiobuttons) {
     radio.addEventListener("click", radioHandler)
 }
 
-console.log(accommodationRadiobuttons)
+const showPasswordButton = document.getElementById("password_show_hide");
+
+const showHidePassword = (event) => {
+    console.log("clicked: ", event.target);
+    if (event.target.type === 'text') {
+        event.target.type = 'password';
+    } else {
+        event.target.type = 'text';
+    }
+}
+
+showPasswordButton.addEventListener("click", showHidePassword);
diff --git a/assets/scss/floating_labels.scss b/assets/scss/floating_labels.scss
@@ -92,6 +92,17 @@
   color: #777;
 }
 
+.form-label-group button {
+  position: absolute;
+  top: 12px;
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.form-label-group input:not(:placeholder-shown) ~ button {
+  visibility: visible;
+}
+
 /* Fallback for Edge
 -------------------------------------------------- */
 @supports (-ms-ime-align: auto) {

diff --git a/src/Controller/SecurityController.php b/src/Controller/SecurityController.php
@@ -23,18 +23,20 @@ class SecurityController extends AbstractController
      * @Route("/login", name="login", defaults={"access_denied_redirect" = "/"}))
      * @Route("/login", name="security_login", defaults={"access_denied_redirect" = "/"}))
      * @Route("/login_check", name="security_check", defaults={"access_denied_redirect" = "/"}))
-     *
-     * @return Response
      */
-    public function loginAction(AuthenticationUtils $helper)
+    public function loginAction(AuthenticationUtils $helper): Response
     {
         $user = $this->getUser();
         if (null !== $user) {
             return $this->redirectToRoute('homepage');
         }
 
-        $error = $helper->getLastAuthenticationError();
         $lastUsername = $helper->getLastUsername();
+        $error = $helper->getLastAuthenticationError();
+
+        if ($error instanceof AccountMailNotConfirmedException || $error instanceof AccountMailConfirmedException) {
+            return $this->redirectToRoute('signup_finalize', ['username' => $lastUsername]);
+        }
 
 //        $showInvalidCredentialsHint = false;
 //        $showResendConfirmationLink = false;

diff --git a/src/Form/SignupFormFinalizeType.php b/src/Form/SignupFormFinalizeType.php
@@ -6,20 +6,13 @@
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
-use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
 use Symfony\Component\Form\Extension\Core\Type\DateType;
-use Symfony\Component\Form\Extension\Core\Type\EmailType;
-use Symfony\Component\Form\Extension\Core\Type\PasswordType;
 use Symfony\Component\Form\Extension\Core\Type\RangeType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
-use Symfony\Component\OptionsResolver\OptionsResolver;
-use Symfony\Component\Validator\Constraints\Email;
-use Symfony\Component\Validator\Constraints\IsTrue;
-use Symfony\Component\Validator\Constraints\Length;
+use Symfony\Component\Validator\Constraints\LessThan;
 use Symfony\Component\Validator\Constraints\NotBlank;
 use Symfony\Component\Validator\Constraints\NotNull;
-use Symfony\Component\Validator\Constraints\Regex;
 use Symfony\Contracts\Translation\TranslatorInterface;
 
 class SignupFormFinalizeType extends AbstractType
@@ -64,6 +57,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                     new NotBlank([
                         'message' => 'error.birthdate',
                     ]),
+                    new LessThan('-18years'),
                 ],
             ])
             ->add('gender', ChoiceType::class, [
@@ -124,7 +118,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 'label' => 'signup.label.local_events',
                 'required' => false
             ])
-            ->add('trips_notifications', ChoiceType::class, [
+/*            ->add('trips_notifications', ChoiceType::class, [
                 'label' => 'label.trips_notifications',
                 'help' => 'help.trips_notifications',
                 'expanded' => false,
@@ -139,6 +133,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 ],
                 'required' => false,
             ])
+*/
         ;
     }
 }
diff --git a/src/Model/SignupModel.php b/src/Model/SignupModel.php
@@ -121,7 +121,7 @@ public function updateMember(Member $member, array $data): void
             ->setExplanation(0)
             ->setGettingThere(0)
             ->setStreetName(0)
-            ->setRank(1)
+            ->setRank(0)
             ->setZip(0)
         ;
 

diff --git a/src/Pagerfanta/TranslationAdapter.php b/src/Pagerfanta/TranslationAdapter.php
@@ -41,7 +41,6 @@ public function __construct(Connection $connection, string $locale, string $term
                 ON pi_lang.code = p.code
                 AND pi_lang.shortcode = '{$locale}'
                 AND (pi_lang.isArchived IS NULL OR pi_lang.isArchived = 0)
-            ORDER BY p.created desc
                 ";
         if (!empty($term)) {
             $rawQuery .= " WHERE (p.code LIKE {$term} OR p.Sentence LIKE {$term})";
@@ -53,6 +52,7 @@ public function __construct(Connection $connection, string $locale, string $term
                  , COALESCE(pi_lang.Sentence,pi_dflt.Sentence) AS sentence
                  , COALESCE(pi_lang.created,pi_dflt.created) AS created', $rawQuery);
 
+        $this->query .= "             ORDER BY created desc";
         $this->countQuery = str_replace('*select*', 'COUNT(distinct p.code) AS cnt', $rawQuery);
     }
 

diff --git a/src/Security/AccountMailConfirmedException.php b/src/Security/AccountMailConfirmedException.php
@@ -0,0 +1,23 @@
+<?php
+
+/**
+ * Created by PhpStorm.
+ * User: bla
+ * Date: 24.08.2018
+ * Time: 11:59.
+ */
+
+namespace App\Security;
+
+use Symfony\Component\Security\Core\Exception\CustomUserMessageAccountStatusException;
+
+class AccountMailConfirmedException extends CustomUserMessageAccountStatusException
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getMessageKey(): string
+    {
+        return 'login.mail.confirmed';
+    }
+}
diff --git a/src/Security/UserChecker.php b/src/Security/UserChecker.php
@@ -31,6 +31,7 @@ public function checkPreAuth(UserInterface $user)
     /**
      * @throws AccountExpiredException
      * @throws AccountSuspendedException
+     * @throws AccountMailConfirmedException
      * @throws AccountMailNotConfirmedException
      */
     public function checkPostAuth(UserInterface $user)
@@ -50,5 +51,9 @@ public function checkPostAuth(UserInterface $user)
         if ($user->isNotConfirmedYet()) {
             throw new AccountMailNotConfirmedException();
         }
+
+        if ($user->didConfirmMailAddress()) {
+            throw new AccountMailNotConfirmedException();
+        }
     }
 }
diff --git a/templates/home/home.html.twig b/templates/home/home.html.twig
@@ -237,6 +237,7 @@
 </div>
 {{ encore_entry_script_tags('home') }}
 {{ encore_entry_script_tags('jquery_ui') }}
+{{ encore_entry_script_tags('password/showhide') }}
 <script>
     window.addEventListener("load", function () {
         let locale = document.getElementsByTagName('html')[0].getAttribute('lang');

diff --git a/templates/login_form_navbar.html.twig b/templates/login_form_navbar.html.twig
@@ -6,6 +6,12 @@
         </div>
         <div class="form-label-group my-1 ml-md-1 mr-0 m-lg-1">
             <input class="form-control" type="password" id="_password_1" name="_password" placeholder="{{ 'login.password'|trans }}">
+            <button type="button" id="password_show_hide" class="u-absolute u-text-gray-50 u-border-0 u-bg-white u-h-full u-top-0 u-end-0" style="height: 38px; margin: 1px; background-color: transparent">
+                <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path class="block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+                    <circle class="block" cx="12" cy="12" r="3"></circle>
+                </svg>
+            </button>
             <label for="_password_1">{{ 'password'|trans }}</label>
         </div>
         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
@@ -128,7 +128,15 @@
                                 </div>
                                 <div class="o-form-group">
                                     <label for="login-p">{{ 'password' | trans }}</label>
-                                    <input type="password" id="login-p" name="_password" class="o-input">
+                                    <div class="u-relative">
+                                        <input type="password" id="login-p" name="_password" class="o-input">
+                                        <button type="button" id="password_show_hide" class="u-absolute u-text-gray-50 u-border-0 u-bg-white u-h-full u-top-0 u-end-0" style="height: 38px; margin: 1px; background-color: transparent">
+                                            <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+                                                <circle class="block" cx="12" cy="12" r="3"></circle>
+                                            </svg>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div class="o-checkbox u-flex u-items-center u-my-8">
                                     <input type="checkbox"
@@ -190,5 +198,6 @@
 {% endblock content %}
 {% include 'footer.html.twig' %}
 {{ encore_entry_script_tags('bewelcome') }}
+{{ encore_entry_script_tags('password/showhide') }}
 </body>
 </html>
diff --git a/templates/signup/finalize.html.twig b/templates/signup/finalize.html.twig
@@ -1,7 +1,7 @@
 {% extends 'base-lite.html.twig' %}
 
 {% block javascripts %}
-    {{ encore_entry_script_tags('signup/signup') }}
+    {{ encore_entry_script_tags('signup/finalize') }}
     <script type="application/javascript">
         const accommodation = "{{ finalize.accommodation.vars.full_name }}";
         const markers = [
@@ -21,7 +21,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-    {{ encore_entry_link_tags('signup/signup') }}
+    {{ encore_entry_link_tags('signup/finalize') }}
 {% endblock stylesheets %}
 
 {% block content %}
@@ -109,27 +109,22 @@
     {% do finalize.accommodation.setRendered %}
 
     <div id="hosting_interest" class="
-        {%- if finalize.accommodation.vars.value == finalize.accommodation.children[1].vars.value %}u-block{% else %}u-hidden{% endif -%}
-    ">
+        {%- if finalize.accommodation.vars.value == finalize.accommodation.children[1].vars.value %}u-block{% else %}u-hidden{% endif %} u-mt-8">
         {{ form_label(finalize.hosting_interest) }}
         {{ form_widget(finalize.hosting_interest) }}
         <div class="range text-center u-mt-16">
             <p class="rangeSlider__value-output">{{ 'hosting.interest.set'|trans }}</p>
         </div>
         {{ form_help(finalize.hosting_interest) }}
     </div>
-    <div class="u-flex u-justify-end">
-        <input type="submit" class="o-button" value="{{ 'signup.activate'|trans }}">
+    <div class="u-mt-8">
+        <p class="u-text-18 u-mb-8 u-font-600">{{ 'signup.optional'|trans }}</p>
+        {{ form_row(finalize.newsletters) }}
+        {{ form_row(finalize.local_events) }}
+        {# {{ form_row(finalize.trips_notifications) }}  #}
     </div>
-
-    <p class="u-text-18 u-mb-8">{{ 'signup.optional'|trans }}</p>
-    {{ form_row(finalize.newsletters) }}
-    {{ form_row(finalize.local_events) }}
-    {{ form_row(finalize.trips_notifications) }}
-
-    {{ form_rest(finalize) }}
-    <div class="u-flex u-justify-end">
-        <input type="submit" class="o-button o-button--outline" value="{{ 'signup.activate'|trans }}">
+    <div class="u-flex u-justify-end u-mt-8">
+        <input type="submit" class="o-button" value="{{ 'signup.activate'|trans }}">
     </div>
 
     {{ form_end(finalize) }}

diff --git a/templates/signup/first.step.html.twig b/templates/signup/first.step.html.twig
@@ -5,6 +5,10 @@
     BeWelcome - {{ 'signup' | trans }}
 {% endblock title %}
 
+{% block javascripts %}
+    {{ encore_entry_script_tags('password/showhide') }}
+{% endblock javascripts %}
+
 {% block content %}
     <h1>{{ 'signup'|trans }}</h1>
     {{ form_start(signup, { 'attr': { autocomplete: 'off' } }) }}
@@ -18,7 +22,22 @@
         {{ form_row(signup.email, {'attr': {autofocus: 'autofocus'}}) }}
     {% endif %}
 
-    {{ form_row(signup.password) }}
+    <div class="o-form-group u-mt-8">
+        <label for="{{ signup.password.vars.id }}">{{ signup.password.vars.label|trans }}</label>
+        <div class="u-relative">
+        <input type="password" id="{{ signup.password.vars.id }}"
+               name="{{ signup.password.vars.name }}"
+               placeholder="{{ signup.password.vars.label|trans }}"
+               aria-describedby="{{ signup.password.vars.id }}_help" class="o-input">
+            <button type="button" id="password_show_hide" class="u-absolute u-text-gray-50 u-border-0 u-bg-white u-h-full u-top-0 u-end-0" style="height: 38px; margin: 1px; background-color: transparent">
+                <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path class="block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+                    <circle class="block" cx="12" cy="12" r="3"></circle>
+                </svg>
+            </button>
+        </div>
+        <small id="{{ signup.password.vars.id }}_help" class="form-text text-muted">{{ signup.password.vars.help|trans }}</small></div>
+    {% do signup.password.setRendered %}
 
     {{ form_row(signup.terms_privacy) }}
     <div class="u-flex u-justify-end">

diff --git a/webpack.config.js b/webpack.config.js
@@ -25,7 +25,8 @@ Encore
     .addEntry('bewelcome', './assets/js/bewelcome.js')
     .addEntry('home', './assets/js/home.js')
     .addEntry('jquery_ui', './assets/js/jquery_ui.js')
-    .addEntry('signup/signup', './assets/js/signup.js')
+    .addEntry('password/showhide', './assets/js/password/showhide.js')
+    .addEntry('signup/finalize', './assets/js/signup/finalize.js')
     .addEntry('members/editmyprofile', './assets/js/editmyprofile.js')
     .addEntry('landing', './assets/js/landing/landing.js')
     .addEntry('search/loadpicker', './assets/js/search/loadpicker.js')