Add Dashboard and Authentication (Login, Signup) components

CajetanRodrigues commented 5 years ago

Dashboard and Login Component Improvements

Integrated the APIs for the Sign-Up Component, Login Component and the Dashboard Component
Improved the behavior of the side navbar based on appropriate conditions and user login status.
Proof-checked the responsiveness for mobile and desktop screens.
Standardized fonts across the app.
Added AOS animation for animate on scroll functionality.

UI Demonstration

edit

UI ScreenShots

Login Component

login

Forgot Password Component

forgot-password

Sign Up Component

signup-final

Dashboard Component (Desktop Version)

dashboard-final

Dashboard Component (Mobile Version)

dashboard-final-mobile-1

ankit01ojha commented 5 years ago

@CajetanRodrigues, sometimes I am getting this on the landing page Uie2

CajetanRodrigues commented 5 years ago

@CajetanRodrigues, sometimes I am getting this on the landing page

I have resolved it

CajetanRodrigues commented 5 years ago

@CajetanRodrigues why username: mifos and password: password is working here, it should not work because there is no self service user asmifos. openMF/web-self-service-app#27

Done

CajetanRodrigues commented 5 years ago

I have resolved all the changes suggested.

CajetanRodrigues commented 5 years ago

@CajetanRodrigues login still has issues. When I login with right credentials it is first showing an invalid credential message and then it shows login successfully. And if a user is not a self-service user it is showing invalid credentials message rather than not a self-service user. Name of the client fetched is wrong. And could you change the UI of the landing page similar to the old one?

Re: I have resolved all the login errors and stated proper login messages now. Also, the UI of the landing page is the same as the old app. Since this is Angular Material with Angular 7, the UI would look a bit different, but the rest of the things have been resolved and all the above changes have been taken into consideration.

@gauravsaini03 Can you take a final look?

ankit01ojha commented 5 years ago

Also, the UI of the landing page is the same as the old app. Since this is Angular Material with Angular 7, the UI would look a bit different.

So, you mean that the size of the font, position of font, spacing, and colors in button are different because you are using Angular Material with Angular 7 and not because of CSS? Modify the CSS to make it similar to the UI of the landing page of web self-service app because UI landing page of web self-service app is quite good.

CajetanRodrigues commented 5 years ago

Also, the UI of the landing page is the same as the old app. Since this is Angular Material with Angular 7, the UI would look a bit different.

So, you mean that the size of the font, position of font, spacing, and colors in button are different because you are using Angular Material with Angular 7 and not because of CSS? Modify the CSS to make it similar to the UI of the landing page of web self-service app because UI landing page of web self-service app is quite good.

No, I didn't mean that. I will do the needful. Thanks for reviewing

CajetanRodrigues commented 5 years ago

@CajetanRodrigues you need to fetch the details of the client who has logged in and display their details in dashboard. I don't see you fetching the login clients details.

And do the change the UI of the login page, it's still the same.

Made the look of login page as similar as possible to the Online Banking App 2.0
Fetched display name & display picture of client from API and integrated with the app

CajetanRodrigues commented 5 years ago

@CajetanRodrigues Why there are so many unwanted undefined requests are being sent in the background? When being logged in for the first time the loader keeps on loading( maybe because of these unwanted error requests). Fix them. And why are you saving the image of the client in the local storage? Remove that too.

Removed unwanted undefined get requests
Removed image from local storage
Resolved the problem, where spinner loads on the first login and data was not able to load.

CajetanRodrigues commented 5 years ago

@CajetanRodrigues remove inline CSS.

Proof checked entire html code for inline css and removed wherever present.
Added Stylings in external scss file.

CajetanRodrigues commented 5 years ago

@CajetanRodrigues Client's name is missing and charts are not correct for the client, tally it with the old app and fix it.

Fixed the issue that the client name was not visible after reloading of page, but available after immediate login.
Tallied the data with the old app.

CajetanRodrigues commented 5 years ago

@CajetanRodrigues I cannot see clients APIs being called. You need to fetch clients details because if it shows no content then only you can differentiate between a self service user and a non self service user.

You can find the client.service.ts file where I have defined methods for fetching client details
I have called the same methods in app.component.ts , dashboard.component.ts & individual chart components

openMF / online-banking