Add Dashboard and Authentication (Login, Signup) components #1

CajetanRodrigues · 2019-08-20T13:36:38Z

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

UI ScreenShots

Login Component

Forgot Password Component

Sign Up Component

Dashboard Component (Desktop Version)

Dashboard Component (Mobile Version)

src/app/services/authentication.service.ts

ankit01ojha · 2019-08-22T02:36:52Z

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

CajetanRodrigues · 2019-08-22T14:06:17Z

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

I have resolved it

src/app/app.component.html

src/app/services/authentication.service.ts

ankit01ojha · 2019-08-23T05:52:33Z

src/app/services/user.service.ts

 const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json',
 'Fineract-Platform-TenantId': 'mobile',
-Authorization: 'Basic bWlmb3M6cGFzc3dvcmQ=' })
+Authorization: 'Basic bWlmb3M6cGFzc3dvcmQ=',


@CajetanRodrigues hardcoded.

Ok I will resolve that

@CajetanRodrigues Login using a recently registered user is not working.

I have resolved that. You can now sign up and login the same credentials you put in the form. Although the authentication flow is temporary, we could fix it in the near future. For now this PR needs to get merged to have the base fixed once and for all. So that I as well as upcoming contributors can create new components on top of the base.

ankit01ojha

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

ankit01ojha

@CajetanRodrigues Login using a recently registered user is not working.

CajetanRodrigues · 2019-08-25T09:21:25Z

@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?

gauravsaini03-zz · 2019-08-25T13:34:52Z

src/app/authentication/verification/verification.component.html

@@ -1,9 +1,9 @@
 <form  #loginForm="ngForm" >
  <img src="https://www.google-melange.com/archive/gci/2014/orgs/mifos/logo-200.png" alt="No Image found">
-    <mat-form-field>
+    <mat-form-field class="font-style ">


Please remove space in the class

Hi Gaurav, as you have suggested. I have indented all the code.

ankit01ojha · 2019-08-25T13:38:58Z

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 · 2019-08-25T13:53:52Z

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

ankit01ojha

@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.

CajetanRodrigues · 2019-08-26T10:48:14Z

@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

ankit01ojha

@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.

CajetanRodrigues · 2019-08-27T14:31:00Z

@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.

ankit01ojha

@CajetanRodrigues remove inline CSS.

ankit01ojha

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

CajetanRodrigues · 2019-09-01T10:15:39Z

@CajetanRodrigues remove inline CSS.

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

CajetanRodrigues · 2019-09-01T10:17:17Z

@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.

ankit01ojha

@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.

ankit01ojha · 2019-09-02T02:57:00Z

src/app/services/user.service.ts

+  headers: new HttpHeaders({
+    'Content-Type': 'application/json',
+    'Fineract-Platform-TenantId': 'mobile',
+    Authorization: 'Basic bWlmb3M6cGFzc3dvcmQ='


@CajetanRodrigues hardcoded.

I have done the changes. It now fetches the token dynamically.

CajetanRodrigues · 2019-09-02T04:59:20Z

@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

ankit01ojha

@CajetanRodrigues you are not checking whether clients are associated with that user or not, and without doing that how are you classifying whether a user is a self-service user or not?

CajetanRodrigues force-pushed the fix-login-bug branch 12 times, most recently from fde51de to 0b89931 Compare August 21, 2019 10:49

CajetanRodrigues changed the title ~~Add UI improvments~~ Add UI improvments for Dashboard and Authentication components Aug 21, 2019

ankit01ojha reviewed Aug 21, 2019

View reviewed changes

src/app/services/authentication.service.ts Outdated Show resolved Hide resolved

CajetanRodrigues force-pushed the fix-login-bug branch 2 times, most recently from 783157d to c2434ab Compare August 21, 2019 17:55

ankit01ojha requested changes Aug 22, 2019

View reviewed changes

src/app/services/authentication.service.ts Outdated Show resolved Hide resolved

CajetanRodrigues force-pushed the fix-login-bug branch 4 times, most recently from 50a8eec to 56719b1 Compare August 22, 2019 13:51

CajetanRodrigues force-pushed the fix-login-bug branch 2 times, most recently from 9b17d22 to d5f7322 Compare August 22, 2019 14:12

CajetanRodrigues changed the title ~~Add UI improvments for Dashboard and Authentication components~~ Add Dashboard and Authentication (Login, Signup) components Aug 22, 2019

ankit01ojha requested changes Aug 23, 2019

View reviewed changes

ankit01ojha reviewed Aug 23, 2019

View reviewed changes

CajetanRodrigues force-pushed the fix-login-bug branch from d5f7322 to 0bbec54 Compare August 23, 2019 07:16

CajetanRodrigues force-pushed the fix-login-bug branch from 66f0661 to 4a58910 Compare August 25, 2019 09:13

CajetanRodrigues force-pushed the fix-login-bug branch from 4a58910 to 3991279 Compare August 25, 2019 09:26

gauravsaini03-zz reviewed Aug 25, 2019

View reviewed changes

CajetanRodrigues force-pushed the fix-login-bug branch from 3991279 to 1587f8a Compare August 25, 2019 13:52

CajetanRodrigues force-pushed the fix-login-bug branch from 1587f8a to 2e78292 Compare August 25, 2019 15:15

ankit01ojha reviewed Aug 26, 2019

View reviewed changes

CajetanRodrigues force-pushed the fix-login-bug branch from 2e78292 to 2558f0a Compare August 26, 2019 10:37

ankit01ojha reviewed Aug 27, 2019

View reviewed changes

CajetanRodrigues force-pushed the fix-login-bug branch 5 times, most recently from 4e2733e to 477dc22 Compare August 27, 2019 14:25

ankit01ojha requested changes Aug 28, 2019

View reviewed changes

ankit01ojha reviewed Aug 29, 2019

View reviewed changes

CajetanRodrigues force-pushed the fix-login-bug branch from 477dc22 to 88bdaa8 Compare September 1, 2019 10:14

CajetanRodrigues force-pushed the fix-login-bug branch 2 times, most recently from 36ac98d to c2fb688 Compare September 1, 2019 10:25

Add UI improvments

104a7a4

ankit01ojha reviewed Sep 2, 2019

View reviewed changes

CajetanRodrigues force-pushed the fix-login-bug branch from c2fb688 to 104a7a4 Compare September 2, 2019 04:56

ankit01ojha reviewed Sep 11, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Dashboard and Authentication (Login, Signup) components #1

Add Dashboard and Authentication (Login, Signup) components #1

CajetanRodrigues commented Aug 20, 2019 •

edited

ankit01ojha commented Aug 22, 2019

CajetanRodrigues commented Aug 22, 2019

ankit01ojha Aug 23, 2019

CajetanRodrigues Aug 23, 2019

CajetanRodrigues Aug 23, 2019

ankit01ojha left a comment

ankit01ojha left a comment

CajetanRodrigues commented Aug 25, 2019 •

edited

gauravsaini03-zz Aug 25, 2019

CajetanRodrigues Aug 25, 2019

CajetanRodrigues Aug 25, 2019

ankit01ojha commented Aug 25, 2019 •

edited

CajetanRodrigues commented Aug 25, 2019 •

edited

ankit01ojha left a comment

CajetanRodrigues commented Aug 26, 2019 •

edited

ankit01ojha left a comment

CajetanRodrigues commented Aug 27, 2019

ankit01ojha left a comment

ankit01ojha left a comment

CajetanRodrigues commented Sep 1, 2019

CajetanRodrigues commented Sep 1, 2019

ankit01ojha left a comment

ankit01ojha Sep 2, 2019

CajetanRodrigues Sep 2, 2019 •

edited

CajetanRodrigues commented Sep 2, 2019 •

edited

ankit01ojha left a comment

Add Dashboard and Authentication (Login, Signup) components #1

Are you sure you want to change the base?

Add Dashboard and Authentication (Login, Signup) components #1

Conversation

CajetanRodrigues commented Aug 20, 2019 • edited

Dashboard and Login Component Improvements

UI Demonstration

UI ScreenShots

ankit01ojha commented Aug 22, 2019

CajetanRodrigues commented Aug 22, 2019

ankit01ojha Aug 23, 2019

Choose a reason for hiding this comment

CajetanRodrigues Aug 23, 2019

Choose a reason for hiding this comment

CajetanRodrigues Aug 23, 2019

Choose a reason for hiding this comment

ankit01ojha left a comment

Choose a reason for hiding this comment

ankit01ojha left a comment

Choose a reason for hiding this comment

CajetanRodrigues commented Aug 25, 2019 • edited

gauravsaini03-zz Aug 25, 2019

Choose a reason for hiding this comment

CajetanRodrigues Aug 25, 2019

Choose a reason for hiding this comment

CajetanRodrigues Aug 25, 2019

Choose a reason for hiding this comment

ankit01ojha commented Aug 25, 2019 • edited

CajetanRodrigues commented Aug 25, 2019 • edited

ankit01ojha left a comment

Choose a reason for hiding this comment

CajetanRodrigues commented Aug 26, 2019 • edited

ankit01ojha left a comment

Choose a reason for hiding this comment

CajetanRodrigues commented Aug 27, 2019

ankit01ojha left a comment

Choose a reason for hiding this comment

ankit01ojha left a comment

Choose a reason for hiding this comment

CajetanRodrigues commented Sep 1, 2019

CajetanRodrigues commented Sep 1, 2019

ankit01ojha left a comment

Choose a reason for hiding this comment

ankit01ojha Sep 2, 2019

Choose a reason for hiding this comment

CajetanRodrigues Sep 2, 2019 • edited

Choose a reason for hiding this comment

CajetanRodrigues commented Sep 2, 2019 • edited

ankit01ojha left a comment

Choose a reason for hiding this comment

CajetanRodrigues commented Aug 20, 2019 •

edited

CajetanRodrigues commented Aug 25, 2019 •

edited

ankit01ojha commented Aug 25, 2019 •

edited

CajetanRodrigues commented Aug 25, 2019 •

edited

CajetanRodrigues commented Aug 26, 2019 •

edited

CajetanRodrigues Sep 2, 2019 •

edited

CajetanRodrigues commented Sep 2, 2019 •

edited