excellarateinc / voyage-app-angular Goto Github PK

Since profile images are a fixed size / dimension, there should be some features and/or rules about how we handle the profile image on upload.

Ideally we would:

• Allow any photo to be uploaded with a max size limit
• Once uploaded, display the profile image
• Allow the user to move a view finder over the image to select the visible portion of the image for display in the profile spot.
• Crop the image and resize to no more than the maximum size allowed.
• store the image and display in the upper right corner.

Currently, any image can be display and it is forced into a height/width that bends and distorts the image on the Profile detail page, and sets the image to be off centered in the upper right corner.

We need to implement AOT for deployments. This will improve performance.

https://angular.io/guide/aot-compiler

Steps to reproduce:

• Mac Safari or Mac Chrome
• 1password installed in Safari or Chrome extensions
• Go to the login page of Voyage Banking app
• entering a password results in a "Password required" message with no form submission
• no way to get around this unless the password manager extension is removed

There are multiple breaking changes that will need to be addressed including:

• No more material module, need to create a custom module that imports everything we need
• No more md-* prefix, now it's mat-*

Enhancements

• Place form elements in a mat-form-field to get form benefits.

Components

• Admin
• Login
• NOT CHAT
• Dashboard
• Examples / Profile
• Examples / Banking
• Notifications

• UI Components
  • Charts for checking / savings data (ng-charts is already integrated)
  • Create transfer component ( Start of one exists in /examples/ )
    • source account
    • dest account
    • amount

Make sure they're responsive.

https://developers.google.com/web/progressive-web-apps/

Example: https://itnext.io/turning-an-angular-6-app-into-a-progressive-web-app-9e6fc6361ba6

Need page to manage security questions

Remove the "Settings" menu option since it doesn't do anything.

• Left sidebar
• Profile menu

Write more unit tests to get to 100% coverage.

Our latest coverage snapshot, generated with ng test --code-coverage

Within the Profile module, only allow for mobile phones, like user registration.

Tech note: move the Profile module out of /src/app/examples/ and into /src/app since Profile will be a core feature of Voyage that most apps will require.

• Change the "Phone" field within the Profile page to "Mobile Phone"
• Remove the "Type" drop-down field and force the type of "Mobile" when updating the profile.
• Move the source /src/app/examples/profile to /src/app/profile (or wherever you think it should go)

Making sure that the Java API OAuth works exactly like the .NET API OAuth.

Do not use any OAuth pattern that requires an embedded password or secret

Very easy upgrade, no breaking changes, just need to follow:

https://update.angular.io/

• Upgrade to Angular 6, including Angular Material, Angular Flex Module and the CLI

Admin route should require user to have a "ADMIN" role

First refactor header => profile to its own component.

Inject auth service into this new component and wire up logout item click to authService.logout()

Need page to change password

We will create an implementation that will be more specific in a separate project. Let's leave this app as the base foundation to build from.

• Replace anything that says "Voyage Bank" with "Sample App"
• Add "Sample App" title at the top of the Register page
• Leave the current bank logo on the login page... it's fine for now.

When the app detects that the user needs to be verified, route the user to a view that is similar to the Login page, where the user verification workflow is the primary focus.

All other options, like navigation, should be disabled and/or hidden. The user should be treated as if they are not authenticated, so no other features should be allowed until user verification is complete.

There are some missing profile fields that need to be displayed on the user profile page.

• Username: Add a disabled input field (or just the text) that displays the user's username
• Password: Add a way to enter a new password and confirm the password.

NOTE: I'm seeing some apps not have the "confirm" password double entry since there is a password recovery method. I don't care either way. We do this on registration, so whatever we do should be consistent in profile update and registration.

Make the dashboard look fancy... much like the banking app. Perhaps steal those charts, etc. Nothing fancy, in fact, keep minimal as possible so that future apps do not have to remove much when starting off with the Voyage base.

• App some "flare" to the dashboard to make it look full and vibrant with animated charts (use your best judgement). Quick and easy is the point.
• Remove the banking options in the left sidebar "Create Account" and "Transfer and Pay". Remove the code as well. Nothing banking specific.
• Add another navigation page called "Sample Page" that is similar to the Dashboard, but perhaps a table of data with one large chart... something different looking to demonstrate switching pages and a different way of laying things out.
• Place these pages within the "/src/app/examples/" folder like the current banking pieces.

See usage of AuthenticationService in SecurityInterceptor. I think it would be better is authenticationService had an isLoggedIn method to determine if we add the auth token rather than the caller having to do a null check.

• Better leverage Material's theme functionality.
• Make dark theme look better

• Angular-CLI / Project file changes
• New HTTP Client

• Remove the option to select the phone type and rename the "Phone" field to be "Mobile Phone".
• When sending the phone to the /profiles/register POST, force the type to be "Mobile".

When the app is loading (after login, on logout) there is a page that is displayed with the text "Loading...". I would like this transition page (if it's even needed) to be more graphical with a large loading animation that is consistent with the look-and-feel of the app.