scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/LOY-183-Make-Other-Password-Inputs-Maskable (pull request #1569)

Browse Source 
feat(LOY-183): Make Current & Retype Password Inputs Maskable in My Profile Edit Form

* feat(LOY-183): implement PasswordInput and PasswordToggleButton components

- Added PasswordInput component for password fields with visibility toggle.
- Introduced PasswordToggleButton for toggling password visibility.
- Updated NewPassword component to utilize the new PasswordInput.

* refactor(LOY-183): replace NewPassword component with PasswordInput


Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-03-21 08:15:55 +00:00
parent 0666b62a4c
commit 85cd247f79
5 changed files with 53 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
View File

@@ -1,5 +1,5 @@
"use client"
// import { useFormStatus } from "react-dom"
import { useIntl } from "react-intl"
import { getLocalizedLanguageOptions } from "@/constants/languages"
@@ -8,7 +8,7 @@ import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Select from "@/components/TempDesignSystem/Form/Select"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -20,8 +20,6 @@ export default function FormContent() {
const intl = useIntl()
const lang = useLang()
// const { pending } = useFormStatus()
const languageOptions = getLocalizedLanguageOptions(lang)
const city = intl.formatMessage({ id: "City" })
const country = intl.formatMessage({ id: "Country" })
@@ -81,20 +79,16 @@ export default function FormContent() {
{intl.formatMessage({ id: "Password" })}
</Body>
</header>
<Input
<PasswordInput
data-hj-suppress
label={currentPassword}
name="password"
type="password"
/>
{/* visibilityToggleable set to false as feature is done for signup first */}
{/* likely we can remove the prop altogether once signup launches */}
<NewPassword data-hj-suppress visibilityToggleable={false} />
<Input
<PasswordInput data-hj-suppress isNewPassword name="newPassword" />
<PasswordInput
data-hj-suppress
label={retypeNewPassword}
name="retypeNewPassword"
type="password"
/>
</section>
</>

5
apps/scandic-web/components/Forms/Signup/index.tsx
View File

@@ -16,7 +16,7 @@ import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -156,9 +156,10 @@ export default function SignupForm({ title }: SignUpFormProps) {
{intl.formatMessage({ id: "Password" })}
</Subtitle>
</header>
<NewPassword
<PasswordInput
name="password"
label={intl.formatMessage({ id: "Password" })}
isNewPassword
/>
</section>
<section className={styles.terms}>