diff --git a/How to/Implement login page to control access/.editorconfig b/How to/Implement login page to control access/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/How to/Implement login page to control access/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/How to/Implement login page to control access/.gitignore b/How to/Implement login page to control access/.gitignore new file mode 100644 index 0000000..0711527 --- /dev/null +++ b/How to/Implement login page to control access/.gitignore @@ -0,0 +1,42 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db diff --git a/How to/Implement login page to control access/README.md b/How to/Implement login page to control access/README.md new file mode 100644 index 0000000..b2cbbe3 --- /dev/null +++ b/How to/Implement login page to control access/README.md @@ -0,0 +1,27 @@ +# Getting started + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4. + +## Development server + +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. + +## Code scaffolding + +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`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +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. + +## Further help + +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. diff --git a/How to/Implement login page to control access/angular.json b/How to/Implement login page to control access/angular.json new file mode 100644 index 0000000..419ea66 --- /dev/null +++ b/How to/Implement login page to control access/angular.json @@ -0,0 +1,101 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/my-app", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "my-app:build:production" + }, + "development": { + "browserTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "my-app:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": "8d9c65e2-01c9-4a66-bc68-685c535cc647" + } +} diff --git a/How to/Implement login page to control access/package.json b/How to/Implement login page to control access/package.json new file mode 100644 index 0000000..7181789 --- /dev/null +++ b/How to/Implement login page to control access/package.json @@ -0,0 +1,40 @@ +{ + "name": "my-app", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "^15.0.0", + "@angular/common": "^15.0.0", + "@angular/compiler": "^15.0.0", + "@angular/core": "^15.0.0", + "@angular/forms": "^15.0.0", + "@angular/platform-browser": "^15.0.0", + "@angular/platform-browser-dynamic": "^15.0.0", + "@angular/router": "^15.0.0", + "@syncfusion/ej2-angular-pdfviewer": "*", + "@syncfusion/ej2-angular-popups": "^30.1.40", + "rxjs": "~7.5.0", + "tslib": "^2.3.0", + "zone.js": "~0.12.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^15.0.4", + "@angular/cli": "~15.0.4", + "@angular/compiler-cli": "^15.0.0", + "@types/jasmine": "~4.3.0", + "jasmine-core": "~4.5.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.0.0", + "typescript": "~4.8.2" + } +} diff --git a/How to/Implement login page to control access/src/app/app.component.css b/How to/Implement login page to control access/src/app/app.component.css new file mode 100644 index 0000000..c8628c0 --- /dev/null +++ b/How to/Implement login page to control access/src/app/app.component.css @@ -0,0 +1,129 @@ +.content-wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; + justify-content: center; + align-items: center; + padding: 20px; + background-color: #f5f5f5; +} + +/* Login Container Styles */ +.login-container { + width: 100%; + max-width: 400px; + margin: 0 auto; +} + +.login-form { + background-color: #ffffff; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + padding: 30px; +} + +.login-form h2 { + margin-top: 0; + margin-bottom: 20px; + color: #1976d2; + text-align: center; +} + +.form-group { + margin-bottom: 16px; +} + +.form-group label { + display: block; + margin-bottom: 6px; + font-weight: 500; +} + +.form-group input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; +} + +.error-message { + color: #d32f2f; + margin: 10px 0; + font-size: 14px; +} + +.button-container { + margin-top: 20px; +} + +button { + background-color: #1976d2; + color: white; + border: none; + border-radius: 4px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.2s; +} + +button:hover { + background-color: #1565c0; +} + +.credentials-info { + margin-top: 20px; + padding-top: 15px; + border-top: 1px solid #eee; + font-size: 14px; +} + +.credentials-info p { + margin: 5px 0; +} + +/* Viewer Controls when authenticated */ +.viewer-controls { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; +} + +.user-info { + display: flex; + align-items: center; + gap: 15px; +} + +.logout-btn { + background-color: #f44336; +} + +.logout-btn:hover { + background-color: #d32f2f; +} + +.open-pdf-btn { + font-size: 18px; + padding: 12px 25px; +} + +/* Dialog customizations */ +::ng-deep .e-dialog { + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); +} + +::ng-deep .e-dlg-header-content { + background-color: #1976d2; + color: white; +} + +::ng-deep .e-dlg-header { + font-weight: 500; +} + +::ng-deep .e-dlg-closeicon-btn { + color: white; +} \ No newline at end of file diff --git a/How to/Implement login page to control access/src/app/app.component.html b/How to/Implement login page to control access/src/app/app.component.html new file mode 100644 index 0000000..ce3372f --- /dev/null +++ b/How to/Implement login page to control access/src/app/app.component.html @@ -0,0 +1,49 @@ +
+ +
+ +
+ + +
+ + +
+ + + + + + + +
\ No newline at end of file diff --git a/How to/Implement login page to control access/src/app/app.component.spec.ts b/How to/Implement login page to control access/src/app/app.component.spec.ts new file mode 100644 index 0000000..03e0fd7 --- /dev/null +++ b/How to/Implement login page to control access/src/app/app.component.spec.ts @@ -0,0 +1,31 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'my-app'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('my-app'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('my-app app is running!'); + }); +}); diff --git a/How to/Implement login page to control access/src/app/app.component.ts b/How to/Implement login page to control access/src/app/app.component.ts new file mode 100644 index 0000000..e0b0c8b --- /dev/null +++ b/How to/Implement login page to control access/src/app/app.component.ts @@ -0,0 +1,158 @@ +import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core'; +import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; +import { DialogComponent } from '@syncfusion/ej2-angular-popups'; +import { AnimationSettingsModel } from '@syncfusion/ej2-splitbuttons'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + encapsulation: ViewEncapsulation.None, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + AnnotationService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ], + styleUrls: ['./app.component.css'] +}) +export class AppComponent implements OnInit { + public title: string = 'PDF Viewer Application'; + + @ViewChild('pdfviewer') + public pdfviewerControl!: PdfViewerComponent; + + @ViewChild('Dialog') + public Dialog!: DialogComponent; + + public userName: string = ''; + public password: string = ''; + public isAuthenticated: boolean = false; + public authError: string = ''; + public base64Strings: any; + public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resourceUrl: string = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib"; + + // Mock user credentials - in a real app, these would be stored securely + private validUsers = [ + { username: 'UserA', password: 'admin123' }, + { username: 'UserB', password: 'user123' } + ]; + + ngOnInit(): void { + // Check if user was previously authenticated in this session + const savedAuth = sessionStorage.getItem('pdfViewerAuthenticated'); + if (savedAuth === 'true') { + this.isAuthenticated = true; + const savedUser = sessionStorage.getItem('pdfViewerUser'); + if (savedUser) { + this.userName = savedUser; + } + } + } + + // Validates user credentials and opens PDF viewer if successful + authenticate() { + // Reset error message + this.authError = ''; + + // Check if username and password are provided + if (!this.userName || !this.password) { + this.authError = 'Please enter both username and password'; + return; + } + + // Find matching user + const user = this.validUsers.find( + u => u.username === this.userName && u.password === this.password + ); + + if (user) { + this.isAuthenticated = true; + // Store authentication state in session + sessionStorage.setItem('pdfViewerAuthenticated', 'true'); + sessionStorage.setItem('pdfViewerUser', this.userName); + + // Open PDF Viewer with the authenticated user + this.openPDFViewer(); + } else { + this.authError = 'Invalid username or password'; + this.isAuthenticated = false; + } + } + + // Clears user session and hides PDF viewer + logout() { + this.isAuthenticated = false; + this.userName = ''; + this.password = ''; + sessionStorage.removeItem('pdfViewerAuthenticated'); + sessionStorage.removeItem('pdfViewerUser'); + + // Close dialog if open + if (this.Dialog && this.Dialog.visible) { + this.Dialog.hide(); + } + } + + // Shows PDF viewer dialog and loads document after authentication check + openPDFViewer() { + if (!this.isAuthenticated) { + this.authError = 'Authentication required!'; + return; + } + + // Set the current user as the author for annotations + if (this.pdfviewerControl) { + this.pdfviewerControl.annotationSettings.author = this.userName; + } + this.Dialog.show(); + if(this.base64Strings!=undefined) + this.pdfviewerControl.load(this.base64Strings, ''); + else + this.pdfviewerControl.load(this.document, ''); + } + + // Dialog configuration properties + public header: string = 'PDF Viewer'; + public showCloseIcon: Boolean = true; + public width: string = '100%'; + public height: string = '90%'; + public animationSettings: AnimationSettingsModel = { effect: 'None' }; + public target: string = '.content-wrapper'; + + // Saves PDF state as base64 on dialog close + public dialogClose = (): void => { + if (this.pdfviewerControl) { + this.pdfviewerControl.saveAsBlob().then((value) => { + const data = value; + const reader = new FileReader(); + reader.readAsDataURL(data); + reader.onload = () => { + this.base64Strings = reader.result; + }; + }).catch(error => { + console.error('Error saving PDF:', error); + }); + } + } + + // Loads saved PDF data when dialog opens + public dialogOpen = (): void => { + if (this.base64Strings && this.pdfviewerControl) { + this.pdfviewerControl.load(this.base64Strings, ''); + } + } + +} + + + diff --git a/How to/Implement login page to control access/src/app/app.module.ts b/How to/Implement login page to control access/src/app/app.module.ts new file mode 100644 index 0000000..aa709db --- /dev/null +++ b/How to/Implement login page to control access/src/app/app.module.ts @@ -0,0 +1,52 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { + PdfViewerModule, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + AnnotationService, + FormFieldsService, + FormDesignerService, + PageOrganizerService +} from '@syncfusion/ej2-angular-pdfviewer'; +import { DialogModule } from '@syncfusion/ej2-angular-popups'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + CommonModule, + PdfViewerModule, + DialogModule + ], + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + AnnotationService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/How to/Implement login page to control access/src/assets/.gitkeep b/How to/Implement login page to control access/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/How to/Implement login page to control access/src/favicon.ico b/How to/Implement login page to control access/src/favicon.ico new file mode 100644 index 0000000..997406a Binary files /dev/null and b/How to/Implement login page to control access/src/favicon.ico differ diff --git a/How to/Implement login page to control access/src/index.html b/How to/Implement login page to control access/src/index.html new file mode 100644 index 0000000..7fa8cd9 --- /dev/null +++ b/How to/Implement login page to control access/src/index.html @@ -0,0 +1,13 @@ + + + + + MyApp + + + + + + + + diff --git a/How to/Implement login page to control access/src/main.ts b/How to/Implement login page to control access/src/main.ts new file mode 100644 index 0000000..c58dc05 --- /dev/null +++ b/How to/Implement login page to control access/src/main.ts @@ -0,0 +1,7 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/How to/Implement login page to control access/src/styles.css b/How to/Implement login page to control access/src/styles.css new file mode 100644 index 0000000..fc9d8ef --- /dev/null +++ b/How to/Implement login page to control access/src/styles.css @@ -0,0 +1,10 @@ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; \ No newline at end of file diff --git a/How to/Implement login page to control access/tsconfig.app.json b/How to/Implement login page to control access/tsconfig.app.json new file mode 100644 index 0000000..374cc9d --- /dev/null +++ b/How to/Implement login page to control access/tsconfig.app.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/How to/Implement login page to control access/tsconfig.json b/How to/Implement login page to control access/tsconfig.json new file mode 100644 index 0000000..ed966d4 --- /dev/null +++ b/How to/Implement login page to control access/tsconfig.json @@ -0,0 +1,33 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/How to/Implement login page to control access/tsconfig.spec.json b/How to/Implement login page to control access/tsconfig.spec.json new file mode 100644 index 0000000..be7e9da --- /dev/null +++ b/How to/Implement login page to control access/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +}