From 551c3da49422733514bfcc373a846db725a9f307 Mon Sep 17 00:00:00 2001 From: lftobs Date: Sat, 20 Jul 2024 16:55:04 +0100 Subject: [PATCH 1/6] feat(116):user-dashboard-password-settings added route for it --- .../dashboard.password-settings/route.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 app/routes/dashboard.password-settings/route.tsx diff --git a/app/routes/dashboard.password-settings/route.tsx b/app/routes/dashboard.password-settings/route.tsx new file mode 100644 index 00000000..72e6ec2a --- /dev/null +++ b/app/routes/dashboard.password-settings/route.tsx @@ -0,0 +1,17 @@ +import type { MetaFunction } from "@remix-run/node"; + + +export const meta: MetaFunction = () => { + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; +}; + +export default function Index() { + return ( +
+

set

+
+ ); +} From bbe66a8443e60399c1888a9f615f9f004f546014 Mon Sep 17 00:00:00 2001 From: lftobs Date: Sat, 20 Jul 2024 16:59:24 +0100 Subject: [PATCH 2/6] feat(116):user-dashboard-password-settings (added component dir for dashbord) --- app/components/dashboard/Password.tsx | 7 +++++ .../dashboard.password-settings/route.tsx | 27 +++++++++---------- 2 files changed, 20 insertions(+), 14 deletions(-) create mode 100644 app/components/dashboard/Password.tsx diff --git a/app/components/dashboard/Password.tsx b/app/components/dashboard/Password.tsx new file mode 100644 index 00000000..07cb2c7a --- /dev/null +++ b/app/components/dashboard/Password.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +export const Password = () => { + return ( +
Password
+ ) +} diff --git a/app/routes/dashboard.password-settings/route.tsx b/app/routes/dashboard.password-settings/route.tsx index 72e6ec2a..8acbdccb 100644 --- a/app/routes/dashboard.password-settings/route.tsx +++ b/app/routes/dashboard.password-settings/route.tsx @@ -1,17 +1,16 @@ -import type { MetaFunction } from "@remix-run/node"; +import React from 'react' +// import PasswordUpdate from '~/components/dashboard/PasswordUpdate' - -export const meta: MetaFunction = () => { - return [ - { title: "New Remix App" }, - { name: "description", content: "Welcome to Remix!" }, - ]; -}; - -export default function Index() { +const DaashboardPasswordSettings = () => { return ( -
-

set

-
- ); + <> +
Nav
+
+
Sidebar
+ {/* */} +
+ + ) } + +export default DaashboardPasswordSettings \ No newline at end of file From aa6d984777243c792acb8fc6c8850cd53d1b5bb6 Mon Sep 17 00:00:00 2001 From: lftobs Date: Sat, 20 Jul 2024 17:16:19 +0100 Subject: [PATCH 3/6] feat(116):user-dashboard-password-settings (completed password update functionality) --- app/components/dashboard/Password.tsx | 7 - app/components/dashboard/PasswordUpdate.tsx | 232 ++++++++++++++++++ .../dashboard.password-settings/route.tsx | 4 +- 3 files changed, 234 insertions(+), 9 deletions(-) delete mode 100644 app/components/dashboard/Password.tsx create mode 100644 app/components/dashboard/PasswordUpdate.tsx diff --git a/app/components/dashboard/Password.tsx b/app/components/dashboard/Password.tsx deleted file mode 100644 index 07cb2c7a..00000000 --- a/app/components/dashboard/Password.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -export const Password = () => { - return ( -
Password
- ) -} diff --git a/app/components/dashboard/PasswordUpdate.tsx b/app/components/dashboard/PasswordUpdate.tsx new file mode 100644 index 00000000..4269e4df --- /dev/null +++ b/app/components/dashboard/PasswordUpdate.tsx @@ -0,0 +1,232 @@ +import { FunctionComponent, useEffect, useState, useRef } from "react"; +import { Form } from "@remix-run/react"; +import { Check, EyeOff, Eye, CircleCheck } from 'lucide-react'; +import { Button } from "../ui/button"; +import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../ui/alert-dialog"; + +interface PasswordValues { + currentPassword: string; + newPassword: string; + confirmPassword: string; +} + +const PasswordUpdate = () => { + const [showPassword, setShowPassword] = useState(false); + const [showNewPassword, setShowNewPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); + const inputRef = useRef(null) + 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 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; + let 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 8acbdccb..f8fb3ecf 100644 --- a/app/routes/dashboard.password-settings/route.tsx +++ b/app/routes/dashboard.password-settings/route.tsx @@ -1,5 +1,5 @@ import React from 'react' -// import PasswordUpdate from '~/components/dashboard/PasswordUpdate' +import PasswordUpdate from '~/components/dashboard/PasswordUpdate' const DaashboardPasswordSettings = () => { return ( @@ -7,7 +7,7 @@ const DaashboardPasswordSettings = () => {
Nav
Sidebar
- {/* */} +
) From be36ee33a5e06c53a8100fde6497ae01d7771a22 Mon Sep 17 00:00:00 2001 From: lftobs Date: Sat, 20 Jul 2024 17:33:23 +0100 Subject: [PATCH 4/6] feat(116):user-dashboard-password-settings (completed password update functionality-final) --- app/components/dashboard/PasswordUpdate.tsx | 7 +++---- app/routes/dashboard.password-settings/route.tsx | 1 - 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/app/components/dashboard/PasswordUpdate.tsx b/app/components/dashboard/PasswordUpdate.tsx index 4269e4df..6645bde1 100644 --- a/app/components/dashboard/PasswordUpdate.tsx +++ b/app/components/dashboard/PasswordUpdate.tsx @@ -1,6 +1,6 @@ -import { FunctionComponent, useEffect, useState, useRef } from "react"; +import { useEffect, useState } from "react"; import { Form } from "@remix-run/react"; -import { Check, EyeOff, Eye, CircleCheck } from 'lucide-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"; @@ -14,7 +14,6 @@ const PasswordUpdate = () => { const [showPassword, setShowPassword] = useState(false); const [showNewPassword, setShowNewPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); - const inputRef = useRef(null) const [validation, setValidation] = useState({ hasUppercase: false, hasNumber: false, @@ -46,7 +45,7 @@ const PasswordUpdate = () => { const handleChange = (event: React.ChangeEvent) => { event.preventDefault() const { name, value } = event.target; - let val: keyof PasswordValues = name as keyof PasswordValues + const val: keyof PasswordValues = name as keyof PasswordValues setActualValue((prevActualValue) => ({ ...prevActualValue, diff --git a/app/routes/dashboard.password-settings/route.tsx b/app/routes/dashboard.password-settings/route.tsx index f8fb3ecf..ad9df52f 100644 --- a/app/routes/dashboard.password-settings/route.tsx +++ b/app/routes/dashboard.password-settings/route.tsx @@ -1,4 +1,3 @@ -import React from 'react' import PasswordUpdate from '~/components/dashboard/PasswordUpdate' const DaashboardPasswordSettings = () => { From 6d079017dc99698698fe2ce65b0dad589d310124 Mon Sep 17 00:00:00 2001 From: lftobs Date: Sat, 20 Jul 2024 22:49:04 +0100 Subject: [PATCH 5/6] feat(116):user-dashboard-password-settings (completed password update functionality-finalv0.5) --- .vscode/settings.json | 5 +- app/components/dashboard/PasswordUpdate.tsx | 308 ++++++++++---------- 2 files changed, 158 insertions(+), 155 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index a62dbfe3..d1c3ba5f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,9 +1,12 @@ { "[javascript][javascriptreact][typescript][typescriptreact]": { - "editor.formatOnSave": false, + "editor.formatOnSave": true, "editor.defaultFormatter": "vscode.typescript-language-features" }, "editor.codeActionsOnSave": { "source.fixAll.eslint": "always" }, + "[typescriptreact]": { + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + }, } \ No newline at end of file diff --git a/app/components/dashboard/PasswordUpdate.tsx b/app/components/dashboard/PasswordUpdate.tsx index 6645bde1..b850c59b 100644 --- a/app/components/dashboard/PasswordUpdate.tsx +++ b/app/components/dashboard/PasswordUpdate.tsx @@ -1,8 +1,8 @@ -import { useEffect, useState } from "react"; 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 { useEffect, useState } from "react"; interface PasswordValues { currentPassword: string; @@ -59,173 +59,173 @@ const PasswordUpdate = () => { 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 + 'select', + function () { + this.select = () => { }; + this.selectionStart = this.selectionEnd; + }, + false ); }); }, []); - return ( -
-

Password Settings

-

Update password for enhanced account security

-
- - -