BA-2364: change password

packages/authentication/CHANGELOG.md

@@ -1,13 +1,20 @@
 # @baseapp-frontend/authentication
 
+## 4.2.1
+
+### Patch Changes
+
+- Rename `useChangeExpiredPassword` to `useChangePassword`
+- Modify `useChangePassword` to include the `/change-password` endpoint
+
 ## 4.2.0
 
 ### Minor changes
 
 - Enhanced the registration process to support separate first and last name inputs, improving user profile detail.
 - Introduced a configurable option that allows toggling between separate name fields and a consolidated name field.
 - Updated form validation to ensure correct input for the revised registration fields.
-- If you're using `useSignUp` with name only, you should set `useNameField`  to `true` on the hook's option 
+- If you're using `useSignUp` with name only, you should set `useNameField` to `true` on the hook's option
 
 ## 4.1.9
 

packages/authentication/modules/access/index.ts

@@ -16,5 +16,5 @@ export type * from './useResetPassword/types'
 export { default as useSignUp } from './useSignUp'
 export type * from './useSignUp/types'
 
-export { default as useChangeExpiredPassword } from './useChangeExpiredPassword'
-export type * from './useChangeExpiredPassword/types'
+export { default as useChangePassword } from './useChangePassword'
+export type * from './useChangePassword/types'

packages/authentication/modules/access/useChangeExpiredPassword/__tests__/useChangeExpiredPassword.test.tsx → packages/authentication/modules/access/useChangePassword/__tests__/useChangePassword.test.tsx

@@ -7,13 +7,12 @@ import {
 
 import { z } from 'zod'
 
-import useChangeExpiredPassword from '../index'
+import useChangePassword from '../index'
 
-describe('useChangeExpiredPassword', () => {
+describe('useChangePassword', () => {
   const currentPassword = '1234'
   const password = '12345#Abcde'
-  const token = 'fake-token'
-  const changePasswordUrl = '/change-expired-password'
+  const changePasswordUrl = '/users/change-password'
 
   afterEach(() => {
     ;(global.fetch as jest.Mock).mockClear() // Clear the mock between tests
@@ -27,16 +26,14 @@ describe('useChangeExpiredPassword', () => {
       response: {
         currentPassword,
         newPassword: password,
-        token,
       },
     })
 
     let hasOnSuccessRan = false
 
     const { result } = renderHook(
       () =>
-        useChangeExpiredPassword({
-          token,
+        useChangePassword({
           defaultValues: {
             currentPassword,
             newPassword: password,
@@ -66,8 +63,7 @@ describe('useChangeExpiredPassword', () => {
 
     const { result } = renderHook(
       () =>
-        useChangeExpiredPassword({
-          token,
+        useChangePassword({
           defaultValues: {
             currentPassword,
             newPassword: password,
@@ -101,8 +97,7 @@ describe('useChangeExpiredPassword', () => {
 
     const { result } = renderHook(
       () =>
-        useChangeExpiredPassword({
-          token,
+        useChangePassword({
           defaultValues: {
             currentPassword,
             newPassword: password,
@@ -148,8 +143,7 @@ describe('useChangeExpiredPassword', () => {
 
     const { result } = renderHook(
       () =>
-        useChangeExpiredPassword({
-          token,
+        useChangePassword({
           defaultValues: customDefaultValues,
           validationSchema: customValidationSchema,
           options: {
@@ -168,3 +162,54 @@ describe('useChangeExpiredPassword', () => {
     expect(hasOnSuccessRan).toBe(true)
   })
 })
+
+describe('useChangePassword with token for expired passwords', () => {
+  const currentPassword = '1234'
+  const password = 'abcABC@123456'
+  const token = 'fake-token'
+  const changePasswordUrl = '/change-expired-password'
+
+  afterEach(() => {
+    ;(global.fetch as jest.Mock).mockClear() // Clear the mock between tests
+  })
+
+  // This is just to ensure that running with token has the same behavior as running without token
+  test('should run onSuccess', async () => {
+    // Mock the fetch call with a success response for POST method
+    mockFetch(changePasswordUrl, {
+      method: 'POST',
+      status: 200,
+      response: {
+        currentPassword,
+        newPassword: password,
+        token,
+      },
+    })
+
+    let hasOnSuccessRan = false
+
+    const { result } = renderHook(
+      () =>
+        useChangePassword({
+          token,
+          defaultValues: {
+            currentPassword,
+            newPassword: password,
+            confirmNewPassword: password,
+          },
+          options: {
+            onSuccess: () => {
+              hasOnSuccessRan = true
+            },
+          },
+        }),
+      {
+        wrapper: ComponentWithProviders,
+      },
+    )
+
+    await result.current.form.handleSubmit()
+
+    expect(hasOnSuccessRan).toBe(true)
+  })
+})

packages/authentication/modules/access/useChangeExpiredPassword/constants.ts → packages/authentication/modules/access/useChangePassword/constants.ts

@@ -2,7 +2,7 @@ import { PASSWORD_REGEX, ZOD_MESSAGE } from '@baseapp-frontend/utils'
 
 import { z } from 'zod'
 
-import type { ChangeExpiredPasswordForm } from './types'
+import type { ChangePasswordForm } from './types'
 
 export const DEFAULT_VALIDATION_SCHEMA = z
   .object({
@@ -17,7 +17,7 @@ export const DEFAULT_VALIDATION_SCHEMA = z
     path: ['confirmNewPassword'],
   })
 
-export const DEFAULT_INITIAL_VALUES: ChangeExpiredPasswordForm = {
+export const DEFAULT_INITIAL_VALUES: ChangePasswordForm = {
   currentPassword: '',
   newPassword: '',
   confirmNewPassword: '',

packages/authentication/modules/access/useChangeExpiredPassword/index.ts → packages/authentication/modules/access/useChangePassword/index.ts

@@ -6,16 +6,16 @@ import { type SubmitHandler, useForm } from 'react-hook-form'
 
 import AuthApi from '../../../services/auth'
 import { DEFAULT_INITIAL_VALUES, DEFAULT_VALIDATION_SCHEMA } from './constants'
-import type { ChangeExpiredPasswordForm, UseChangeExpiredPassword } from './types'
+import type { ChangePasswordForm, UseChangePassword } from './types'
 
-const useChangeExpiredPassword = ({
+const useChangePassword = ({
   token,
   validationSchema = DEFAULT_VALIDATION_SCHEMA,
   defaultValues = DEFAULT_INITIAL_VALUES,
   ApiClass = AuthApi,
   enableFormApiErrors = true,
   options = {},
-}: UseChangeExpiredPassword) => {
+}: UseChangePassword) => {
   const form = useForm({
     defaultValues,
     resolver: zodResolver(validationSchema),
@@ -24,7 +24,9 @@ const useChangeExpiredPassword = ({
 
   const mutation = useMutation({
     mutationFn: ({ currentPassword, newPassword }) =>
-      ApiClass.changeExpiredPassword({ currentPassword, newPassword, token }),
+      token
+        ? ApiClass.changeExpiredPassword({ currentPassword, newPassword, token })
+        : ApiClass.changePassword({ currentPassword, newPassword }),
     ...options, // needs to be placed below all overridable options
     onError: (err, variables, context) => {
       options?.onError?.(err, variables, context)
@@ -37,7 +39,7 @@ const useChangeExpiredPassword = ({
     },
   })
 
-  const handleSubmit: SubmitHandler<ChangeExpiredPasswordForm> = async (values) => {
+  const handleSubmit: SubmitHandler<ChangePasswordForm> = async (values) => {
     try {
       await mutation.mutateAsync(values)
     } catch (error) {
@@ -55,4 +57,4 @@ const useChangeExpiredPassword = ({
   }
 }
 
-export default useChangeExpiredPassword
+export default useChangePassword

packages/authentication/modules/access/useChangeExpiredPassword/types.ts → packages/authentication/modules/access/useChangePassword/types.ts

@@ -3,19 +3,19 @@ import { z } from 'zod'
 
 import AuthApi from '../../../services/auth'
 
-type ApiClass = Pick<typeof AuthApi, 'changeExpiredPassword'>
+type ApiClass = Pick<typeof AuthApi, 'changePassword' | 'changeExpiredPassword'>
 
-export type ChangeExpiredPasswordForm = {
+export type ChangePasswordForm = {
   currentPassword: string
   newPassword: string
   confirmNewPassword: string
 }
 
-export interface UseChangeExpiredPassword {
-  token: string
+export interface UseChangePassword {
+  token?: string
   validationSchema?: z.ZodObject<z.ZodRawShape> | z.ZodEffects<z.ZodObject<z.ZodRawShape>>
-  defaultValues?: ChangeExpiredPasswordForm
-  options?: UseMutationOptions<void, unknown, ChangeExpiredPasswordForm, any>
+  defaultValues?: ChangePasswordForm
+  options?: UseMutationOptions<void, unknown, ChangePasswordForm, any>
   ApiClass?: ApiClass
   enableFormApiErrors?: boolean
 }

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/authentication/services/auth.ts

@@ -2,6 +2,7 @@ import { baseAppFetch } from '@baseapp-frontend/utils'
 
 import type {
   ChangeExpiredPasswordRequest,
+  ChangePasswordRequest,
   ForgotPasswordRequest,
   LoginRequest,
   LoginResponse,
@@ -26,6 +27,13 @@ export default class AuthApi {
     return baseAppFetch(`/register`, { method: 'POST', body: request })
   }
 
+  static changePassword({ currentPassword, newPassword }: ChangePasswordRequest) {
+    return baseAppFetch('/users/change-password', {
+      method: 'POST',
+      body: { currentPassword, newPassword },
+    })
+  }
+
   static changeExpiredPassword({
     currentPassword,
     newPassword,

packages/authentication/types/auth.ts

@@ -51,8 +51,11 @@ export interface CustomJWTKeyNames {
   refreshKeyName?: string
 }
 
-export interface ChangeExpiredPasswordRequest {
+export interface ChangePasswordRequest {
   currentPassword: string
   newPassword: string
+}
+
+export interface ChangeExpiredPasswordRequest extends ChangePasswordRequest {
   token: string
 }

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/components
 
+## 1.0.28
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/authentication@4.2.1
+  - @baseapp-frontend/design-system@1.0.11
+
 ## 1.0.27
 
 ### Patch Changes

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",

packages/design-system/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @baseapp-frontend/design-system
 
+## 1.0.11
+
+### Patch Changes
+
+- Create `ScrollView` component with support for `KeyboardAvoidingView` functionality
+- Modified native `TextInput` to adjust the error message view so it doesn't overflow offscreen
+- Added `AlertTriangleIcon` to native components
+- Fixed text color for `Button` `outlined` variant
+
+
 ## 1.0.10
 
 ### Patch Changes

packages/design-system/components/native/buttons/Button/styles.ts

@@ -51,7 +51,7 @@ export const createOutlinedStyles = (
   { disabled, variant }: ButtonStylesOptions,
 ) => {
   const borderColor = variant === 'inherit' ? colors.surface.border : colors[variant].low
-  const textColor = variant === 'inherit' ? colors.object.contrast : colors[variant].high
+  const textColor = variant === 'inherit' ? colors.object.high : colors[variant].high
 
   return StyleSheet.create({
     ...baseButtonStyles,
@@ -69,7 +69,7 @@ export const createOutlinedStyles = (
 export const createSoftStyles = ({ colors }: Theme, { disabled, variant }: ButtonStylesOptions) => {
   const backgroundColor = variant === 'inherit' ? colors.surface.active : colors[variant].overlay
   const textColor = variant === 'inherit' ? colors.object.high : colors[variant].high
-  // if variant inherid display no shadow to the button
+  // if variant inherit display no shadow to the button
   return StyleSheet.create({
     ...baseButtonStyles,
     wrapper: {

packages/design-system/components/native/icons/AlertTriangleIcon/index.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react'
+
+import Svg, { Path } from 'react-native-svg'
+
+import { useTheme } from '../../../../providers/native'
+import { SvgIconProps } from '../types'
+
+const AlertTriangleIcon: FC<SvgIconProps> = ({
+  isActive = false,
+  color,
+  width = '24',
+  height = '25',
+  ...props
+}) => {
+  const { colors } = useTheme()
+
+  const defaultColor = color ?? colors.object.high
+  const svgColor = isActive ? colors.primary.high : defaultColor
+
+  return (
+    <Svg width={width} height={height} viewBox="0 0 24 25" color={svgColor} fill="none" {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.5601 17.2714L14.8901 4.55137C14.2598 3.56537 13.1703 2.96875 12.0001 2.96875C10.8299 2.96875 9.74038 3.56537 9.1101 4.55137L1.4401 17.2714C0.888647 18.1906 0.869586 19.3343 1.3901 20.2714C1.99207 21.3265 3.11533 21.976 4.3301 21.9714H19.6701C20.8766 21.9842 21.9979 21.3511 22.6101 20.3114C23.1462 19.364 23.1271 18.2006 22.5601 17.2714ZM12.0001 17.9714C11.4478 17.9714 11.0001 17.5237 11.0001 16.9714C11.0001 16.4191 11.4478 15.9714 12.0001 15.9714C12.5524 15.9714 13.0001 16.4191 13.0001 16.9714C13.0001 17.5237 12.5524 17.9714 12.0001 17.9714ZM12.0001 14.9714C12.5524 14.9714 13.0001 14.5237 13.0001 13.9714V9.97137C13.0001 9.41909 12.5524 8.97137 12.0001 8.97137C11.4478 8.97137 11.0001 9.41909 11.0001 9.97137V13.9714C11.0001 14.5237 11.4478 14.9714 12.0001 14.9714Z"
+        fill="currentColor"
+      />
+    </Svg>
+  )
+}
+
+export default AlertTriangleIcon

packages/design-system/components/native/icons/index.ts

@@ -1,3 +1,4 @@
+export { default as AlertTriangleIcon } from './AlertTriangleIcon'
 export { default as BellIcon } from './BellIcon'
 export { default as BiometricsIcon } from './BiometricsIcon'
 export { default as BlockIcon } from './BlockIcon'