From fbb5681fcdfc499909e77a02e9f1166ab2a71a16 Mon Sep 17 00:00:00 2001
From: akavm <max.henze@student.uni-halle.de>
Date: Thu, 17 Dec 2020 12:26:40 +0100
Subject: [PATCH] Actions
---
week03/app/controllers/login.js | 18 ++++++++++++++++++
week03/app/templates/login.hbs | 18 +++++++++++-------
2 files changed, 29 insertions(+), 7 deletions(-)
diff --git a/week03/app/controllers/login.js b/week03/app/controllers/login.js
index c350627..fc36cad 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 c32a3ed..1f2db56 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>
--
GitLab