# useForgotPassword

# Features

useForgotPassword composable can be used to:

  • generate reset password token
  • set new password using token

# API

  • request - function to generate reset password token. When invoked, it requests data from the API and populates the token property. This method accepts a single params object with the following properties:

    • params: ResetPasswordParams

      • customQuery?: CustomQuery

        interface ResetPasswordParams {
            email: string;
            expose?: boolean;
        }
        
        type CustomQuery = {
          customerCreatePasswordResetToken: string
        }
        

        Response expose

For security reasons, by default request results are hidden. You can check the API response by using the expose property - set it to true. Note that it will be uncovered for development mode. And if you want to get more data than operation id please use customQuery. :::

  • setNew - function to set new user password after request. When invoked, it requests data from the API and populates the result object. This method accepts a single params object with the following properties:

    • params: SetNewPasswordParams

    • customQuery?: CustomQuery

      interface SetNewPasswordParams {
          tokenValue: string;
          newPassword: string;
      }
      
      type CustomQuery = {
        customerResetPassword: string
      }
      
  • token: string - reactive data string containing the reset token.

  • loading: boolean - reactive object containing information about loading state of setNew and request methods.

  • error: UseForgotPasswordErrors - reactive object containing the error message, if setNew or request failed for any reason.

    interface UseForgotPasswordErrors {
      request: Error;
      setNew: Error;
    }
    

# Getters

  • getResetPasswordToken - returns generated reset password token.

  • isPasswordChanged - returns a boolean value of a password set status.

    interface ForgotPasswordGetters<ForgotPasswordResult> {
      getResetPasswordToken: (result: ForgotPasswordResult) => string
      isPasswordChanged: (result: ForgotPasswordResult) => boolean
    }
    
    interface ForgotPasswordResult {
      resetPasswordResult: CreatePasswordResetTokenResponse;
      setNewPasswordResult: ResetPasswordResponse;
    }
    
    type CreatePasswordResetTokenResponse = QueryResponse<'customerCreatePasswordResetToken', CustomerPasswordToken>;
    
    type ResetPasswordResponse = QueryResponse<'customerResetPassword', Customer>;
    
    type CustomerPasswordToken = {
      customerId: Scalars["String"];
      expiresAt: Scalars["DateTime"];
      value: Scalars["String"];
      id: Scalars["String"];
      version: Scalars["Long"];
      createdAt: Scalars["DateTime"];
      lastModifiedAt: Scalars["DateTime"];
      createdBy?: Maybe<Initiator>;
      lastModifiedBy?: Maybe<Initiator>;
    }
    
    type Customer = Versioned & {
      __typename?: "Customer";
      customerNumber?: Maybe<Scalars["String"]>;
      email: Scalars["String"];
      password: Scalars["String"];
      addresses: Array<Address>;
      defaultShippingAddressId?: Maybe<Scalars["String"]>;
      defaultBillingAddressId?: Maybe<Scalars["String"]>;
      shippingAddressIds: Array<Scalars["String"]>;
      billingAddressIds: Array<Scalars["String"]>;
      isEmailVerified: Scalars["Boolean"];
      customerGroupRef?: Maybe<Reference>;
      externalId?: Maybe<Scalars["String"]>;
      key?: Maybe<Scalars["String"]>;
      firstName?: Maybe<Scalars["String"]>;
      lastName?: Maybe<Scalars["String"]>;
      middleName?: Maybe<Scalars["String"]>;
      title?: Maybe<Scalars["String"]>;
      locale?: Maybe<Scalars["Locale"]>;
      salutation?: Maybe<Scalars["String"]>;
      dateOfBirth?: Maybe<Scalars["Date"]>;
      companyName?: Maybe<Scalars["String"]>;
      vatId?: Maybe<Scalars["String"]>;
      customerGroup?: Maybe<CustomerGroup>;
      defaultShippingAddress?: Maybe<Address>;
      defaultBillingAddress?: Maybe<Address>;
      shippingAddresses: Array<Address>;
      billingAddresses: Array<Address>;
      storesRef: Array<KeyReference>;
      stores: Array<Store>;
      /** This field contains non-typed data. Consider using `customFields` as a typed alternative. */
      customFieldsRaw?: Maybe<Array<RawCustomField>>;
      /** This field would contain type data */
      customFields?: Maybe<Type>;
      custom?: Maybe<CustomFieldsType>;
      id: Scalars["String"];
      version: Scalars["Long"];
      createdAt: Scalars["DateTime"];
      lastModifiedAt: Scalars["DateTime"];
      createdBy?: Maybe<Initiator>;
      lastModifiedBy?: Maybe<Initiator>;
      /** Custom fields are returned as a list instead of an object structure. */
      customFieldList?: Maybe<Array<CustomField>>;
    };
    

# Example

Requesting reset password token and setting new user password.

<template>
  <!-- Request reset password token -->
  <form @submit.prevent="request({ email: form.value.email })">
    <!-- form fields -->
    <button type="submit" :disabled="loading">Reset Password</button>
  </form>

  <!-- Set new user password -->
  <form @submit.prevent="setNew({ tokenValue: tokenFromUrl, newPassword: form.value.password })">
    <!-- Or you can get the token from getter by using tokenFromGetter -->
    <!-- form fields -->
    <button type="submit" :disabled="loading">Save Password</button>
  </form>
  <div>{{ isPasswordChanged }} - Boolean confirmation of successful password change</div>
</template>

<script>
import { useForgotPassword, forgotPasswordGetters } from '@vsf-enterprise/commercetools';
import { ref, computed } from '@nuxtjs/composition-api';

export default {
  setup(_, context) {
    const { request, setNew, result, loading } = useForgotPassword();
    const form = ref({});
    const isPasswordChanged = computed(() => forgotPasswordGetters.isPasswordChanged(result.value));
    const tokenFromGetter = computed(() => forgotPasswordGetters.getResetPasswordToken(result.value))

    const tokenFromUrl = context.root.$route.query.token

    return {
      request,
      setNew,
      isPasswordChanged,
      tokenFromUrl,
      tokenFromGetter,
      loading,
      form
    };
  }
};

</script>