@unipin/angular-applet 18.9.3 → 18.9.5

package/projects/unipin-angular/src/lib/resolvers/auth/auth.resolver.ts

@@ -0,0 +1,144 @@
+import { Injectable } from '@angular/core';
+import { AuthService } from '../../services';
+
+/**
+ * The `AuthResolver` service provides methods for handling authentication-related tasks,
+ * such as checking user login status, retrieving authentication tokens, and managing token expiration.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthResolver {
+
+  /**
+   * Checks if the user is logged in by verifying the presence of an authentication token.
+   * @returns {boolean} - True if the user is logged in; otherwise, false.
+   */
+  public isUserLoggedIn(): boolean{ 
+    return AuthService.authToken !== ''; 
+  }
+
+  /**
+   * Retrieves the authentication token, resolving it if needed.
+   * @returns {string | null} - The authentication token if the user is logged in; otherwise, null.
+   */
+  public getAuthToken(): string | null{
+    this.resolveUserAuthToken();
+    
+    if (this.isUserLoggedIn()) return AuthService.authToken;
+  	return null;
+  }
+
+  /**
+   * Resolves the user's authentication token by checking expiration and whether the user still logged in or not.
+   */
+  protected resolveUserAuthToken(): void{
+    if (!this.isUserLoggedIn() || !this.isTokenExpired(AuthService.authToken)) return;
+    
+    AuthService.authToken = '';
+    AuthService.refreshToken = '';
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('refreshToken');
+  }
+
+  /**
+   * Checks if a given token is expired or not yet.
+   * @param {string | null} token - The token to be checked for expiration.
+   * @returns {boolean} - True if the token is expired; otherwise, false.
+   */
+  protected isTokenExpired(token: string | null): boolean{
+    if (!token || token === '') return true;
+    const date = this.getTokenExpirationDate(token);
+
+    if (date === null) return false;
+    return !(<number>date.valueOf() > new Date().valueOf() + 0 * 1000);
+  }
+
+  /**
+   * Retrieves the expiration date of a token.
+   * @param {string | null} token - The token for which to retrieve the expiration date.
+   * @returns {Date | null} - The expiration date of the token if available; otherwise, null.
+   */
+  protected getTokenExpirationDate(token: string | null): Date | null{
+    const decoded: any = this.decodeToken(token);  
+    if (!decoded || !decoded.hasOwnProperty('exp')) return null;
+    
+    const date = new Date(0);
+    date.setUTCSeconds(decoded.exp);
+
+    return date;
+  }
+
+  /**
+   * Decodes a JWT token to extract payload information.
+   * @param {string | null} token - The JWT token to be decoded.
+   * @returns {string | null} - The decoded payload as a string if successful; otherwise, null.
+   */
+  protected decodeToken(token: string | null): string | null{
+    if (!token || token === '') return null;
+
+    const parts = token.split('.');
+    if (parts.length !== 3) throw new Error(`The inspected token doesn't appear to be a JWT. Check to make sure it has three parts and see https://jwt.io for more.`);
+
+    const decoded = this.urlBase64Decode(parts[1]);
+    if (!decoded) throw new Error('Cannot decode the token.');
+
+    return JSON.parse(decoded);
+  }
+
+  /**
+   * Decodes a base64url-encoded string.
+   * @param {string} str - The base64url-encoded string to be decoded.
+   * @returns {string} - The decoded string.
+   */
+  protected urlBase64Decode(str: string): string{
+    let output = str.replace(/-/g, '+').replace(/_/g, '/');
+    switch (output.length % 4) {
+      case 0:
+        break;
+        
+      case 2: 
+        output += '==';
+        break;
+
+      case 3:
+        output += '=';
+        break;
+
+      default: 
+        throw new Error('Illegal base64url string!');
+    }
+    return this.b64DecodeUnicode(output);
+  }
+
+  /**
+   * Decodes a Unicode string from a base64-encoded string.
+   * @param {string} str - The base64-encoded string to be decoded.
+   * @returns {string} - The decoded Unicode string.
+   */
+  protected b64DecodeUnicode(str: string): string{
+    return decodeURIComponent(Array.prototype.map.call(this.b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
+  }
+
+  /**
+   * Decodes a base64-encoded string.
+   * @param {string} str - The base64-encoded string to be decoded.
+   * @returns {string} - The decoded string.
+   */
+  protected b64decode(str: string): string{
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+    let output = '';
+
+    str = String(str).replace(/=+$/, '');
+    if (str.length % 4 === 1) throw new Error(`'atob' failed: The string to be decoded is not correctly encoded.`);
+
+    for (
+      let bc = 0, bs: any, buffer: any, idx = 0;
+      (buffer = str.charAt(idx++));
+      
+      ~buffer && ((bs = bc % 4? bs * 64 + buffer : buffer), bc++ % 4)? (output += String.fromCharCode(255 & (bs >> ((-2 * bc) & 6)))) : 0
+    ) buffer = chars.indexOf(buffer);
+
+    return output;
+  }
+}

package/projects/unipin-angular/src/lib/services/auth/auth.service.ts

@@ -0,0 +1,243 @@
+import { Injectable } from '@angular/core';
+import { Observable, tap } from 'rxjs';
+import { Apollo, MutationResult, gql } from 'apollo-angular';
+import { FetchPolicy } from '@apollo/client/core';
+import { AppLoginSubject, ChangePassRq, LoginResponse, LoginRq, MutationAuthMsRefreshAccessTokenArgs, SourcePlatform, SuggestedAction, Token } from '../../../graphql/generated';
+import { User } from '../../interfaces';
+import { ProfileService } from '../profile/profile.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  /**
+   * Both `authToken` and `refreshToken` are public static variable to store the auth token and refresh token obtained form the login API.
+   * They will be set as header param inside API calls.
+   * @type {string}
+   * @default ''
+   */
+  public static authToken: string = '';
+  public static refreshToken: string = '';
+
+  /**
+   * A public variable to store the logined user information.
+   * @type {User} An interface contain user information.
+   * @default undefined
+   */
+  public user?: User;
+
+  constructor(
+    protected readonly apollo: Apollo,
+    protected readonly profileService: ProfileService
+  ) { }
+
+  /**
+   * A method to authenticate the user to get the session for applet or platform.
+   * When successful it will set the user information to the `user` variable, `authToken` and `refreshToken`.
+   * It will set the `authToken`, `refreshToken`, `userGuid` and `roles` to the localStorage also for API calls.
+   * @param {{ email: string, password: string, sourcePlatform: string }} input - Contain `email` which is registered user email, `password` which is registered user password
+   * and `sourcePlatform` it's value can be `ADMIN` to get the applet session or `CP_COMMERCE` to get the platform session.
+   * @returns {Observable<MutationResult<{ authMsLogin: LoginResponse }>>} Contain logined user information.
+   */
+  public login(input: LoginRq): Observable<MutationResult<{ authMsLogin: LoginResponse }>>{
+    return this.apollo.mutate<{ authMsLogin: LoginResponse }>({
+      variables: { input },
+      mutation: gql`
+        mutation Login($input: LoginRq!) {
+          authMsLogin(input: $input) {
+            accessToken
+            refreshToken
+            suggestedAction
+            user {
+              birthday
+              category
+              email
+              gender
+              guid
+              mobileNumber
+              name
+              status
+              departments {
+                department {
+                  hierarchyCode
+                  hierarchyPath
+                  name
+                  guid
+                  status
+                }
+                isLead
+              }
+            }
+            roles {
+              guid
+              code
+              name
+              isInternal
+              status
+            }
+          }
+        }
+      `
+    }).pipe(
+      tap(({ data }) => {
+        if (data?.authMsLogin) {
+          const { accessToken, user, refreshToken, suggestedAction, roles } = data.authMsLogin;
+
+          this.user = user as User;
+          this.user.roles = roles as any;
+          this.user!.photo = '/assets/imgs/profile.svg';
+          AuthService.authToken = accessToken ?? '';
+          AuthService.refreshToken = refreshToken ?? '';
+
+          if (suggestedAction !== SuggestedAction.ChangePassword ) { 
+            localStorage.setItem('authToken', AuthService.authToken); 
+          }
+
+          localStorage.setItem('userGuid', this.user!.guid);
+          localStorage.setItem('roles', JSON.stringify(roles));
+          localStorage.setItem('refreshToken', AuthService.refreshToken);
+        }
+      })
+    );
+  }
+
+  /**
+   * This method is used by the `refreshTokenInterceptor`, to get the new token shortly before the auth token is expired.
+   * @param {MutationAuthMsRefreshAccessTokenArgs} variables - Contain `refreshToken` attribute which is the current refresh token.
+   * @returns {Observable<MutationResult<{ authMsRefreshAccessToken: Token }>>} Contain new `authToken` and `refreshToken`.
+   */
+  public refreshToken(variables: MutationAuthMsRefreshAccessTokenArgs): Observable<MutationResult<{ authMsRefreshAccessToken: Token }>>{
+    return this.apollo.mutate({
+      context: {
+        headers: {
+          'operation-type': 'Mutation',
+          'operation-name': 'RefreshToken'
+        }
+      },
+      variables,
+      mutation: gql`
+        mutation RefreshToken($refreshToken: String!) {
+          authMsRefreshAccessToken(refreshToken: $refreshToken) {
+            accessToken
+            refreshToken
+          }
+        }
+      `
+    });
+  }
+
+  /**
+   * A method to set the user information to the `user` variable when the user refresh the page.
+   * Because of the user information only stored in the variable so it will gone while the page refreshed and need to reset again.
+   * @param {FetchPolicy | undefined} fetchPolicy - Specifies how Apollo Client should handle data retrieval,
+   * determining whether it should make a network request to fetch fresh data from the server or use data from the local cache.
+   * @returns {Observable<AppLoginSubject | null>}
+   */
+  public getProfile(fetchPolicy?: FetchPolicy): Observable<AppLoginSubject | null>{
+    return this.profileService.getMyProfile(fetchPolicy).pipe(
+      tap((user: AppLoginSubject | null) => {
+        if (!user) return;
+        this.user = { ...user, photo: '/assets/imgs/profile.svg' } as User;
+
+        user.appLoginExt?.forEach(({ paramCode, file: { publicUrl }}: any) => {
+          if (paramCode === 'USER_PROFILE_PHOTO') this.user!.photo = publicUrl;
+        });
+
+        user.appLoginPrincipal?.forEach(({ principalId, principalType }: any) => {
+          if (principalType === 'EMAIL_USERNAME') this.user!.email = principalId;
+        });
+      })
+    );
+  }
+
+  /**
+   * A method to get the otp / verification code for reset password purpose.
+   * No need authorization header to call this API.
+   * @param {string} email - Contain registered user email.
+   * @returns {Observable<MutationResult<any>>} Contain message stating that verification code has been sent to the email.
+   */
+  public initForgotPassword(email: string): Observable<MutationResult<any>>{
+    return this.apollo.mutate({
+      variables: {
+        input: {
+          email,
+          sourcePlatform: SourcePlatform.Admin
+        }
+      },
+      mutation:  gql`
+        mutation InitForgotPassword($input: ForgotPassOtpRq!) {
+          authMsForgotPasswordOtp(input: $input)
+        }
+      `
+    });
+  }
+
+  /**
+   * A method to get the otp / verification code for 2FA.
+   * No need authorization header to call this API.
+   * @param {string} email - Contain registered user email.
+   * @returns {Observable<MutationResult<any>>} Contain message stating that verification code has been sent to the email.
+   */
+  public initOtpCode(email: string): Observable<MutationResult<any>>{
+    return this.apollo.mutate({
+      variables:{
+        input:{
+          email,
+          sourcePlatform: SourcePlatform.Admin
+        }
+      },
+      mutation: gql`
+        mutation AuthMsLoginOtp($input: LoginOtpRq!) {
+          authMsLoginOtp(input: $input)
+        }
+      `
+    });
+  }
+
+  /**
+   * A method to generate new password when the user forgets the password.
+   * No need authorization header for this API.
+   * @param {{ confirm: string, newPassword: string, principalId: string, verifCode: string, sourcePlatform: string }} - Contain :
+   * newPassword - the new password.
+   * confirm - the exactly same with the new password.
+   * principalId - registered email or phone number attached to user.
+   * verifCode - otp / verification code that has been sent to email.
+   * sourcePlatform - `ADMIN` for applet or `CP_COMMERCE` for platform.
+   * @returns {Observable<MutationResult<any>>} Contain message stating that user successfully / failed to reset the password.
+   */
+  public createNewPassword({ newPassword, principalId, sourcePlatform, verifCode }: { confirm: string, newPassword: string, principalId: string, verifCode: string, sourcePlatform: string }): Observable<MutationResult<any>>{
+    return this.apollo.mutate({
+      mutation : gql`
+        mutation SubmitForgotPassword($input: ForgotPassRq!) {
+          authMsForgotPassword(input: $input)
+        }
+      `,
+      variables: {
+        input: {
+          newPassword,
+          principalId,
+          sourcePlatform,
+          verifCode
+        }
+      }
+    });
+  }
+
+  /**
+   * A method to update user's password.
+   * Need authorization header for this API.
+   * @param {{ oldPassword: string, newPassword: string }} input - Contain oldPassword which is old / current password and newPassword which is the new password.
+   * @returns {Observable<MutationResult<{ authMsChangePassword: ChangePassRq }>>} Contain message stating the password updated successfully.
+   */
+  public updatePassword(input: { oldPassword: string, newPassword: string }): Observable<MutationResult<{ authMsChangePassword: ChangePassRq }>>{
+    return this.apollo.mutate({
+      mutation: gql`
+        mutation ChangePassword($input: ChangePassRq!) {
+          authMsChangePassword(input: $input)
+        }
+      `,
+      variables: { input }
+    });
+  }
+}

package/projects/unipin-angular/src/lib/services/country/country.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo, gql } from 'apollo-angular';
+import { Country, CountryQueryCriteria } from '../../../graphql/generated';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CountryService {
+
+  constructor(
+    protected readonly apollo: Apollo
+  ) { }
+
+  /**
+   * A method to get list of country and it's information.
+   * The information such as name, phone code, language code, country code and default language code.
+   * @param {CountryQueryCriteria} input - Contain country data pagination criteria, it's optional.
+   * @returns {Observable<ApolloQueryResult<{ webConfigMsCountry: { data: Country[] }}>>} Contain list of country and it's information.
+   */
+  public query(input: CountryQueryCriteria = { page: 0, pageSize: 300, sortBy: 'name', sortDirection: 'asc' }): Observable<ApolloQueryResult<{ webConfigMsCountry: { data: Country[] }}>>{
+    return this.apollo.query({
+      errorPolicy: 'all',
+      variables: { input },
+      query: gql`
+        query QueryCountry($input: CountryQueryCriteria!) {
+          webConfigMsCountry(input: $input) {
+            data {
+              code
+              defaultLangCode
+              guid
+              langCodes {
+                code
+                guid
+              }
+              name
+              phoneCodes {
+                code
+              }
+            }
+          }
+        }
+      `,
+    });
+  }
+}

package/projects/unipin-angular/src/lib/services/currency/currency.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApolloQueryResult } from '@apollo/client/core';
+import { Apollo, gql } from 'apollo-angular';
+import { Currency, CurrencyQueryCriteria } from '../../../graphql/generated';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CurrencyService {
+
+  constructor(
+    protected readonly apollo: Apollo
+  ) { }
+
+  /**
+   * A method to get the list of currency and it's information.
+   * The information such as currency code, magnify value, name and status.
+   * @param {string} keyword - Contain some letters of currency name, it's optional.
+   * @returns {Observable<ApolloQueryResult<{ webConfigMsCurrency: { data: Currency[] }}>>} Contain list of currency and it's information.
+   */
+  public query(keyword: string = ''): Observable<ApolloQueryResult<{ webConfigMsCurrency: { data: Currency[] }}>>{
+    const input: CurrencyQueryCriteria = { page: 0, pageSize: 300, sortBy: 'name', sortDirection: 'asc' };
+    if (keyword !== '') input.name = keyword;
+
+    return this.apollo.query({
+      errorPolicy: 'all',
+      variables: { input },
+      query:  gql`
+        query QueryCurrency($input: CurrencyQueryCriteria!) {
+          webConfigMsCurrency(input: $input) {
+            data {
+              code
+              guid
+              magnifyValue
+              name
+              status
+            }
+          }
+        }
+      `,
+    });
+  }
+}

package/projects/unipin-angular/src/lib/services/profile/profile.service.ts

@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { FetchPolicy } from '@apollo/client/core';
+import { Apollo, gql } from 'apollo-angular';
+import { AppLoginSubject } from '../../../graphql/generated';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProfileService {
+
+  constructor(
+    protected readonly apollo: Apollo
+  ) { }
+
+  /**
+   * A method to get the user profile information.
+   * @param {FetchPolicy | undefined} fetchPolicy - Specifies how Apollo Client should handle data retrieval,
+   * determining whether it should make a network request to fetch fresh data from the server or use data from the local cache.
+   * @returns {Observable<AppLoginSubject | null>} Contain user profile information.
+   */
+  public getMyProfile(fetchPolicy?: FetchPolicy): Observable<AppLoginSubject | null>{
+    return this.apollo.query<{ authMsMyProfile: AppLoginSubject }>({
+      fetchPolicy,
+      errorPolicy: 'all',
+      query: gql`
+        query getMyProfile {
+          authMsMyProfile {
+            appLoginPrincipal {
+              principalId
+              principalType
+            }
+            appLoginExt {
+              paramCode
+              paramType
+              file {
+                publicUrl
+              }
+            }
+            birthday
+            category
+            company {
+              code
+              guid
+              isInternal
+              name
+              status
+            }
+            gender
+            guid
+            merchants {
+              guid
+              name
+              status
+            }
+            name
+            status
+            totpSecretGuid
+            roles {
+              guid
+              code
+              name
+              isInternal
+              status
+            }
+            departments {
+              department {
+                hierarchyCode
+                hierarchyPath
+                name
+                guid
+                status
+              }
+              isLead
+            }
+          }
+        }
+      `,
+    }).pipe(
+      map(({ data: { authMsMyProfile }}) => {
+        if (!authMsMyProfile) return null;
+        return authMsMyProfile;
+      })
+    );
+  }
+}

package/projects/unipin-angular/src/lib/services/rate-group-code/rate-group-code.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApolloQueryResult, FetchPolicy } from '@apollo/client/core';
+import { Apollo, gql } from 'apollo-angular';
+import { RateGroupCodeCriteria, RateGroupCodeRs } from '../../../graphql/generated';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RateGroupCodeService {
+
+  constructor(
+    protected readonly apollo: Apollo
+  ) { }
+
+  public query(input: RateGroupCodeCriteria, fetchPolicy?: FetchPolicy): Observable<ApolloQueryResult<{ productMsSearchRateGroupCodes: RateGroupCodeRs }>>{
+    return this.apollo.query({
+      fetchPolicy,
+      variables: { input },
+      query: gql`
+        query QueryGroupCode($input: RateGroupCodeCriteria) {
+          productMsSearchRateGroupCodes(input: $input) {
+            data
+          }
+        }
+      `
+    });
+  }
+}

package/projects/unipin-angular/src/lib/utils/contrast-color-generator/contrast-color-generator.util.spec.ts

@@ -0,0 +1,19 @@
+import { generateContrastColor } from './contrast-color-generator.util';
+
+describe('generateContrastColorUtil', () => {
+  describe('generateContrastColor', () => {
+    it('should generate a color without opacity value', () => {
+      const result = generateContrastColor('VOR');
+
+      expect(result.background).toBe('#564f52');
+      expect(result.color).toBe('#fff');
+    });
+
+    it('should generate a color with opacity value', () => {
+      const result = generateContrastColor('VORE');
+
+      expect(result.background).toBe('#564f5245');
+      expect(result.color).toBe('#fff');
+    });
+  });
+});

package/projects/unipin-angular/src/lib/utils/contrast-color-generator/contrast-color-generator.util.ts

@@ -0,0 +1,28 @@
+/**
+ * A function that generate random background and text color for badge based on given string. The text color has 2 values, either white [for dark background] or black [for light background].
+ * The first char will act as red color.
+ * The second char will act as green color.
+ * The third char will act as blue color.
+ * And the final char will act as opacity value.
+ * @param {string} str - A string that acts as the random seeder. String length should not exceeding 8 characters. String length will be truncated to 8 if the given string length is exceeding 8 chars.
+ * @returns {Object} generatedColor - Generated random color object
+ * @property {string} generatedColor.background - Generated background hex color
+ * @property {string} generatedColor.color - Generated text hex color
+ */
+export function generateContrastColor(str: string): { background: `#${ string }`, color: `#${ string }` }{
+  if (str.length > 4) str = str.substring(0, 4);
+
+  let res = '';
+  let total = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    const c = str.charCodeAt(i).toString(16);
+    
+    res += c;
+    total += +c;
+  }
+  return {
+    background: `#${ res }`,
+    color: total > 187? '#000' : '#fff'
+  }
+}