MP-39 wrap up change username&password section

kkartunov · kkartunov · commit b377feba567b · 2023-06-06T10:36:56.000+03:00
diff --git a/src/apps/accounts/src/settings/tabs/AccountSettingsTabs.tsx b/src/apps/accounts/src/settings/tabs/AccountSettingsTabs.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { UserProfile } from '~/libs/core'
+import { useMemberTraits, UserProfile, UserTraits } from '~/libs/core'
 import { TabsNavbar } from '~/libs/ui'
 
 import { AccountSettingsTabsConfig, AccountSettingsTabViews, getHashFromTabId, getTabIdFromHash } from './config'
@@ -22,6 +22,8 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
     const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>]
         = useState<string>(activeTabHash)
 
+    const memberTraits: UserTraits[] | undefined = useMemberTraits(props.profile.handle)
+
     function handleTabChange(tabId: string): void {
         setActiveTab(tabId)
         window.location.hash = getHashFromTabId(tabId)
@@ -36,7 +38,7 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
             />
 
             {activeTab === AccountSettingsTabViews.account && (
-                <AccountTab profile={props.profile} />
+                <AccountTab profile={props.profile} memberTraits={memberTraits} />
             )}
 
             {activeTab === AccountSettingsTabViews.preferences && (
diff --git a/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx b/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { UserProfile } from '~/libs/core'
+import { UserProfile, UserTraits } from '~/libs/core'
 
 import { AccountRole } from './account-role'
 import { SecuritySection } from './security'
@@ -9,6 +9,7 @@ import styles from './AccountTab.module.scss'
 
 interface AccountTabProps {
     profile: UserProfile
+    memberTraits: UserTraits[] | undefined
 }
 
 const AccountTab: FC<AccountTabProps> = (props: AccountTabProps) => (
@@ -17,7 +18,7 @@ const AccountTab: FC<AccountTabProps> = (props: AccountTabProps) => (
 
         <AccountRole profile={props.profile} />
 
-        <UserAndPassword profile={props.profile} />
+        <UserAndPassword profile={props.profile} memberTraits={props.memberTraits} />
 
         <SecuritySection profile={props.profile} />
     </div>
diff --git a/src/apps/accounts/src/settings/tabs/account/user-and-pass/UserAndPassword.tsx b/src/apps/accounts/src/settings/tabs/account/user-and-pass/UserAndPassword.tsx
@@ -1,15 +1,22 @@
-/* eslint-disable no-console */
-import { Dispatch, FC, useCallback, useState } from 'react'
+import { Dispatch, FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { has, trim } from 'lodash'
+import { toast } from 'react-toastify'
 
-import { Collapsible, Form, FormInputModel, FormToggleSwitch } from '~/libs/ui'
-import { UserProfile } from '~/libs/core'
+import {
+    Collapsible,
+    Form,
+    FormInputModel,
+    FormToggleSwitch,
+} from '~/libs/ui'
+import { updateMemberPasswordAsync, updateMemberTraitsAsync, UserProfile, UserTrait, UserTraits } from '~/libs/core'
 import { SettingSection } from '~/apps/accounts/src/lib'
 
 import { UserAndPassFromConfig } from './user-and-pass.form.config'
 import styles from './UserAndPassword.module.scss'
 
 interface UserAndPasswordProps {
     profile: UserProfile
+    memberTraits: UserTraits[] | undefined
 }
 
 const UserAndPassword: FC<UserAndPasswordProps> = (props: UserAndPasswordProps) => {
@@ -18,32 +25,82 @@ const UserAndPassword: FC<UserAndPasswordProps> = (props: UserAndPasswordProps)
         handle: props.profile.handle,
     })
 
+    const personalizationTrait: UserTraits | undefined = useMemo(
+        () => props.memberTraits?.find((trait: UserTraits) => trait.traitId === 'personalization'),
+        [props.memberTraits],
+    )
+
     const [userConsent, setUserConsent]: [boolean, Dispatch<boolean>] = useState(false)
 
     const requestGenerator: (inputs: ReadonlyArray<FormInputModel>) => any
         = useCallback((inputs: ReadonlyArray<FormInputModel>) => {
-            console.log('inputs', inputs)
-            return {}
-        }, [])
+            const currentPassword: any = inputs[2]
+            const newPassword: any = inputs[3]
+
+            return {
+                currentPassword: currentPassword.value,
+                newPassword: newPassword.value,
+                userId: props.profile.userId,
+            }
+        }, [props.profile.userId])
 
-    async function onSave(val: any): Promise<void> {
-        console.log('onSave', val)
+    useEffect(() => {
+        if (personalizationTrait) {
+            setUserConsent(
+                !!personalizationTrait?.traits.data.find(
+                    (trait: UserTrait) => has(trait, 'userConsent') && trait.userConsent === true,
+                ),
+            )
+        }
+    }, [personalizationTrait])
+
+    async function onSave(request: any): Promise<void> {
+        await updateMemberPasswordAsync(request.userId, request.currentPassword, request.newPassword)
     }
 
-    function handleUserConsentChange(event: any): void {
-        console.log('handleUserConsentChange', event)
-        setUserConsent(!userConsent)
+    function handleUserConsentChange(): void {
+        updateMemberTraitsAsync(props.profile.handle, [{
+            categoryName: 'Personalization',
+            traitId: 'personalization',
+            traits: {
+                data: [{
+                    userConsent: !userConsent,
+                }],
+            },
+        }])
+            .then(() => {
+                setUserConsent(!userConsent)
+                toast.success('User consent updated successfully.')
+            })
+            .catch(() => {
+                toast.error('Failed to update user consent.')
+            })
     }
 
     function shouldDisableChangePasswordButton(): boolean {
         // pass reset form validation
-        console.log('formValues', formValues)
+        const specialChars: any = /[`!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/
+        const currentPassword: any = formValues[2]
+        const newPassword: any = formValues[3]
+        const reTypeNewPassword: any = formValues[4]
+
+        if (
+            trim(currentPassword?.value)
+            && trim(newPassword?.value)
+            && newPassword.value?.length >= 8
+            && (
+                /\d/.test(newPassword?.value) || specialChars.test(newPassword?.value)
+            )
+            && newPassword?.value !== currentPassword?.value
+            && trim(reTypeNewPassword?.value)
+            && newPassword?.value === reTypeNewPassword?.value) {
+            return false
+        }
 
         return true
     }
 
     function setChangePasswordFormValues(val: any): void {
-        console.log('setChangePasswordFormValues', val)
         setFormValues({
             ...formValues,
             ...val,
diff --git a/src/apps/accounts/src/settings/tabs/account/user-and-pass/password-tips/PasswordTips.module.scss b/src/apps/accounts/src/settings/tabs/account/user-and-pass/password-tips/PasswordTips.module.scss
@@ -0,0 +1,17 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .infoText {
+        margin-bottom: $sp-3;
+        font-size: 14px;
+        font-weight: $font-weight-bold;
+    }
+
+    .tip {
+        font-size: 14px;
+    }
+}
diff --git a/src/apps/accounts/src/settings/tabs/account/user-and-pass/password-tips/index.tsx b/src/apps/accounts/src/settings/tabs/account/user-and-pass/password-tips/index.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react'
+
+import styles from './PasswordTips.module.scss'
+
+type PasswordTip = { text: string, valid: boolean }
+
+interface PasswordTipsProps {
+    infoText: string
+    tips: Array<PasswordTip>
+}
+
+const PasswordTips: FC<PasswordTipsProps> = (props: PasswordTipsProps) => (
+    <div className={styles.container}>
+        <p className={styles.infoText}>{props.infoText}</p>
+        {
+            props.tips.map((tip: PasswordTip) => (
+                <p className={styles.tip}>{tip.text}</p>
+            ))
+        }
+    </div>
+)
+
+export default PasswordTips
diff --git a/src/apps/accounts/src/settings/tabs/account/user-and-pass/user-and-pass.form.config.tsx b/src/apps/accounts/src/settings/tabs/account/user-and-pass/user-and-pass.form.config.tsx
@@ -2,6 +2,8 @@ import { noop } from 'lodash'
 
 import { FormDefinition, validatorRequired } from '~/libs/ui'
 
+import PasswordTips from './password-tips'
+
 export const UserAndPassFromConfig: FormDefinition = {
     buttons: {
         primaryGroup: [],
@@ -46,6 +48,19 @@ export const UserAndPassFromConfig: FormDefinition = {
                     label: 'New Password',
                     name: 'newPassword',
                     placeholder: 'Type your new password',
+                    tooltip: {
+                        className: 'passTooltip',
+                        content: <PasswordTips
+                            infoText='Your password must have:'
+                            tips={[
+                                { text: 'At least 8 characters', valid: true },
+                                { text: 'At least one letter', valid: true },
+                                { text: 'At least one number or symbol', valid: true },
+                                { text: 'Should not be the same as old password', valid: true },
+                            ]}
+                        />,
+                        place: 'bottom',
+                    },
                     type: 'password',
                     validators: [
                         {
@@ -58,6 +73,16 @@ export const UserAndPassFromConfig: FormDefinition = {
                     label: 'Re-Type New Password',
                     name: 'reTypeNewPassword',
                     placeholder: 'Re-Type New password',
+                    tooltip: {
+                        className: 'passTooltip',
+                        content: <PasswordTips
+                            infoText='Your Re-typed password must:'
+                            tips={[
+                                { text: 'Match the new password entered', valid: true },
+                            ]}
+                        />,
+                        place: 'bottom',
+                    },
                     type: 'password',
                     validators: [
                         {
diff --git a/src/apps/profiles/src/member-profile/tc-activity/ModalTriggerButton/ModalTriggerButton.module.scss b/src/apps/profiles/src/member-profile/tc-activity/ModalTriggerButton/ModalTriggerButton.module.scss
@@ -4,4 +4,9 @@
     border: 1px solid $black-10;
     padding: $sp-1 $sp-4 !important;
     margin-left: $sp-2;
+
+    svg {
+        width: 24px;
+        height: 24px;
+    }
 }
diff --git a/src/libs/core/lib/profile/data-providers/index.ts b/src/libs/core/lib/profile/data-providers/index.ts
@@ -8,3 +8,4 @@ export * from './useStatsDistribution'
 export * from './useMemberEmailPreferences'
 export * from './useMemberMFAStatus'
 export * from './useDiceIdConnection'
+export * from './useMemberTraits'
diff --git a/src/libs/core/lib/profile/data-providers/useMemberTraits.ts b/src/libs/core/lib/profile/data-providers/useMemberTraits.ts
@@ -0,0 +1,10 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { getProfileUrl } from '../profile-functions'
+import { UserTraits } from '../user-traits.model'
+
+export function useMemberTraits(handle?: string): UserTraits[] | undefined {
+    const { data }: SWRResponse = useSWR(handle ? `${getProfileUrl(handle)}/traits` : undefined)
+
+    return data
+}
diff --git a/src/libs/core/lib/profile/index.ts b/src/libs/core/lib/profile/index.ts
@@ -12,3 +12,4 @@ export * from './modify-user-role.model'
 export * from './user-email-preference.model'
 export * from './modify-user-email-preferences.model'
 export * from './modify-user-mfa.model'
+export * from './user-traits.model'
diff --git a/src/libs/core/lib/profile/modify-user-role.model.ts b/src/libs/core/lib/profile/modify-user-role.model.ts
@@ -1,13 +1,17 @@
-export interface ModifyUserRoleRequest {
+export interface ModifyUserPropertyRequest {
     param: {
-        primaryRole: string
+        primaryRole?: string
+        credential?: {
+            currentPassword: string
+            password: string
+        }
     }
 }
 
-export interface ModifyUserRoleResponse {
+export interface ModifyUserPropertyResponse {
     id: string
     result: {
-        content: string
+        content: string | any
         success: boolean
     }
 }
diff --git a/src/libs/core/lib/profile/profile-functions/index.ts b/src/libs/core/lib/profile/profile-functions/index.ts
@@ -9,6 +9,8 @@ export {
     updatePrimaryMemberRoleAsync,
     updateMemberEmailPreferencesAsync,
     updateMemberMFAStatusAsync,
+    updateMemberPasswordAsync,
+    updateMemberTraitsAsync,
 } from './profile.functions'
 export * from './profile-store'
 export * from './rating.functions'
diff --git a/src/libs/core/lib/profile/profile-functions/profile-store/profile-endpoint.config.ts b/src/libs/core/lib/profile/profile-functions/profile-store/profile-endpoint.config.ts
@@ -26,8 +26,8 @@ export function memberStatsDistroURL(): string {
     return `${EnvironmentConfig.API.V3}/members/stats/distribution`
 }
 
-export function memberModifyRoleURL(): string {
-    return `${EnvironmentConfig.API.V3}/users/updatePrimaryRole`
+export function memberModifyURL(): string {
+    return `${EnvironmentConfig.API.V3}/users`
 }
 
 export function memberEmailPreferencesURL(): string {
diff --git a/src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts b/src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts
@@ -3,17 +3,18 @@ import { CountryLookup } from '../../country-lookup.model'
 import { EditNameRequest } from '../../edit-name-request.model'
 import { ModifyMemberEmailPreferencesRequest } from '../../modify-user-email-preferences.model'
 import { ModifyUserMFARequest, ModifyUserMFAResponse } from '../../modify-user-mfa.model'
-import { ModifyUserRoleRequest, ModifyUserRoleResponse } from '../../modify-user-role.model'
+import { ModifyUserPropertyRequest, ModifyUserPropertyResponse } from '../../modify-user-role.model'
 import { UserEmailPreferences } from '../../user-email-preference.model'
 import { UserProfile } from '../../user-profile.model'
 import { UserStats } from '../../user-stats.model'
+import { UserTraits } from '../../user-traits.model'
 import { UserVerify } from '../../user-verify.model'
 
 import {
     countryLookupURL,
     memberEmailPreferencesURL,
     memberModifyMfaURL,
-    memberModifyRoleURL,
+    memberModifyURL,
     profile as profileUrl,
     verify as verifyUrl,
 } from './profile-endpoint.config'
@@ -43,9 +44,9 @@ export function getCountryLookup(): Promise<CountryLookup[]> {
         .then((countryLookup: any) => countryLookup.result?.content || [])
 }
 
-export async function updatePrimaryMemberRole(primaryRole: string): Promise<ModifyUserRoleResponse> {
-    return xhrPostAsync<ModifyUserRoleRequest, ModifyUserRoleResponse>(
-        memberModifyRoleURL(),
+export async function updatePrimaryMemberRole(primaryRole: string): Promise<ModifyUserPropertyResponse> {
+    return xhrPostAsync<ModifyUserPropertyRequest, ModifyUserPropertyResponse>(
+        `${memberModifyURL()}/updatePrimaryRole`,
         { param: { primaryRole } },
     )
 }
@@ -66,3 +67,21 @@ export async function updateMemberMFA(userId: number, payload: ModifyUserMFARequ
         payload,
     )
 }
+
+export async function updateMemberPassword(
+    userId: number,
+    currentPassword: string,
+    newPassword: string,
+): Promise<ModifyUserPropertyResponse> {
+    return xhrPatchAsync(
+        `${memberModifyURL()}/${userId}`,
+        { param: { credential: { currentPassword, password: newPassword } } },
+    )
+}
+
+export async function updateMemberTraits(
+    handle: string,
+    traits: UserTraits[],
+): Promise<UserTraits[]> {
+    return xhrPutAsync<UserTraits[], UserTraits[]>(`${profileUrl(handle)}/traits`, traits)
+}
diff --git a/src/libs/core/lib/profile/profile-functions/profile.functions.ts b/src/libs/core/lib/profile/profile-functions/profile.functions.ts
diff --git a/src/libs/core/lib/profile/user-traits.model.ts b/src/libs/core/lib/profile/user-traits.model.ts
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-text/InputText.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-text/InputText.tsx
diff --git a/src/libs/ui/lib/components/form/form-input.model.ts b/src/libs/ui/lib/components/form/form-input.model.ts
