diff --git a/app/components/BlogCards.tsx b/app/components/BlogCards.tsx index 4189fef2..630a6f1a 100644 --- a/app/components/BlogCards.tsx +++ b/app/components/BlogCards.tsx @@ -1,6 +1,6 @@ import React from "react"; -interface BlogCardProps { +interface BlogCardProperties { title: string; description: string; date: string; @@ -12,7 +12,7 @@ interface BlogCardProps { link: string; } -const BlogCard: React.FC = ({ +const BlogCard: React.FC = ({ title, description, date, @@ -24,31 +24,31 @@ const BlogCard: React.FC = ({ link, }) => { return ( -
- {title} -
-
- +
+ {title} +
+
+ {tag}
-

{title}

+

{title}

 -

{description}

+

{description}

-
+
{date} {timeOfReading} mins Read
{authorName}
-

{authorName}

+

{authorName}

diff --git a/app/components/dashboard/PasswordUpdate.tsx b/app/components/dashboard/PasswordUpdate.tsx index b850c59b..b5f9e926 100644 --- a/app/components/dashboard/PasswordUpdate.tsx +++ b/app/components/dashboard/PasswordUpdate.tsx @@ -1,231 +1,323 @@ import { Form } from "@remix-run/react"; -import { EyeOff, Eye, CircleCheck } from 'lucide-react'; -import { Button } from "../ui/button"; -import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../ui/alert-dialog"; +import { CircleCheck, Eye, EyeOff } from "lucide-react"; import { useEffect, useState } from "react"; +import { + AlertDialog, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "../ui/alert-dialog"; +import { Button } from "../ui/button"; + interface PasswordValues { - currentPassword: string; - newPassword: string; - confirmPassword: string; + currentPassword: string; + newPassword: string; + confirmPassword: string; } const PasswordUpdate = () => { - const [showPassword, setShowPassword] = useState(false); - const [showNewPassword, setShowNewPassword] = useState(false); - const [showConfirmPassword, setShowConfirmPassword] = useState(false); - const [validation, setValidation] = useState({ - hasUppercase: false, - hasNumber: false, - hasMinLength: false, - }); - const [displayValue, setDisplayValue] = useState({ - currentPassword: '', - newPassword: '', - confirmPassword: '' - }); + const [showPassword, setShowPassword] = useState(false); + const [showNewPassword, setShowNewPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = + useState(false); + const [validation, setValidation] = useState({ + hasUppercase: false, + hasNumber: false, + hasMinLength: false, + }); + const [displayValue, setDisplayValue] = useState({ + currentPassword: "", + newPassword: "", + confirmPassword: "", + }); + + const [actualValue, setActualValue] = useState({ + currentPassword: "", + newPassword: "", + confirmPassword: "", + }); - const [actualValue, setActualValue] = useState({ - currentPassword: '', - newPassword: '', - confirmPassword: '' + const handlePasswordValidation = (value: string) => { + const hasUppercase = /[A-Z]/.test(value); + const hasNumber = /\d/.test(value); + const hasMinLength = value.length >= 8; + setValidation({ + hasUppercase, + hasNumber, + hasMinLength, }); + }; + + const handleChange = (event: React.ChangeEvent) => { + event.preventDefault(); + const { name, value } = event.target; + const value_: keyof PasswordValues = name as keyof PasswordValues; + + setActualValue((previousActualValue) => ({ + ...previousActualValue, + [name]: + (actualValue[value_] + value.at(-1)).length > value.length + ? actualValue[value_].slice(0, -1) + : actualValue[value_] + value.at(-1), + })); + + setDisplayValue((previousDisplayValue) => ({ + ...previousDisplayValue, + [name]: "*".repeat(value.length), + })); + if (name === "newPassword") { + handlePasswordValidation(actualValue[value_]); + } + }; + useEffect(() => { + const inputs = document.querySelectorAll(".psw-input"); + for (const element of inputs) { + element.addEventListener( + "select", + function () { + this.select = () => {}; + this.selectionStart = this.selectionEnd; + }, + false, + ); + } + }, []); + return ( +
+

+ Password Settings +

+

+ Update password for enhanced account security +

+
+ + + + + + + +
+ + + + +
+ + + + Password Successfully Updated! + + + Your password has been successfully updated! You can now log in + with your new password. + + - const handlePasswordValidation = (value: string) => { - const hasUppercase = /[A-Z]/.test(value); - const hasNumber = /[0-9]/.test(value); - const hasMinLength = value.length >= 8; - setValidation({ - hasUppercase, - hasNumber, - hasMinLength - }); - }; - - const handleChange = (event: React.ChangeEvent) => { - event.preventDefault() - const { name, value } = event.target; - const val: keyof PasswordValues = name as keyof PasswordValues - - setActualValue((prevActualValue) => ({ - ...prevActualValue, - [name]: (actualValue[val] + value.charAt(value.length - 1)).length > value.length ? actualValue[val].slice(0, -1) : actualValue[val] + value.charAt(value.length - 1) - })); - - setDisplayValue((prevDisplayValue) => ({ - ...prevDisplayValue, - [name]: '*'.repeat(value.length) - })); - if (name === 'newPassword') { - handlePasswordValidation(actualValue[val]); - } - - }; - useEffect(() => { - const inputs = document.querySelectorAll('.psw-input'); - inputs.forEach((element) => { - element.addEventListener( - 'select', - function () { - this.select = () => { }; - this.selectionStart = this.selectionEnd; - }, - false - ); - }); - }, []); - return ( -
-

Password Settings

-

Update password for enhanced account security

- - - - - - - - - - -
- - - - - -
- - - Password Successfully Updated! - - Your password has been successfully updated! You can now log in with your new password. - - - - - - - - - - - - -
- ); + + + + + + +
+ +
+ ); }; export default PasswordUpdate; diff --git a/app/routes/dashboard.password-settings/route.tsx b/app/routes/dashboard.password-settings/route.tsx index ad9df52f..0be10022 100644 --- a/app/routes/dashboard.password-settings/route.tsx +++ b/app/routes/dashboard.password-settings/route.tsx @@ -1,15 +1,17 @@ -import PasswordUpdate from '~/components/dashboard/PasswordUpdate' +import PasswordUpdate from "~/components/dashboard/PasswordUpdate"; const DaashboardPasswordSettings = () => { return ( <> -
Nav
-
-
Sidebar
- +
Nav
+
+
+ Sidebar +
+
- ) -} + ); +}; -export default DaashboardPasswordSettings \ No newline at end of file +export default DaashboardPasswordSettings;