[Feat] Redesign dashboard page

[Vimall03]

Redesigned the Landing page along with password strength bar.

Closes #104

[vercel[bot]]

@Vimall03 is attempting to deploy a commit to the Abhijeet's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Vimall03]

@abhijeetnishal I have resolved all conflicts and successfully executed npm run build, addressing the errors that were encountered during the process. Despite my best efforts, I was unable to fully connect with the backend.

Given the circumstances, this is the best update I could provide.

Kindly merge this PR if everything works well.

[abhijeetnishal]

@abhijeetnishal I have resolved all conflicts and successfully executed npm run build, addressing the errors that were encountered during the process. Despite my best efforts, I was unable to fully connect with the backend.

Given the circumstances, this is the best update I could provide.

Kindly merge this PR if everything works well.

That's great @Vimall03. No worries I will test with the backend and fix.

I have changed the branch as it will merge with the landing page changes. There are some conflicts because I fixed some issues. Kindly resolve this. I will review and test the code tomorrow. Good job 👍

[abhijeetnishal]

For login and page.tsx file select the incoming i.e. the changes I have done and for dashboard page select current if you have done else select incoming to resolve conflicts. If you need any help let me know.

[Vimall03]

Yes, I have selected the incoming changes. Let me know if I have done it correctly while reviewing the code

[abhijeetnishal]

Why we need two columns it should show single column and on Add we give users to options with some templates like google, github according to that we can add password with Icon of that template. Also it doesn't matches with design we discussed. Pop up screen is same as previous there is no change.

[abhijeetnishal]

Also the functionality is not working earlier functionality is working. Try to work on functionality also, don't get me wrong but frontend doesn't mean html and css it should heavily includes JS, so focus on that to.

[abhijeetnishal]

I have done the high level review, do the necessary changes then i will review the code again at low level.

[Vimall03]

Hey @abhijeetnishal , I understand what you’re saying and I agree with you. However, as I mentioned earlier, I’m unable to access data from the backend, which makes developing the functionality and popups extremely difficult, at least at my level.

I used the previous logic for adding and receiving the data, hoping it would work since I didn’t have backend access.

Regarding the two columns, the Figma file has two columns, but I will change it as you mentioned above.

[Vimall03]

To fix the functionality issue, I can code it in such a way that it takes data locally from a dummy data array so you can see the results. If that’s not acceptable, I’m very sorry to say that you might need to unassign me from this issue, as I’m having trouble debugging the backend error.

[abhijeetnishal]

Hey @Vimall03, the issue is with PostgreSQL right? Have you tried render, in render check the host as host will end with render.com. I don't know why it's not connecting. Have you tried making request with postman is it working?

[abhijeetnishal]

I don't know why it's not working if you have used the same logic for functionality

[abhijeetnishal]

To fix the functionality issue, I can code it in such a way that it takes data locally from a dummy data array so you can see the results. If that’s not acceptable, I’m very sorry to say that you might need to unassign me from this issue, as I’m having trouble debugging the backend error.

Could you share the issue? I don't want to unassign you as you have done work.

[Vimall03]

Hey @Vimall03, the issue is with PostgreSQL right? Have you tried render, in render check the host as host will end with render.com. I don't know why it's not connecting. Have you tried making request with postman is it working?

Yeah I setup using render and I also received a 200 code. I`m getting 'failed to fetch' in the console when i try to register or login.

[abhijeetnishal]

Can you share the error from networks tab and also from console. You will get the network response by selecting network and then select the request it will show request and respond. Kindly share with me

[Vimall03]

This is what i got when i tried to register.

This is the console message

[abhijeetnishal]

Hey @Vimall03, remove the question mark at the end of request as there are no query params in this request

[abhijeetnishal]

You can see my request, there is no question mark

[abhijeetnishal]

Hey @Vimall03, it's is also taking the port 3000 not 8080. I think the .env.local not taking the host. .env file code: NEXT_PUBLIC_BASE_URL=http://localhost:8080

Try to restart and run, this is the issue with env it's not taking

[Vimall03]

Hey @Vimall03, it's is also taking the port 3000 not 8080. I think the .env.local not taking the host. .env file code: NEXT_PUBLIC_BASE_URL=http://localhost:8080

Yeah i noticed that too. But i use NEXT_PUBLIC_BASE_URL=http://localhost:8080 in the .env file (in the client folder)

[Vimall03]

Hey @Vimall03, remove the question mark at the end of request as there are no query params in this request

Can you mention which file to change ?

[abhijeetnishal]

Hey @Vimall03, it's is also taking the port 3000 not 8080. I think the .env.local not taking the host. .env file code: NEXT_PUBLIC_BASE_URL=http://localhost:8080

Yeah i noticed that too. But i use NEXT_PUBLIC_BASE_URL=http://localhost:8080 in the .env file (in the client folder)

Have you tried login or just tried register?

[Vimall03]

Hey @Vimall03, it's is also taking the port 3000 not 8080. I think the .env.local not taking the host. .env file code: NEXT_PUBLIC_BASE_URL=http://localhost:8080

Yeah i noticed that too. But i use NEXT_PUBLIC_BASE_URL=http://localhost:8080 in the .env file (in the client folder)

Have you tried login or just tried register?

I tried both, logging in as well as registering For Login:

[Vimall03]

Also these are my logs on render (database),

[abhijeetnishal]

Hey @Vimall03, I have cloned your repo I will try to run and let you know give me some time

[Vimall03]

sure, Thankyou

[abhijeetnishal]

Hey @Vimall03, i tried running your repo and it's running on my system. So i think may be it's a system level issue. I tried all approach. If you have any friend try to show them and ask if possible.

[Vimall03]

Okay. Sure, I will let you know by tomorrow. Can you also try logging in and trying to use the Add password functionality as well ?

[abhijeetnishal]

Hey @Vimall03, have you tried cloning the current project and running it. Try once as it is live and running.

git clone https://github.com/abhijeetnishal/Password-Shield.git

[Vimall03]

yeah I tried that, i received this :

[abhijeetnishal]

Hey @Vimall03, i think here it is taking correct route and port. Could you share the payload and response present in the network tab apart from headers?

[abhijeetnishal]

I think this time issue with the server go to server console and see the error. I think now you can run the application.

[Vimall03]

I think this time issue with the server go to server console and see the error. I think now you can run the application.

There was an error due to the .env.local file. I used .env.local as suggested in our earlier conversation, but the values for JWT and secret were not being read. So, I had to use .env Now, I'm able to log in.

I tried to do the same with my repo but it didn't work. I'm still facing the same issue.

[abhijeetnishal]

I think this time issue with the server go to server console and see the error. I think now you can run the application.

There was an error due to the .env.local file. I used .env.local as suggested in our earlier conversation, but the values for JWT and secret were not being read. So, I had to use .env Now, I'm able to log in.

I tried to do the same with my repo but it didn't work. I'm still facing the same issue.

Yes for server side code it should be .env and for client is should be .env.local.

If this is working then you can do one thing, you can just switch the branch to ui-fix you can get the landing page code changes, just add the dashboard code directly from the current I think it will work.

Finally, we fixed the connection issue atleast 😌

[Vimall03]

Okay, I will give it a try and let you know.

[Vimall03]

Hey @abhijeetnishal,

I found the issue. The current login page doesn't use a <form></form> tag to handle login and registration data. However, in the redesign, I used a <form> tag to handle the data. I have fixed my issue with the code. Hopefully, everything should work well from now on. I will keep you updated.

[abhijeetnishal]

Hey @abhijeetnishal,

I found the issue. The current login page doesn't use a <form></form> tag to handle login and registration data. However, in the redesign, I used a <form> tag to handle the data. I have fixed my issue with the code. Hopefully, everything should work well from now on. I will keep you updated.

Oh great 👏 @Vimall03, i guess you learned some debugging skills.

Yes i removed that form because it's refreshing the page.

[abhijeetnishal]

Hey @Vimall03, there are couple of issues:

1. When i am running the app it's showing error:

This is due to the merge is not happened properly. The layout code is incorrect. correct code:

import { Inter } from "next/font/google";
import { ReactNode, FC } from "react";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

interface RootLayoutProps {
  children: ReactNode;
}

const RootLayout: FC<RootLayoutProps> = ({ children }) => {
  return (
    <html lang="en">
      <head>
        <title>Key Safe</title>
      </head>
      <body className={inter.className}>
        <main className="min-h-[85vh] bg-white">{children}</main>
      </body>
    </html>
  );
};

export default RootLayout;

2. The signup page code is also merged earlier one. Reason again the merge is not happened properly.

3. Decrypt functionality is missing

[abhijeetnishal]

Hey @Vimall03, i will merge this code and fix all issues as mentioned and other code refactoring. As you wanted to merge this code immediately, i don't want your work to be wasted.

Thanks for contributing

[Vimall03]

Thankyou @abhijeetnishal