8000 Merge pull request #7 from RKennedy9064/master · json-api-dotnet/TodoListExample@9700898 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9700898

Browse files
author
Bart Koelman
authored
Merge pull request #7 from RKennedy9064/master
Ember Octane refactor
2 parents a9c202b + 27d8dae commit 9700898

File tree

39 files changed

+1005
-1045
lines changed

39 files changed

+1005
-1045
lines changed

‎TodoListClient/app/adapters/application.js

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import JSONAPIAdapter from '@ember-data/adapter/json-api';
2-
import { computed } from '@ember/object';
32
import { inject as service } from '@ember/service';
43
import ENV from 'todo-list-client/config/environment';
54

6-
export default JSONAPIAdapter.extend({
7-
session: service(),
5+
export default class ApplicationAdapter extends JSONAPIAdapter {
6+
@service session;
87

9-
namespace: ENV.APP.namespace,
10-
host: ENV.APP.host,
8+
namespace = ENV.APP.namespace;
9+
host = ENV.APP.host;
1110

12-
headers: computed('session.data.authenticated.token', function() {
13-
let token = this.get('session.data.authenticated.access_token');
11+
get headers() {
12+
let token = this.session.data.authenticated.access_token;
1413
return { Authorization: `Bearer ${token}` };
15-
}),
16-
17-
18-
});
14+
}
15+
}

‎TodoListClient/app/authenticators/oauth2.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
22
import ENV from 'todo-list-client/config/environment';
33

4-
export default OAuth2PasswordGrant.extend({
5-
serverTokenEndpoint: `${ENV.APP.host}/${ENV.APP.tokenPath}`
6-
});
4+
export default class OAuth2Authenticator extends OAuth2PasswordGrant {
5+
serverTokenEndpoint = `${ENV.APP.host}/${ENV.APP.tokenPath}`;
6+
}

‎TodoListClient/app/components/forms/login-form/component.js

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
1-
import Component from '@ember/component';
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
23
import { inject as service } from '@ember/service';
4+
import { tracked } from '@glimmer/tracking';
35

4-
export default Component.extend({
6+
export default class LoginForm extends Component {
7+
@service session;
8+
@service notify;
9+
@service router;
510

6-
session: service(),
7-
notify: service(),
11+
@tracked identification;
12+
@tracked password;
813

9-
actions: {
10-
authenticate() {
11-
let { identification, password } = this;
12-
this.session.authenticate('authenticator:oauth2', identification, password).catch(() => {
13-
this.notify.error('Authentication failed');
14-
});
14+
@action
15+
async authenticate(event) {
16+
event.preventDefault();
17+
try {
18+
await this.session.authenticate(
19+
'authenticator:oauth2',
20+
this.identification,
21+
this.password
22+
);
23+
this.router.transitionTo('s.todo-items');
24+
} catch (error) {
25+
this.notify.error('Authentication failed');
1526
}
16-
},
17-
18-
});
27+
}
28+
}

‎TodoListClient/app/components/forms/login-form/template.hbs

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
<form {{action 'authenticate' on='submit' }}>
2-
<label for="identification">Login</label>
3-
{{input id='identification' placeholder='Enter Login' value=identification}}
4-
<label for="password">Password</label>
5-
{{input id='password' placeholder='Enter Password' type='password' value=password}}
6-
<button type="submit">Login</button>
7-
</form>
1+
<main class="form-signin text-center">
2+
<form {{on 'submit' this.authenticate }}>
3+
<img class="mb-4" src="assets/images/logo.png" alt="" role="presentation" width="108" height="108">
4+
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
5+
<div class="form-floating">
6+
<Input id="identification" @type="text" class="form-control" placeholder="Enter Login"
7+
@value={{this.identification}} autocomplete="username" />
8+
<label for="identification">Login</label>
9+
</div>
10+
<div class="form-floating mb-3">
11+
<Input id="password" @type="password" class="form-control" placeholder="Enter Password" @value={{this.password}}
12+
autocomplete="current-password" />
13+
<label for="password">Password</label>
14+
</div>
15+
<button type="submit" class="w-100 btn btn-lg btn-primary">Login</button>
16+
</form>
17+
</main>

‎TodoListClient/app/components/forms/todo-item-form/component.js

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,44 @@
1-
import Component from '@ember/component';
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
3+
import { inject as service } from '@ember/service';
4+
import Changeset from 'ember-changeset';
5+
import lookupValidator from 'ember-changeset-validations';
6+
import TodoItemValidations from '../../../validations/todo-item';
27

3-
export default Component.extend({
4-
actions: {
5-
save() {
6-
this.saveAction();
8+
export default class TodoItemForm extends Component {
9+
@service notify;
10+
@service router;
11+
12+
constructor() {
13+
super(...arguments);
14+
15+
// Was unable to use the changeset helpr, so I'm constructing the changeset manually.
16+
// Most likely related to this issue, but the fix didn't work.
17+
// https://github.com/poteto/ember-changeset-validations/issues/214
18+
this.changeset = new Changeset(
19+
this.args.todoItem,
20+
lookupValidator(TodoItemValidations),
21+
TodoItemValidations
22+
);
23+
}
24+
25+
@action
26+
async save(event) {
27+
event.preventDefault();
28+
try {
29+
await this.changeset.validate();
30+
31+
if (this.changeset.isValid) {
32+
await this.changeset.save();
33+
this.router.transitionTo('s.todo-items');
34+
} else {
35+
const errors = this.changeset.errors
36+
.map((error) => `${error.validation} <br />`)
37+
.reduce((accumulator, currentValue) => accumulator + currentValue);
38+
this.notify.error({ html: errors });
39+
}
40+
} catch (error) {
41+
this.notify.error('Failed to create item');
742
}
843
}
9-
});
44+
}

‎TodoListClient/app/components/forms/todo-item-form/template.hbs

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
<form {{action "save" on="submit"}}>
2-
{{input placeholder="description" value=todoItem.description}}
3-
<br />
4-
{{#if todoItem.validations.isValid}}
5-
<button type="submit">Add</button>
6-
{{else}}
7-
<button type="submit" disabled>Add</button>
8-
{{/if}}
9-
</form>
1+
<h1>New Todo Item</h1>
2+
<form {{on "submit" this.save}}>
3+
<div class="mb-3">
4+
<label for="description" class="form-label">Description</label>
5+
<Input id="description" class="form-control" placeholder="description" @value={{@todoItem.description}} />
6+
</div>
7+
<button class="btn btn-primary" type="submit">Add Todo Item</button>
8+
</form>

‎TodoListClient/app/components/login-buttons.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎TodoListClient/app/components/navbar.hbs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<nav class="navbar navbar-light bg-light">
2+
<div class="container-fluid">
3+
<span class="navbar-brand">
4+
Todo List Client
5+
</span>
6+
<div class="d-flex">
7+
<a href="#" {{on "click" @invalidateSession B3F6 }} class="btn btn-outline-primary">Logout</a>
8+
</div>
9+
</div>
10+
</nav>

‎TodoListClient/app/controllers/.gitkeep

Whitespace-only changes.

‎TodoListClient/app/controllers/application.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Controller from '@ember/controller';
2+
import { inject as service } from '@ember/service';
3+
import { action } from '@ember/object';
4+
5+
export default class ApplicationController extends Controller {
6+
@service session;
7+
8+
@action
9+
invalidateSession() {
10+
this.session.invalidate();
11+
}
12+
}

0 commit comments

Comments
 (0)
0