Skip to content

Commit f9230ae

Browse files
rparthi-1687rparthi-1687
authored
Merge pull request #76 from SyncfusionExamples/EJ2-932962-loginPage
932962: Updated Sample on How to Implement login page to control access
2 parents 9a8446a + 3533b62 commit f9230ae

18 files changed

+736
-0
lines changed

‎How to/Implement login page to control access/.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎How to/Implement login page to control access/.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎How to/Implement login page to control access/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Getting started
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4.
4+
5+
## Development server
6+
7+
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.
8+
9+
## Code scaffolding
10+
11+
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`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
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.
24+
25+
## Further help
26+
27+
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.

‎How to/Implement login page to control access/angular.json‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"my-app": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/my-app",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
"src/favicon.ico",
25+
"src/assets"
26+
],
27+
"styles": [
28+
"src/styles.css"
29+
],
30+
"scripts": []
31+
},
32+
"configurations": {
33+
"production": {
34+
"budgets": [
35+
{
36+
"type": "initial",
37+
"maximumWarning": "500kb",
38+
"maximumError": "1mb"
39+
},
40+
{
41+
"type": "anyComponentStyle",
42+
"maximumWarning": "2kb",
43+
"maximumError": "4kb"
44+
}
45+
],
46+
"outputHashing": "all"
47+
},
48+
"development": {
49+
"buildOptimizer": false,
50+
"optimization": false,
51+
"vendorChunk": true,
52+
"extractLicenses": false,
53+
"sourceMap": true,
54+
"namedChunks": true
55+
}
56+
},
57+
"defaultConfiguration": "production"
58+
},
59+
"serve": {
60+
"builder": "@angular-devkit/build-angular:dev-server",
61+
"configurations": {
62+
"production": {
63+
"browserTarget": "my-app:build:production"
64+
},
65+
"development": {
66+
"browserTarget": "my-app:build:development"
67+
}
68+
},
69+
"defaultConfiguration": "development"
70+
},
71+
"extract-i18n": {
72+
"builder": "@angular-devkit/build-angular:extract-i18n",
73+
"options": {
74+
"browserTarget": "my-app:build"
75+
}
76+
},
77+
"test": {
78+
"builder": "@angular-devkit/build-angular:karma",
79+
"options": {
80+
"polyfills": [
81+
"zone.js",
82+
"zone.js/testing"
83+
],
84+
"tsConfig": "tsconfig.spec.json",
85+
"assets": [
86+
"src/favicon.ico",
87+
"src/assets"
88+
],
89+
"styles": [
90+
"src/styles.css"
91+
],
92+
"scripts": []
93+
}
94+
}
95+
}
96+
}
97+
},
98+
"cli": {
99+
"analytics": "8d9c65e2-01c9-4a66-bc68-685c535cc647"
100+
}
101+
}

‎How to/Implement login page to control access/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "my-app",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^15.0.0",
14+
"@angular/common": "^15.0.0",
15+
"@angular/compiler": "^15.0.0",
16+
"@angular/core": "^15.0.0",
17+
"@angular/forms": "^15.0.0",
18+
"@angular/platform-browser": "^15.0.0",
19+
"@angular/platform-browser-dynamic": "^15.0.0",
20+
"@angular/router": "^15.0.0",
21+
"@syncfusion/ej2-angular-pdfviewer": "*",
22+
"@syncfusion/ej2-angular-popups": "^30.1.40",
23+
"rxjs": "~7.5.0",
24+
"tslib": "^2.3.0",
25+
"zone.js": "~0.12.0"
26+
},
27+
"devDependencies": {
28+
"@angular-devkit/build-angular": "^15.0.4",
29+
"@angular/cli": "~15.0.4",
30+
"@angular/compiler-cli": "^15.0.0",
31+
"@types/jasmine": "~4.3.0",
32+
"jasmine-core": "~4.5.0",
33+
"karma": "~6.4.0",
34+
"karma-chrome-launcher": "~3.1.0",
35+
"karma-coverage": "~2.2.0",
36+
"karma-jasmine": "~5.1.0",
37+
"karma-jasmine-html-reporter": "~2.0.0",
38+
"typescript": "~4.8.2"
39+
}
40+
}

‎How to/Implement login page to control access/src/app/app.component.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
.content-wrapper {
2+
display: flex;
3+
flex-direction: column;
4+
min-height: 100vh;
5+
justify-content: center;
6+
align-items: center;
7+
padding: 20px;
8+
background-color: #f5f5f5;
9+
}
10+
11+
/* Login Container Styles */
12+
.login-container {
13+
width: 100%;
14+
max-width: 400px;
15+
margin: 0 auto;
16+
}
17+
18+
.login-form {
19+
background-color: #ffffff;
20+
border-radius: 8px;
21+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
22+
padding: 30px;
23+
}
24+
25+
.login-form h2 {
26+
margin-top: 0;
27+
margin-bottom: 20px;
28+
color: #1976d2;
29+
text-align: center;
30+
}
31+
32+
.form-group {
33+
margin-bottom: 16px;
34+
}
35+
36+
.form-group label {
37+
display: block;
38+
margin-bottom: 6px;
39+
font-weight: 500;
40+
}
41+
42+
.form-group input {
43+
width: 100%;
44+
padding: 10px;
45+
border: 1px solid #ddd;
46+
border-radius: 4px;
47+
font-size: 16px;
48+
}
49+
50+
.error-message {
51+
color: #d32f2f;
52+
margin: 10px 0;
53+
font-size: 14px;
54+
}
55+
56+
.button-container {
57+
margin-top: 20px;
58+
}
59+
60+
button {
61+
background-color: #1976d2;
62+
color: white;
63+
border: none;
64+
border-radius: 4px;
65+
padding: 10px 20px;
66+
font-size: 16px;
67+
cursor: pointer;
68+
transition: background-color 0.2s;
69+
}
70+
71+
button:hover {
72+
background-color: #1565c0;
73+
}
74+
75+
.credentials-info {
76+
margin-top: 20px;
77+
padding-top: 15px;
78+
border-top: 1px solid #eee;
79+
font-size: 14px;
80+
}
81+
82+
.credentials-info p {
83+
margin: 5px 0;
84+
}
85+
86+
/* Viewer Controls when authenticated */
87+
.viewer-controls {
88+
display: flex;
89+
flex-direction: column;
90+
align-items: center;
91+
gap: 15px;
92+
}
93+
94+
.user-info {
95+
display: flex;
96+
align-items: center;
97+
gap: 15px;
98+
}
99+
100+
.logout-btn {
101+
background-color: #f44336;
102+
}
103+
104+
.logout-btn:hover {
105+
background-color: #d32f2f;
106+
}
107+
108+
.open-pdf-btn {
109+
font-size: 18px;
110+
padding: 12px 25px;
111+
}
112+
113+
/* Dialog customizations */
114+
::ng-deep .e-dialog {
115+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
116+
}
117+
118+
::ng-deep .e-dlg-header-content {
119+
background-color: #1976d2;
120+
color: white;
121+
}
122+
123+
::ng-deep .e-dlg-header {
124+
font-weight: 500;
125+
}
126+
127+
::ng-deep .e-dlg-closeicon-btn {
128+
color: white;
129+
}

0 commit comments

Comments
 (0)