nogafam
/
instante-social
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
nogafam.es Admin 2021-10-21 20:41:08 +02:00
parent d1e0fdaae7
commit 2f1401cfa4
5 changed files with 28 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/javascript/styles/mastodon/forms.scss
View File

@ -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%));
}
}
}

21
app/views/auth/registrations/new.html.haml
View File

@ -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'

5
config/locales/simple_form.es-AR.yml
View File

@ -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

5
config/locales/simple_form.es-MX.yml
View File

@ -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

5
config/locales/simple_form.es.yml
View File

@ -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