From 259dc8999545029bd35c99307b467beca02c1320 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Tue, 5 Nov 2024 16:44:53 +0100
Subject: [PATCH] feat: Expose axios interceptors ton inline password
 confirmation

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 package-lock.json                 |  51 +++++---
 package.json                      |   1 +
 src/components/PasswordDialog.vue |  15 ++-
 src/globals.ts                    |  18 +++
 src/main.ts                       | 208 +++++++++++++++++++++++++-----
 5 files changed, 238 insertions(+), 55 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f1420e..fa4afce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "5.1.1",
       "license": "MIT",
       "dependencies": {
+        "@nextcloud/auth": "^2.4.0",
         "@nextcloud/axios": "^2.5.0",
         "@nextcloud/l10n": "^3.1.0",
         "@nextcloud/router": "^3.0.1"
@@ -1203,17 +1204,40 @@
       }
     },
     "node_modules/@nextcloud/auth": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.3.0.tgz",
-      "integrity": "sha512-PCkRJbML9sXvBENY43vTIERIZJFk2azu08IK6zYOnOZ7cFkD1QlFJtdTCZTImQLg01IXhIm0j0ExEdatHoqz7g==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.4.0.tgz",
+      "integrity": "sha512-T5OFltKd0O9Hfj47VrzE7TVjCwqOMHH9JLyjjLUR3pu2MaTY9WL6AjL79sHbFTXUaIkftZgJKu12lHYmqXnL2Q==",
       "dependencies": {
-        "@nextcloud/event-bus": "^3.2.0"
+        "@nextcloud/browser-storage": "^0.4.0",
+        "@nextcloud/event-bus": "^3.3.1"
       },
       "engines": {
         "node": "^20.0.0",
         "npm": "^10.0.0"
       }
     },
+    "node_modules/@nextcloud/auth/node_modules/@nextcloud/browser-storage": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/browser-storage/-/browser-storage-0.4.0.tgz",
+      "integrity": "sha512-D6XxznxCYmJ3oBCC3p0JB6GZJ2RZ9dgbB1UqtTePXrIvHUMBAeF/YkiGKYxLAVZCZb+NSNZXgAYHm/3LnIUbDg==",
+      "dependencies": {
+        "core-js": "3.37.0"
+      },
+      "engines": {
+        "node": "^20.0.0",
+        "npm": "^10.0.0"
+      }
+    },
+    "node_modules/@nextcloud/auth/node_modules/core-js": {
+      "version": "3.37.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz",
+      "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/@nextcloud/axios": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@nextcloud/axios/-/axios-2.5.1.tgz",
@@ -1321,12 +1345,12 @@
       }
     },
     "node_modules/@nextcloud/event-bus": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.2.0.tgz",
-      "integrity": "sha512-5F3Zjqv12r/VCkzXFnsMZb/lb12eVv7/oDSUFV3njNJoPdu7x6k5kjRM/N4THHoDDRRgBQjgKr9Uyqgppqj6XA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.3.1.tgz",
+      "integrity": "sha512-VBYJspOVk5aZopgZwCUoMKFqcTLCNel2TLvtu0HMPV2gR5ZLPiPAKbkyKkYTh+Sd5QB1gR6l3STTv1gyal0soQ==",
       "dependencies": {
-        "@types/node": "^20.12.7",
-        "semver": "^7.6.0"
+        "@types/node": "^20.12.12",
+        "semver": "^7.6.2"
       },
       "engines": {
         "node": "^20.0.0",
@@ -1334,12 +1358,9 @@
       }
     },
     "node_modules/@nextcloud/event-bus/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "bin": {
         "semver": "bin/semver.js"
       },
diff --git a/package.json b/package.json
index c029167..cf5fb4f 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   "bugs": "https://github.com/nextcloud-libraries/nextcloud-password-confirmation/issues",
   "license": "MIT",
   "dependencies": {
+    "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.0",
     "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/router": "^3.0.1"
diff --git a/src/components/PasswordDialog.vue b/src/components/PasswordDialog.vue
index bf6a77d..43276e6 100644
--- a/src/components/PasswordDialog.vue
+++ b/src/components/PasswordDialog.vue
@@ -21,7 +21,7 @@
 			<NcButton class="vue-password-confirmation__submit"
 				type="primary"
 				native-type="submit"
-				:disabled="!password">
+				:disabled="!password || loading">
 				<template v-if="loading" #icon>
 					<NcLoadingIcon :size="20" />
 				</template>
@@ -32,12 +32,10 @@
 </template>
 
 <script lang="ts">
-import axios from '@nextcloud/axios'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
-import { generateUrl } from '@nextcloud/router'
 import { defineComponent } from 'vue'
 import { DIALOG_ID } from '../globals.js'
 import { t } from '../utils/l10n.js'
@@ -59,6 +57,13 @@ export default defineComponent({
 		NcPasswordField,
 	},
 
+	props: {
+		validate: {
+			type: Function,
+			default: () => {},
+		},
+	},
+
 	setup() {
 		// non reactive props
 		return {
@@ -102,10 +107,8 @@ export default defineComponent({
 				return
 			}
 
-			const url = generateUrl('/login/confirm')
 			try {
-				const { data } = await axios.post(url, { password: this.password })
-				window.nc_lastLogin = data.lastLogin
+				await this.validate(this.password)
 				this.$emit('confirmed')
 			} catch (e) {
 				this.showError = true
diff --git a/src/globals.ts b/src/globals.ts
index ad0e070..69126d7 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -5,3 +5,21 @@
 
 export const DIALOG_ID = 'password-confirmation-dialog'
 export const MODAL_CLASS = 'modal-mask' // NcModal component root class https://github.com/nextcloud/nextcloud-vue/blob/v7.0.0-beta.2/src/components/NcModal/NcModal.vue
+
+export enum PwdConfirmationMode {
+	Lax = 'lax',
+	Strict = 'strict',
+}
+
+declare module '@nextcloud/axios' {
+	export interface AxiosRequestConfig {
+		/** To use this property you need to use the addPasswordConfirmationInterceptors function. */
+		confirmPassword?: PwdConfirmationMode;
+	}
+}
+
+declare global {
+	interface Window {
+		_nc_password_confirmation_dialog?: Vue
+	}
+}
diff --git a/src/main.ts b/src/main.ts
index 2c75dba..67b7d03 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,21 +3,33 @@
  * SPDX-License-Identifier: MIT
  */
 import Vue from 'vue'
-import PasswordDialogVue from './components/PasswordDialog.vue'
-import { DIALOG_ID, MODAL_CLASS } from './globals'
-
 import type { ComponentInstance } from 'vue'
 
+import type { AxiosInstance } from '@nextcloud/axios'
+import axios from '@nextcloud/axios'
+import { getCurrentUser } from '@nextcloud/auth'
+import { generateUrl } from '@nextcloud/router'
+
+import PasswordDialogVue from './components/PasswordDialog.vue'
+import { DIALOG_ID, MODAL_CLASS, PwdConfirmationMode } from './globals'
+export { PwdConfirmationMode } from './globals'
+
 const PAGE_LOAD_TIME = Date.now()
+let INTERCEPTOR_INITIALIZED = false
 
 /**
  * Check if password confirmation is required according to the last confirmation time.
  * Use as a replacement of deprecated `OC.PasswordConfirmation.requiresPasswordConfirmation()`.
  * Not needed if `confirmPassword()` can be used, because it checks requirements itself.
  *
+ * @param mode
  * @return {boolean} Whether password confirmation is required or was confirmed recently
  */
-export const isPasswordConfirmationRequired = (): boolean => {
+export const isPasswordConfirmationRequired = (mode: PwdConfirmationMode): boolean => {
+	if (mode === PwdConfirmationMode.Strict) {
+		return true
+	}
+
 	const serverTimeDiff = PAGE_LOAD_TIME - (window.nc_pageLoad * 1000)
 	const timeSinceLogin = Date.now() - (serverTimeDiff + (window.nc_lastLogin * 1000))
 
@@ -29,48 +41,176 @@ export const isPasswordConfirmationRequired = (): boolean => {
  * Confirm password if needed.
  * Replacement of deprecated `OC.PasswordConfirmation.requirePasswordConfirmation(callback)`
  *
- * @return {Promise<void>} Promise that resolves when password is confirmed or not needded.
+ * @return {Promise<void>} Promise that resolves when password is confirmed or not needed.
  *                         Rejects if password confirmation was cancelled
  *                         or confirmation is already in process.
  */
 export const confirmPassword = (): Promise<void> => {
-	const isDialogMounted = Boolean(document.getElementById(DIALOG_ID))
-	if (isDialogMounted) {
-		return Promise.reject(new Error('Password confirmation dialog already mounted'))
-	}
-
-	if (!isPasswordConfirmationRequired()) {
+	if (!isPasswordConfirmationRequired(PwdConfirmationMode.Lax)) {
 		return Promise.resolve()
 	}
 
-	const mountPoint = document.createElement('div')
-	mountPoint.setAttribute('id', DIALOG_ID)
+	return new Promise((resolve, reject) => {
+		promptPassword(
+			async (password: string) => {
+				await _confirmPassword(password)
+				resolve()
+			},
+			() => reject(new Error('Dialog closed')),
+		)
+	})
+}
+
+/**
+ *
+ * @param password
+ */
+async function _confirmPassword(password: string) {
+	console.debug('Confirming password')
+
+	const url = generateUrl('/login/confirm')
+	const { data } = await axios.post(url, { password })
+	window.nc_lastLogin = data.lastLogin
+
+	console.debug('Password confirmed')
+}
+
+/**
+ *
+ */
+function getDialog(): Vue {
+	if (window._nc_password_confirmation_dialog === undefined) {
+		console.debug('Prompting password form')
+
+		const mountPoint = document.createElement('div')
+		mountPoint.setAttribute('id', DIALOG_ID)
+
+		const modals = Array.from(document.querySelectorAll(`.${MODAL_CLASS}`) as NodeListOf<HTMLElement>)
+			// Filter out hidden modals
+			.filter((modal) => modal.style.display !== 'none')
 
-	const modals = Array.from(document.querySelectorAll(`.${MODAL_CLASS}`) as NodeListOf<HTMLElement>)
-		// Filter out hidden modals
-		.filter((modal) => modal.style.display !== 'none')
+		const isModalMounted = Boolean(modals.length)
 
-	const isModalMounted = Boolean(modals.length)
+		if (isModalMounted) {
+			const previousModal = modals[modals.length - 1]
+			previousModal.prepend(mountPoint)
+		} else {
+			document.body.appendChild(mountPoint)
+		}
 
-	if (isModalMounted) {
-		const previousModal = modals[modals.length - 1]
-		previousModal.prepend(mountPoint)
-	} else {
-		document.body.appendChild(mountPoint)
+		const DialogClass = Vue.extend(PasswordDialogVue as never)
+		// Mount point element is replaced by the component
+		window._nc_password_confirmation_dialog = (new DialogClass() as ComponentInstance).$mount(mountPoint)
 	}
 
-	const DialogClass = Vue.extend(PasswordDialogVue)
-	// Mount point element is replaced by the component
-	const dialog = (new DialogClass() as ComponentInstance).$mount(mountPoint)
+	return window._nc_password_confirmation_dialog
+}
 
-	return new Promise((resolve, reject) => {
-		dialog.$on('confirmed', () => {
-			dialog.$destroy()
-			resolve()
-		})
-		dialog.$on('close', () => {
-			dialog.$destroy()
-			reject(new Error('Dialog closed'))
-		})
+/**
+ *
+ * @param validate
+ * @param close
+ */
+function promptPassword(
+	validate: (password: string) => Promise<void>,
+	close: () => void,
+) {
+	const dialog = getDialog()
+
+	dialog.$props.validate = validate
+
+	dialog.$on('confirmed', () => {
+		dialog.$destroy()
+		delete window._nc_password_confirmation_dialog
 	})
+	dialog.$on('close', () => {
+		dialog.$destroy()
+		close()
+		delete window._nc_password_confirmation_dialog
+	})
+}
+
+/**
+ * Add axios interceptors to an axios instance that will ask for
+ * password confirmation to add it as Basic Auth for every requests.
+ * @param axios
+ */
+export function addPasswordConfirmationInterceptors(axios: AxiosInstance): void {
+	if (INTERCEPTOR_INITIALIZED) {
+		return
+	}
+
+	INTERCEPTOR_INITIALIZED = true
+
+	let validatePromise: PromiseWithResolvers<void>
+
+	axios.interceptors.request.use(
+		async (config) => {
+			if (config.confirmPassword === undefined) {
+				return config
+			}
+
+			if (!isPasswordConfirmationRequired(config.confirmPassword)) {
+				return config
+			}
+
+			return new Promise((resolve, reject) => {
+				promptPassword(
+					async (password: string) => {
+						switch (config.confirmPassword) {
+						case PwdConfirmationMode.Lax: {
+							await _confirmPassword(password)
+							resolve(config)
+							return Promise.resolve()
+						}
+						case PwdConfirmationMode.Strict:
+							console.debug('Adding auth info to the request', { config })
+							config.auth = {
+								username: getCurrentUser()?.uid ?? '',
+								password,
+							}
+							resolve(config)
+
+							validatePromise = Promise.withResolvers<void>()
+							return validatePromise.promise
+						}
+					},
+					() => {
+						reject(new Error('Dialog closed'))
+					},
+				)
+			})
+		},
+	)
+
+	axios.interceptors.response.use(
+		(response) => {
+			if (response.config.confirmPassword !== PwdConfirmationMode.Strict) {
+				return response
+			}
+
+			console.debug('Password confirmation succeeded', { response })
+			window.nc_lastLogin = Date.now() / 1000
+			validatePromise.resolve()
+
+			return response
+		},
+		(error) => {
+			if (error.config?.confirmPassword !== PwdConfirmationMode.Strict) {
+				throw error
+			}
+
+			console.debug('Password confirmation failed', { error })
+			validatePromise.reject(error)
+
+			if (!(error.response?.status === 403 && error.response.data.message === 'Password confirmation is required')) {
+				throw error
+			}
+
+			// If the password confirmation failed, we trigger another request.
+			// that will go through the password confirmation flow again.
+			console.debug('Triggering new request', { error })
+			return axios.request(error.config)
+		},
+	)
 }