diff --git a/week03/app/controllers/login.js b/week03/app/controllers/login.js index c350627fc13a7df4ca32b3c29d0ae88aa8668cdb..fc36cade9cf850ae0da69f084f1e49682d05dca6 100644 --- a/week03/app/controllers/login.js +++ b/week03/app/controllers/login.js @@ -1,7 +1,25 @@ import Controller from '@ember/controller'; import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object' export default class LoginController extends Controller { @tracked email = ''; @tracked password = ''; + @tracked loginInvalid = false; + classLabel = 'is-invalid-label'; + + @action + login(event) { + event.preventDefault(); + if(this.email === 'test@example.com' && this.password === 'password') { + this.loginInvalid = false; + } else { + this.loginInvalid = true; + } + } + + @action + typing() { + this.loginInvalid = false; + } } diff --git a/week03/app/templates/login.hbs b/week03/app/templates/login.hbs index c32a3ed23708b769291a57d14d7482c5e6d54833..1f2db562278b0cf9c46cb220e5fde78b592ce070 100644 --- a/week03/app/templates/login.hbs +++ b/week03/app/templates/login.hbs @@ -1,14 +1,18 @@ <div class="grid-x grid-padding-x"> - <form class="cell large-2 large-offset-5"> + <form class="cell large-2 large-offset-5" {{on "submit" this.login}}> <div class="callout"> <h1>Login</h1> - <label>E-Mail - <Input type="email" @value={{this.email}} /> - <span class="form-error is-visible">No user exists with this e-mail address {{this.email}} or the password is not correct.</span> + <label class={{if loginInvalid this.classLabel}}>E-Mail + <Input type="email" @value={{this.email}} class={{if loginInvalid this.classInput}} {{on "keypress" this.typing}}/> + {{#if loginInvalid}} + <span class="form-error is-visible">No user exists with the e-mail address {{this.email}} or the password is incorrect.</span> + {{/if}} </label> - <label>Password - <Input type="password" @value={{this.password}} /> - <span class="form-error is-visible">No user exists with this e-mail address {{this.email}} or the password is not correct.</span> + <label class={{if loginInvalid this.classLabel}}>Password + <Input type="password" @value={{this.password}} class={{if loginInvalid this.classInput}} {{on "keypress" this.typing}} /> + {{#if loginInvalid}} + <span class="form-error is-visible">No user exists with the e-mail address {{this.email}} or the password is incorrect.</span> + {{/if}} </label> <div class="text-right"> <button class="button">Login</button>