Commit 53cad95
Changed files (4)
app
javascript
controllers
views
registrations
spec
fixtures
javascripts
controllers
app/javascript/controllers/input_controller.js
@@ -27,12 +27,12 @@ export default class extends ApplicationController {
return this.displayError(I18n.translate('js.form.errors.invalid'));
}
- const minLength = element.getAttribute('minLength');
+ const minLength = element.getAttribute('minlength');
if (minLength && element.value.length < parseInt(minLength, 10)) {
return this.displayError(I18n.translate('js.form.errors.too_short'));
}
- const maxLength = element.getAttribute('maxLength');
+ const maxLength = element.getAttribute('maxlength');
if (maxLength && element.value.length > parseInt(maxLength, 10)) {
return this.displayError(I18n.translate('js.form.errors.too_long'));
}
@@ -46,29 +46,29 @@ export default class extends ApplicationController {
}
hideError() {
- this.element.classList.remove('input--state-danger');
-
- const { parentElement } = this.element;
- super.hide(parentElement.querySelector('.help-block'));
-
- const textElement = parentElement.querySelector('.help-block__text');
- textElement.classList.remove('help-block__text--state-danger');
- if (textElement) textElement.textContent = '';
-
this.data.set('valid', true);
+ this.element.classList.remove('is-danger');
+ const controlElement = this.element.parentElement;
+ const fieldElement = controlElement.parentElement;
+ const helpElement = fieldElement.querySelector('.help');
+ if (helpElement) {
+ helpElement.textContent = '';
+ helpElement.classList.remove('is-danger');
+ super.hide(helpElement);
+ }
}
displayError(message) {
- this.element.classList.add('input--state-danger');
-
- const { parentElement } = this.element;
- super.show(parentElement.querySelector('.help-block'));
-
- const textElement = parentElement.querySelector('.help-block__text');
- textElement.classList.add('help-block__text--state-danger');
- if (textElement) textElement.textContent = message;
-
this.data.set('valid', false);
super.disable(this.submitButton);
+ this.element.classList.add('is-danger');
+ const controlElement = this.element.parentElement;
+ const fieldElement = controlElement.parentElement;
+ const helpElement = fieldElement.querySelector('.help');
+ if (helpElement) {
+ helpElement.textContent = message;
+ helpElement.classList.add('is-danger');
+ super.show(helpElement);
+ }
}
}
app/views/registrations/new.html.erb
@@ -7,14 +7,23 @@
<div class="field">
<%= form.label :email %>
<div class="control">
- <%= form.email_field :email, class: 'input', autofocus: true, required: :required %>
+ <%= form.email_field :email, class: 'input', autofocus: true, required: :required, data: { controller: 'input', action: 'keyup->input#changed' } %>
</div>
+ <p class="help"></p>
</div>
<div class="field">
<%= form.label :password %>
<div class="control">
- <%= form.password_field :password, class: 'input', required: :required %>
+ <%= form.password_field :password, class: 'input', required: :required, maxlength: 50, minlength: 8, data: { controller: 'input', action: 'keyup->input#changed' } %>
</div>
+ <p class="help"></p>
+ </div>
+ <div class="field">
+ <%= form.label :password_confirmation %>
+ <div class="control">
+ <%= form.password_field :password_confirmation, class: 'input', data: { controller: 'input', action: 'keyup->input#changed', is_equal_to: '#user_password' } %>
+ </div>
+ <p class="help"></p>
</div>
<div class="field is-grouped is-grouped-right">
<div class="control">
spec/fixtures/input.html
@@ -1,13 +1,44 @@
<form action="#">
- <div>
- <input type="text" id="name" data-controller='input' data-action='keyup->input#changed' required="required" minLength=3 maxLength=9 />
- <div id='name-help-block' class="help-block">
- <span id=name-error class='help-block__text'></span>
+ <div class="field">
+ <label for="name">Name</label>
+ <div class="control">
+ <input type="text" id="name" class='input' data-controller='input' data-action='keyup->input#changed' required="required" minlength=3 maxlength=9 />
</div>
+ <p id='name-help' class="help"></p>
+ </div>
+ <div class="field">
+ <label for="email">email</label>
+ <div class="control">
+ <input type="email" id="email" class='input' data-controller='input' data-action='keyup->input#changed' required="required">
+ </div>
+ <p class="help"></p>
+ </div>
+ <div class="field">
+ <div class="control">
+ <label class="checkbox">
+ <input type="checkbox" id="accept" data-controller='input' data-action='keyup->input#changed' required="required">
+ </label>
+ </div>
+ <p class="help"></p>
+ </div>
+ <div class="field">
+ <label for="password">password</label>
+ <div class="control">
+ <input type="password" id="password" class='input' data-controller='input' data-action='keyup->input#changed' required="required">
+ </div>
+ <p class="help"></p>
+ </div>
+ <div class="field">
+ <label for="password_confirmation">password confirmation</label>
+ <div class="control">
+ <input type="password" id="password_confirmation" class='input' data-controller='input' data-action='keyup->input#changed' required="required" data-is-equal-to="#password">
+ </div>
+ <p class="help"></p>
+ </div>
+ <div class="field">
+ <div class="control">
+ <button type="submit" id="submit-button">submit</button>
+ </div>
+ <p class="help"></p>
</div>
- <input type="email" id="email" data-controller='input' data-action='keyup->input#changed' required="required">
- <input type="checkbox" id="accept" data-controller='input' data-action='keyup->input#changed' required="required">
- <input type="password" id="password" data-controller='input' data-action='keyup->input#changed' required="required">
- <input type="password" id="password_confirmation" data-controller='input' data-action='keyup->input#changed' required="required" data-is-equal-to="#password">
- <button type="submit" id="submit-button">submit</button>
</form>
spec/javascripts/controllers/input.spec.js
@@ -20,15 +20,15 @@ describe('input', () => {
const nameElement = document.querySelector('#name')
nameElement.value = ''
nameElement.dispatchEvent(new Event('keyup'));
+ expect(nameElement.classList.contains('is-danger')).toEqual(true);
- const errorElement = document.querySelector('#name-error')
- expect(errorElement.textContent).toEqual('is required')
-
- const helpElement = document.querySelector('#name-help-block')
+ const helpElement = document.querySelector('#name-help')
+ expect(helpElement.textContent).toEqual('is required')
expect(helpElement.classList.contains('hide')).toEqual(false)
+ expect(helpElement.classList.contains('is-danger')).toEqual(true)
});
- it("disables the submit button, one one field is valid and the other is not", () => {
+ it("disables the submit button, when one field is valid and the other is not", () => {
let nameElement = document.querySelector('#name');
nameElement.value = '';
nameElement.dispatchEvent(new Event('keyup'));
@@ -119,10 +119,9 @@ describe('input', () => {
nameElement.value = 'Tsuyoshi';
nameElement.dispatchEvent(new Event('keyup'));
- const helpElement = document.querySelector('#name-help-block')
+ const helpElement = document.querySelector('#name-help')
+ expect(helpElement.textContent).toEqual('')
expect(helpElement.classList.contains('hide')).toEqual(true)
-
- const errorElement = document.querySelector('#name-error')
- expect(errorElement.textContent).toEqual('')
+ expect(helpElement.classList.contains('is-danger')).toEqual(false)
});
});