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

Feature: registration form username plays with placeholder for better UX

This commit is contained in:
nogafam.es Admin 2021-10-21 19:53:29 +02:00
parent d6ba9b04ad
commit d1e0fdaae7
3 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/styles/mastodon/basics.scss
View File

@ -145,6 +145,10 @@ body {
}
}
b, strong {
font-weight: bold;
}
button {
font-family: inherit;
cursor: pointer;

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

@ -383,7 +383,6 @@ code {
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%);
text-align: center;
border: 2px solid #d5d5d5;
border-radius: 4px;
padding: 10px;

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

@ -14,10 +14,10 @@
= 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 }, append: "@#{site_hostname}", hint: t('simple_form.hints.defaults.username', domain: site_hostname)
= 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
.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' }
= 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
.fields-group
= f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off', :minlength => User.password_length.first, :maxlength => User.password_length.last }
@ -41,4 +41,23 @@
.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'