Skip to content

Commit 8fcab22

Browse files
committed
Converted a few components
1 parent ea49d67 commit 8fcab22

File tree

7 files changed

+109
-82
lines changed

7 files changed

+109
-82
lines changed

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,14 @@ <h5 header>
7474
<ng-template ngbNavContent>
7575
<ul #subnav="ngbNav" ngbNav [(activeId)]="tocId" class="reader-pills nav nav-pills mb-2" [destroyOnHide]="false">
7676
<li [ngbNavItem]="TabID.TableOfContents">
77-
<a ngbNavLink>ToC</a>
77+
<a ngbNavLink>{{t('toc-header')}}</a>
7878
<ng-template ngbNavContent>
7979
<app-table-of-contents [chapters]="chapters" [chapterId]="chapterId" [pageNum]="pageNum"
8080
[currentPageAnchor]="currentPageAnchor" (loadChapter)="loadChapterPage($event)"></app-table-of-contents>
8181
</ng-template>
8282
</li>
8383
<li [ngbNavItem]="TabID.PersonalTableOfContents">
84-
<a ngbNavLink>Bookmarks</a>
84+
<a ngbNavLink>{{t('bookmarks-header')}}</a>
8585
<ng-template ngbNavContent>
8686
<app-personal-table-of-contents [chapterId]="chapterId" [pageNum]="pageNum" (loadChapter)="loadChapterPart($event)"
8787
[tocRefresh]="refreshPToC"></app-personal-table-of-contents>
@@ -126,7 +126,7 @@ <h5 header>
126126
<div class="action-bar row g-0 justify-content-between" *ngIf="!immersiveMode || drawerOpen || actionBarVisible">
127127
<button class="btn btn-outline-secondary btn-icon col-2 col-xs-1" (click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
128128
[disabled]="readingDirection === ReadingDirection.LeftToRight ? IsPrevDisabled : IsNextDisabled"
129-
title="{{readingDirection === ReadingDirection.LeftToRight ? 'Previous' : 'Next'}} Page">
129+
title="{{readingDirection === ReadingDirection.LeftToRight ? t('previous') : t('next')}} Page">
130130
<i class="fa {{(readingDirection === ReadingDirection.LeftToRight ? IsPrevChapter : IsNextChapter) ? 'fa-angle-double-left' : 'fa-angle-left'}} {{readingDirection === ReadingDirection.RightToLeft ? 'next-page-highlight' : ''}}" aria-hidden="true"></i>
131131
</button>
132132
<button *ngIf="!this.adhocPageHistory.isEmpty()" class="btn btn-outline-secondary btn-icon col-2 col-xs-1" (click)="goBack()" [title]="t('go-back')">
Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
<div class="table-of-contents">
2-
<div *ngIf="Pages.length === 0">
3-
<em>Nothing Bookmarked yet</em>
1+
<ng-container *transloco="let t; read: 'personal-table-of-contents'">
2+
<div class="table-of-contents">
3+
<div *ngIf="Pages.length === 0">
4+
<em>{{t('no-data')}}}</em>
5+
</div>
6+
<ul>
7+
<li *ngFor="let page of Pages">
8+
<span (click)="loadChapterPage(page, '')">{{t('page', {value: page})}}</span>
9+
<ul class="chapter-title">
10+
<li class="ellipsis"
11+
[ngbTooltip]="bookmark.title"
12+
placement="right"
13+
*ngFor="let bookmark of bookmarks[page]" (click)="loadChapterPage(bookmark.pageNumber, bookmark.bookScrollId); $event.stopPropagation();">
14+
{{bookmark.title}}
15+
<button class="btn btn-icon ms-1" (click)="removeBookmark(bookmark); $event.stopPropagation();">
16+
<i class="fa-solid fa-trash" aria-hidden="true"></i>
17+
<span class="visually-hidden">{{t('delete', {bookmarkName: bookmark.title})}}</span>
18+
</button>
19+
</li>
20+
</ul>
21+
</li>
22+
</ul>
423
</div>
5-
<ul>
6-
<li *ngFor="let page of Pages">
7-
<span (click)="loadChapterPage(page, '')">Page {{page}}</span>
8-
<ul class="chapter-title">
9-
<li class="ellipsis"
10-
[ngbTooltip]="bookmark.title"
11-
placement="right"
12-
*ngFor="let bookmark of bookmarks[page]" (click)="loadChapterPage(bookmark.pageNumber, bookmark.bookScrollId); $event.stopPropagation();">
13-
{{bookmark.title}}
14-
<button class="btn btn-icon ms-1" (click)="removeBookmark(bookmark); $event.stopPropagation();">
15-
<i class="fa-solid fa-trash" aria-hidden="true"></i>
16-
<span class="visually-hidden">Delete {{bookmark.title}}</span>
17-
</button>
18-
</li>
19-
</ul>
20-
</li>
21-
</ul>
22-
</div>
24+
</ng-container>

UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {ReaderService} from "../../../_services/reader.service";
1313
import {PersonalToC} from "../../../_models/readers/personal-toc";
1414
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
1515
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
16+
import {TranslocoModule} from "@ngneat/transloco";
1617

1718
export interface PersonalToCEvent {
1819
pageNum: number;
@@ -22,7 +23,7 @@ export interface PersonalToCEvent {
2223
@Component({
2324
selector: 'app-personal-table-of-contents',
2425
standalone: true,
25-
imports: [CommonModule, NgbTooltip],
26+
imports: [CommonModule, NgbTooltip, TranslocoModule],
2627
templateUrl: './personal-table-of-contents.component.html',
2728
styleUrls: ['./personal-table-of-contents.component.scss'],
2829
changeDetection: ChangeDetectionStrategy.OnPush
Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,62 @@
1-
2-
<app-splash-container>
1+
<ng-container *transloco="let t; read: 'confirm-email'">
2+
<app-splash-container>
33
<ng-container title><h2>Register</h2></ng-container>
44
<ng-container body>
5-
<p>Complete the form to complete your registration</p>
6-
<div class="text-danger" *ngIf="errors.length > 0">
7-
<p>Errors:</p>
8-
<ul>
9-
<li *ngFor="let error of errors">{{error}}</li>
10-
</ul>
11-
</div>
12-
<form [formGroup]="registerForm" (ngSubmit)="submit()">
13-
<div class="mb-3">
14-
<label for="username" class="form-label">Username</label>
15-
<input id="username" class="form-control" formControlName="username" type="text"
16-
[class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched">
17-
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
18-
<div *ngIf="registerForm.get('username')?.errors?.required">
19-
This field is required
20-
</div>
21-
</div>
5+
<p>Complete the form to complete your registration</p>
6+
<div class="text-danger" *ngIf="errors.length > 0">
7+
<p>Errors:</p>
8+
<ul>
9+
<li *ngFor="let error of errors">{{error}}</li>
10+
</ul>
11+
</div>
12+
<form [formGroup]="registerForm" (ngSubmit)="submit()">
13+
<div class="mb-3">
14+
<label for="username" class="form-label">{{t('username-label')}}</label>
15+
<input id="username" class="form-control" formControlName="username" type="text"
16+
aria-describeby="inviteForm-username-validations"
17+
[class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched">
18+
<div id="inviteForm-username-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
19+
<div *ngIf="registerForm.get('username')?.errors?.required">
20+
{{t('required-field')}}
2221
</div>
22+
</div>
23+
</div>
2324

24-
<div class="mb-3" style="width:100%">
25-
<label for="email" class="form-label">Email</label>
26-
<input class="form-control" type="email" inputmode="email" id="email" formControlName="email" required readonly
27-
[class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
28-
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
29-
<div *ngIf="registerForm.get('email')?.errors?.required">
30-
This field is required
31-
</div>
32-
<div *ngIf="registerForm.get('email')?.errors?.email">
33-
This must be a valid email address
34-
</div>
35-
</div>
25+
<div class="mb-3" style="width:100%">
26+
<label for="email" class="form-label">{{t('email-label')}}</label>
27+
<input class="form-control" type="email" inputmode="email" id="email" formControlName="email" required readonly
28+
[class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
29+
<div id="inviteForm-email-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
30+
<div *ngIf="registerForm.get('email')?.errors?.required">
31+
{{t('required-field')}}
3632
</div>
37-
38-
<div class="mb-3">
39-
<label for="password" class="form-label">Password</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
40-
<ng-template #passwordTooltip>
41-
Password must be between 6 and 32 characters in length
42-
</ng-template>
43-
<span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
44-
<input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" type="password" aria-describedby="password-help">
45-
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
46-
<div *ngIf="registerForm.get('password')?.errors?.required">
47-
This field is required
48-
</div>
49-
<div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength || registerForm.get('password')?.errors?.pattern">
50-
Password must be between 6 and 32 characters in length
51-
</div>
52-
</div>
33+
<div *ngIf="registerForm.get('email')?.errors?.email">
34+
{{t('valid-email')}}
5335
</div>
54-
55-
<div class="float-end">
56-
<button class="btn btn-secondary alt" type="submit">Register</button>
36+
</div>
37+
</div>
38+
39+
<div class="mb-3">
40+
<label for="password" class="form-label">{{t('password-label')}}</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
41+
<ng-template #passwordTooltip>
42+
{{t('password-validation')}}
43+
</ng-template>
44+
<span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
45+
<input id="password" class="form-control" maxlength="32" minlength="6" pattern="^.{6,32}$" formControlName="password" type="password" aria-describedby="password-help">
46+
<div id="inviteForm-password-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
47+
<div *ngIf="registerForm.get('password')?.errors?.required">
48+
{{t('required-field')}}
5749
</div>
58-
</form>
50+
<div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength || registerForm.get('password')?.errors?.pattern">
51+
{{t('password-validation')}}
52+
</div>
53+
</div>
54+
</div>
55+
56+
<div class="float-end">
57+
<button class="btn btn-secondary alt" type="submit">{{t('register')}}</button>
58+
</div>
59+
</form>
5960
</ng-container>
60-
</app-splash-container>
61+
</app-splash-container>
62+
</ng-container>

UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ import { NavService } from 'src/app/_services/nav.service';
88
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
99
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
1010
import { SplashContainerComponent } from '../splash-container/splash-container.component';
11+
import {TranslocoModule} from "@ngneat/transloco";
1112

1213
@Component({
1314
selector: 'app-confirm-email',
1415
templateUrl: './confirm-email.component.html',
1516
styleUrls: ['./confirm-email.component.scss'],
1617
changeDetection: ChangeDetectionStrategy.OnPush,
1718
standalone: true,
18-
imports: [SplashContainerComponent, NgIf, NgFor, ReactiveFormsModule, NgbTooltip, NgTemplateOutlet]
19+
imports: [SplashContainerComponent, NgIf, NgFor, ReactiveFormsModule, NgbTooltip, NgTemplateOutlet, TranslocoModule]
1920
})
2021
export class ConfirmEmailComponent {
2122
/**
@@ -35,8 +36,8 @@ export class ConfirmEmailComponent {
3536
errors: Array<string> = [];
3637

3738

38-
constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,
39-
private toastr: ToastrService, private themeService: ThemeService, private navService: NavService,
39+
constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,
40+
private toastr: ToastrService, private themeService: ThemeService, private navService: NavService,
4041
private readonly cdRef: ChangeDetectorRef) {
4142
this.navService.hideSideNav();
4243
this.themeService.setTheme(this.themeService.defaultTheme);

UI/Web/src/app/registration/user-login/user-login.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
id="password" type="password" pattern="^.{6,32}$" [placeholder]="t('password')">
1818
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="loginForm.get('password')?.errors?.pattern" >
1919
<div class="" *ngIf="loginForm.get('password')?.errors?.pattern">
20-
{{t('password-validation', {min: 6, max: 32})}}
20+
{{t('password-validation')}}
2121
</div>
2222
</div>
2323
</div>

UI/Web/src/assets/langs/en.json

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"title": "Login",
44
"username": "Username",
55
"password": "Password",
6-
"password-validation": "Password must be between {{min}} and {{max}} characters in length",
6+
"password-validation": "Password must be between 6 and 32 characters in length",
77
"forgot-password": "Forgot Password?",
88
"submit": "{{common.submit}}"
99
},
@@ -605,6 +605,7 @@
605605
"settings-header": "Settings",
606606
"table-of-contents-header": "Table of Contents",
607607
"bookmarks-header": "Bookmarks",
608+
"toc-header": "ToC",
608609

609610
"loading-books": "Loading book...",
610611
"go-back": "Go Back",
@@ -615,6 +616,26 @@
615616

616617
},
617618

619+
"personal-table-of-contents": {
620+
"no-data": "Nothing Bookmarked yet",
621+
"page": "Page {{value}}",
622+
"delete": "Delete {{bookmarkName}}"
623+
},
624+
625+
"confirm-email": {
626+
"title": "Register",
627+
"description": "Complete the form to complete your registration",
628+
"error-label": "Errors: ",
629+
"username-label": "Username",
630+
"password-label": "Password",
631+
"email-label": "{{common.email}}",
632+
"required-field": "{{common.required-field}}",
633+
"valid-email": "{{common.valid-email}}",
634+
"password-validation": "{{login.password-validation}}",
635+
"register": "Register"
636+
637+
},
638+
618639
"validation": {
619640
"required-field": "This field is required",
620641
"valid-email": "This must be a valid email"

0 commit comments

Comments
 (0)