Аутентификация Firebase и Angular с Auth0: Часть 2

Примечание. Вы можете заметить, что мы не установили error в false в методе успеха для наших собак или наблюдаемых собак, но мы делаем это здесь. Поток комментариев выдает значение каждый раз, когда любой пользователь добавляет комментарий в режиме реального времени. Поэтому в ответ может потребоваться асинхронно сбросить статус ошибки.

_onError() обработчик _onError() должен выглядеть очень знакомым из наших других компонентов. Он устанавливает свойства loading и error и выдает ошибку.

Метод onPostComment() будет запущен, когда пользователь отправит комментарий, используя компонент формы комментария (который мы вскоре создадим). onPostComment() нагрузка onPostComment() будет содержать экземпляр Comment содержащий данные комментария пользователя, которые затем необходимо развернуть в обычный объект, чтобы сохранить в Firestore. Мы сохраним развернутый объект комментария, используя метод Angular Firestore add() .

Метод canDeleteComment() проверяет, является ли текущий пользователь владельцем данного комментария. Если они создали комментарий, они также могут удалить его. Этот метод проверяет, что свойство userProfile.sub зарегистрированного пользователя соответствует uid комментария.

Метод deleteComment() будет запущен, когда пользователь deleteComment() значок, чтобы удалить комментарий. Этот метод открывает диалоговое окно подтверждения, которое подтверждает действие и, если оно подтверждено, использует аргумент id для удаления правильного документа комментария из коллекции Firestore. (Вот почему нам нужно было добавить id документов в наши данные, когда мы отобразили значения, испускаемые нашими comments$ observable.)

Примечание. Напомним, что наши правила Firestore также запрещают пользователям удалять комментарии, которые они не создавали. Мы всегда должны обеспечивать соблюдение прав доступа как на передней, так и на внутренней стороне для обеспечения надлежащей безопасности.

Шаблон компонента комментариев

Теперь давайте добавим функциональность нашего класса для работы в пользовательском интерфейсе. Откройте файл comments.component.html и добавьте:

 <!-- src/app/comments/comments/comments.component.html --> <section class="comments py-3"> <h3>Comments</h3> <ng-template #noComments> <p class="lead" *ngIf="loading"> <app-loading [inline]="true"></app-loading>Loading comments... </p> <app-error *ngIf="error"></app-error> </ng-template> <div *ngIf="comments$ | async; let commentsList; else noComments"> <ul class="list-unstyled"> <li *ngFor="let comment of commentsList" class="pt-2"> <div class="row mb-1"> <div class="col"> <img [src]="comment.picture" class="avatar rounded"> <strong>{{ comment.user }}</strong> <small class="text-info">{{ comment.timestamp | date:'short' }}</small> <strong> <a *ngIf="canDeleteComment(comment.uid)" class="text-danger" title="Delete" (click)="deleteComment(comment.id)">&times;</a> </strong> </div> </div> <div class="row"> <div class="col"> <p class="comment-text rounded p-2 my-2" [innerHTML]="comment.text"></p> </div> </div> </li> </ul> <div *ngIf="auth.loggedInFirebase; else logInToComment"> <app-comment-form (postComment)="onPostComment($event)"></app-comment-form> </div> <ng-template #logInToComment> <p class="lead" *ngIf="!auth.loggedIn"> Please <a class="text-primary" (click)="auth.login()">log in</a> to leave a comment. </p> </ng-template> </div> </section> 

В основном мы будем использовать классы Bootstrap для стилизации наших комментариев с небольшим количеством пользовательских CSS, которые мы добавим дальше. Наш шаблон комментариев, как и наши шаблоны компонентов dog и dog, имеет <ng-template> и использует асинхронный канал с NgIfElse для отображения соответствующего пользовательского интерфейса.

Список комментариев должен содержать изображение комментария (аватар пользователя и его автора), имя пользователя и отметку timestamp отформатированную с помощью DatePipe . Мы передадим uid комментария в метод canDeleteComment() чтобы определить, должна ли быть показана ссылка для удаления. Затем мы отобразим text комментария, используя привязку свойства к innerHTML .

Наконец, мы создадим элементы, чтобы показать форму комментария или сообщение, инструктирующее пользователей войти в систему, если они хотят оставить комментарий.

Примечание. Наша <app-comment-form> будет использовать привязку события для postComment события с именем postComment когда пользователь отправляет комментарий. Класс CommentsComponent прослушивает это событие и обрабатывает его с помощью onPostComment() который мы создали, используя полезную нагрузку $event для сохранения отправленного комментария в базу данных Firestore. Мы подключим событие (postComment) при создании формы в следующем разделе.

Компонент комментариев CSS

Наконец, откройте файл comments.component.css и добавим несколько стилей в наш список комментариев:

 /* src/app/comments/comments/comments.component.css */ .avatar { display: inline-block; height: 30px; } .comment-text { background: #eee; position: relative; } .comment-text::before { border-bottom: 10px solid #eee; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ''; display: block; height: 1px; position: absolute; top: -10px; left: 9px; width: 1px; } 

Компонент формы комментария

Теперь, когда у нас есть список комментариев, которые обновляются в режиме реального времени, мы должны иметь возможность добавлять новые комментарии в наш интерфейс.

 // src/app/comments/comment-form/comment-form.component.ts import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { Comment } from './../../comment'; import { AuthService } from '../../../auth/auth.service'; @Component({ selector: 'app-comment-form', templateUrl: './comment-form.component.html' }) export class CommentFormComponent implements OnInit { @Output() postComment = new EventEmitter<Comment>(); commentForm: Comment; constructor(private auth: AuthService) { } ngOnInit() { this._newComment(); } private _newComment() { this.commentForm = new Comment( this.auth.userProfile.name, this.auth.userProfile.sub, this.auth.userProfile.picture, '', null); } onSubmit() { this.commentForm.timestamp = new Date().getTime(); this.postComment.emit(this.commentForm); this._newComment(); } } 

 <!-- src/app/comments/comment-form/comment-form.component.html --> <form (ngSubmit)="onSubmit()" #tplForm="ngForm"> <div class="row form-inline m-1"> <input type="text" class="form-control col-sm-10 mb-2 mb-sm-0" name="text" [(ngModel)]="commentForm.text" maxlength="200" required> <button class="btn btn-primary col ml-sm-2" [disabled]="!tplForm.valid">Send</button> </div> </form>