12 |
17 | `,
18 | providers: [RegisterService],
19 | imports: [RegisterFormComponent],
20 | })
21 | export default class RegisterComponent {
22 | public registerService = inject(RegisterService);
23 | private authService = inject(AuthService);
24 | private router = inject(Router);
25 |
26 | constructor() {
27 | effect(() => {
28 | if (this.authService.user()) {
29 | this.router.navigate(['home']);
30 | }
31 | });
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AngularstartChat
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.2.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 |
--------------------------------------------------------------------------------
/src/app/shared/data-access/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, inject } from '@angular/core';
2 | import {
3 | User,
4 | createUserWithEmailAndPassword,
5 | signInWithEmailAndPassword,
6 | signOut,
7 | } from 'firebase/auth';
8 | import { authState } from 'rxfire/auth';
9 | import { Credentials } from '../interfaces/credentials';
10 | import { AUTH } from '../../app.config';
11 | import { toSignal } from '@angular/core/rxjs-interop';
12 |
13 | export type AuthUser = User | null | undefined;
14 |
15 | @Injectable({
16 | providedIn: 'root',
17 | })
18 | export class AuthService {
19 | private auth = inject(AUTH);
20 |
21 | // sources
22 | private authState$ = authState(this.auth);
23 |
24 | // state
25 | user = toSignal(this.authState$);
26 |
27 | async login(credentials: Credentials | undefined) {
28 | if (!credentials) return null;
29 |
30 | return signInWithEmailAndPassword(
31 | this.auth,
32 | credentials.email,
33 | credentials.password,
34 | );
35 | }
36 |
37 | logout() {
38 | signOut(this.auth);
39 | }
40 |
41 | async createAccount(credentials: Credentials | undefined) {
42 | if (!credentials) return null;
43 |
44 | return createUserWithEmailAndPassword(
45 | this.auth,
46 | credentials.email,
47 | credentials.password,
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/home/ui/message-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 | import { MessageListComponent } from './message-list.component';
3 | import { By } from '@angular/platform-browser';
4 |
5 | describe('MessageListComponent', () => {
6 | let component: MessageListComponent;
7 | let fixture: ComponentFixture
16 |
17 |
18 |
21 |
22 |
28 | `,
29 | imports: [
30 | MessageInputComponent,
31 | MessageListComponent,
32 | MatToolbarModule,
33 | MatIconModule,
34 | MatButtonModule,
35 | ],
36 | styles: [
37 | `
38 | .container {
39 | display: flex;
40 | flex-direction: column;
41 | justify-content: space-between;
42 | height: 100%;
43 | }
44 |
45 | mat-toolbar {
46 | box-shadow: 0px -7px 11px 0px var(--accent-color);
47 | }
48 |
49 | app-message-list {
50 | height: 100%;
51 | width: 100%;
52 | }
53 |
54 | app-message-input {
55 | position: fixed;
56 | bottom: 0;
57 | }
58 | `,
59 | ],
60 | })
61 | export default class HomeComponent {
62 | messageService = inject(MessageService);
63 | authService = inject(AuthService);
64 | private router = inject(Router);
65 |
66 | constructor() {
67 | effect(() => {
68 | if (!this.authService.user()) {
69 | this.router.navigate(['auth', 'login']);
70 | }
71 | });
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 | import HomeComponent from './home.component';
3 | import { DebugElement } from '@angular/core';
4 | import { By } from '@angular/platform-browser';
5 | import { MessageService } from '../shared/data-access/message.service';
6 |
7 | describe('HomeComponent', () => {
8 | let component: HomeComponent;
9 | let fixture: ComponentFixture-
11 | @for (message of messages(); track message.created) {
12 |
-
17 | 18 |24 | 30 |
23 |
31 | }
32 |