From 8a7716c85e23bbfc1f4f072b2feb10a4d14513b7 Mon Sep 17 00:00:00 2001 From: Anthony Nahas Date: Sun, 16 Feb 2020 20:37:21 +0100 Subject: [PATCH] fix(demo): added getting started component --- package-lock.json | 17 + package.json | 1 + .../getting-started-routing.module.ts | 11 + .../getting-started.component.html | 793 ++++++++++++++++++ .../getting-started.component.scss | 63 ++ .../getting-started.component.spec.ts | 25 + .../getting-started.component.ts | 191 +++++ .../getting-started/getting-started.module.ts | 45 + 8 files changed, 1146 insertions(+) create mode 100755 src/app/getting-started/getting-started-routing.module.ts create mode 100755 src/app/getting-started/getting-started.component.html create mode 100755 src/app/getting-started/getting-started.component.scss create mode 100755 src/app/getting-started/getting-started.component.spec.ts create mode 100755 src/app/getting-started/getting-started.component.ts create mode 100755 src/app/getting-started/getting-started.module.ts diff --git a/package-lock.json b/package-lock.json index 66426e4e..fce55d35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13337,6 +13337,15 @@ } } }, + "ngx-clipboard": { + "version": "12.3.1", + "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-12.3.1.tgz", + "integrity": "sha512-qrUmkfYXEBQZQ4wNKno8yw5eOSxtdkzCPFFPil/XVVc93MNIKUme8aLbS3TEMB4PGsxopjbuTAzV7fptiSOIww==", + "requires": { + "ngx-window-token": "^2.0.0", + "tslib": "^1.9.0" + } + }, "ngx-markdown": { "version": "8.2.2", "resolved": "https://registry.npmjs.org/ngx-markdown/-/ngx-markdown-8.2.2.tgz", @@ -13349,6 +13358,14 @@ "tslib": "^1.9.0" } }, + "ngx-window-token": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ngx-window-token/-/ngx-window-token-2.0.1.tgz", + "integrity": "sha512-rvqdqJEfnWXQFU5fyfYt06E10tR/UtFOYdF3QebfcOh5VIJhnTKiprX8e4B9OrX7WEVFm9BT8uV72xXcEgsaKA==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index 74302574..2692f7f5 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "angulartics2": "^8.3.0", "express": "^4.15.2", "firebase": "^7.8.2", + "ngx-clipboard": "^12.3.1", "ngx-markdown": "^8.2.2", "rxjs": "~6.5.4", "tslib": "^1.10.0", diff --git a/src/app/getting-started/getting-started-routing.module.ts b/src/app/getting-started/getting-started-routing.module.ts new file mode 100755 index 00000000..74bda036 --- /dev/null +++ b/src/app/getting-started/getting-started-routing.module.ts @@ -0,0 +1,11 @@ +import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { GettingStartedComponent } from './getting-started.component'; + +@NgModule({ + imports: [RouterModule.forChild([ + { path: '', component: GettingStartedComponent } + ])], + exports: [RouterModule] + }) +export class GettingStartedRoutingModule {} \ No newline at end of file diff --git a/src/app/getting-started/getting-started.component.html b/src/app/getting-started/getting-started.component.html new file mode 100755 index 00000000..a4bef952 --- /dev/null +++ b/src/app/getting-started/getting-started.component.html @@ -0,0 +1,793 @@ +
+
+

Getting Started

+
+
+ +
+
+ + + + + + + + Please make sure that you have NodeJS + and + npm + running on your machine in order to be able to develop some wonderful apps. + + + + +
+ $ node -v +
+ + + + + + + +
+ + + + + If they are not already downloaded, please install Node.js and npm + + + + + Check if angular cli is already installed globally + + +
+
+ $ ng -v +
+ + +
+

If angular cli is installed on you machine, you should get something like this

+ + + +

If not please run the following command to install angular cli globally in order to create an angular + project

+ +
+
+ $ npm install -g @angular/cli +
+ + +
+ + + + + + + + + + + + Time to begin with Angular +

If you have already a setup angular project, you can skip this step, otherwise you can generate a project + via the angular cli by running the following

+
+
+ $ ng new yourappname' +
+ + + +
+
+ + +
+

waiting......

+
+ + + +
+

When the angular cli is done with generating the project, navigate to you your app + and check the project structure.

+
+ + +
+ + + + + + + + + + Animations + Material + CDK + FlexLayout + Firebase + Angularfire2 +
+

+ ngx-auth-firebaseui + + is built on the top of + + angular material + and + + angular component development kit + ! That's why we need to install them as peer dependencies to the ngx-auth-firebaseui module. +

+
+
+
+ $ npm i -s @angular/material @angular/cdk +
+ + + +
+
+ +
+
+

+ Furthermore, + angular animations + is required too to provide advanced transitions between the components. +

+
+
+
+ $ npm i -s @angular/animations +
+ + +
+
+ +
+
+

Now it's time to import the animations module.

+
+ + + + + + + + Learn more + + + + + + + + + + +
+

Fire Fire Firebase!

+
+
+
+ $ npm i -s firebase @angular/fire +
+ + +
+ + + + + + + + + + + Styling and more... +
+

In order to use angular material/ material design, we need include at least one theme. + To get started, you can just import one of the prebuilt material themes from the angular material module + in your style.css file.

+
+
+ + +
+
+ +
+
+

Or create your own material theme and import it in the style.css file

+
+
+ +
+ + Custom material theme + +
+ + + +
+ + + + link + Learn more about angular material themes + + + + + + + + + + + + Linking the icons + +
+

The easiest way to load the material design icons is to provide the + following link in your +

+

+

file

+
+
+
+ +
+
+ +
+
+

Or, if you want to host the material design icons by yourself, please follow these two steps.

+
+ +
+

First, install the material design icons' npm module

+
+
+ + +
+
+

After that, you need to update you +

+ +

files. Under the styles sections, add + the path of the material design icons in order to be imported to your distribution files + when you build your app. See below

+
+
+

First of all, copy the path of the material design icons

+
+
+
--> + +
+
+

Adjust your angular.json file

+
+ Before +
+
--> + +
+ After +
+
--> + +
+
+ +
+
+

Great! You are done with the basics + done +

+
+ + + + link + Learn more about angular material icons + + + + + + + + + + + Here we go + flight_takeoff + +
+ Open a new terminal and run the following command to get + ngx-auth-firebaseui + from npm +
+
+
--> + +
+
+ +
+
+

Now you just need to import the library

+
+ + SystemJS + + Note:If you are using SystemJS, you should adjust your configuration to point to the UMD + bundle. In your systemjs config file, map needs to tell the System loader where to look for + ngx-auth-firebaseui + + +
+
--> + +
+ + +
+

Once installed you need to import the main module:

+
+
+
--> + +
+
+

The only remaining part is to list the imported module in your application module. The exact method + will be slightly different for the root (top-level) module for which you should end up with the code + similar to (notice NgxMaterialPagesModule .forRoot()): + + NB: please do not forget to import the angular animations module in your root component too! + (usally app.component.ts)

+
+
+
--> + +
+
+

Please do not forget to add your configuration to the module. The is absolutely required to link + your firebase project with

+
--> +

See below again...

+
+
+
--> + +
+
+

Other modules in your application can simply import NgxMaterialPagesModule:

+
+
+
--> + +
+ + + + + + + + + We need ngx-auth-firebaseui's assets + + + Via Angular CLI + +
+

First of all, open the following file

+
--> +

after that, add the following snippet under the assets section

+
+
--> + +
+

Now, the required images will be copied to the assets directory and they will be available for your + app. + The assets section should look

+
+
+
--> + +
+ + + + + Without Angular CLI + +
+

copy the assets directory into the root of your project, so that your app can get the required images + for the UI. This is an example of requesting an image from the library Request + URL:http://localhost:4200/assets/google.svg. + Please make sur that the images will be hosted in the right place

+
+ + + + + + + + + + + + + + + Library's components + This library consists of 2 essential components. + + + +
+ + ngx-auth-firebaseui the main container that is used for the authentication process + + + + + + + + + + + + + + ngx-auth-firebaseui-user is used to display/edit the data of the current authenticated user. + Please note if you want to try out this component, you need to be authenticated. So if you sign in/up, + ngx-auth-firebaseui-user will be displayed. + + + + + + + + + + + + + + + Clone the repo + Interested? Try it out on your machine + +
+

Clone this repo by running this following command

+
+
+ + + +
+
+

install the dependencies

+
+
+ + + +
+
+

Link ngx-auth-firebaseui

+
+
+ + + +
+
+

navigate to the demo directory

+
+
+ + + +
+
+

install the dependencies

+
+
+ + + +
+
+

start the app

+
+
+ + + +
+
+

the app is now hosted on http://localhost:4200/

+
+ + + + +
+ +
diff --git a/src/app/getting-started/getting-started.component.scss b/src/app/getting-started/getting-started.component.scss new file mode 100755 index 00000000..e96ea412 --- /dev/null +++ b/src/app/getting-started/getting-started.component.scss @@ -0,0 +1,63 @@ +.getting-started { + margin-top: 1.0rem; +} + +.main-container { + //position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + //padding: 48px; + overflow: auto; +} + +.demo-sidenav-area { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + + .mat-toolbar { + flex: 0; + } + + .mat-sidenav-container { + flex: 1; + } + + .demo-sidenav-content { + padding: 32px; + } + + .demo-filler-content { + padding: 60px; + } +} + +video { + max-width: 100%; +} + +button:focus { + outline: none; +} + +.comment-container { + margin: 1rem; +} + +.mat-button { + white-space: normal !important; +} + +//::ng-deep ngx-auth-firebaseui .mat-tab-label-container { +// display: flex; +//} + +.lib-compontent{ + margin-bottom: 2rem; +} diff --git a/src/app/getting-started/getting-started.component.spec.ts b/src/app/getting-started/getting-started.component.spec.ts new file mode 100755 index 00000000..8de26bc4 --- /dev/null +++ b/src/app/getting-started/getting-started.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { DebugElement } from '@angular/core'; + +import { GettingStartedComponent } from './getting-started.component'; + +describe('GettingStartedComponent', () => { + let component: GettingStartedComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [GettingStartedComponent] + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(GettingStartedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/getting-started/getting-started.component.ts b/src/app/getting-started/getting-started.component.ts new file mode 100755 index 00000000..c5ef810c --- /dev/null +++ b/src/app/getting-started/getting-started.component.ts @@ -0,0 +1,191 @@ +import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core'; +import {Title} from '@angular/platform-browser'; +import { MatSnackBar } from '@angular/material/snack-bar'; + + +@Component({ + selector: 'app-getting-started', + templateUrl: './getting-started.component.html', + styleUrls: ['./getting-started.component.scss'], + encapsulation: ViewEncapsulation.None, +}) +export class GettingStartedComponent implements OnInit { + + + @Input() + index = 0; + + totalSteps = 2; + + isLaunched = false; + fillerContent = Array(15); + fixed = false; + coverHeader = false; + showHeader = false; + showFooter = false; + modeIndex = 0; + hasBackdrop: boolean; + + get mode() { + return ['side', 'over', 'push'][this.modeIndex]; + } + + get fixedTop() { + return this.fixed && this.showHeader && !this.coverHeader ? 64 : 0; + } + + get fixedBottom() { + return this.fixed && this.showFooter && !this.coverHeader ? 64 : 0; + } + + ngVersion = ` _ _ ____ _ ___ + / \\ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| + / △ \\ | '_ \\ / _\` | | | | |/ _\` | '__| | | | | | | + / ___ \\| | | | (_| | |_| | | (_| | | | |___| |___ | | + /_/ \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_| \\____|_____|___| + |___/ + + + Angular CLI: 6.0.0 + Node: 8.11.3 + OS: darwin x64 + Angular: 6.0.6`; + + importBrowserAnimationsModule = `import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + + @NgModule({ + ... + imports: [BrowserAnimationsModule], + ... + }) + export class YourAppModule { }`; + + + importNoopAnimationsModule = `import {NoopAnimationsModule} from '@angular/platform-browser/animations'; + + @NgModule({ + ... + imports: [NoopAnimationsModule], + ... + }) + export class YourAppModule { }`; + + importMaterialThemeSCSS = `@import "~@angular/material/prebuilt-themes/indigo-pink.css";`; + + customMaterialTheme = + `@import '../node_modules/@angular/material/theming'; + // Plus imports for other components in your app + // Include the common styles for Angular Material. We include this here so that you only + // have to load a single css file for Angular Material in your app. + // Be sure that you only ever include this mixin once! + @include mat-core() + // Define the palettes for your theme using the Material Design palettes available in palette.scss + // (imported above). For each palette, you can optionally specify a default, lighter, and darker + // hue. + $candy-app-primary: mat-palette($mat-indigo); + $candy-app-accent: mat-palette($mat-pink, A200, A100, A400) + // The warn palette is optional (defaults to red). + $candy-app-warn: mat-palette($mat-red) + // Create the theme object (a Sass map containing all of the palettes). + $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn) + // Include theme styles for core and each component used in your app. + // Alternatively, you can import and @include the theme mixins for each component + // that you are using. + @include angular-material-theme($candy-app-theme); + `; + + stylesBeforeImportMDI = `"styles": [ + "styles.css" + ],`; + + stylesAfterImportMDI = `"styles": [ + "styles.css", + "node_modules/material-design-icons/iconfont/material-icons.css" + ],`; + + materialIconsLink = ``; + + systemJSModuleImport = `map: { + 'ngx-auth-firebaseui': 'node_modules/ngx-auth-firebaseui/bundles/ngx-auth-firebaseui.umd.js', + }`; + + importNgxAuthFirebaseUIModule = `import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';`; + + importNgxAuthFirebaseUIModuleInAppModule = `import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui'; + import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; + + @NgModule({ + declarations: [AppComponent, ...], + imports: [NgxAuthFirebaseUIModule.forRoot({ + apiKey: 'your-firebase-apiKey', + authDomain: 'your-firebase-authDomain', + databaseURL: 'your-firebase-databaseURL', + projectId: 'your-firebase-projectId', + storageBucket: 'your-firebase-storageBucket', + messagingSenderId: 'your-firebase-messagingSenderId' + }), + BrowserAnimationsModule, + ...], + bootstrap: [AppComponent] + }) + export class AppModule { + }`; + + importNgxAuthFirebaseUIModuleInOtherModule = `import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui'; + + @NgModule({ + declarations: [OtherComponent, ...], + imports: [NgxAuthFirebaseUIModule, ...], + }) + export class OtherModule { + }`; + + firebaseConfiguration = `{ + apiKey: 'your-firebase-apiKey', + authDomain: 'your-firebase-authDomain', + databaseURL: 'your-firebase-databaseURL', + projectId: 'your-firebase-projectId', + storageBucket: 'your-firebase-storageBucket', + messagingSenderId: 'your-firebase-messagingSenderId' + }`; + + copyAssetSnippet = `{ + "glob": "**/*", + "input": "node_modules/ngx-auth-firebaseui/assets/", + "output": "./assets/" + }`; + + afterCopyingAssestSnippet = `"assets": [ + "assets", + "favicon.ico", + { + "glob": "**/*", + "input": "node_modules/ngx-auth-firebaseui/assets/", + "output": "./assets/" + } + ]`; + + exampleNgxAuthFirebaseUI = ``; + + + constructor(private titleService: Title, + public snackBar: MatSnackBar) { + } + + ngOnInit() { + this.titleService.setTitle('Getting Started | ngx-auth-firebaseui'); + } + + showCopyMessage(content: string) { + this.snackBar.open(`${content} copied`, 'OK', { + duration: 3000 + }); + } + + next() { + console.log('index before', this.index); + this.index = this.index === this.totalSteps - 1 ? this.totalSteps - 1 : ++this.index; + console.log('index after', this.index); + } + +} diff --git a/src/app/getting-started/getting-started.module.ts b/src/app/getting-started/getting-started.module.ts new file mode 100755 index 00000000..0d4f2933 --- /dev/null +++ b/src/app/getting-started/getting-started.module.ts @@ -0,0 +1,45 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {GettingStartedComponent} from './getting-started.component'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDividerModule} from '@angular/material/divider'; +import {MatIconModule} from '@angular/material/icon'; +import {MatInputModule} from '@angular/material/input'; +import {MatSidenavModule} from '@angular/material/sidenav'; +import {MatSnackBarModule} from '@angular/material/snack-bar'; +import {MatStepperModule} from '@angular/material/stepper'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {ClipboardModule} from 'ngx-clipboard'; +import {MatPagesModule} from '@angular-material-extensions/pages'; +import {MatCardModule} from '@angular/material/card'; +import {GettingStartedRoutingModule} from './getting-started-routing.module'; +import {MarkdownModule} from 'ngx-markdown'; +import {FlexLayoutModule} from '@angular/flex-layout'; +import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui'; + +@NgModule({ + imports: [ + CommonModule, + GettingStartedRoutingModule, + MarkdownModule.forChild(), + NgxAuthFirebaseUIModule, + FlexLayoutModule, + MatPagesModule, + ClipboardModule, + MatCardModule, + MatSidenavModule, + MatStepperModule, + MatCheckboxModule, + MatInputModule, + MatIconModule, + MatDividerModule, + MatSnackBarModule, + MatTooltipModule + ], + declarations: + [ + GettingStartedComponent, + ], +}) +export class GettingStartedModule { +}