feat(demo): added translations #226 #76

Author: AnthonyNahas

demo/angular.json

@@ -32,9 +32,15 @@
             ],
             "styles": [
               "src/styles.scss",
-              "node_modules/material-design-icons/iconfont/material-icons.css"
+              "node_modules/material-design-icons/iconfont/material-icons.css",
+              "node_modules/prismjs/themes/prism-okaidia.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/marked/lib/marked.js",
+              "node_modules/prismjs/prism.js",
+              "node_modules/prismjs/components/prism-typescript.min.js",
+              "node_modules/prismjs/components/prism-css.min.js"
+            ]
           },
           "configurations": {
             "hmr": {

demo/package-lock.json

@@ -57,6 +57,7 @@
     "material-design-icons": "^3.0.1",
     "ngx-clipboard": "^11.1.9",
     "ngx-highlightjs": "^3.0.3",
+    "ngx-markdown": "^7.1.5",
     "rxjs": "^6.5.2",
     "svg-country-flags": "^1.2.6",
     "tslib": "^1.9.3",

demo/package.json

@@ -23,6 +23,7 @@ import xml from 'highlight.js/lib/languages/xml';
 import {MatPagesModule} from '@angular-material-extensions/pages';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {MarkdownModule} from 'ngx-markdown';
 
 export function hljsLanguages() {
   return [
@@ -68,6 +69,7 @@ export function createTranslateLoader(http: HttpClient) {
     HighlightModule.forRoot({
       languages: hljsLanguages
     }),
+    MarkdownModule.forRoot({loader: HttpClient}),
     MatPagesModule.forRoot(),
     ClipboardModule,
     BrowserAnimationsModule,

demo/src/app/app.module.ts

@@ -62,4 +62,11 @@ <h1>Languages and i18n</h1>
       </ngx-auth-firebaseui>
     </mat-card>
   </div>
+
+  <mat-card class="my-3">
+    <mat-card-content>
+      <markdown src="assets/md/i18n/html.md"></markdown>
+    </mat-card-content>
+  </mat-card>
+
 </div>

demo/src/app/i18n/i18n.component.html

@@ -39,6 +39,11 @@ export class I18nComponent implements OnInit {
         id: 'fr',
         title: 'French',
         flag: 'fr'
+      },
+      {
+        id: 'es',
+        title: 'Española',
+        flag: 'es'
       }
     ];
 

demo/src/app/i18n/i18n.component.ts

@@ -7,12 +7,14 @@ import {I18nRoutingModule} from './i18n-routing.module';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {createTranslateLoader} from '../app.module';
 import {HttpClient} from '@angular/common/http';
+import {MarkdownModule} from 'ngx-markdown';
 
 @NgModule({
   declarations: [I18nComponent],
   imports: [
     CommonModule,
     I18nRoutingModule,
+    MarkdownModule.forChild(),
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

demo/src/app/i18n/i18n.module.ts

@@ -0,0 +1,28 @@
+```html
+<ngx-auth-firebaseui
+        [signInTabText]="'ngxauthfirebaseui.signInTabText' | translate"
+        [signInCardTitleText]="'ngxauthfirebaseui.signInCardTitleText' | translate"
+        [loginButtonText]="'ngxauthfirebaseui.loginButtonText' | translate"
+        [forgotPasswordButtonText]="'ngxauthfirebaseui.forgotPasswordButtonText' | translate"
+        [nameText]="'ngxauthfirebaseui.nameText' | translate"
+        [nameErrorRequiredText]="'ngxauthfirebaseui.nameErrorRequiredText' | translate"
+        [nameErrorMinLengthText]="'ngxauthfirebaseui.nameErrorMinLengthText' | translate"
+        [nameErrorMaxLengthText]="'ngxauthfirebaseui.nameErrorMaxLengthText' | translate"
+        [emailText]="'ngxauthfirebaseui.emailText' | translate"
+        [emailErrorRequiredText]="'ngxauthfirebaseui.emailErrorRequiredText' | translate"
+        [emailErrorPatternText]="'ngxauthfirebaseui.emailErrorPatternText' | translate"
+        [passwordText]="'ngxauthfirebaseui.passwordText' | translate"
+        [passwordErrorRequiredText]="'ngxauthfirebaseui.passwordErrorRequiredText' | translate"
+        [registerTabText]="'ngxauthfirebaseui.registerTabText' | translate"
+        [registerCardTitleText]="'ngxauthfirebaseui.registerCardTitleText' | translate"
+        [registerButtonText]="'ngxauthfirebaseui.registerButtonText' | translate"
+        [guestButtonText]="'ngxauthfirebaseui.guestButtonText' | translate"
+        [resetPasswordTabText]="'ngxauthfirebaseui.resetPasswordTabText' | translate"
+        [resetPasswordInputText]="'ngxauthfirebaseui.resetPasswordInputText' | translate"
+        [resetPasswordErrorRequiredText]="'ngxauthfirebaseui.resetPasswordErrorRequiredText' | translate"
+        [resetPasswordErrorPatternText]="'ngxauthfirebaseui.resetPasswordErrorPatternText' | translate"
+        [resetPasswordActionButtonText]="'ngxauthfirebaseui.resetPasswordActionButtonText' | translate"
+        [resetPasswordInstructionsText]="'ngxauthfirebaseui.resetPasswordInstructionsText' | translate"
+      >
+      </ngx-auth-firebaseui>
+```