{"_id":"@desarrollofdc/ng-auth-v11","_rev":"1-92e7e268164447b6abad55876b3f539e","name":"@desarrollofdc/ng-auth-v11","dist-tags":{"latest":"10.0.12"},"versions":{"10.0.12":{"name":"@desarrollofdc/ng-auth-v11","version":"10.0.12","peerDependencies":{"@angular/common":"^10.1.6","@angular/core":"^10.1.6","primeng":"10.0.2"},"dependencies":{"tslib":"^2.0.0"},"main":"bundles/desarrollofdc-ng-auth-v11.umd.js","module":"fesm2015/desarrollofdc-ng-auth-v11.js","es2015":"fesm2015/desarrollofdc-ng-auth-v11.js","esm2015":"esm2015/desarrollofdc-ng-auth-v11.js","fesm2015":"fesm2015/desarrollofdc-ng-auth-v11.js","typings":"desarrollofdc-ng-auth-v11.d.ts","metadata":"desarrollofdc-ng-auth-v11.metadata.json","sideEffects":false,"description":"***Updated to Angular version 10.1.0 as well as PrimeNg version 10.0.2.***","_id":"@desarrollofdc/ng-auth-v11@10.0.12","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-lEhX2ueWPh+Vi8lH5k/fnOgGPOp104QBJ+4OIJ5daUcSTWyuDiHMUxHrYxdArklCr+ZgGbpeyYQna5a14Pu6Kw==","shasum":"8b962c765aedbda47de6858aa547ff708a8a6000","tarball":"https://registry.npmjs.org/@desarrollofdc/ng-auth-v11/-/ng-auth-v11-10.0.12.tgz","fileCount":109,"unpackedSize":1414338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvUUdCRA9TVsSAnZWagAAdmEP/3/oEAE42mu3HTKblKVc\nTedGPQfJGi0xTDHaN8ZoTucJhjtVVLXp3UAymQOWKLiOaAGCG01VEhBVJPxm\nV52J4QqJfiyCwXGusTtVweiokzh1tJ9m9L4GoA+qXFhzYcZOLo+A1kTteNFx\nRI2gbmCqaREnRleeh9hRJpzicqXG44pG2skW+EaTmLAKuscz9lS7Hi08D6Ih\n4xz7jhFPiRaNZdaqobZgFZ8vaC20lGcrEKNQD/PBrZ14Vg5kdyKBRuMhtIGy\nxEK+GBXejGdclIYD23XdgvnhxQS9H+53SJbQmrAgJ6w8nweL+C/JWleZA4g6\nEvHSQquEECAvLRhxG5is395qMTfc2jMCkdAzKeI4bVNsGlG8OsDOJ4/PacqX\nv3ASd3sQF08tmR21ZhWtx4lzLnP4FCTOjye+ZDtElzfiuIQr6n14qrPkXNGe\nThC7+hYmQRkd8a3h7H0ioGaoyfH03rNIHYXItic/L8DA9G12cDFsK3ktM1d0\nv/dfgJYBpmfJDSF72F5tLz2p9ULRkwcKc2Rq0nWyV64yUaAwqFlIu+lMTNvW\nRo9WxLL1baRwbcvEr/LQZDyBembKagKTaxsl8+4kKzKQlmY9ovQ3RRCir3I0\nKYj7Nca16MEmKXteAJKfPCnS7utpm3p0LQXA3GKuGtNdo8mUDgvxVpm0JBRX\nhpt4\r\n=nFG0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnPgNjX48k+4+I6xnJVbBforu5uHDtIdfYIXQ78dWyGwIgOl2ctaXNmRntjkoqsMXPdu9iTYmXPUoLrh1VtOMb9S8="}]},"_npmUser":{"name":"desarrollo_fdcteam","email":"desarrollo@fdcteam.com"},"directories":{},"maintainers":[{"name":"desarrollo_fdcteam","email":"desarrollo@fdcteam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-auth-v11_10.0.12_1606239516553_0.6442855031875443"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-24T17:38:36.327Z","10.0.12":"2020-11-24T17:38:36.758Z","modified":"2022-04-05T03:48:58.970Z"},"maintainers":[{"name":"desarrollo_fdcteam","email":"desarrollo@fdcteam.com"}],"description":"***Updated to Angular version 10.1.0 as well as PrimeNg version 10.0.2.***","readme":"# FDC Authentication Library - v10.0.1 (fdc-auth)\n***Updated to Angular version 10.1.0 as well as PrimeNg version 10.0.2.***\n\nThis library is intended to decrease the development time required to start a new application based on angular. It provides authentication under the hood and helpers to specify which operations are available for the logged user.\n\nThis new version recover the whole functionality that have the previous one. \n\n## Implementation\n\nInstall from npm running `npm i @desarrollofdc/ng-auth`\n\nIn `app.module.ts` add:\n\n```angular2\n@NgModule({\n  imports: [\n    NgAuthModule.forRoot({\n      apiGateway: API_GATEWAY,\n      applicationId: APPLICATION_ID,\n      authUri: AUTHENTICATION_URL,\n      environment: ENVIRONMENT,\n      redirectUrl: REDIRECT_URL,\n    })\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n> Note:  \n> `API_GATEWAY` is the api gateway's url normally https://gateway.fdcteam.com\n> `APPLICATION_ID` is the id registered in the database\n> `AUTHENTICATION_URL` is the url where the `Authentication Service` is running\n> `ENVIRONMENT` is the environment used for the authentication (test, production, demo)\n> `REDIRECT_URL` is the url where the user will be redirected once has logged (normally where the SPA is running)\n\nIn `app.component.html` add:\n\n```html\n<fdc-auth-wrapper>\n    <--!YOUR CODE, NORMALLY -->\n    <router-outlet></router-outlet>\n</fdc-auth-wrapper>\n``` \n\n> Note: It will make sure to load the application once the user is logged, otherwise the user will be redirected to the `authentication service` to request a token\n\n\n## Features\nThis library provides the following features:\n\n### Auth Wrapper\n\nTo start protecting the frontend just add the fdc-auth-wrapper component and wrap what you expect to protect, for instance:\n```angular2html\n<fdc-auth-wrapper>\n    <h1>Angular Router</h1>\n    <nav>\n      <a routerLink=\"/crisis-center\" routerLinkActive=\"active\">Crisis Center</a>\n      <a routerLink=\"/heroes\" routerLinkActive=\"active\">Heroes</a>\n    </nav>\n    <router-outlet></router-outlet>\n</fdc-auth-wrapper>\n```\n\n### Route Guards\nThis library provides `AuthGuard` to protect routes, this way, you can ensure that certain route will only be accessible if the user has access to the module related to that route.\n\n```typescript\nconst routes: Routes = [\n  {\n    path: '', canActivateChild: [AuthGuard],\n    children: [\n      {path: 'crisis-center', component: CrisisListComponent},\n      {\n        path: 'heroes',\n        component: HeroListComponent,\n        data: {title: 'Heroes List', moduleId: MODULE_ID, componentId: COMPONENT_ID, operationId: OPERATION_ID}\n      },\n      {\n        path: '',\n        redirectTo: '/heroes',\n        pathMatch: 'full'\n      },\n    ]\n  },\n  {path: '**', component: PageNotFoundComponent}\n];\n```\n> Note: Provide **moduleId**, **componentId** or **operationId** in data, this way the library will automatically fetch the user accesses and will only render if the user has access to that module, component and/or operation\n\n\n### Token Injection\nAn interceptor is automatically configured to inject a `Bearer` token to every request, this includes `GraphQL` requests.\n\n### Render conditional components \nThis library provides `fdc-auth-conditional-component` which renders a child only if a user has access to a respective operation, component, or module. It is used as follows:\n\n```angular2html\n<fdc-auth-conditional-component [operationId]=\"YOUR_OPERATION_ID\" [componentId]=\"YOUR_COMPONENT_ID\" [condition]=\"YOUR_CONDITION\" >\n    <your-depentent-components></your-depentent-components>\n</fdc-auth-conditional-component>\n```\n\n> Note: `your-dependent-components` will render if the user has access to the operation and/or component specified through props.\n>\n> operationId, componentId and condition are optional, `conditional-component` only takes in count the props provided.\n\n### Base layout\n\nThe library a FcdBaseLayout component, which includes a base styling for the whole app, \nthis component accepts the following parameters: \n* **name** the app name.\n* **hideStaticSidebarByDefault** show/hide the sidebar menu. It's a `boolean` type. `false` by default.\n* **showLanguage** show a component for select language, it's a `boolean` type. `false` by default.\n* **routes** which is of type `MenuItem[] | MenuItem`.\n```angular2html\n  <fdc-auth-base-layout [hideStaticSidebarByDefault]=\"true\" [showLanguage]=\"showLanguage\" [routes]=\"routes\" applicationName=\"Test\">\n    <h1>Angular Router</h1>\n    <nav>\n      <a routerLink=\"/crisis-center\" routerLinkActive=\"active\">Crisis Center</a>\n      <a routerLink=\"/heroes\" routerLinkActive=\"active\">Heroes</a>\n    </nav>\n    <router-outlet></router-outlet>\n  </fdc-auth-base-layout>\n```\n\nThis base layout already includes a logout option, and display the apps the logged user can access to.\nYou have two options to change the styles used by your application\n* add specific styles in `angular.json`, this way those styles will be added to your application styles\n```json\n{\n  \"projects\": {\n    \"your_project\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"styles\": [\n              \"node_modules/@desarrollofdc/ng-auth/assets/theme/theme-fdc-indigo.css\",\n              \"node_modules/@desarrollofdc/ng-auth/assets/layout/css/layout-fdc-indigo.css\"\n            ]\n          }\n        }\n      }\n    }   \n  } \n}\n```\n\n* Specify assets to copy to the final build and configure your project to use them\n```json\n{\n  \"projects\": {\n    \"your_project\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"assets\": [\n              {\n                \"glob\": \"layout-joomla-v4.css\",\n                \"input\": \"./node_modules/@desarrollofdc/ng-auth/assets/layout/css\",\n                \"output\": \"./assets/layout/css\"\n              },\n              {\n                \"glob\": \"layout-orange-v4.css\",\n                \"input\": \"./node_modules/@desarrollofdc/ng-auth/assets/layout/css\",\n                \"output\": \"./assets/layout/css\"\n              }\n            ]\n          }\n        }\n      }\n    }   \n  } \n}\n```\n\nIn `main.ts` add those styles to your html;\n\n```typescript\nconst {layout, theme, version} = environment.style;\nconst layoutElement = document.createElement('link');\nlayoutElement.href = `assets/layout/css/layout-${layout}.css`;\nlayoutElement.rel = 'stylesheet';\nlayoutElement.type = 'text/css';\n\nconst themeElement = document.createElement('link');\nthemeElement.href = `assets/theme/theme-${theme}.css`;\nthemeElement.rel = 'stylesheet';\nthemeElement.type = 'text/css';\n\ndocument.head.append(layoutElement, themeElement);\n```\n\n## Further help\n\nTo get more help contact  **Jeremy Perez**\n\n## Pending Features\n\n- Request new token when token expires\n\n## Development\n\n### run the app\n\nTo run the app you have to the following commands in sequence:\n* `ng build ng-auth --watch` this will watch changes and rebuild the library. Run the following commands in a new terminal.\n* `npm run build-assets` or `gulp build-assets`\n* `ng serve`\n\n### Structure\n\nThis namespace has two projects `auth-showcase` and `ng-auth-v10`. `ng-auth-v10` has the following structure:\n\n```\nng-auth\n├─ src\n    ├─ assets\n        \n    ├─ lib\n        ├─ api\n            ├─ guard\n            ├─ interceptors\n            ├─ rest\n            ├─ service\n            ├─ store\n            ├─ AuthLibConfig.ts\n        ├─ fdc-auth-components\n            ├─ fdc-auth-base-layout \n            ├─ fdc-auth-conditional-component\n            ├─ fdc-auth-unauthorized\n            ├─ fdc-auth-wrapper\n        ├─ fdc-auth-components\n            ├─ fdc-splitbutton    \n        ├─ types\n        ├─ ng-auth-v10.module.ts\n    ├─ public-api.ts\n``` \n\n* `assets` contains all the assets used by the apps, it contains layouts, custom-ui, and themes.\n* `guard` only contain `auth-guard` which is a guard to protect routes\n* `interceptos` contains two interceptors `response.interceptor` and `token.interceptor` but only `token.interceptor` is being used and configured under the hood.\n* `rest` contains services used to fetch data from `authentication-service`\n* `service` contains services with auth related logic\n* `fdc-auth-components` contains the auth-components provided by the library\n* `fdc-auth-wrapper` checks if the user is logged, otherwise it will request a new token. check [authorization flow](https://gitlab.com/la-patrulla-roja/authentication-service#flujo-de-autenticaci%C3%B3n)\n* `fdc-auth-base-layout` is the layout structure used in order to keep the same styles across the apps developed by fdc-team\n* `fdc-auth-conditional-component` renders a component conditionally if and only if the user has access to the componentId or operationId specified by props\n* `fdc-auth-unauthorized` contains components rendered by `auth-guard` when the user does not have access to a module, operation or component.\n* `types` contains interfaces defining types used across the library \n* `ng-auth-v10.module.ts` is the module used to configure the library\n\n## Deployment\n\nDeployments are made manually to npmjs.org where libraries are hosted, first is necessary to build the library and its assets\nand then upload the library's new version, the whole process can be made by running `npm run build:publish`\n\n> Make sure to specify the new library's version in  `projects/ng-auth/package.json`\n> \n> Make sure to add the token to your .npmrc config file\n\n## Components\n### FdcSplitButton\nFdcSplitButton groups a set of commands in an overlay with a default command.\nUse the same PrimeNg styles, events and properties. This include a new property.\n\n| Name           | Type    | Default | Description           |\n|----------------|---------|---------|-----------------------|\n| showDefaultBtn | Boolean | false   | Show the first button |\n\n```\n<fdc-splitButton [showDefaultBtn]=\"false\" [model]=\"actions\" styleClass=\"ui-button-secondary\"></fdc-splitButton>\n```\n\n\n","readmeFilename":"README.md"}