Skip to content
This repository has been archived by the owner on Dec 10, 2023. It is now read-only.

Commit

Permalink
changed ui of profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Manas2403
Manas2403 committed Jun 17, 2023
1 parent 1c5c058 commit 8fa4e05
Showing 1 changed file with 143 additions and 118 deletions.
261 changes: 143 additions & 118 deletions pages/settings/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { UserContext } from "../../components/context";
import { useContext } from "react";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
import { useQueryClient } from "@tanstack/react-query";

import Avatar from "../../components/elements/Avatar";
import SEO from "../../components/utils/SEO";
import Footer from "../../components/elements/Footer";
const Settings = () => {
const queryClient = useQueryClient();
const { executeRecaptcha } = useGoogleReCaptcha();
Expand Down Expand Up @@ -107,127 +109,150 @@ const Settings = () => {
return (
<>
{contextHolder}
<div className="h-24 w-24 bg-[#B1FE04] mt-8 rounded-full mx-auto "></div>
<div className="mt-8 pl-2 flex rounded-lg h-10 w-[90%] ml-auto mr-auto max-w-5xl bg-[#FFFEFE] shadow-[0_3px_4px_0px_#00000040] border-[1px]">
<div
className={`${
passwordTab ? "" : " border-b-[2px]"
} hover:bg-[#f4f4f4] border-black cursor-pointer w-20 flex justify-center items-center ml-2`}
onClick={() => {
setPasswordTab(false);
}}
>
Account
</div>
<div
className={`
${!passwordTab ? "" : "border-b-[2px]"}
hover:bg-[#f4f4f4] border-black
cursor-pointer w-20 flex justify-center items-center ml-2`}
onClick={() => {
setPasswordTab(true);
}}
>
Password
</div>
</div>
<div className="max-w-5xl w-[90%] rounded-lg bg-[#FFFEFE] mx-auto mt-2 mb-8 shadow-[0_3px_4px_0px_#00000040] border-[1px]">
<div className={`max-w-lg p-4 mx-auto `}>
<Input
placeholder="Name"
className={`${
passwordTab ? "hidden" : "block"
} mt-12 py-1 px-2 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg`}
onChange={(e) => {
setName(e.target.value);
}}
value={name}
/>
<Input
placeholder="Email Address"
className={`${
passwordTab ? "hidden" : "block"
} mt-12 py-1 px-2 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg`}
onChange={(e) => {
setEmail(e.target.value);
}}
value={email}
/>
<SEO
title={`SaveMyForm | ${name?.toUpperCase()}`}
desc={`Profile page of ${name}. SaveMyForm. SaveMyForm is a platform where yoy save your form data now
easily and securely.No need to create a Backend for collecting
form responses on your application`}
/>
<div className="grid place-items-center w-screen relative">
<div className="flex flex-col gap-8 lg:w-1/2 w-5/6 z-20 mt-16">
<div className="flex flex-col gap-2 ">
<div className="flex flex-row gap-2 items-center justify-center">
<div className="h-32 w-32 rounded-full border-solid p-2 bg-[#fbeefc]">
<Avatar seed={name} />
</div>
</div>
</div>
<div className="flex flex-col gap-8 shadow-[0_4px_4px_0px_fbeefc] rounded-lg p-8 bg-[#ffffff]">
<div className="flex flex-row items-center gap-8 bg-[#fbeefc] rounded-lg px-4 pl-0">
<div
className="cursor-pointer text-lg font-semibold hover:bg-[#EEA5F4] hover:rounded-l-lg p-4 "
onClick={() => {
setPasswordTab(false);
}}
>
Account
</div>

<div
className="cursor-pointer text-lg font-semibold hover:bg-[#EEA5F4] p-4 "
onClick={() => {
setPasswordTab(true);
}}
>
Password
</div>
</div>
{!passwordTab && (
<div>
<Input
placeholder="Name"
className={`${
passwordTab ? "hidden" : "block"
} rounded-lg border-solid border-2 border-[#01684a]`}
onChange={(e) => {
setName(e.target.value);
}}
value={name}
size="large"
/>
</div>
)}
{!passwordTab && (
<div>
<Input
placeholder="Email Address"
className={`${
passwordTab ? "hidden" : "block"
} rounded-lg border-solid border-2 border-[#01684a]`}
onChange={(e) => {
setEmail(e.target.value);
}}
value={email}
size="large"
/>
</div>
)}

{passwordTab && (
<Input.Password
className={`mt-12 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg`}
placeholder="Old Password"
visibilityToggle={{
visible: oldPasswordVisible,
onVisibleChange: setOldPasswordVisible,
}}
onChange={(e) => {
setOldPassword(e.target.value);
}}
value={oldPassword}
/>
)}
{passwordTab && (
<Input.Password
className="mt-12 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg"
placeholder="New Password"
visibilityToggle={{
visible: newPasswordVisible,
onVisibleChange: setNewPasswordVisible,
}}
onChange={(e) => {
setNewPassword(e.target.value);
}}
value={newPassword}
/>
)}
{passwordTab && (
<Input.Password
className="mt-12 mb-8 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg"
placeholder="Confirm Password"
visibilityToggle={{
visible: confirmPasswordVisible,
onVisibleChange: setConfirmPasswordVisible,
}}
onChange={(e) => {
setConfPassword(e.target.value);
}}
value={confPassword}
/>
)}
{passwordTab && errorBool && (
<div
className="error-message"
style={{ textAlign: "center", color: "red" }}
>
{errorMessage}
{passwordTab && (
<div>
<Input.Password
className={`rounded-lg border-solid border-2 border-[#01684a]`}
placeholder="Old Password"
visibilityToggle={{
visible: oldPasswordVisible,
onVisibleChange: setOldPasswordVisible,
}}
onChange={(e) => {
setOldPassword(e.target.value);
}}
value={oldPassword}
size="large"
/>
</div>
)}
{passwordTab && (
<div>
<Input.Password
className="rounded-lg border-solid border-2 border-[#01684a]"
placeholder="New Password"
visibilityToggle={{
visible: newPasswordVisible,
onVisibleChange: setNewPasswordVisible,
}}
onChange={(e) => {
setNewPassword(e.target.value);
}}
value={newPassword}
size="large"
/>
</div>
)}
{passwordTab && (
<div>
<Input.Password
className="rounded-lg border-solid border-2 border-[#01684a]"
placeholder="Confirm Password"
visibilityToggle={{
visible: confirmPasswordVisible,
onVisibleChange:
setConfirmPasswordVisible,
}}
onChange={(e) => {
setConfPassword(e.target.value);
}}
value={confPassword}
size="large"
/>
</div>
)}
<div className="flex flex-row gap-2">
<button
className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-lg rounded-lg bg-[#fbeefc] p-2 w-32"
onClick={() => {
{
passwordTab
? validatePasswords()
: updateUser();
}
}}
>
Save
</button>
<button
className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-lg rounded-lg bg-white p-2 w-32"
onClick={() => {
reset();
}}
>
Cancel
</button>
</div>
)}
</div>
</div>
</div>
<div className="max-w-5xl w-[90%] ml-auto mr-auto">
<Button
type="primary"
className="mr-4 w-[8rem] h-10 rounded-lg font-inter font-medium text-lg text-center hover:border-green-300 shadow-md mb-8 hover:scale-105"
onClick={() => {
{
passwordTab ? validatePasswords() : updateUser(); // when user is saving name and email
}
}}
>
Save
</Button>
<Button
type="default"
className="mr-8 w-[8rem] h-10 rounded-lg font-inter font-medium text-lg text-center border-1 border-[#7FB3A4] text-[#00694B] hover:border-green-300 shadow-md mb-8 hover:scale-105"
onClick={() => {
reset();
}}
>
Cancel
</Button>
</div>
<Footer />
</>
);
};
Expand Down

0 comments on commit 8fa4e05

Please sign in to comment.