search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
910 stars 290 forks source link

Authenticator for Angular 13 with customization #1713

Closed fanmo123 closed 2 years ago

fanmo123 commented 2 years ago

On which framework/platform would you like to see this feature implemented?

Angular

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

Please make Amplify authenticator work with Angular 13 for customization, including login page, password reset, self-registration page, logo, etc. Also, please provide instruction and document for how to setup shared coginto user pool by multiple portals. Thanks, Fan

Please describe a solution you'd like.

No response

We love contributors! Is this something you'd be interested in working on?

wlee221 commented 2 years ago

Hi @fanmo123!

For our understanding, can you provide us more detail what the current gap? Do you encounter any errors with use cases defined in https://ui.docs.amplify.aws/components/authenticator? If so, can you add some screenshots?

We're definitely interested in upgrading our Angular packages -- just wanted to make sure of the use cases and current gaps so we can triage it better.

fanmo123 commented 2 years ago

Hi, We need to customize signup page. The following binding issue occurred when use formFields prop as the following: <amplify-authenticator [formFields]="formFields">

error NG8002: Can't bind to 'formFields' since it isn't a known property of 'amplify-authenticator'.

  1. If 'amplify-authenticator' is an Angular component and it has 'formFields' input, then verify that it is part of this module.
  2. If 'amplify-authenticator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the @.***' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the @.***' of this component.

    We are using Angular 13. Could you please provide us more details for signup form customization? Thanks, Fan From: William Lee @.> Sent: Tuesday, April 26, 2022 6:33 PM To: aws-amplify/amplify-ui @.> Cc: Mo, Fan @.>; Mention @.> Subject: Re: [aws-amplify/amplify-ui] Authenticator for Angular 13 with customization (Issue #1713)

CAUTION: DO YOU KNOW THIS SENDER? Use extreme caution if opening links or attachments

Hi @fanmo123https://urldefense.com/v3/__https:/github.com/fanmo123__;!!EmXWOUHo7x8!L2t4ZB28H9pmqCsycmICO-H6ay7W0pUEVpcojnPSBp8DMPTUtFt1myhJrzMkfQc0qF0cVB2_Hm5gaixyWfKemWPWbqc$!

For our understanding, can you provide us more detail what the current gap? Do you encounter any errors with use cases defined in https://ui.docs.amplify.aws/components/authenticatorhttps://urldefense.com/v3/__https:/ui.docs.amplify.aws/components/authenticator__;!!EmXWOUHo7x8!L2t4ZB28H9pmqCsycmICO-H6ay7W0pUEVpcojnPSBp8DMPTUtFt1myhJrzMkfQc0qF0cVB2_Hm5gaixyWfKeG9AKvXI$? If so, can you add some screenshots?

We're definitely interested in upgrading our Angular packages -- just wanted to make sure of the use cases and current gaps so we can triage it better.

— Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https:/github.com/aws-amplify/amplify-ui/issues/1713*issuecomment-1110314092__;Iw!!EmXWOUHo7x8!L2t4ZB28H9pmqCsycmICO-H6ay7W0pUEVpcojnPSBp8DMPTUtFt1myhJrzMkfQc0qF0cVB2_Hm5gaixyWfKe6_ofYs4$, or unsubscribehttps://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AYZGXW5OTLONOMFNS6LYE23VHBVIXANCNFSM5TW7QAMA__;!!EmXWOUHo7x8!L2t4ZB28H9pmqCsycmICO-H6ay7W0pUEVpcojnPSBp8DMPTUtFt1myhJrzMkfQc0qF0cVB2_Hm5gaixyWfKeOs1jueI$. You are receiving this because you were mentioned.Message ID: @.**@.>>

The information transmitted in this e-mail is for the exclusive use of the person or entity to which it is addressed and may contain legally privileged or confidential information. If you are not the intended recipient of this e-mail, you are prohibited from reading, printing, duplicating, disseminating or otherwise using or acting in reliance upon this information. If you have received this information in error, please notify the sender at Freddie Mac immediately, delete this information from your computer and destroy all copies of the information.

wlee221 commented 2 years ago

Hi @fanmo123, apologies for the late response here. I was unable to reproduce this with latest @aws-amplify/ui-angular.

Here's my sample app: https://github.com/wlee221/amplify-ui-issues-repro/tree/main/angular-13-1713. This uses some basic header logos and custom formfields.

Based on the error, I'm suspecting you're on a older version of @aws-amplify/ui-angular. Please try bumping to the latest version (careful of lockfiles), and try customization again with https://ui.docs.amplify.aws/angular/components/authenticator#customization.

If this doesn't work, we need more info; please give us your package.json or a reproducible sample app.

fanmotan commented 2 years ago

Hi William, Thanks for the info. I have updated @aws-amplify/ui-angular to the latest version. After it, I can see the custom fields in sign-up page. Unfortunately, none of sign-in or create account button works any more. The following is my package.json file. Could you please help to see if there is any incompatible issues? Thanks, Fan

Package.json: { "name": "service-provider-portal", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "postinstall": "ngcc" }, "private": true, "dependencies": { "@angular/animations": "^13.2.2", "@angular/cdk": "^13.2.2", "@angular/common": "^13.2.2", "@angular/compiler": "^13.2.2", "@angular/core": "^13.2.2", "@angular/forms": "^13.2.2", "@angular/localize": "^13.2.2", "@angular/material": "^13.2.2", "@angular/platform-browser": "^13.2.2", "@angular/platform-browser-dynamic": "^13.2.2", "@angular/platform-server": "^13.2.2", "@angular/router": "^13.2.2", "@aws-amplify/cli": "^7.6.26", "@aws-amplify/ui-angular": "^2.4.4", "@iplab/ngx-file-upload": "^2.0.6", "@ng-bootstrap/ng-bootstrap": "^9.0.2", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "@swimlane/ngx-charts": "^16.0.0", "@swimlane/ngx-datatable": "^17.0.0", "@types/quill": "1.3.6", "angular-calendar": "^0.28.16", "angular-datatables": "^11.1.1", "angular-feather": "^6.0.10", "angular-notifier": "^6.0.1", "angularx-flatpickr": "^6.5.1", "apexcharts": "^3.25.0", "aws-amplify": "^4.3.22", "bootstrap": "^4.5.0", "c3": "^0.7.18", "calendar-utils": "^0.8.1", "chart.js": "^2.9.3", "chartist": "^0.11.4", "core-js": "^3.6.5", "crossvent": "^1.5.5", "d3": "^4.8.0", "d3-array": "^2.7.1", "datatables.net": "^1.10.20", "datatables.net-dt": "^1.10.20", "date-fns": "^2.14.0", "dom-autoscroller": "^2.3.4", "dom-plane": "^1.0.2", "dom-set": "^1.1.1", "flatpickr": "^4.6.6", "handlebars": "^4.7.7", "lodash": "^4.17.19", "ng-apexcharts": "^1.5.6", "ng-chartist": "^4.1.0", "ng-multiselect-dropdown": "^0.2.10", "ng2-archwizard": "^2.1.0", "ng2-charts": "^2.3.2", "ng2-search-filter": "^0.5.1", "ngx-custom-validators": "8.0.0", "ngx-image-compress": "^13.1.9", "ngx-perfect-scrollbar": "^9.0.0", "ngx-quill": "^12.0.1", "ngx-toastr": "^12.0.0", "pace-js": "^1.0.2", "quill": "^1.3.7", "rxjs": "^6.6.3", "rxjs-compat": "^6.5.4", "sass": "^1.29.0", "tslib": "^2.0.0", "zone.js": "^0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^13.2.2", "@angular/cli": "^13.2.2", "@angular/compiler-cli": "^13.2.2", "@angular/language-service": "^13.2.2", "@types/c3": "^0.6.4", "@types/chartist": "^0.9.47", "@types/datatables.net": "^1.10.18", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "^2.0.8", "@types/node": "^14.0.13", "codelyzer": "^6.0.1", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-cli": "^2.0.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "rxjs-tslint": "^0.1.8", "ts-node": "~5.0.1", "tslint": "~6.1.0", "typescript": "~4.5.5" }, "peerDependencies": { "tslib": "1.10.0" } }

fanmotan commented 2 years ago

Also, there are a lot of warnings: index.js:556 [webpack-dev-server] Warnings while compiling. logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\analytics\lib-esm\Providers\AmazonPersonalizeProvider.js depends on 'lodash/get'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\analytics\lib-esm\Providers\AmazonPersonalizeProvider.js depends on 'lodash/isEmpty'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\analytics\lib-esm\Providers\AmazonPersonalizeProvider.js depends on 'lodash/isEqual'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\auth\lib-esm\Auth.js depends on 'url'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\core\lib-esm\Signer.js depends on '@aws-crypto/sha256-js'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\datastore\lib-esm\util.js depends on 'buffer'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\datastore\lib-esm\util.js depends on 'ulid'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\datastore\lib-esm\util.js depends on 'uuid'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\geo\lib-esm\Providers\AmazonLocationServiceProvider.js depends on 'camelcase-keys'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\ui-angular\fesm2015\aws-amplify-ui-angular.js depends on 'qrcode'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\ui\dist\esm\helpers\authenticator\context.js depends on 'lodash/includes'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\ui\dist\esm\helpers\authenticator\formFields\defaults.js depends on 'lodash/cloneDeep'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\ui\dist\esm\machines\authenticator\index.js depends on 'xstate/lib/actions'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\ui\dist\esm\theme\createTheme.js depends on 'style-dictionary/lib/utils/deepExtend'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-amplify\ui\dist\esm\theme\createTheme.js depends on 'style-dictionary/lib/utils/flattenProperties'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-sdk\client-cognito-identity\dist\es\runtimeConfig.browser.js depends on '@aws-crypto/sha256-browser'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-sdk\client-location\dist-es\runtimeConfig.browser.js depends on '@aws-crypto/sha256-browser'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-sdk\client-s3\dist\es\protocols\Aws_restXml.js depends on 'fast-xml-parser'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\@aws-sdk\eventstream-marshaller\dist\es\EventStreamMarshaller.js depends on '@aws-crypto/crc32'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\amazon-cognito-identity-js\es\AuthenticationHelper.js depends on 'buffer'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\amazon-cognito-identity-js\es\AuthenticationHelper.js depends on 'crypto-js/core'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\amazon-cognito-identity-js\es\AuthenticationHelper.js depends on 'crypto-js/hmac-sha256'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\amazon-cognito-identity-js\es\AuthenticationHelper.js depends on 'crypto-js/lib-typedarrays'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies logger @ index.js:556 index.js:556 [webpack-dev-server] WARNING ..\node_modules\amazon-cognito-identity-js\es\Client.js depends on 'isomorphic-unfetch'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

wlee221 commented 2 years ago

For your latter comment, these warnings can be removed: see https://ui.docs.amplify.aws/angular/getting-started/installation#warning-commonjs-or-amd-dependencies.

wlee221 commented 2 years ago

For the former comment though, I'm unable to reproduce the unresponsive bug you mentioned. My repro attempt is here: https://github.com/wlee221/amplify-ui-issues-repro/tree/main/angular-13-1713. (While reproing, I came across #1899 which we will prioritize).

I would need some reproducible repo from you to proceed. Do you think you can share a repo (your full app, or even some minimal reproducible example)? Feel free to make it private and add @wlee221 as contributor.

Also would be happy to get in a call after I take a look at your repo.

fanmotan commented 2 years ago

For your latter comment, these warnings can be removed: see https://ui.docs.amplify.aws/angular/getting-started/installation#warning-commonjs-or-amd-dependencies.

Thanks William. all warnings have been removed. I will setup a minimal example project on my side, will keep you posted. Thanks again, Fan

wlee221 commented 2 years ago

Thanks! I know this is very frustrating, but we'll get it resolved 🙏

fanmotan commented 2 years ago

Hi William, When I worked on sample project, all worked. Then I followed the sample project to adjust the dependencies and made one portal worked. I can figure out another portal by using same approach. Thank you so much for all the help! Please go ahead to close the case. Thanks, Fan

wlee221 commented 2 years ago

Good to hear! Let me know if you find other problems 🙏