@authme/util 2.8.1 → 2.8.3

package/index.cjs

@@ -25,9 +25,9 @@ require('core-js/modules/es.array.includes.js');
 require('core-js/modules/es.string.includes.js');
 var fileSaver = require('file-saver');
 var JSZip = require('jszip');
+require('core-js/modules/es.parse-int.js');
 var Lottie = require('lottie-web');
 require('core-js/modules/es.array.sort.js');
-require('core-js/modules/es.parse-int.js');
 require('core-js/modules/es.string.trim.js');
 require('core-js/modules/es.string.starts-with.js');
 require('core-js/modules/es.symbol.description.js');
@@ -995,9 +995,81 @@ function cropByRatio(width, height, ratio) {
   };
 }
 
-function startSpinner(text, backgroundOpaque) {
+const fontWeight = {
+  regular: '400',
+  medium: '500',
+  bold: '700'
+};
+const hexToRgba = (hex, alpha = 1) => {
+  // 移除 # 符號（如果有的話）
+  hex = hex.replace(/^#/, '');
+  // 解析短格式 (e.g., #RGB -> #RRGGBB)
+  if (hex.length === 3) {
+    hex = hex.split('').map(x => x + x).join('');
+  }
+  // 確保是有效的 HEX 格式
+  if (hex.length !== 6) {
+    throw new Error('Invalid HEX color.');
+  }
+  // 轉換 HEX 到 RGB
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+const uiThemeText = (dom, textStyle) => {
+  dom.style.color = textStyle.textColor;
+  dom.style.fontWeight = fontWeight[textStyle.textWeight];
+  dom.style.fontSize = `${textStyle.fontSize}px`;
+};
+const uiThemeHint = (dom, hintStyle) => {
+  dom.style.borderRadius = `${hintStyle.cornerRadius}px`;
+  dom.style.backgroundColor = hintStyle.backgroundColor;
+  dom.style.opacity = hintStyle.opacity;
+  dom.style.color = hintStyle.textColor;
+  dom.style.fontWeight = fontWeight[hintStyle.textWeight];
+  dom.style.fontSize = `${hintStyle.fontSize}px`;
+};
+const uiThemeButton = (dom, buttonStyle) => {
+  dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+  dom.style.backgroundColor = buttonStyle.backgroundColor;
+  dom.style.opacity = buttonStyle.backgroundOpacity;
+  dom.style.color = buttonStyle.textColor;
+  dom.style.borderColor = hexToRgba(buttonStyle.borderColor, buttonStyle.borderOpacity);
+  dom.style.borderWidth = `${buttonStyle.borderWidth}px`;
+  dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
+  dom.style.fontSize = `${buttonStyle.fontSize}px`;
+  dom.style.borderStyle = 'solid';
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `48px`;
+  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
+  dom.style.maxWidth = `327px`;
+};
+const uiThemeSmallButton = (dom, buttonStyle) => {
+  dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+  dom.style.backgroundColor = buttonStyle.backgroundColor;
+  dom.style.opacity = buttonStyle.backgroundOpacity;
+  dom.style.color = buttonStyle.textColor;
+  dom.style.borderColor = hexToRgba(buttonStyle.borderColor, buttonStyle.borderOpacity);
+  dom.style.borderWidth = `${buttonStyle.borderWidth}px`;
+  dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
+  dom.style.fontSize = `${buttonStyle.fontSize}px`;
+  dom.style.borderStyle = 'solid';
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `30px`;
+  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
+  dom.style.maxWidth = `106px`;
+};
+
+function startSpinner(args) {
   const loadingLottie = Storage.getItem(exports.STORAGE_KEY.LOADING_LOTTIE);
+  const themeConfig = Storage.getItem('themeConfig');
   const body = document.querySelector('.authme-container');
+  //Statement
+  const statementContainer = document.createElement('div');
+  statementContainer.classList.add('statement');
+  uiThemeText(statementContainer, themeConfig.bodyThreeDarkMode);
+  statementContainer.textContent = args.statement || '';
   if (loadingLottie) {
     const loadingSDKOuter = document.createElement('div');
     const loadingSDKContent = document.createElement('div');
@@ -1014,12 +1086,18 @@ function startSpinner(text, backgroundOpaque) {
       animationData: loadingLottie
     });
     body === null || body === void 0 ? void 0 : body.appendChild(loadingSDKOuter);
-    if (text) {
+    if (args.text) {
       loadingSDKText.classList.add('authme-loading-sdk-text');
-      loadingSDKText.textContent = text;
+      loadingSDKText.textContent = args.text;
+      loadingSDKText.style.color = themeConfig.titleTwo.textColor;
+      loadingSDKText.style.fontWeight = themeConfig.titleTwo.textWeight;
+      loadingSDKText.style.fontSize = `${themeConfig.titleTwo.fontSize}px`;
       loadingSDKContent.appendChild(loadingSDKText);
     }
-    if (backgroundOpaque) {
+    if (args.backgroundOpaque) {
+      loadingSDKOuter.classList.add('loading-outer--opaque');
+    }
+    if (args.backgroundOpaque) {
       loadingSDKOuter.classList.add('authme-loading-sdk-outer--opaque');
     }
     return;
@@ -1030,14 +1108,21 @@ function startSpinner(text, backgroundOpaque) {
   spinnerOuter.appendChild(spinner);
   spinnerOuter.className = 'loading-outer';
   spinner.className = 'loading';
-  if (text) {
+  spinner.style.borderRightColor = themeConfig.loadingViewContentColor;
+  spinner.style.borderBottomColor = themeConfig.loadingViewContentColor;
+  spinner.style.borderLeftColor = themeConfig.loadingViewContentColor;
+  if (args.text) {
     spinnerText.className = 'loading-text';
-    spinnerText.textContent = text;
+    spinnerText.textContent = args.text;
+    uiThemeText(spinnerText, themeConfig.titleTwo);
     spinnerOuter.appendChild(spinnerText);
   }
-  if (backgroundOpaque) {
+  if (args.backgroundOpaque) {
     spinnerOuter.classList.add('loading-outer--opaque');
   }
+  if (themeConfig.isStatementEnabled) {
+    spinnerOuter.appendChild(statementContainer);
+  }
   body === null || body === void 0 ? void 0 : body.appendChild(spinnerOuter);
 }
 function stopSpinner() {
@@ -2490,6 +2575,106 @@ function RGBToLottieColor(color) {
   return color.map(c => c / 255);
 }
 
+const uploadModal = arg => {
+  const authmeContainer = document.querySelector('.authme-container');
+  if (!authmeContainer) {
+    console.error('uploadModal: authmeContainer not found');
+    return;
+  }
+  const uiThemeConfig = Storage.getItem('themeConfig');
+  function removeModal() {
+    var _a;
+    (_a = document.querySelector('.video-container__upload')) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  const domModal = document.createElement('div');
+  const domIcon = document.createElement('div');
+  const domTitle = document.createElement('div');
+  const domMessage = document.createElement('div');
+  const domStatement = document.createElement('div');
+  const domFooterContainer = document.createElement('div');
+  const domClose = document.createElement('div');
+  const domRetry = document.createElement('div');
+  domModal.classList.add('video-container__upload');
+  domIcon.classList.add('video-container__upload-icon');
+  domTitle.classList.add('video-container__upload-title');
+  domMessage.classList.add('video-container__upload-message');
+  domStatement.classList.add('video-container__upload-statement');
+  domFooterContainer.classList.add('video-container__upload-footer-container');
+  domClose.classList.add('video-container__upload-close');
+  domRetry.classList.add('video-container__upload-retry');
+  uiThemeText(domTitle, uiThemeConfig.titleTwo);
+  uiThemeText(domMessage, uiThemeConfig.bodyOne);
+  if (arg.type === 'success') {
+    domIcon.innerHTML = `<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="48" height="48" rx="24" fill="${uiThemeConfig.uploadCompleteView.backgroundColor}" fill-opacity="${uiThemeConfig.uploadCompleteView.backgroundOpacity}" />
+<g clip-path="url(#clip0_21855_2149)">
+<path d="M16.25 25.5L21.5 30.75L33.5 18.75" stroke="${uiThemeConfig.uploadCompleteView.contentColor}" stroke-opacity="${uiThemeConfig.uploadCompleteView.contentOpacity}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_21855_2149">
+<rect width="24" height="24" fill="white" transform="translate(12.5 12)"/>
+</clipPath>
+</defs>
+</svg>`;
+  }
+  if (arg.type === 'error') {
+    domIcon.innerHTML = `<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="48" height="48" rx="24" fill="${uiThemeConfig.uploadIncompleteView.backgroundColor}" fill-opacity="${uiThemeConfig.uploadIncompleteView.backgroundOpacity}"/>
+<g clip-path="url(#clip0_21855_2690)">
+<path d="M31.25 17.25L17.75 30.75" stroke="${uiThemeConfig.uploadIncompleteView.contentColor}" stroke-opacity="${uiThemeConfig.uploadIncompleteView.contentOpacity}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.25 30.75L17.75 17.25" stroke="${uiThemeConfig.uploadIncompleteView.contentColor}" stroke-opacity="${uiThemeConfig.uploadIncompleteView.contentOpacity}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_21855_2690">
+<rect width="24" height="24" fill="white" transform="translate(12.5 12)"/>
+</clipPath>
+</defs>
+</svg>
+`;
+  }
+  if (arg.type === 'success') {
+    domTitle.innerText = arg.titleSuccess || '';
+    domMessage.innerText = arg.messageSuccess || '';
+  }
+  if (arg.type === 'error') {
+    domTitle.innerText = arg.titleError || '';
+    domMessage.innerText = arg.messageError || '';
+  }
+  domModal.appendChild(domIcon);
+  domModal.appendChild(domTitle);
+  domModal.appendChild(domMessage);
+  if (uiThemeConfig.isStatementEnabled && arg.statement && arg.type === 'success') {
+    uiThemeText(domStatement, uiThemeConfig.bodyThree);
+    domStatement.innerText = arg.statement;
+    domModal.appendChild(domStatement);
+  }
+  if (arg.type === 'error' && arg.retryText && arg.closeText) {
+    uiThemeButton(domRetry, uiThemeConfig.majorButton);
+    domRetry.innerText = arg.retryText;
+    domRetry.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      if (arg.onRetry) {
+        yield arg.onRetry();
+      }
+      removeModal();
+    }));
+    uiThemeButton(domClose, uiThemeConfig.minorButton);
+    domClose.innerText = arg.closeText;
+    domClose.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      if (arg.onClose) {
+        yield arg.onClose();
+      }
+      removeModal();
+    }));
+    domFooterContainer.appendChild(domRetry);
+    domFooterContainer.appendChild(domClose);
+    domModal.appendChild(domFooterContainer);
+  }
+  authmeContainer.appendChild(domModal);
+  return {
+    removeModal
+  };
+};
+
 const QUEUE_LENGTH = 10;
 const requstQueue = [];
 function pushRequest(request) {
@@ -2517,9 +2702,288 @@ window.ononline = () => {
   });
 };
 
+const themeConfigDefault = {
+  isFraudAnimationLoadingPageEnabled: true,
+  isStatementEnabled: true,
+  isLivenessIntroPageEnabled: true,
+  resultPageCountdown: {
+    // 結果頁倒數的參數們
+    // 結果頁是否顯示倒數
+    isEnabled: true,
+    // 倒數敘述文字
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 14,
+    // 倒數時間
+    timeTextColor: '#FF3B30',
+    timeTextWeight: 'regular',
+    timeFontSize: 14
+  },
+  headerTitle: {
+    // G.H.2
+    // Header(畫面上方標題，如前導頁)的參數們
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 18
+  },
+  nonEkycCloseButton: {
+    // G.A.3
+    // 非ekyc流程中的X
+    contentColor: '#424242',
+    contentOpacity: 1
+  },
+  backButton: {
+    // iOS only
+    // ekyc流程中的返回
+    contentColor: '#424242',
+    contentOpacity: 1
+  },
+  ekycCloseButton: {
+    // G.A.1、G.A.2
+    // ekyc流程中的X
+    contentColor: '#ffffff',
+    contentOpacity: 1,
+    backgroundColor: '#000000',
+    backgroundOpacity: 0.2
+  },
+  majorButton: {
+    // G.B.1、G.B.2、G.B.3、G.B.4
+    // 主要button
+    cornerRadius: 24,
+    backgroundColor: '#00c1b6',
+    backgroundOpacity: 1,
+    borderColor: '#000000',
+    borderOpacity: 1,
+    borderWidth: 0,
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 16,
+    disabledBackgroundColor: '#E0E0E0',
+    disabledBorderColor: '#E0E0E0',
+    disabledTextColor: '#FFFFFF'
+  },
+  minorButton: {
+    // G.B.5、G.B.6、G.B.7、G.B.8
+    // 次要button
+    cornerRadius: 24,
+    backgroundColor: '#ffffff',
+    backgroundOpacity: 1,
+    borderColor: '#00c1b6',
+    borderOpacity: 1,
+    borderWidth: 1,
+    textColor: '#00c1b6',
+    textWeight: 'medium',
+    fontSize: 16,
+    disabledBackgroundColor: '#FFFFFF',
+    disabledBorderColor: '#BDBDBD',
+    disabledTextColor: '#BDBDBD'
+  },
+  smallermMajorButton: {
+    // 主要button(小)
+    // 用於dialog/alert的按鈕
+    cornerRadius: 15,
+    backgroundColor: '#00c1b6',
+    backgroundOpacity: 1,
+    borderColor: '#000000',
+    borderOpacity: 1,
+    borderWidth: 0,
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 14,
+    disabledBackgroundColor: '#E0E0E0',
+    disabledBorderColor: '#E0E0E0',
+    disabledTextColor: '#FFFFFF' //預設值: #FFFFFF
+  },
+
+  // 次要button(小)
+  smallerMinorButton: {
+    cornerRadius: 15,
+    backgroundColor: '#ffffff',
+    backgroundOpacity: 1,
+    borderColor: '#00c1b6',
+    borderOpacity: 1,
+    borderWidth: 1,
+    textColor: '#00c1b6',
+    textWeight: 'medium',
+    fontSize: 14,
+    disabledBackgroundColor: '#FFFFFF',
+    disabledBorderColor: '#BDBDBD',
+    disabledTextColor: '#BDBDBD' //預設值: #BDBDBD
+  },
+
+  hint: {
+    // G.HT.2
+    // Hint 提示框(OCR、防偽、活體下面的提示的訊息)
+    cornerRadius: 8,
+    backgroundColor: '#000000',
+    opacity: 0.4,
+    textColor: '#ffffff',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  fraudIntroStepTitle: {
+    // G.L.1、G.L.2
+    // Fraud引導頁Step title(step1, step2 那塊)
+    cornerRadius: 15,
+    backgroundColor: '#25608A',
+    backgroundOpacity: 1,
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 14
+  },
+  uploadCompleteView: {
+    // G.S.1、G.S.2
+    // 上傳完成的勾勾圖
+    contentColor: '#ffffff',
+    contentOpacity: 1,
+    backgroundColor: '#00c1b6',
+    backgroundOpacity: 1
+  },
+  uploadIncompleteView: {
+    // G.S.3、G.S.4
+    // 上傳失敗的X圖
+    contentColor: '#ffffff',
+    contentOpacity: 1,
+    backgroundColor: '#FF3B30',
+    backgroundOpacity: 1
+  },
+  loadingViewContentColor: '#00c1b6',
+  scanFrame: {
+    // G.SC.1、G.SC.2
+    // 框線圖相關(外框)
+    isEnabled: true,
+    style: 'cornered',
+    width: 2,
+    opacity: 1,
+    undetectedColor: '#ffffff',
+    detectedColor: '#7CFFF9'
+  },
+  scanLine: {
+    // 框線圖相關(掃描線)
+    isEnabled: true,
+    color: '#00c1b6'
+  },
+  scanHint: {
+    // G.SC.4
+    // 框線圖相關(掃描線)
+    isEnabled: true,
+    style: 'image',
+    color: '#ffffff',
+    opacity: 0.7,
+    textWeight: 'medium',
+    fontSize: 60
+  },
+  fraudScanHint: {
+    // D.F.SC.1
+    // 防偽框線圖相關參數(圖)
+    isEnabled: true,
+    style: 'animation',
+    color: '#000000',
+    opacity: 0.7
+  },
+  popupView: {
+    // popup
+    width: 0.75,
+    cornerRadius: 12,
+    backgroundColor: '#ffffff'
+  },
+  livenessErrorScanFrame: {
+    // G.LIVE.2
+    // 活體偵測錯誤
+    color: '#FF3B30',
+    opacity: 1,
+    borderWidth: 6
+  },
+  livenessSuccessScanFrame: {
+    // G.LIVE.1
+    // 活體偵測成功
+    color: '#00C1B6',
+    opacity: 1,
+    borderWidth: 6
+  },
+  isFraudScanIntroPageEnabled: true,
+  pageDotColor: '#00C1B6',
+  titleOne: {
+    // G.T.1
+    // figma 上的 title 1
+    // OCR 確認頁的"確認xx正面、反面"、nfc 護照的"掃描護照晶片(Android 要調整 nfc sdk，比較麻煩)"[後面做]
+    // 、"厚度檢測"、人臉辨識導引頁的"即將進行人臉拍攝"
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 20
+  },
+  titleTwo: {
+    // G.T.2
+    // Figma標示title 2
+    // loading 圖的"上傳中"、"上傳失敗"、"上傳完成，等待審核中"、
+    // timeout或其他錯誤 alert 的內容"請聯繫客服以協助處理此問題"
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 18
+  },
+  titleThree: {
+    // G.T.3
+    // Figma標示title 3
+    // 活體的標題"將人臉放入邊框中"、nfc 護照的"尋找生物特徵的圖示(Android 要調整 nfc sdk，比較麻煩)"
+    // 結果頁的"請在xx:xx內完成確認"
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 16
+  },
+  bodyOne: {
+    // G.T.4
+    // figma 上的 body 1
+    // "完成流程"、"請檢查網路連線狀況並重新嘗試"、"請根據下方教學步驟依序完成NFC操作"、"請將卡面傾斜45度角放入畫面框線進行拍攝"
+    // "將臉部置於方框中，依照畫面指示進行操作"
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 16
+  },
+  bodyTwo: {
+    // G.T.5
+    // Figma標示body 2或body2
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  bodyThree: {
+    // G.T.6
+    // Figma標示body 3或body3
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 12
+  },
+  titleOneDarkMode: {
+    // G.T.D.1
+    // Figma標示dark_title 1
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 20
+  },
+  titleTwoDarkMode: {
+    // G.T.D.2
+    // Figma標示dark_title 2
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 18
+  },
+  bodyTwoDarkMode: {
+    textColor: '#ffffff',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  bodyThreeDarkMode: {
+    // G.T.D.4
+    // Figma標示dark_body 3
+    textColor: '#E0E0E0',
+    textWeight: 'regular',
+    fontSize: 12
+  }
+};
+
 var name = "authme/sdk";
-var version$1 = "2.8.1";
-var date = "2025-02-04T09:12:52+0000";
+var version$1 = "2.8.3";
+var date = "2025-03-05T06:16:55+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,
@@ -2550,6 +3014,7 @@ exports.dataURItoBlob = dataURItoBlob;
 exports.debugLog = debugLog;
 exports.debugTools = debugTools;
 exports.decodeToken = decodeToken;
+exports.fontWeight = fontWeight;
 exports.getCanvasSize = getCanvasSize;
 exports.getCssVariable = getCssVariable;
 exports.getDeviceInfo = getDeviceInfo;
@@ -2576,6 +3041,12 @@ exports.startSpinner = startSpinner;
 exports.stopLoadingSDK = stopLoadingSDK;
 exports.stopSpinner = stopSpinner;
 exports.switchCamera = switchCamera;
+exports.themeConfigDefault = themeConfigDefault;
+exports.uiThemeButton = uiThemeButton;
+exports.uiThemeHint = uiThemeHint;
+exports.uiThemeSmallButton = uiThemeSmallButton;
+exports.uiThemeText = uiThemeText;
+exports.uploadModal = uploadModal;
 exports.useState = useState;
 exports.verificationErrorMessages = verificationErrorMessages;
 exports.version = version;

package/index.js

@@ -21,9 +21,9 @@ import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
 import { saveAs } from 'file-saver';
 import JSZip from 'jszip';
+import 'core-js/modules/es.parse-int.js';
 import Lottie from 'lottie-web';
 import 'core-js/modules/es.array.sort.js';
-import 'core-js/modules/es.parse-int.js';
 import 'core-js/modules/es.string.trim.js';
 import 'core-js/modules/es.string.starts-with.js';
 import 'core-js/modules/es.symbol.description.js';
@@ -985,9 +985,81 @@ function cropByRatio(width, height, ratio) {
   };
 }
 
-function startSpinner(text, backgroundOpaque) {
+const fontWeight = {
+  regular: '400',
+  medium: '500',
+  bold: '700'
+};
+const hexToRgba = (hex, alpha = 1) => {
+  // 移除 # 符號（如果有的話）
+  hex = hex.replace(/^#/, '');
+  // 解析短格式 (e.g., #RGB -> #RRGGBB)
+  if (hex.length === 3) {
+    hex = hex.split('').map(x => x + x).join('');
+  }
+  // 確保是有效的 HEX 格式
+  if (hex.length !== 6) {
+    throw new Error('Invalid HEX color.');
+  }
+  // 轉換 HEX 到 RGB
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+const uiThemeText = (dom, textStyle) => {
+  dom.style.color = textStyle.textColor;
+  dom.style.fontWeight = fontWeight[textStyle.textWeight];
+  dom.style.fontSize = `${textStyle.fontSize}px`;
+};
+const uiThemeHint = (dom, hintStyle) => {
+  dom.style.borderRadius = `${hintStyle.cornerRadius}px`;
+  dom.style.backgroundColor = hintStyle.backgroundColor;
+  dom.style.opacity = hintStyle.opacity;
+  dom.style.color = hintStyle.textColor;
+  dom.style.fontWeight = fontWeight[hintStyle.textWeight];
+  dom.style.fontSize = `${hintStyle.fontSize}px`;
+};
+const uiThemeButton = (dom, buttonStyle) => {
+  dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+  dom.style.backgroundColor = buttonStyle.backgroundColor;
+  dom.style.opacity = buttonStyle.backgroundOpacity;
+  dom.style.color = buttonStyle.textColor;
+  dom.style.borderColor = hexToRgba(buttonStyle.borderColor, buttonStyle.borderOpacity);
+  dom.style.borderWidth = `${buttonStyle.borderWidth}px`;
+  dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
+  dom.style.fontSize = `${buttonStyle.fontSize}px`;
+  dom.style.borderStyle = 'solid';
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `48px`;
+  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
+  dom.style.maxWidth = `327px`;
+};
+const uiThemeSmallButton = (dom, buttonStyle) => {
+  dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+  dom.style.backgroundColor = buttonStyle.backgroundColor;
+  dom.style.opacity = buttonStyle.backgroundOpacity;
+  dom.style.color = buttonStyle.textColor;
+  dom.style.borderColor = hexToRgba(buttonStyle.borderColor, buttonStyle.borderOpacity);
+  dom.style.borderWidth = `${buttonStyle.borderWidth}px`;
+  dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
+  dom.style.fontSize = `${buttonStyle.fontSize}px`;
+  dom.style.borderStyle = 'solid';
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `30px`;
+  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
+  dom.style.maxWidth = `106px`;
+};
+
+function startSpinner(args) {
   const loadingLottie = Storage.getItem(STORAGE_KEY.LOADING_LOTTIE);
+  const themeConfig = Storage.getItem('themeConfig');
   const body = document.querySelector('.authme-container');
+  //Statement
+  const statementContainer = document.createElement('div');
+  statementContainer.classList.add('statement');
+  uiThemeText(statementContainer, themeConfig.bodyThreeDarkMode);
+  statementContainer.textContent = args.statement || '';
   if (loadingLottie) {
     const loadingSDKOuter = document.createElement('div');
     const loadingSDKContent = document.createElement('div');
@@ -1004,12 +1076,18 @@ function startSpinner(text, backgroundOpaque) {
       animationData: loadingLottie
     });
     body === null || body === void 0 ? void 0 : body.appendChild(loadingSDKOuter);
-    if (text) {
+    if (args.text) {
       loadingSDKText.classList.add('authme-loading-sdk-text');
-      loadingSDKText.textContent = text;
+      loadingSDKText.textContent = args.text;
+      loadingSDKText.style.color = themeConfig.titleTwo.textColor;
+      loadingSDKText.style.fontWeight = themeConfig.titleTwo.textWeight;
+      loadingSDKText.style.fontSize = `${themeConfig.titleTwo.fontSize}px`;
       loadingSDKContent.appendChild(loadingSDKText);
     }
-    if (backgroundOpaque) {
+    if (args.backgroundOpaque) {
+      loadingSDKOuter.classList.add('loading-outer--opaque');
+    }
+    if (args.backgroundOpaque) {
       loadingSDKOuter.classList.add('authme-loading-sdk-outer--opaque');
     }
     return;
@@ -1020,14 +1098,21 @@ function startSpinner(text, backgroundOpaque) {
   spinnerOuter.appendChild(spinner);
   spinnerOuter.className = 'loading-outer';
   spinner.className = 'loading';
-  if (text) {
+  spinner.style.borderRightColor = themeConfig.loadingViewContentColor;
+  spinner.style.borderBottomColor = themeConfig.loadingViewContentColor;
+  spinner.style.borderLeftColor = themeConfig.loadingViewContentColor;
+  if (args.text) {
     spinnerText.className = 'loading-text';
-    spinnerText.textContent = text;
+    spinnerText.textContent = args.text;
+    uiThemeText(spinnerText, themeConfig.titleTwo);
     spinnerOuter.appendChild(spinnerText);
   }
-  if (backgroundOpaque) {
+  if (args.backgroundOpaque) {
     spinnerOuter.classList.add('loading-outer--opaque');
   }
+  if (themeConfig.isStatementEnabled) {
+    spinnerOuter.appendChild(statementContainer);
+  }
   body === null || body === void 0 ? void 0 : body.appendChild(spinnerOuter);
 }
 function stopSpinner() {
@@ -2480,6 +2565,106 @@ function RGBToLottieColor(color) {
   return color.map(c => c / 255);
 }
 
+const uploadModal = arg => {
+  const authmeContainer = document.querySelector('.authme-container');
+  if (!authmeContainer) {
+    console.error('uploadModal: authmeContainer not found');
+    return;
+  }
+  const uiThemeConfig = Storage.getItem('themeConfig');
+  function removeModal() {
+    var _a;
+    (_a = document.querySelector('.video-container__upload')) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  const domModal = document.createElement('div');
+  const domIcon = document.createElement('div');
+  const domTitle = document.createElement('div');
+  const domMessage = document.createElement('div');
+  const domStatement = document.createElement('div');
+  const domFooterContainer = document.createElement('div');
+  const domClose = document.createElement('div');
+  const domRetry = document.createElement('div');
+  domModal.classList.add('video-container__upload');
+  domIcon.classList.add('video-container__upload-icon');
+  domTitle.classList.add('video-container__upload-title');
+  domMessage.classList.add('video-container__upload-message');
+  domStatement.classList.add('video-container__upload-statement');
+  domFooterContainer.classList.add('video-container__upload-footer-container');
+  domClose.classList.add('video-container__upload-close');
+  domRetry.classList.add('video-container__upload-retry');
+  uiThemeText(domTitle, uiThemeConfig.titleTwo);
+  uiThemeText(domMessage, uiThemeConfig.bodyOne);
+  if (arg.type === 'success') {
+    domIcon.innerHTML = `<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="48" height="48" rx="24" fill="${uiThemeConfig.uploadCompleteView.backgroundColor}" fill-opacity="${uiThemeConfig.uploadCompleteView.backgroundOpacity}" />
+<g clip-path="url(#clip0_21855_2149)">
+<path d="M16.25 25.5L21.5 30.75L33.5 18.75" stroke="${uiThemeConfig.uploadCompleteView.contentColor}" stroke-opacity="${uiThemeConfig.uploadCompleteView.contentOpacity}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_21855_2149">
+<rect width="24" height="24" fill="white" transform="translate(12.5 12)"/>
+</clipPath>
+</defs>
+</svg>`;
+  }
+  if (arg.type === 'error') {
+    domIcon.innerHTML = `<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="48" height="48" rx="24" fill="${uiThemeConfig.uploadIncompleteView.backgroundColor}" fill-opacity="${uiThemeConfig.uploadIncompleteView.backgroundOpacity}"/>
+<g clip-path="url(#clip0_21855_2690)">
+<path d="M31.25 17.25L17.75 30.75" stroke="${uiThemeConfig.uploadIncompleteView.contentColor}" stroke-opacity="${uiThemeConfig.uploadIncompleteView.contentOpacity}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.25 30.75L17.75 17.25" stroke="${uiThemeConfig.uploadIncompleteView.contentColor}" stroke-opacity="${uiThemeConfig.uploadIncompleteView.contentOpacity}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_21855_2690">
+<rect width="24" height="24" fill="white" transform="translate(12.5 12)"/>
+</clipPath>
+</defs>
+</svg>
+`;
+  }
+  if (arg.type === 'success') {
+    domTitle.innerText = arg.titleSuccess || '';
+    domMessage.innerText = arg.messageSuccess || '';
+  }
+  if (arg.type === 'error') {
+    domTitle.innerText = arg.titleError || '';
+    domMessage.innerText = arg.messageError || '';
+  }
+  domModal.appendChild(domIcon);
+  domModal.appendChild(domTitle);
+  domModal.appendChild(domMessage);
+  if (uiThemeConfig.isStatementEnabled && arg.statement && arg.type === 'success') {
+    uiThemeText(domStatement, uiThemeConfig.bodyThree);
+    domStatement.innerText = arg.statement;
+    domModal.appendChild(domStatement);
+  }
+  if (arg.type === 'error' && arg.retryText && arg.closeText) {
+    uiThemeButton(domRetry, uiThemeConfig.majorButton);
+    domRetry.innerText = arg.retryText;
+    domRetry.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      if (arg.onRetry) {
+        yield arg.onRetry();
+      }
+      removeModal();
+    }));
+    uiThemeButton(domClose, uiThemeConfig.minorButton);
+    domClose.innerText = arg.closeText;
+    domClose.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      if (arg.onClose) {
+        yield arg.onClose();
+      }
+      removeModal();
+    }));
+    domFooterContainer.appendChild(domRetry);
+    domFooterContainer.appendChild(domClose);
+    domModal.appendChild(domFooterContainer);
+  }
+  authmeContainer.appendChild(domModal);
+  return {
+    removeModal
+  };
+};
+
 const QUEUE_LENGTH = 10;
 const requstQueue = [];
 function pushRequest(request) {
@@ -2507,9 +2692,288 @@ window.ononline = () => {
   });
 };
 
+const themeConfigDefault = {
+  isFraudAnimationLoadingPageEnabled: true,
+  isStatementEnabled: true,
+  isLivenessIntroPageEnabled: true,
+  resultPageCountdown: {
+    // 結果頁倒數的參數們
+    // 結果頁是否顯示倒數
+    isEnabled: true,
+    // 倒數敘述文字
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 14,
+    // 倒數時間
+    timeTextColor: '#FF3B30',
+    timeTextWeight: 'regular',
+    timeFontSize: 14
+  },
+  headerTitle: {
+    // G.H.2
+    // Header(畫面上方標題，如前導頁)的參數們
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 18
+  },
+  nonEkycCloseButton: {
+    // G.A.3
+    // 非ekyc流程中的X
+    contentColor: '#424242',
+    contentOpacity: 1
+  },
+  backButton: {
+    // iOS only
+    // ekyc流程中的返回
+    contentColor: '#424242',
+    contentOpacity: 1
+  },
+  ekycCloseButton: {
+    // G.A.1、G.A.2
+    // ekyc流程中的X
+    contentColor: '#ffffff',
+    contentOpacity: 1,
+    backgroundColor: '#000000',
+    backgroundOpacity: 0.2
+  },
+  majorButton: {
+    // G.B.1、G.B.2、G.B.3、G.B.4
+    // 主要button
+    cornerRadius: 24,
+    backgroundColor: '#00c1b6',
+    backgroundOpacity: 1,
+    borderColor: '#000000',
+    borderOpacity: 1,
+    borderWidth: 0,
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 16,
+    disabledBackgroundColor: '#E0E0E0',
+    disabledBorderColor: '#E0E0E0',
+    disabledTextColor: '#FFFFFF'
+  },
+  minorButton: {
+    // G.B.5、G.B.6、G.B.7、G.B.8
+    // 次要button
+    cornerRadius: 24,
+    backgroundColor: '#ffffff',
+    backgroundOpacity: 1,
+    borderColor: '#00c1b6',
+    borderOpacity: 1,
+    borderWidth: 1,
+    textColor: '#00c1b6',
+    textWeight: 'medium',
+    fontSize: 16,
+    disabledBackgroundColor: '#FFFFFF',
+    disabledBorderColor: '#BDBDBD',
+    disabledTextColor: '#BDBDBD'
+  },
+  smallermMajorButton: {
+    // 主要button(小)
+    // 用於dialog/alert的按鈕
+    cornerRadius: 15,
+    backgroundColor: '#00c1b6',
+    backgroundOpacity: 1,
+    borderColor: '#000000',
+    borderOpacity: 1,
+    borderWidth: 0,
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 14,
+    disabledBackgroundColor: '#E0E0E0',
+    disabledBorderColor: '#E0E0E0',
+    disabledTextColor: '#FFFFFF' //預設值: #FFFFFF
+  },
+
+  // 次要button(小)
+  smallerMinorButton: {
+    cornerRadius: 15,
+    backgroundColor: '#ffffff',
+    backgroundOpacity: 1,
+    borderColor: '#00c1b6',
+    borderOpacity: 1,
+    borderWidth: 1,
+    textColor: '#00c1b6',
+    textWeight: 'medium',
+    fontSize: 14,
+    disabledBackgroundColor: '#FFFFFF',
+    disabledBorderColor: '#BDBDBD',
+    disabledTextColor: '#BDBDBD' //預設值: #BDBDBD
+  },
+
+  hint: {
+    // G.HT.2
+    // Hint 提示框(OCR、防偽、活體下面的提示的訊息)
+    cornerRadius: 8,
+    backgroundColor: '#000000',
+    opacity: 0.4,
+    textColor: '#ffffff',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  fraudIntroStepTitle: {
+    // G.L.1、G.L.2
+    // Fraud引導頁Step title(step1, step2 那塊)
+    cornerRadius: 15,
+    backgroundColor: '#25608A',
+    backgroundOpacity: 1,
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 14
+  },
+  uploadCompleteView: {
+    // G.S.1、G.S.2
+    // 上傳完成的勾勾圖
+    contentColor: '#ffffff',
+    contentOpacity: 1,
+    backgroundColor: '#00c1b6',
+    backgroundOpacity: 1
+  },
+  uploadIncompleteView: {
+    // G.S.3、G.S.4
+    // 上傳失敗的X圖
+    contentColor: '#ffffff',
+    contentOpacity: 1,
+    backgroundColor: '#FF3B30',
+    backgroundOpacity: 1
+  },
+  loadingViewContentColor: '#00c1b6',
+  scanFrame: {
+    // G.SC.1、G.SC.2
+    // 框線圖相關(外框)
+    isEnabled: true,
+    style: 'cornered',
+    width: 2,
+    opacity: 1,
+    undetectedColor: '#ffffff',
+    detectedColor: '#7CFFF9'
+  },
+  scanLine: {
+    // 框線圖相關(掃描線)
+    isEnabled: true,
+    color: '#00c1b6'
+  },
+  scanHint: {
+    // G.SC.4
+    // 框線圖相關(掃描線)
+    isEnabled: true,
+    style: 'image',
+    color: '#ffffff',
+    opacity: 0.7,
+    textWeight: 'medium',
+    fontSize: 60
+  },
+  fraudScanHint: {
+    // D.F.SC.1
+    // 防偽框線圖相關參數(圖)
+    isEnabled: true,
+    style: 'animation',
+    color: '#000000',
+    opacity: 0.7
+  },
+  popupView: {
+    // popup
+    width: 0.75,
+    cornerRadius: 12,
+    backgroundColor: '#ffffff'
+  },
+  livenessErrorScanFrame: {
+    // G.LIVE.2
+    // 活體偵測錯誤
+    color: '#FF3B30',
+    opacity: 1,
+    borderWidth: 6
+  },
+  livenessSuccessScanFrame: {
+    // G.LIVE.1
+    // 活體偵測成功
+    color: '#00C1B6',
+    opacity: 1,
+    borderWidth: 6
+  },
+  isFraudScanIntroPageEnabled: true,
+  pageDotColor: '#00C1B6',
+  titleOne: {
+    // G.T.1
+    // figma 上的 title 1
+    // OCR 確認頁的"確認xx正面、反面"、nfc 護照的"掃描護照晶片(Android 要調整 nfc sdk，比較麻煩)"[後面做]
+    // 、"厚度檢測"、人臉辨識導引頁的"即將進行人臉拍攝"
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 20
+  },
+  titleTwo: {
+    // G.T.2
+    // Figma標示title 2
+    // loading 圖的"上傳中"、"上傳失敗"、"上傳完成，等待審核中"、
+    // timeout或其他錯誤 alert 的內容"請聯繫客服以協助處理此問題"
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 18
+  },
+  titleThree: {
+    // G.T.3
+    // Figma標示title 3
+    // 活體的標題"將人臉放入邊框中"、nfc 護照的"尋找生物特徵的圖示(Android 要調整 nfc sdk，比較麻煩)"
+    // 結果頁的"請在xx:xx內完成確認"
+    textColor: '#212121',
+    textWeight: 'medium',
+    fontSize: 16
+  },
+  bodyOne: {
+    // G.T.4
+    // figma 上的 body 1
+    // "完成流程"、"請檢查網路連線狀況並重新嘗試"、"請根據下方教學步驟依序完成NFC操作"、"請將卡面傾斜45度角放入畫面框線進行拍攝"
+    // "將臉部置於方框中，依照畫面指示進行操作"
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 16
+  },
+  bodyTwo: {
+    // G.T.5
+    // Figma標示body 2或body2
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  bodyThree: {
+    // G.T.6
+    // Figma標示body 3或body3
+    textColor: '#212121',
+    textWeight: 'regular',
+    fontSize: 12
+  },
+  titleOneDarkMode: {
+    // G.T.D.1
+    // Figma標示dark_title 1
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 20
+  },
+  titleTwoDarkMode: {
+    // G.T.D.2
+    // Figma標示dark_title 2
+    textColor: '#ffffff',
+    textWeight: 'medium',
+    fontSize: 18
+  },
+  bodyTwoDarkMode: {
+    textColor: '#ffffff',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  bodyThreeDarkMode: {
+    // G.T.D.4
+    // Figma標示dark_body 3
+    textColor: '#E0E0E0',
+    textWeight: 'regular',
+    fontSize: 12
+  }
+};
+
 var name = "authme/sdk";
-var version$1 = "2.8.1";
-var date = "2025-02-04T09:12:52+0000";
+var version$1 = "2.8.3";
+var date = "2025-03-05T06:16:55+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,
@@ -2522,4 +2986,4 @@ const version = packageInfo.version;
 (_a = (_b = window)[_c = Symbol.for('authme-sdk')]) !== null && _a !== void 0 ? _a : _b[_c] = {};
 window[Symbol.for('authme-sdk')][packageInfo.name] = version;
 
-export { AuthmeError, ErrorCode, Icon, RGBToLottieColor, RUN_FUNCTION_NAME, STORAGE_KEY, Storage, TIME_UNIT, UintArrayToBlob, asyncOnLineShowErrorMessage, asyncShowErrorMessage, asyncShowPopup, backgroundRequest, checkOnlineStatus, clearCanvas, colorStringToRGB, colorToRGB, combineResult, cropByRatio, dataURItoBlob, debugLog, debugTools, decodeToken, getCanvasSize, getCssVariable, getDeviceInfo, getImageData, getSystemInfo, hexToRGB, hideElement, hideErrorMessage, hidePopup, isIphone14proOrProMax, isMobile, isMobileOrTablet, osVersion, requestCamera, resize, retryPromiseWithCondition, showElement, showErrorMessage, showErrorMessageEventName, showPopup, splitResult, startLoadingSDK, startSpinner, stopLoadingSDK, stopSpinner, switchCamera, useState, verificationErrorMessages, version, videoConstraintsFactory, waitTime };
+export { AuthmeError, ErrorCode, Icon, RGBToLottieColor, RUN_FUNCTION_NAME, STORAGE_KEY, Storage, TIME_UNIT, UintArrayToBlob, asyncOnLineShowErrorMessage, asyncShowErrorMessage, asyncShowPopup, backgroundRequest, checkOnlineStatus, clearCanvas, colorStringToRGB, colorToRGB, combineResult, cropByRatio, dataURItoBlob, debugLog, debugTools, decodeToken, fontWeight, getCanvasSize, getCssVariable, getDeviceInfo, getImageData, getSystemInfo, hexToRGB, hideElement, hideErrorMessage, hidePopup, isIphone14proOrProMax, isMobile, isMobileOrTablet, osVersion, requestCamera, resize, retryPromiseWithCondition, showElement, showErrorMessage, showErrorMessageEventName, showPopup, splitResult, startLoadingSDK, startSpinner, stopLoadingSDK, stopSpinner, switchCamera, themeConfigDefault, uiThemeButton, uiThemeHint, uiThemeSmallButton, uiThemeText, uploadModal, useState, verificationErrorMessages, version, videoConstraintsFactory, waitTime };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authme/util",
-  "version": "2.8.1",
+  "version": "2.8.3",
   "peerDependencies": {
     "core-js": "^3.6.0",
     "jwt-decode": "3.1.2",

package/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/shared-util';
 export * from './ui';
 export * from './lib/background-request-process';
+export * from './lib/const';
 export { version } from './lib/version';

package/src/lib/const.d.ts

@@ -0,0 +1 @@
+export declare const themeConfigDefault: any;

package/src/ui/index.d.ts

@@ -7,3 +7,5 @@ export * from './camera';
 export * from './element-style';
 export * from './sdk-loading';
 export * from './cssToJs';
+export * from './uiThemeStyle';
+export * from './uploadModal';

package/src/ui/spinner.d.ts

@@ -1,2 +1,6 @@
-export declare function startSpinner(text?: string, backgroundOpaque?: boolean): void;
+export declare function startSpinner(args: {
+    text?: string;
+    backgroundOpaque?: boolean;
+    statement?: string;
+}): void;
 export declare function stopSpinner(): void;

package/src/ui/uiThemeStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const fontWeight: any;
+export declare const uiThemeText: (dom: any, textStyle: any) => void;
+export declare const uiThemeHint: (dom: any, hintStyle: any) => void;
+export declare const uiThemeButton: (dom: any, buttonStyle: any) => void;
+export declare const uiThemeSmallButton: (dom: any, buttonStyle: any) => void;

package/src/ui/uploadModal.d.ts

@@ -0,0 +1,14 @@
+export declare const uploadModal: (arg: {
+    type: 'success' | 'error';
+    titleSuccess?: string;
+    messageSuccess?: string;
+    titleError?: string;
+    messageError?: string;
+    statement?: string;
+    retryText?: string;
+    closeText?: string;
+    onClose?: () => void;
+    onRetry?: () => void;
+}) => {
+    removeModal: () => void;
+};