Improved UX of registration form

* Make checkboxes bigger

* Change messages to adapt to "Instante"'s needs

* Add custom placeholder on username depending on language + region
  It replaces the previous js implementation, which is just worse
  Hopefully it's more clear now

app/javascript/styles/mastodon/forms.scss

@@ -536,10 +536,27 @@ code {
       position: relative;
     }
 
+    input#user_account_attributes_username {
+      padding-left: 1.5em;
+    }
+
+    input[type="checkbox"] {
+      margin: 0;
+      width: 1.5em;
+      height: 1.5em;
+      cursor: pointer;
+    }
+
+    &__append.left {
+      right: initial !important;
+      padding: 10px 0;
+      padding-left: 10px;
+    }
+
     &__append {
       position: absolute;
       right: 3px;
-      top: 1px;
+      top: .2em;
       padding: 10px;
       padding-bottom: 9px;
       font-size: 16px;
@@ -547,7 +564,6 @@ code {
       font-family: inherit;
       pointer-events: none;
       cursor: default;
-      max-width: 140px;
       white-space: nowrap;
       overflow: hidden;
 
@@ -559,7 +575,6 @@ code {
         right: 0;
         bottom: 1px;
         width: 5px;
-        background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
       }
     }
   }

app/views/auth/registrations/new.html.haml

@@ -14,7 +14,7 @@
 
   = f.simple_fields_for :account do |ff|
     .fields-group
-      = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 30, onkeyup: "return window.playWithHandle(this)"}, append: "<b>pablo</b>@#{site_hostname}", hint: false
+      = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 20, placeholder: t('simple_form.labels.defaults.username_placeholder') || 'username' }, append: "@#{site_hostname}</div><div class=\"label_input__append left\">@", hint: false
 
   .fields-group
     = f.input :email, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false
@@ -41,23 +41,4 @@
   .actions
     = f.button :button, @invite.present? ? t('auth.register') : sign_up_message, type: :submit
 
-:javascript
-  var originalHandle = null;
-  function playWithHandle(e) {
-    const inputValue   = e.value.trim();
-    const placeHolder  = e.parentElement.querySelector('.label_input__append');
-    var placeHolderStr = placeHolder.innerHTML.trim();
-    if (originalHandle === null)
-      originalHandle = placeHolderStr;
-    if (inputValue === '') {
-      if (originalHandle === null)
-        return;
-      placeHolder.innerHTML = originalHandle;
-      console.log('empty');
-    } else if (placeHolderStr.substr(0,1) !== '@') {
-      placeHolderStr = placeHolderStr.substr(placeHolderStr.indexOf('@'));
-      placeHolder.innerHTML = placeHolderStr;
-    }
-  }
-
 .form-footer= render 'auth/shared/links'

config/locales/simple_form.es-AR.yml

@@ -71,7 +71,7 @@ es-AR:
       imports:
         data: Archivo CSV exportado desde otro servidor de Instante
       invite_request:
-        text: Esto nos ayudará a revisar tu solicitud
+        text: Nos ayudará a decidir sobre tu solicitud
       ip_block:
         comment: Opcional. Acordate por qué agregaste esta regla.
         expires_in: Las direcciones IP son un recurso finito, a veces se comparten y cambian de personas frecuentemente. Por esta razón, no se recomiendan bloqueos indefinidos de direcciones IP.
@@ -175,6 +175,7 @@ es-AR:
         sign_in_token_attempt: Código de seguridad
         type: Tipo de importación
         username: Nombre de usuario
+        username_placeholder: pabloO_32
         username_or_email: Nombre de usuario o correo electrónico
         whole_word: Palabra entera
       email_domain_block:
@@ -188,7 +189,7 @@ es-AR:
       invite:
         comment: Comentar
       invite_request:
-        text: "¿Por qué querés unirte?"
+        text: "¿Cómo conocistes Instante?"
       ip_block:
         comment: Comentario
         ip: Dirección IP

config/locales/simple_form.es-MX.yml

@@ -70,7 +70,7 @@ es-MX:
       imports:
         data: Archivo CSV exportado desde otra instancia de Instante
       invite_request:
-        text: Esto nos ayudará a revisar su aplicación
+        text: Nos ayudará a decidir sobre tu solicitud
       ip_block:
         comment: Opcional. Recuerda por qué has añadido esta regla.
         expires_in: Las direcciones IP son un recurso finito, a veces se comparten y a menudo cambian de manos. Por esta razón, no se recomiendan bloqueos de IP indefinida.
@@ -175,6 +175,7 @@ es-MX:
         type: Importar tipo
         username: Nombre de usuario
         username_or_email: Usuario o Email
+        username_placeholder: juan_N54
         whole_word: Toda la palabra
       email_domain_block:
         with_dns_records: Incluye los registros MX y las IP del dominio
@@ -187,7 +188,7 @@ es-MX:
       invite:
         comment: Comentar
       invite_request:
-        text: "¿Por qué quiere unirse usted?"
+        text: "¿Cómo conociste Instante?"
       ip_block:
         comment: Comentario
         ip: IP

config/locales/simple_form.es.yml

@@ -71,7 +71,7 @@ es:
       imports:
         data: Archivo CSV exportado desde otra instancia de Instante
       invite_request:
-        text: Esto nos ayudará a revisar su aplicación
+        text: Nos ayudará a decidir sobre tu solicitud
       ip_block:
         comment: Opcional. Recuerda por qué has añadido esta regla.
         expires_in: Las direcciones IP son un recurso finito, a veces se comparten y a menudo cambian de manos. Por esta razón, no se recomiendan bloqueos de IP indefinida.
@@ -175,6 +175,7 @@ es:
         sign_in_token_attempt: Código de seguridad
         type: Importar tipo
         username: Nombre de usuario
+        username_placeholder: martaA_94
         username_or_email: Usuario o Email
         whole_word: Toda la palabra
       email_domain_block:
@@ -188,7 +189,7 @@ es:
       invite:
         comment: Comentar
       invite_request:
-        text: "¿Por qué quiere unirse usted?"
+        text: "¿Cómo conociste Instante?"
       ip_block:
         comment: Comentario
         ip: IP