@memberjunction/ng-bootstrap 3.1.1 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +22 -24
- package/dist/README.md +0 -240
- /package/{dist/esm2022 → esm2022}/lib/bootstrap.component.mjs +0 -0
- /package/{dist/esm2022 → esm2022}/lib/bootstrap.module.mjs +0 -0
- /package/{dist/esm2022 → esm2022}/lib/bootstrap.types.mjs +0 -0
- /package/{dist/esm2022 → esm2022}/lib/components/auth-shell.component.mjs +0 -0
- /package/{dist/esm2022 → esm2022}/lib/services/initialization.service.mjs +0 -0
- /package/{dist/esm2022 → esm2022}/memberjunction-ng-bootstrap.mjs +0 -0
- /package/{dist/esm2022 → esm2022}/public-api.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/memberjunction-ng-bootstrap.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/memberjunction-ng-bootstrap.mjs.map +0 -0
- /package/{dist/index.d.ts → index.d.ts} +0 -0
- /package/{dist/lib → lib}/bootstrap.component.d.ts +0 -0
- /package/{dist/lib → lib}/bootstrap.module.d.ts +0 -0
- /package/{dist/lib → lib}/bootstrap.types.d.ts +0 -0
- /package/{dist/lib → lib}/components/auth-shell.component.d.ts +0 -0
- /package/{dist/lib → lib}/services/initialization.service.d.ts +0 -0
- /package/{dist/public-api.d.ts → public-api.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-bootstrap",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"description": "MemberJunction Angular Bootstrap - Encapsulates all Angular authentication and initialization logic",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"types": "dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "ng-packagr -p ng-package.json",
|
|
9
|
-
"watch": "ng-packagr -p ng-package.json --watch",
|
|
10
|
-
"clean": "rm -rf dist"
|
|
11
|
-
},
|
|
12
5
|
"keywords": [
|
|
13
6
|
"memberjunction",
|
|
14
7
|
"angular",
|
|
@@ -24,24 +17,29 @@
|
|
|
24
17
|
"rxjs": "^7.8.1"
|
|
25
18
|
},
|
|
26
19
|
"dependencies": {
|
|
27
|
-
"@memberjunction/core": "3.
|
|
28
|
-
"@memberjunction/graphql-dataprovider": "3.
|
|
29
|
-
"@memberjunction/ng-auth-services": "3.
|
|
30
|
-
"@memberjunction/ng-shared": "3.
|
|
31
|
-
"rxjs": "^7.8.1"
|
|
32
|
-
|
|
33
|
-
"devDependencies": {
|
|
34
|
-
"@angular/common": "^18.2.13",
|
|
35
|
-
"@angular/core": "^18.2.13",
|
|
36
|
-
"@angular/router": "^18.2.13",
|
|
37
|
-
"ng-packagr": "^18.2.1",
|
|
38
|
-
"typescript": "~5.5.4"
|
|
20
|
+
"@memberjunction/core": "3.3.0",
|
|
21
|
+
"@memberjunction/graphql-dataprovider": "3.3.0",
|
|
22
|
+
"@memberjunction/ng-auth-services": "3.3.0",
|
|
23
|
+
"@memberjunction/ng-shared": "3.3.0",
|
|
24
|
+
"rxjs": "^7.8.1",
|
|
25
|
+
"tslib": "^2.3.0"
|
|
39
26
|
},
|
|
40
|
-
"files": [
|
|
41
|
-
"dist/**/*"
|
|
42
|
-
],
|
|
43
27
|
"repository": {
|
|
44
28
|
"type": "git",
|
|
45
29
|
"url": "https://github.com/MemberJunction/MJ"
|
|
46
|
-
}
|
|
30
|
+
},
|
|
31
|
+
"module": "fesm2022/memberjunction-ng-bootstrap.mjs",
|
|
32
|
+
"typings": "index.d.ts",
|
|
33
|
+
"exports": {
|
|
34
|
+
"./package.json": {
|
|
35
|
+
"default": "./package.json"
|
|
36
|
+
},
|
|
37
|
+
".": {
|
|
38
|
+
"types": "./index.d.ts",
|
|
39
|
+
"esm2022": "./esm2022/memberjunction-ng-bootstrap.mjs",
|
|
40
|
+
"esm": "./esm2022/memberjunction-ng-bootstrap.mjs",
|
|
41
|
+
"default": "./fesm2022/memberjunction-ng-bootstrap.mjs"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"sideEffects": false
|
|
47
45
|
}
|
package/dist/README.md
DELETED
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
# @memberjunction/ng-bootstrap
|
|
2
|
-
|
|
3
|
-
MemberJunction 3.0 Angular Bootstrap - Encapsulates all Angular authentication and initialization logic into a reusable module.
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
In MemberJunction 3.0, Angular applications (MJExplorer) become **minimal configuration files** (~15-20 lines) that import all functionality from NPM packages. This package provides the `MJBootstrapModule` and `MJBootstrapComponent` that handle all authentication, GraphQL setup, and application initialization.
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install @memberjunction/ng-bootstrap
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Usage
|
|
16
|
-
|
|
17
|
-
### Basic Usage (Minimal MJExplorer 3.0)
|
|
18
|
-
|
|
19
|
-
Create your `packages/explorer/src/app/app.module.ts`:
|
|
20
|
-
|
|
21
|
-
```typescript
|
|
22
|
-
import { NgModule } from '@angular/core';
|
|
23
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
24
|
-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
25
|
-
|
|
26
|
-
import { MJBootstrapModule, MJBootstrapComponent } from '@memberjunction/ng-bootstrap';
|
|
27
|
-
import { MJExplorerModule } from '@memberjunction/ng-explorer-core';
|
|
28
|
-
import { CoreGeneratedFormsModule } from '@memberjunction/ng-core-entity-forms';
|
|
29
|
-
import { GeneratedFormsModule } from '@mycompany/generated-forms';
|
|
30
|
-
|
|
31
|
-
import { environment } from '../environments/environment';
|
|
32
|
-
|
|
33
|
-
@NgModule({
|
|
34
|
-
imports: [
|
|
35
|
-
BrowserModule,
|
|
36
|
-
BrowserAnimationsModule,
|
|
37
|
-
MJBootstrapModule.forRoot(environment),
|
|
38
|
-
MJExplorerModule,
|
|
39
|
-
CoreGeneratedFormsModule,
|
|
40
|
-
GeneratedFormsModule
|
|
41
|
-
],
|
|
42
|
-
bootstrap: [MJBootstrapComponent] // Use MJBootstrapComponent as the bootstrap component
|
|
43
|
-
})
|
|
44
|
-
export class AppModule {}
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
**That's it!** Your entire MJExplorer application module in ~15 lines.
|
|
48
|
-
|
|
49
|
-
### Environment Configuration
|
|
50
|
-
|
|
51
|
-
Create your `packages/explorer/src/environments/environment.ts`:
|
|
52
|
-
|
|
53
|
-
```typescript
|
|
54
|
-
import { MJEnvironmentConfig } from '@memberjunction/ng-bootstrap';
|
|
55
|
-
|
|
56
|
-
export const environment: MJEnvironmentConfig = {
|
|
57
|
-
production: false,
|
|
58
|
-
GRAPHQL_URI: 'http://localhost:4000/graphql',
|
|
59
|
-
GRAPHQL_WS_URI: 'ws://localhost:4000/graphql',
|
|
60
|
-
AUTH_TYPE: 'msal',
|
|
61
|
-
MJ_CORE_SCHEMA_NAME: '__mj',
|
|
62
|
-
|
|
63
|
-
// MSAL configuration
|
|
64
|
-
CLIENT_ID: 'your-client-id',
|
|
65
|
-
TENANT_ID: 'your-tenant-id'
|
|
66
|
-
|
|
67
|
-
// OR Auth0 configuration
|
|
68
|
-
// AUTH0_DOMAIN: 'yourapp.us.auth0.com',
|
|
69
|
-
// AUTH0_CLIENTID: 'your-auth0-client-id'
|
|
70
|
-
};
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
## What It Does
|
|
74
|
-
|
|
75
|
-
The `MJBootstrapModule` and `MJBootstrapComponent` handle:
|
|
76
|
-
|
|
77
|
-
1. **Authentication Flow** - MSAL or Auth0 login/logout with proper token management
|
|
78
|
-
2. **GraphQL Client Setup** - Configures GraphQL client with WebSocket support
|
|
79
|
-
3. **Token Refresh** - Automatic token refresh before expiration
|
|
80
|
-
4. **Metadata Loading** - Loads MemberJunction metadata and entity definitions
|
|
81
|
-
5. **User Validation** - Checks user access and permissions
|
|
82
|
-
6. **Error Handling** - Displays appropriate error messages for auth failures
|
|
83
|
-
7. **Startup Validation** - Runs system validation checks on initialization
|
|
84
|
-
8. **Navigation** - Handles initial navigation after successful login
|
|
85
|
-
|
|
86
|
-
## Component Structure
|
|
87
|
-
|
|
88
|
-
The bootstrap component provides a clean template structure:
|
|
89
|
-
|
|
90
|
-
```html
|
|
91
|
-
<mj-bootstrap>
|
|
92
|
-
<!-- Authenticated: Shows the main shell -->
|
|
93
|
-
<mj-shell *ngIf="authenticated"></mj-shell>
|
|
94
|
-
|
|
95
|
-
<!-- Not authenticated: Shows login screen -->
|
|
96
|
-
<mj-login *ngIf="!authenticated"></mj-login>
|
|
97
|
-
|
|
98
|
-
<!-- Error state: Shows error message -->
|
|
99
|
-
<mj-error *ngIf="hasError"></mj-error>
|
|
100
|
-
|
|
101
|
-
<!-- Validation issues: Shows validation banner -->
|
|
102
|
-
<mj-validation-banner *ngIf="showValidation"></mj-validation-banner>
|
|
103
|
-
</mj-bootstrap>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## API Reference
|
|
107
|
-
|
|
108
|
-
### `MJBootstrapModule.forRoot(environment: MJEnvironmentConfig)`
|
|
109
|
-
|
|
110
|
-
Configures the bootstrap module with environment settings.
|
|
111
|
-
|
|
112
|
-
#### Parameters
|
|
113
|
-
|
|
114
|
-
- `environment` - MJEnvironmentConfig object with application settings
|
|
115
|
-
|
|
116
|
-
#### Returns
|
|
117
|
-
|
|
118
|
-
ModuleWithProviders with environment configuration injected
|
|
119
|
-
|
|
120
|
-
### `MJEnvironmentConfig` Interface
|
|
121
|
-
|
|
122
|
-
```typescript
|
|
123
|
-
interface MJEnvironmentConfig {
|
|
124
|
-
production: boolean;
|
|
125
|
-
GRAPHQL_URI: string;
|
|
126
|
-
GRAPHQL_WS_URI: string;
|
|
127
|
-
AUTH_TYPE: 'msal' | 'auth0';
|
|
128
|
-
MJ_CORE_SCHEMA_NAME: string;
|
|
129
|
-
|
|
130
|
-
// MSAL-specific (optional)
|
|
131
|
-
CLIENT_ID?: string;
|
|
132
|
-
TENANT_ID?: string;
|
|
133
|
-
|
|
134
|
-
// Auth0-specific (optional)
|
|
135
|
-
AUTH0_DOMAIN?: string;
|
|
136
|
-
AUTH0_CLIENTID?: string;
|
|
137
|
-
|
|
138
|
-
// Additional custom properties
|
|
139
|
-
[key: string]: any;
|
|
140
|
-
}
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
## Migration from 2.x
|
|
144
|
-
|
|
145
|
-
In MemberJunction 2.x, your MJExplorer had:
|
|
146
|
-
- `app.component.ts` with ~245 lines of authentication logic
|
|
147
|
-
- `app.module.ts` with ~107 lines of module imports and configuration
|
|
148
|
-
|
|
149
|
-
**Before (2.x):**
|
|
150
|
-
```typescript
|
|
151
|
-
// app.component.ts - 245 lines of auth/initialization code
|
|
152
|
-
@Component({...})
|
|
153
|
-
export class AppComponent implements OnInit {
|
|
154
|
-
// Complex authentication logic
|
|
155
|
-
// GraphQL setup
|
|
156
|
-
// Error handling
|
|
157
|
-
// Navigation logic
|
|
158
|
-
// ...
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// app.module.ts - 107 lines of imports and configuration
|
|
162
|
-
@NgModule({
|
|
163
|
-
declarations: [AppComponent, ...],
|
|
164
|
-
imports: [BrowserModule, ...many modules...],
|
|
165
|
-
providers: [...many providers...],
|
|
166
|
-
bootstrap: [AppComponent]
|
|
167
|
-
})
|
|
168
|
-
export class AppModule {}
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
**After (3.0):**
|
|
172
|
-
```typescript
|
|
173
|
-
// app.module.ts - ~15 lines total
|
|
174
|
-
@NgModule({
|
|
175
|
-
imports: [
|
|
176
|
-
BrowserModule,
|
|
177
|
-
BrowserAnimationsModule,
|
|
178
|
-
MJBootstrapModule.forRoot(environment),
|
|
179
|
-
MJExplorerModule,
|
|
180
|
-
GeneratedFormsModule
|
|
181
|
-
],
|
|
182
|
-
bootstrap: [MJBootstrapComponent]
|
|
183
|
-
})
|
|
184
|
-
export class AppModule {}
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
All the complexity is now encapsulated in this package and updated via NPM.
|
|
188
|
-
|
|
189
|
-
## Advanced Usage
|
|
190
|
-
|
|
191
|
-
### Custom Error Handling
|
|
192
|
-
|
|
193
|
-
You can extend the bootstrap component to add custom error handling:
|
|
194
|
-
|
|
195
|
-
```typescript
|
|
196
|
-
import { MJBootstrapComponent } from '@memberjunction/ng-bootstrap';
|
|
197
|
-
|
|
198
|
-
@Component({
|
|
199
|
-
selector: 'app-custom-bootstrap',
|
|
200
|
-
template: `
|
|
201
|
-
<mj-bootstrap></mj-bootstrap>
|
|
202
|
-
<app-custom-error *ngIf="hasCustomError"></app-custom-error>
|
|
203
|
-
`
|
|
204
|
-
})
|
|
205
|
-
export class CustomBootstrapComponent extends MJBootstrapComponent {
|
|
206
|
-
// Add custom logic
|
|
207
|
-
}
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
### Multiple Auth Providers
|
|
211
|
-
|
|
212
|
-
Configure your environment to support both MSAL and Auth0:
|
|
213
|
-
|
|
214
|
-
```typescript
|
|
215
|
-
export const environment: MJEnvironmentConfig = {
|
|
216
|
-
production: false,
|
|
217
|
-
AUTH_TYPE: 'msal', // Default
|
|
218
|
-
|
|
219
|
-
// MSAL config
|
|
220
|
-
CLIENT_ID: 'msal-client-id',
|
|
221
|
-
TENANT_ID: 'tenant-id',
|
|
222
|
-
|
|
223
|
-
// Auth0 config (fallback)
|
|
224
|
-
AUTH0_DOMAIN: 'yourapp.us.auth0.com',
|
|
225
|
-
AUTH0_CLIENTID: 'auth0-client-id'
|
|
226
|
-
};
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
## Benefits
|
|
230
|
-
|
|
231
|
-
- **Zero-copy updates** - `npm update` brings all improvements automatically
|
|
232
|
-
- **No stale code** - Authentication logic stays up-to-date with MJ releases
|
|
233
|
-
- **Minimal surface area** - Fewer lines of code means fewer places for bugs
|
|
234
|
-
- **Standard patterns** - Everyone uses the same authentication flow
|
|
235
|
-
- **Type safety** - Full TypeScript support with proper interfaces
|
|
236
|
-
- **Tested** - Core authentication logic is tested across all MJ applications
|
|
237
|
-
|
|
238
|
-
## License
|
|
239
|
-
|
|
240
|
-
MIT
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|