From da23fd1c5016d2c23a0dadbe8396d3434319289b Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 31 Aug 2023 11:42:32 +0200
Subject: [PATCH 01/29] init

---
 .../src/components/OcModal/OcModal.vue        |  9 ++++++
 .../components/OcTextInput/OcTextInput.vue    | 30 +++++++++++--------
 .../_OcTextInputPassword.vue                  | 26 ++++++++++++++++
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |  5 +++-
 packages/web-client/src/ocs/capabilities.ts   | 11 +++++++
 .../composables/capability/useCapability.ts   | 13 +++++++-
 packages/web-runtime/src/App.vue              |  1 +
 packages/web-runtime/src/store/modal.ts       |  1 +
 8 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 7e4f980f775..815efa345df 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -42,6 +42,7 @@
               :error-message="inputError"
               :label="inputLabel"
               :type="inputType"
+              :password-policy="inputPasswordPolicy"
               :description-message="inputDescription"
               :disabled="inputDisabled"
               :fix-message-line="true"
@@ -347,6 +348,14 @@ export default defineComponent({
       required: false,
       default: false
     },
+    /**
+     * Password policy for the input
+     */
+    inputPasswordPolicy: {
+      type: Object,
+      required: false,
+      default: () => {}
+    },
     /**
      * Overwrite default focused element
      * Can be `#id, .class`.
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 65efb422a74..b91fbde80db 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -8,7 +8,8 @@
         size="small"
         class="oc-mt-s oc-ml-s oc-position-absolute"
       />
-      <input
+      <component
+        :is="inputComponent"
         :id="id"
         v-bind="additionalAttributes"
         ref="input"
@@ -73,6 +74,7 @@ import { defineComponent, HTMLAttributes, PropType } from 'vue'
 import uniqueId from '../../utils/uniqueId'
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
+import OcTextInputPassword from '../_OcTextInputPassword/_OcTextInputPassword.vue'
 
 /**
  * Form Inputs are used to allow users to provide text input when the expected
@@ -89,10 +91,10 @@ import OcIcon from '../OcIcon/OcIcon.vue'
  */
 export default defineComponent({
   name: 'OcTextInput',
-  components: { OcIcon, OcButton },
+  components: { OcIcon, OcButton, OcTextInputPassword },
   status: 'ready',
   release: '1.0.0',
-  inheritAttrs: false,
+  inheritAttrs: true,
   props: {
     /**
      * The ID of the element.
@@ -201,19 +203,15 @@ export default defineComponent({
       default: null
     },
     /**
-     * Determines if the input field is read only.
-     *
-     * Read only field will be visualized by a lock item and additionally behaves like a disabled field.
-     * Read only takes effect if the server won't allow to change the value at all,
-     * disabled should be used instead, if the value can't be changed in a specific context.
-     *
-     * For example: If the backend doesn't allow to set the login states for users in general, use read only.
-     * If it's not allowed to change for the current logged-in User, use disabled.
-     *
+     * The password policy object
      */
     readOnly: {
       type: Boolean,
       default: false
+    },
+    passwordPolicy: {
+      type: Object,
+      default: () => {}
     }
   },
   emits: ['change', 'update:modelValue', 'focus'],
@@ -238,6 +236,11 @@ export default defineComponent({
       if (this.defaultValue) {
         additionalAttrs['placeholder'] = this.defaultValue
       }
+
+      if (this.type === 'password') {
+        additionalAttrs['password-policy'] = this.passwordPolicy
+      }
+
       // Exclude listeners for events which are handled via methods in this component
       // eslint-disable-next-line no-unused-vars
       const { change, input, focus, class: classes, ...attrs } = this.$attrs
@@ -266,6 +269,9 @@ export default defineComponent({
     },
     displayValue() {
       return this.modelValue || ''
+    },
+    inputComponent() {
+      return this.type === 'password' ? 'oc-text-input-password' : 'input'
     }
   },
   methods: {
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
new file mode 100644
index 00000000000..6cf1ca76652
--- /dev/null
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -0,0 +1,26 @@
+<template>
+  hello!
+
+  {{ passwordPolicy }}
+  <input v-bind="$attrs" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'OCTextInputPassword',
+  status: 'ready',
+  release: '1.0.0',
+  inheritAttrs: true,
+  props: {
+    /**
+     * The ID of the element.
+     */
+    passwordPolicy: {
+      type: Object,
+      required: false,
+      default: () => {}
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index ef61a516703..7ee00f43477 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -188,6 +188,7 @@ import { formatDateFromDateTime, formatRelativeDateFromDateTime } from 'web-pkg/
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { OcDrop } from 'design-system/src/components'
+import {useCapabilityPasswordPolicy} from "web-pkg";
 
 export default defineComponent({
   name: 'DetailsAndEdit',
@@ -226,7 +227,8 @@ export default defineComponent({
   setup() {
     return {
       space: inject<Ref<SpaceResource>>('space'),
-      resource: inject<Ref<Resource>>('resource')
+      resource: inject<Ref<Resource>>('resource'),
+      passwordPolicy: useCapabilityPasswordPolicy()
     }
   },
   data() {
@@ -483,6 +485,7 @@ export default defineComponent({
         hasInput: true,
         confirmDisabled: true,
         inputLabel: this.$gettext('Password'),
+        inputPasswordPolicy: this.passwordPolicy,
         inputType: 'password',
         onCancel: this.hideModal,
         onInput: (password) => this.checkPassword(password),
diff --git a/packages/web-client/src/ocs/capabilities.ts b/packages/web-client/src/ocs/capabilities.ts
index b5ccaad69f5..b59cc10dde1 100644
--- a/packages/web-client/src/ocs/capabilities.ts
+++ b/packages/web-client/src/ocs/capabilities.ts
@@ -9,8 +9,19 @@ export interface AppProviderCapability {
   open_url: string
   version: string
 }
+
+export interface PasswordPolicyCapability {
+  min_characters?: number
+  min_lower_case_characters?: number
+  min_upper_case_characters?: number
+  min_digits?: number
+  min_special_characters?: number
+  allowed_special_characters?: string
+}
+
 export interface Capabilities {
   capabilities: {
+    password_policy?: PasswordPolicyCapability
     notifications: {
       ocs_endpoints: string[]
     }
diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index 8df471becdf..354f0006c35 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -2,7 +2,7 @@ import { Store } from 'vuex'
 import get from 'lodash-es/get'
 import { computed, ComputedRef } from 'vue'
 import { useStore } from '../store'
-import { AppProviderCapability } from 'web-client/src/ocs/capabilities'
+import { AppProviderCapability, PasswordPolicyCapability } from 'web-client/src/ocs/capabilities'
 
 export const useCapability = <T>(
   store: Store<any>,
@@ -135,3 +135,14 @@ export const useCapabilityNotifications = createCapabilityComposable(
   'notifications.ocs-endpoints',
   []
 )
+export const useCapabilityPasswordPolicy = createCapabilityComposable<PasswordPolicyCapability>(
+  'password_policy',
+  {
+    min_characters: 8,
+    min_lower_case_characters: 2,
+    min_upper_case_characters: 2,
+    min_digits: 1,
+    min_special_characters: 1,
+    allowed_special_characters: '!"§="'
+  }
+)
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 510647eadb6..ea56de39673 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -14,6 +14,7 @@
       :message="modal.message"
       :has-input="modal.hasInput"
       :input-description="modal.inputDescription"
+      :input-password-policy="modal.inputPasswordPolicy"
       :input-disabled="modal.inputDisabled"
       :input-error="modal.inputError"
       :input-label="modal.inputLabel"
diff --git a/packages/web-runtime/src/store/modal.ts b/packages/web-runtime/src/store/modal.ts
index abc0fb67812..3615cbd0156 100644
--- a/packages/web-runtime/src/store/modal.ts
+++ b/packages/web-runtime/src/store/modal.ts
@@ -71,6 +71,7 @@ const mutations = {
     state.onConfirm = modal.onConfirm
     state.hasInput = modal.hasInput || false
     state.inputValue = modal.inputValue || null
+    state.inputPasswordPolicy = modal.inputPasswordPolicy || {}
     state.inputSelectionRange = modal.inputSelectionRange
     state.inputDescription = modal.inputDescription || null
     state.inputLabel = modal.inputLabel || null

From fbba5bf3c8ff8e489c01677d285665e7da1022c3 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 31 Aug 2023 11:56:25 +0200
Subject: [PATCH 02/29] Fix description fuck up

---
 .../src/components/OcTextInput/OcTextInput.vue      | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index b91fbde80db..96bdb15af3f 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -203,12 +203,23 @@ export default defineComponent({
       default: null
     },
     /**
-     * The password policy object
+     * Determines if the input field is read only.
+     *
+     * Read only field will be visualized by a lock item and additionally behaves like a disabled field.
+     * Read only takes effect if the server won't allow to change the value at all,
+     * disabled should be used instead, if the value can't be changed in a specific context.
+     *
+     * For example: If the backend doesn't allow to set the login states for users in general, use read only.
+     * If it's not allowed to change for the current logged-in User, use disabled.
+     *
      */
     readOnly: {
       type: Boolean,
       default: false
     },
+    /**
+     * The password policy object
+     */
     passwordPolicy: {
       type: Object,
       default: () => {}

From f017992ec5c02d196835eab1c83fa6deaa2a4a3a Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 31 Aug 2023 23:48:20 +0200
Subject: [PATCH 03/29] implemented a lot

---
 packages/web-pkg/package.json                 |   3 +-
 .../passwordPolicyService/index.ts            |   1 +
 .../usePasswordPolicyService.ts               | 100 ++++++++++++++++++
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-pkg/src/composables/passwordPolicyService/index.ts
 create mode 100644 packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts

diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
index 1d61acb65eb..3f4acd38bcc 100644
--- a/packages/web-pkg/package.json
+++ b/packages/web-pkg/package.json
@@ -34,6 +34,7 @@
     "vue3-gettext": "2.5.0-alpha.1",
     "vuex": "4.1.0",
     "web-client": "workspace:@ownclouders/web-client@*",
-    "web-pkg": "workspace:@ownclouders/web-pkg@*"
+    "web-pkg": "workspace:@ownclouders/web-pkg@*",
+    "password-sheriff": "^1.1.1"
   }
 }
diff --git a/packages/web-pkg/src/composables/passwordPolicyService/index.ts b/packages/web-pkg/src/composables/passwordPolicyService/index.ts
new file mode 100644
index 00000000000..829912b5ad9
--- /dev/null
+++ b/packages/web-pkg/src/composables/passwordPolicyService/index.ts
@@ -0,0 +1 @@
+export * from './usePasswordPolicyService'
diff --git a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
new file mode 100644
index 00000000000..d98e88b5c51
--- /dev/null
+++ b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
@@ -0,0 +1,100 @@
+import { useCapabilityPasswordPolicy } from 'web-pkg'
+import { PasswordPolicy } from 'password-sheriff'
+import { isObject, isNaN, isNumber } from 'lodash-es'
+import { unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+class AtLeastBaseRule {
+  protected $ngettext
+  protected override explain(options, password)
+  protected override assert(options, password)
+  constructor($ngettext) {
+    this.$ngettext = $ngettext
+  }
+  validate(options) {
+    if (!isObject(options)) {
+      throw new Error('options should be an object')
+    }
+
+    if (!isNumber(options.minLength) || isNaN(options.minLength)) {
+      throw new Error('atLeastDigits expects minLength to be a non-zero number')
+    }
+
+    return true
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
+
+class AtLeastCharactersRule extends AtLeastBaseRule {
+  constructor($gettext) {
+    super($gettext)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastCharacters',
+      message: this.$ngettext(
+        'At least %{param} character long',
+        'At least %{param} characters long',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    return password.length >= options.minLength
+  }
+}
+
+class AtLeastDigitsRule extends AtLeastBaseRule {
+  constructor($ngettext) {
+    super($ngettext)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastDigits',
+      message: this.$ngettext(
+        'At least %{param} number',
+        'At least %{param} numbers',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    const digitCount = (password || '').match(/\d/g)?.length
+    return digitCount >= options.minLength
+  }
+}
+export function usePasswordPolicyService(): [] {
+  const { $ngettext } = useGettext()
+  const passwordPolicyCapability = unref(useCapabilityPasswordPolicy())
+  const passwordPolicyRules = []
+
+  if (passwordPolicyCapability.min_characters) {
+    passwordPolicyRules.push(
+      new PasswordPolicy(
+        { atLeastCharacters: { minLength: passwordPolicyCapability.min_characters } },
+        { atLeastCharacters: new AtLeastCharactersRule($ngettext) }
+      )
+    )
+  }
+
+  if (passwordPolicyCapability.min_digits) {
+    passwordPolicyRules.push(
+      new PasswordPolicy(
+        { atLeastDigits: { minLength: passwordPolicyCapability.min_digits } },
+        { atLeastDigits: new AtLeastDigitsRule($ngettext) }
+      )
+    )
+  }
+
+  return passwordPolicyRules
+}

From 5be6a828cd7ba70eb10c1912c5cd9db250c00a80 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 31 Aug 2023 23:49:56 +0200
Subject: [PATCH 04/29] Implement a lot of stuff

---
 .../components/OcTextInput/OcTextInput.vue    | 13 ++-
 .../_OcTextInputPassword.vue                  | 99 +++++++++++++++++--
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |  6 +-
 pnpm-lock.yaml                                |  9 +-
 4 files changed, 113 insertions(+), 14 deletions(-)

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 96bdb15af3f..f4aefea9893 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -65,6 +65,7 @@
         v-text="messageText"
       />
     </div>
+    <portal-target name="app.design-system.password-policy" />
   </div>
 </template>
 
@@ -94,7 +95,7 @@ export default defineComponent({
   components: { OcIcon, OcButton, OcTextInputPassword },
   status: 'ready',
   release: '1.0.0',
-  inheritAttrs: true,
+  inheritAttrs: false,
   props: {
     /**
      * The ID of the element.
@@ -221,8 +222,8 @@ export default defineComponent({
      * The password policy object
      */
     passwordPolicy: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   emits: ['change', 'update:modelValue', 'focus'],
@@ -348,6 +349,12 @@ export default defineComponent({
     color: var(--oc-color-text-muted);
   }
 
+  &-success,
+  &-success:focus {
+    border-color: var(--oc-color-swatch-success-default) !important;
+    color: var(--oc-color-swatch-success-default) !important;
+  }
+
   &-warning,
   &-warning:focus {
     border-color: var(--oc-color-swatch-warning-default) !important;
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 6cf1ca76652..f337b8d7319 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -1,14 +1,37 @@
 <template>
-  hello!
-
-  {{ passwordPolicy }}
-  <input v-bind="$attrs" />
+  <div ref="inputPasswordWrapper" class="oc-text-input-password-wrapper">
+    <input v-bind="$attrs" :type="showPassword ? 'text' : 'password'" @input="onInput" />
+    <oc-button
+      class="oc-text-input-show-password-toggle oc-px-s oc-background-default"
+      appearance="raw"
+      size="small"
+      @click="showPassword = !showPassword"
+    >
+      <oc-icon size="small" :name="showPassword ? 'eye-off' : 'eye'" />
+    </oc-button>
+  </div>
+  <portal v-if="showPasswordPolicyInformation" to="app.design-system.password-policy">
+    <div class="oc-text-small oc-flex oc-flex-column">
+      <div v-for="(rule, index) in passwordPolicy" :key="index" class="oc-flex oc-flex-middle">
+        <oc-icon
+          size="small"
+          :name="isPolicyRuleFulfilled(rule) ? 'check' : 'close'"
+          :variation="isPolicyRuleFulfilled(rule) ? 'success' : 'danger'"
+        />
+        <span :class="getPolicyMessageClass(rule)" v-text="getPolicyRuleMessage(rule)"></span>
+      </div>
+    </div>
+  </portal>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref, unref } from 'vue'
+import OcIcon from '../OcIcon/OcIcon.vue'
+import OcButton from '../OcButton/OcButton.vue'
+import { useGettext } from 'vue3-gettext'
 export default defineComponent({
   name: 'OCTextInputPassword',
+  components: { OcButton, OcIcon },
   status: 'ready',
   release: '1.0.0',
   inheritAttrs: true,
@@ -17,10 +40,70 @@ export default defineComponent({
      * The ID of the element.
      */
     passwordPolicy: {
-      type: Object,
-      required: false,
-      default: () => {}
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const { $gettext } = useGettext()
+    const showPassword = ref(false)
+    const passwordEntered = ref(false)
+    console.log(props.passwordPolicy)
+    const showPasswordPolicyInformation = computed(() => {
+      return !!(props.passwordPolicy.length && unref(passwordEntered))
+    })
+
+    const onInput = () => {
+      passwordEntered.value = true
+    }
+
+    const getPolicyRuleMessage = (policyRule) => {
+      const explained = policyRule.explain()[0]
+      return $gettext(explained.message, { param: explained.format[0] })
+    }
+
+    const isPolicyRuleFulfilled = (policyRule) => {
+      return policyRule.check('abcjsdjd13')
+    }
+
+    const getPolicyMessageClass = (policyRule) => {
+      return policyRule.check('adadsadsaasd23') ? 'oc-text-input-success' : 'oc-text-input-danger'
+    }
+
+    return {
+      onInput,
+      showPassword,
+      showPasswordPolicyInformation,
+      isPolicyRuleFulfilled,
+      getPolicyRuleMessage,
+      getPolicyMessageClass
     }
   }
 })
 </script>
+<style lang="scss">
+.oc-text-input-password-wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  border-radius: 5px;
+  border: 1px solid var(--oc-color-input-border);
+  background-color: var(--oc-color-background-highlight);
+
+  input {
+    flex-grow: 2;
+    border: none;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  button {
+    background-color: var(--oc-color-background-highlight) !important;
+  }
+}
+.oc-text-input-password-wrapper:focus-within {
+  border-color: var(--oc-color-swatch-passive-default);
+}
+</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 7ee00f43477..dd5a3709e6d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -188,7 +188,7 @@ import { formatDateFromDateTime, formatRelativeDateFromDateTime } from 'web-pkg/
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { OcDrop } from 'design-system/src/components'
-import {useCapabilityPasswordPolicy} from "web-pkg";
+import { usePasswordPolicyService } from 'web-pkg/src/composables/passwordPolicyService'
 
 export default defineComponent({
   name: 'DetailsAndEdit',
@@ -225,10 +225,12 @@ export default defineComponent({
   },
   emits: ['removePublicLink', 'updateLink'],
   setup() {
+    const passwordPolicy = usePasswordPolicyService()
+
     return {
       space: inject<Ref<SpaceResource>>('space'),
       resource: inject<Ref<Resource>>('resource'),
-      passwordPolicy: useCapabilityPasswordPolicy()
+      passwordPolicy
     }
   },
   data() {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f32b11c10a5..bf9112cb477 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -934,6 +934,9 @@ importers:
       mark.js:
         specifier: ^8.11.1
         version: 8.11.1
+      password-sheriff:
+        specifier: ^1.1.1
+        version: 1.1.1
       pinia:
         specifier: ^2.1.3
         version: 2.1.3(typescript@5.0.3)(vue@3.3.4)
@@ -16222,6 +16225,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /password-sheriff@1.1.1:
+    resolution: {integrity: sha512-bt0ptyUs97Fb2ZXUcdQP0RYrBFjzO6KhGTjq4RkmR388c6wcT3khG0U7Bvvqwq3DyShEZ9IACed9JMVyAxdaCA==}
+    dev: false
+
   /path-browserify@0.0.1:
     resolution: {integrity: sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==}
     dev: true

From 8f789351c954eb367702d3b7e7ae904a0034a0ca Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 31 Aug 2023 23:51:16 +0200
Subject: [PATCH 05/29] Lint

---
 .../design-system/src/components/OcTextInput/OcTextInput.vue    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index f4aefea9893..409ead63df3 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -248,11 +248,9 @@ export default defineComponent({
       if (this.defaultValue) {
         additionalAttrs['placeholder'] = this.defaultValue
       }
-
       if (this.type === 'password') {
         additionalAttrs['password-policy'] = this.passwordPolicy
       }
-
       // Exclude listeners for events which are handled via methods in this component
       // eslint-disable-next-line no-unused-vars
       const { change, input, focus, class: classes, ...attrs } = this.$attrs

From a5a802337e9543b9a8b9cbd473792676793c8b2b Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Fri, 1 Sep 2023 16:19:17 +0200
Subject: [PATCH 06/29] Add more rules

---
 .../_OcTextInputPassword.vue                  |  11 +-
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |  11 +-
 .../usePasswordPolicyService.ts               | 185 +++++++++++++++++-
 3 files changed, 183 insertions(+), 24 deletions(-)

diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index f337b8d7319..48585d5d844 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -12,6 +12,7 @@
   </div>
   <portal v-if="showPasswordPolicyInformation" to="app.design-system.password-policy">
     <div class="oc-text-small oc-flex oc-flex-column">
+      <span v-text="$gettext('Please enter a password that meets the following criteria:')" />
       <div v-for="(rule, index) in passwordPolicy" :key="index" class="oc-flex oc-flex-middle">
         <oc-icon
           size="small"
@@ -48,13 +49,14 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const showPassword = ref(false)
     const passwordEntered = ref(false)
-    console.log(props.passwordPolicy)
+    const password = ref('')
     const showPasswordPolicyInformation = computed(() => {
       return !!(props.passwordPolicy.length && unref(passwordEntered))
     })
 
-    const onInput = () => {
+    const onInput = (event) => {
       passwordEntered.value = true
+      password.value = event.target.value
     }
 
     const getPolicyRuleMessage = (policyRule) => {
@@ -63,14 +65,15 @@ export default defineComponent({
     }
 
     const isPolicyRuleFulfilled = (policyRule) => {
-      return policyRule.check('abcjsdjd13')
+      return policyRule.check(password.value)
     }
 
     const getPolicyMessageClass = (policyRule) => {
-      return policyRule.check('adadsadsaasd23') ? 'oc-text-input-success' : 'oc-text-input-danger'
+      return policyRule.check(password.value) ? 'oc-text-input-success' : 'oc-text-input-danger'
     }
 
     return {
+      $gettext,
       onInput,
       showPassword,
       showPasswordPolicyInformation,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index dd5a3709e6d..c1a79ca200c 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -466,16 +466,7 @@ export default defineComponent({
     },
 
     checkPassword(password) {
-      if (password === '') {
-        this.setModalConfirmButtonDisabled(true)
-        return this.setModalInputErrorMessage(this.$gettext("Password can't be empty"))
-      }
-      if (password.length > 72) {
-        this.setModalConfirmButtonDisabled(true)
-        return this.setModalInputErrorMessage(this.$gettext("Password can't exceed 72 characters"))
-      }
-      this.setModalConfirmButtonDisabled(false)
-      return this.setModalInputErrorMessage(null)
+      //TODO Use Password Component Events
     },
 
     showPasswordModal() {
diff --git a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
index d98e88b5c51..462f9619672 100644
--- a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
+++ b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
@@ -4,11 +4,83 @@ import { isObject, isNaN, isNumber } from 'lodash-es'
 import { unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
+class MustNotBeEmptyRule {
+  protected $gettext
+
+  constructor({ $gettext }: any) {
+    this.$gettext = $gettext
+  }
+  explain(options, verified) {
+    return {
+      code: 'mustNotBeEmpty',
+      message: this.$gettext('Must not be empty'),
+      format: [],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    return password.length > 0
+  }
+  validate() {
+    return true
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
+
+class AtMostBaseRule {
+  protected $ngettext
+  protected override explain(options, password)
+  protected override assert(options, password)
+  constructor({ $ngettext }) {
+    this.$ngettext = $ngettext
+  }
+  validate(options) {
+    if (!isObject(options)) {
+      throw new Error('options should be an object')
+    }
+
+    if (!isNumber(options.maxLength) || isNaN(options.maxLength)) {
+      throw new Error('maxLength should be a non-zero number')
+    }
+
+    return true
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
+
+class AtMostCharactersRule extends AtMostBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atMostCharacters',
+      message: this.$ngettext(
+        'At most %{param} character long',
+        'At most %{param} characters long',
+        options.maxLength
+      ),
+      format: [options.maxLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    return password.length <= options.maxLength
+  }
+}
+
 class AtLeastBaseRule {
   protected $ngettext
   protected override explain(options, password)
   protected override assert(options, password)
-  constructor($ngettext) {
+  constructor({ $ngettext }) {
     this.$ngettext = $ngettext
   }
   validate(options) {
@@ -17,7 +89,7 @@ class AtLeastBaseRule {
     }
 
     if (!isNumber(options.minLength) || isNaN(options.minLength)) {
-      throw new Error('atLeastDigits expects minLength to be a non-zero number')
+      throw new Error('minLength should be a non-zero number')
     }
 
     return true
@@ -28,8 +100,8 @@ class AtLeastBaseRule {
 }
 
 class AtLeastCharactersRule extends AtLeastBaseRule {
-  constructor($gettext) {
-    super($gettext)
+  constructor(args) {
+    super(args)
   }
 
   explain(options, verified) {
@@ -50,9 +122,57 @@ class AtLeastCharactersRule extends AtLeastBaseRule {
   }
 }
 
+class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastUppercaseCharacters',
+      message: this.$ngettext(
+        'At least %{param} uppercase character',
+        'At least %{param} uppercase characters',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    const uppercaseCount = (password || '').match(/[A-Z\xC0-\xD6\xD8-\xDE]/g)?.length
+    return uppercaseCount >= options.minLength
+  }
+}
+
+class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastLowercaseCharacters',
+      message: this.$ngettext(
+        'At least %{param} lowercase character',
+        'At least %{param} lowercase characters',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    const lowercaseCount = (password || '').match(/[a-z\xDF-\xF6\xF8-\xFF]/g)?.length
+    return lowercaseCount >= options.minLength
+  }
+}
+
 class AtLeastDigitsRule extends AtLeastBaseRule {
-  constructor($ngettext) {
-    super($ngettext)
+  constructor(args) {
+    super(args)
   }
 
   explain(options, verified) {
@@ -73,16 +193,52 @@ class AtLeastDigitsRule extends AtLeastBaseRule {
     return digitCount >= options.minLength
   }
 }
-export function usePasswordPolicyService(): [] {
-  const { $ngettext } = useGettext()
+export function usePasswordPolicyService(
+  { useDefaultRules = true } = { useDefaultRules: Boolean }
+): Array<any> {
   const passwordPolicyCapability = unref(useCapabilityPasswordPolicy())
   const passwordPolicyRules = []
 
+  if (useDefaultRules && !passwordPolicyCapability.min_characters) {
+    passwordPolicyRules.push(
+      new PasswordPolicy(
+        { mustNotBeEmpty: {} },
+        { mustNotBeEmpty: new MustNotBeEmptyRule({ ...useGettext() }) }
+      )
+    )
+  }
+
   if (passwordPolicyCapability.min_characters) {
     passwordPolicyRules.push(
       new PasswordPolicy(
         { atLeastCharacters: { minLength: passwordPolicyCapability.min_characters } },
-        { atLeastCharacters: new AtLeastCharactersRule($ngettext) }
+        { atLeastCharacters: new AtLeastCharactersRule({ ...useGettext() }) }
+      )
+    )
+  }
+
+  if (passwordPolicyCapability.min_upper_case_characters) {
+    passwordPolicyRules.push(
+      new PasswordPolicy(
+        {
+          atLeastUppercaseCharacters: {
+            minLength: passwordPolicyCapability.min_upper_case_characters
+          }
+        },
+        { atLeastUppercaseCharacters: new AtLeastUppercaseCharactersRule({ ...useGettext() }) }
+      )
+    )
+  }
+
+  if (passwordPolicyCapability.min_lower_case_characters) {
+    passwordPolicyRules.push(
+      new PasswordPolicy(
+        {
+          atLeastLowercaseCharacters: {
+            minLength: passwordPolicyCapability.min_lower_case_characters
+          }
+        },
+        { atLeastLowercaseCharacters: new AtLeastLowercaseCharactersRule({ ...useGettext() }) }
       )
     )
   }
@@ -91,7 +247,16 @@ export function usePasswordPolicyService(): [] {
     passwordPolicyRules.push(
       new PasswordPolicy(
         { atLeastDigits: { minLength: passwordPolicyCapability.min_digits } },
-        { atLeastDigits: new AtLeastDigitsRule($ngettext) }
+        { atLeastDigits: new AtLeastDigitsRule({ ...useGettext() }) }
+      )
+    )
+  }
+
+  if (useDefaultRules) {
+    passwordPolicyRules.push(
+      new PasswordPolicy(
+        { atMostCharacters: { maxLength: 72 } },
+        { atMostCharacters: new AtMostCharactersRule({ ...useGettext() }) }
       )
     )
   }

From 63198a7681ce5d8389f7b80f26ceb079a1cb2a57 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Sat, 2 Sep 2023 15:24:32 +0200
Subject: [PATCH 07/29] Add description

---
 .../src/components/OcTextInput/OcTextInput.vue             | 7 ++++++-
 .../_OcTextInputPassword/_OcTextInputPassword.vue          | 3 ---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 409ead63df3..f81f1ac3d99 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -219,7 +219,12 @@ export default defineComponent({
       default: false
     },
     /**
-     * The password policy object
+     * Array of password policy rules, if type is password and password policy is given,
+     * the entered value will be checked against these rules.
+     *
+     * Password policy rules must be compliant with auth0/password-sheriff
+     * https://github.com/auth0/password-sheriff
+     *
      */
     passwordPolicy: {
       type: Array,
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 48585d5d844..f077c2615c0 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -37,9 +37,6 @@ export default defineComponent({
   release: '1.0.0',
   inheritAttrs: true,
   props: {
-    /**
-     * The ID of the element.
-     */
     passwordPolicy: {
       type: Array,
       default: () => []

From b4915283f0f71002759fe5094f832300e1c9e4a5 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 07:21:36 +0200
Subject: [PATCH 08/29] Export for testing purposes

---
 .../usePasswordPolicyService.ts                  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
index 462f9619672..5f81317e19d 100644
--- a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
+++ b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
@@ -4,7 +4,7 @@ import { isObject, isNaN, isNumber } from 'lodash-es'
 import { unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
-class MustNotBeEmptyRule {
+export class MustNotBeEmptyRule {
   protected $gettext
 
   constructor({ $gettext }: any) {
@@ -30,7 +30,7 @@ class MustNotBeEmptyRule {
   }
 }
 
-class AtMostBaseRule {
+export class AtMostBaseRule {
   protected $ngettext
   protected override explain(options, password)
   protected override assert(options, password)
@@ -53,7 +53,7 @@ class AtMostBaseRule {
   }
 }
 
-class AtMostCharactersRule extends AtMostBaseRule {
+export class AtMostCharactersRule extends AtMostBaseRule {
   constructor(args) {
     super(args)
   }
@@ -76,7 +76,7 @@ class AtMostCharactersRule extends AtMostBaseRule {
   }
 }
 
-class AtLeastBaseRule {
+export class AtLeastBaseRule {
   protected $ngettext
   protected override explain(options, password)
   protected override assert(options, password)
@@ -99,7 +99,7 @@ class AtLeastBaseRule {
   }
 }
 
-class AtLeastCharactersRule extends AtLeastBaseRule {
+export class AtLeastCharactersRule extends AtLeastBaseRule {
   constructor(args) {
     super(args)
   }
@@ -122,7 +122,7 @@ class AtLeastCharactersRule extends AtLeastBaseRule {
   }
 }
 
-class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
+export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
   constructor(args) {
     super(args)
   }
@@ -146,7 +146,7 @@ class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
   }
 }
 
-class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
+export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
   constructor(args) {
     super(args)
   }
@@ -170,7 +170,7 @@ class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
   }
 }
 
-class AtLeastDigitsRule extends AtLeastBaseRule {
+export class AtLeastDigitsRule extends AtLeastBaseRule {
   constructor(args) {
     super(args)
   }

From d71409b13bcf0e4ad974dec3afb8c221f8eeefaa Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 09:11:05 +0200
Subject: [PATCH 09/29] Implement mustContainRule

---
 .../_OcTextInputPassword.vue                  | 10 ++-
 .../usePasswordPolicyService.ts               | 68 ++++++++++++++++---
 2 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index f077c2615c0..16f0563b837 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -58,7 +58,15 @@ export default defineComponent({
 
     const getPolicyRuleMessage = (policyRule) => {
       const explained = policyRule.explain()[0]
-      return $gettext(explained.message, { param: explained.format[0] })
+      const paramObj = {}
+
+      for (var formatKey = 0; formatKey < explained.format.length; formatKey++) {
+        paramObj[`param${formatKey + 1}`] = explained.format[formatKey]
+      }
+
+      console.log(paramObj)
+
+      return $gettext(explained.message, paramObj)
     }
 
     const isPolicyRuleFulfilled = (policyRule) => {
diff --git a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
index 5f81317e19d..6c6f896a53a 100644
--- a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
+++ b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
@@ -1,6 +1,6 @@
 import { useCapabilityPasswordPolicy } from 'web-pkg'
 import { PasswordPolicy } from 'password-sheriff'
-import { isObject, isNaN, isNumber } from 'lodash-es'
+import { isObject, isNaN, isNumber, isString } from 'lodash-es'
 import { unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
@@ -30,6 +30,42 @@ export class MustNotBeEmptyRule {
   }
 }
 
+export class MustContainRule {
+  protected $gettext
+
+  constructor({ $gettext }: any) {
+    this.$gettext = $gettext
+  }
+  explain(options, verified) {
+    return {
+      code: 'mustContain',
+      message: this.$gettext('At least %{param1} of the special characters: %{param2}'),
+      format: [options.minLength, options.characters],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    return password.length > 0
+  }
+  validate(options) {
+    if (!isObject(options)) {
+      throw new Error('options should be an object')
+    }
+
+    if (!isNumber(options.minLength) || isNaN(options.minLength)) {
+      throw new Error('minLength should be a non-zero number')
+    }
+
+    if (!isString(options.characters)) {
+      throw new Error('characters should be a character sequence')
+    }
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
+
 export class AtMostBaseRule {
   protected $ngettext
   protected override explain(options, password)
@@ -108,8 +144,8 @@ export class AtLeastCharactersRule extends AtLeastBaseRule {
     return {
       code: 'atLeastCharacters',
       message: this.$ngettext(
-        'At least %{param} character long',
-        'At least %{param} characters long',
+        'At least %{param1} character long',
+        'At least %{param1} characters long',
         options.minLength
       ),
       format: [options.minLength],
@@ -131,8 +167,8 @@ export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
     return {
       code: 'atLeastUppercaseCharacters',
       message: this.$ngettext(
-        'At least %{param} uppercase character',
-        'At least %{param} uppercase characters',
+        'At least %{param1} uppercase character',
+        'At least %{param1} uppercase characters',
         options.minLength
       ),
       format: [options.minLength],
@@ -155,8 +191,8 @@ export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
     return {
       code: 'atLeastLowercaseCharacters',
       message: this.$ngettext(
-        'At least %{param} lowercase character',
-        'At least %{param} lowercase characters',
+        'At least %{param1} lowercase character',
+        'At least %{param1} lowercase characters',
         options.minLength
       ),
       format: [options.minLength],
@@ -179,8 +215,8 @@ export class AtLeastDigitsRule extends AtLeastBaseRule {
     return {
       code: 'atLeastDigits',
       message: this.$ngettext(
-        'At least %{param} number',
-        'At least %{param} numbers',
+        'At least %{param1} number',
+        'At least %{param1} numbers',
         options.minLength
       ),
       format: [options.minLength],
@@ -252,6 +288,20 @@ export function usePasswordPolicyService(
     )
   }
 
+  if (passwordPolicyCapability.min_special_characters) {
+    passwordPolicyRules.push(
+      new PasswordPolicy(
+        {
+          mustContain: {
+            minLength: passwordPolicyCapability.min_special_characters,
+            characters: passwordPolicyCapability.allowed_special_characters
+          }
+        },
+        { mustContain: new MustContainRule({ ...useGettext() }) }
+      )
+    )
+  }
+
   if (useDefaultRules) {
     passwordPolicyRules.push(
       new PasswordPolicy(

From e61164875497586ef1364cdc8af20b9aa49ac3c6 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 09:15:05 +0200
Subject: [PATCH 10/29] Fix string interpolation

---
 .../passwordPolicyService/usePasswordPolicyService.ts         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
index 6c6f896a53a..b46dd75f0c4 100644
--- a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
+++ b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
@@ -98,8 +98,8 @@ export class AtMostCharactersRule extends AtMostBaseRule {
     return {
       code: 'atMostCharacters',
       message: this.$ngettext(
-        'At most %{param} character long',
-        'At most %{param} characters long',
+        'At most %{param1} character long',
+        'At most %{param1} characters long',
         options.maxLength
       ),
       format: [options.maxLength],

From 3b4b088979b62adc9b44004fb9e7d71de159bee0 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 09:25:52 +0200
Subject: [PATCH 11/29] Emit events

---
 .../_OcTextInputPassword/_OcTextInputPassword.vue  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 16f0563b837..3c3699ec1b6 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, unref } from 'vue'
+import { computed, defineComponent, ref, unref, watch } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcButton from '../OcButton/OcButton.vue'
 import { useGettext } from 'vue3-gettext'
@@ -42,7 +42,8 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup(props) {
+  emits: ['passwordChallengeCompleted', 'passwordChallengeFailed'],
+  setup(props, { emit }) {
     const { $gettext } = useGettext()
     const showPassword = ref(false)
     const passwordEntered = ref(false)
@@ -77,6 +78,15 @@ export default defineComponent({
       return policyRule.check(password.value) ? 'oc-text-input-success' : 'oc-text-input-danger'
     }
 
+    watch(password, (value) => {
+      for (const passwordPolicyRule of props.passwordPolicy) {
+        if (!passwordPolicyRule.check(value)) {
+          return emit('passwordChallengeFailed')
+        }
+      }
+      emit('passwordChallengeCompleted')
+    })
+
     return {
       $gettext,
       onInput,

From 05b92fa0d2489169213e526989181410fb79f17b Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 09:37:41 +0200
Subject: [PATCH 12/29] Emit events

---
 .../design-system/src/components/OcModal/OcModal.vue   | 10 +++++++++-
 .../src/components/OcTextInput/OcTextInput.vue         |  8 +++++++-
 .../components/SideBar/Shares/Links/DetailsAndEdit.vue |  6 ++++++
 packages/web-runtime/src/App.vue                       |  2 ++
 packages/web-runtime/src/store/modal.ts                |  2 ++
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 815efa345df..83bfad45130 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -366,7 +366,15 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ['cancel', 'confirm', 'confirm-secondary', 'input', 'checkbox-changed'],
+  emits: [
+    'cancel',
+    'confirm',
+    'confirm-secondary',
+    'input',
+    'checkbox-changed',
+    'passwordChallengeCompleted',
+    'passwordChallengeFailed'
+  ],
   data() {
     return {
       userInputValue: null,
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index f81f1ac3d99..366158b21d6 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -231,7 +231,13 @@ export default defineComponent({
       default: () => []
     }
   },
-  emits: ['change', 'update:modelValue', 'focus'],
+  emits: [
+    'change',
+    'update:modelValue',
+    'focus',
+    'passwordChallengeCompleted',
+    'passwordChallengeFailed'
+  ],
   computed: {
     showMessageLine() {
       return (
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index c1a79ca200c..22cfe038077 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -481,6 +481,12 @@ export default defineComponent({
         inputPasswordPolicy: this.passwordPolicy,
         inputType: 'password',
         onCancel: this.hideModal,
+        onPasswordChallengeCompleted: () => {
+          console.log('Lol')
+        },
+        onPasswordChallengeFailed: () => {
+          console.log('oh no ')
+        },
         onInput: (password) => this.checkPassword(password),
         onConfirm: (password) => {
           this.updateLink({
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index ea56de39673..4ad09934953 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -34,6 +34,8 @@
       @input="modal.onInput"
       @checkbox-changed="modal.onCheckboxValueChanged"
       @confirm-secondary="modal.onConfirmSecondary"
+      @passwordChallengeCompleted="modal.onPasswordChallengeCompleted"
+      @passwordChallengeFailed="modal.onPasswordChallengeFailed"
       @mounted="focusModal"
       @before-unmount="focusModal"
     >
diff --git a/packages/web-runtime/src/store/modal.ts b/packages/web-runtime/src/store/modal.ts
index 3615cbd0156..95e62fd41ca 100644
--- a/packages/web-runtime/src/store/modal.ts
+++ b/packages/web-runtime/src/store/modal.ts
@@ -84,6 +84,8 @@ const mutations = {
     state.contextualHelperLabel = modal.contextualHelperLabel
     state.contextualHelperData = modal.contextualHelperData
     state.customContent = modal.customContent || ''
+    state.onPasswordChallengeCompleted = modal.onPasswordChallengeCompleted
+    state.onPasswordChallengeFailed = modal.onPasswordChallengeFailed
   },
 
   HIDE_MODAL(state) {

From 94d05ce0b2e092ca8f5b0713b5fae1226635f53a Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 09:51:06 +0200
Subject: [PATCH 13/29] React to events

---
 .../src/components/OcModal/OcModal.vue              |  2 ++
 .../src/components/OcTextInput/OcTextInput.vue      |  2 ++
 .../_OcTextInputPassword/_OcTextInputPassword.vue   |  2 --
 .../SideBar/Shares/Links/DetailsAndEdit.vue         | 13 ++-----------
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 83bfad45130..668fe122f31 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -47,6 +47,8 @@
               :disabled="inputDisabled"
               :fix-message-line="true"
               :selection-range="inputSelectionRange"
+              @password-challenge-completed="$emit('passwordChallengeCompleted')"
+              @password-challenge-failed="$emit('passwordChallengeFailed')"
               @update:model-value="inputOnInput"
               @keydown.enter.prevent="confirm"
             />
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 366158b21d6..9f919c7605c 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -25,6 +25,8 @@
         :disabled="disabled || readOnly"
         @change="onChange(($event.target as HTMLInputElement).value)"
         @input="onInput(($event.target as HTMLInputElement).value)"
+        @password-challenge-completed="$emit('passwordChallengeCompleted')"
+        @password-challenge-failed="$emit('passwordChallengeFailed')"
         @focus="onFocus($event.target)"
       />
       <oc-button
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 3c3699ec1b6..eb0d602bb08 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -65,8 +65,6 @@ export default defineComponent({
         paramObj[`param${formatKey + 1}`] = explained.format[formatKey]
       }
 
-      console.log(paramObj)
-
       return $gettext(explained.message, paramObj)
     }
 
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 22cfe038077..3b0e5c0ac9a 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -465,10 +465,6 @@ export default defineComponent({
       this.createModal(modal)
     },
 
-    checkPassword(password) {
-      //TODO Use Password Component Events
-    },
-
     showPasswordModal() {
       const modal = {
         variation: 'passive',
@@ -481,13 +477,8 @@ export default defineComponent({
         inputPasswordPolicy: this.passwordPolicy,
         inputType: 'password',
         onCancel: this.hideModal,
-        onPasswordChallengeCompleted: () => {
-          console.log('Lol')
-        },
-        onPasswordChallengeFailed: () => {
-          console.log('oh no ')
-        },
-        onInput: (password) => this.checkPassword(password),
+        onPasswordChallengeCompleted: () => this.setModalConfirmButtonDisabled(false),
+        onPasswordChallengeFailed: () => this.setModalConfirmButtonDisabled(true),
         onConfirm: (password) => {
           this.updateLink({
             link: {

From de42163904f613047212fe1844696b153cb48309 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 10:40:20 +0200
Subject: [PATCH 14/29] Add logic to rule

---
 .../src/components/OcModal/OcModal.vue        |  4 +-
 .../_OcTextInputPassword.vue                  |  2 +-
 .../SideBar/Shares/Links/DetailsAndEdit.vue   | 19 ++++++
 packages/web-client/src/ocs/capabilities.ts   |  2 +-
 .../composables/capability/useCapability.ts   |  4 +-
 .../usePasswordPolicyService.ts               | 63 +++++--------------
 6 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 668fe122f31..af56c8f0d4d 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -354,9 +354,9 @@ export default defineComponent({
      * Password policy for the input
      */
     inputPasswordPolicy: {
-      type: Object,
+      type: Array,
       required: false,
-      default: () => {}
+      default: () => []
     },
     /**
      * Overwrite default focused element
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index eb0d602bb08..f0c95ad3364 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -65,7 +65,7 @@ export default defineComponent({
         paramObj[`param${formatKey + 1}`] = explained.format[formatKey]
       }
 
-      return $gettext(explained.message, paramObj)
+      return $gettext(explained.message, paramObj, true)
     }
 
     const isPolicyRuleFulfilled = (policyRule) => {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 3b0e5c0ac9a..f680bceed7a 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -477,6 +477,7 @@ export default defineComponent({
         inputPasswordPolicy: this.passwordPolicy,
         inputType: 'password',
         onCancel: this.hideModal,
+        onInput: (password) => this.checkPassword(password),
         onPasswordChallengeCompleted: () => this.setModalConfirmButtonDisabled(false),
         onPasswordChallengeFailed: () => this.setModalConfirmButtonDisabled(true),
         onConfirm: (password) => {
@@ -492,6 +493,24 @@ export default defineComponent({
         }
       }
       this.createModal(modal)
+    },
+
+    checkPassword(password) {
+      // Password checks will be handled via password policy
+      if (this.passwordPolicy.length) {
+        return
+      }
+
+      if (password === '') {
+        this.setModalConfirmButtonDisabled(true)
+        return this.setModalInputErrorMessage(this.$gettext("Password can't be empty"))
+      }
+      if (password.length > 72) {
+        this.setModalConfirmButtonDisabled(true)
+        return this.setModalInputErrorMessage(this.$gettext("Password can't exceed 72 characters"))
+      }
+      this.setModalConfirmButtonDisabled(false)
+      return this.setModalInputErrorMessage(null)
     }
   }
 })
diff --git a/packages/web-client/src/ocs/capabilities.ts b/packages/web-client/src/ocs/capabilities.ts
index b59cc10dde1..40e38ae0473 100644
--- a/packages/web-client/src/ocs/capabilities.ts
+++ b/packages/web-client/src/ocs/capabilities.ts
@@ -16,7 +16,7 @@ export interface PasswordPolicyCapability {
   min_upper_case_characters?: number
   min_digits?: number
   min_special_characters?: number
-  allowed_special_characters?: string
+  special_characters?: string
 }
 
 export interface Capabilities {
diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index 354f0006c35..7d4ffecff4d 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -142,7 +142,7 @@ export const useCapabilityPasswordPolicy = createCapabilityComposable<PasswordPo
     min_lower_case_characters: 2,
     min_upper_case_characters: 2,
     min_digits: 1,
-    min_special_characters: 1,
-    allowed_special_characters: '!"§="'
+    min_special_characters: 2,
+    special_characters: '!#?§'
   }
 )
diff --git a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
index b46dd75f0c4..0ae6b3a9e5c 100644
--- a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
+++ b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
@@ -3,33 +3,6 @@ import { PasswordPolicy } from 'password-sheriff'
 import { isObject, isNaN, isNumber, isString } from 'lodash-es'
 import { unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-
-export class MustNotBeEmptyRule {
-  protected $gettext
-
-  constructor({ $gettext }: any) {
-    this.$gettext = $gettext
-  }
-  explain(options, verified) {
-    return {
-      code: 'mustNotBeEmpty',
-      message: this.$gettext('Must not be empty'),
-      format: [],
-      ...(verified & { verified })
-    }
-  }
-
-  assert(options, password) {
-    return password.length > 0
-  }
-  validate() {
-    return true
-  }
-  missing(options, password) {
-    return this.explain(options, this.assert(options, password))
-  }
-}
-
 export class MustContainRule {
   protected $gettext
 
@@ -46,7 +19,11 @@ export class MustContainRule {
   }
 
   assert(options, password) {
-    return password.length > 0
+    const charsCount = Array.from(password).filter((char) =>
+      options.characters.includes(char)
+    ).length
+
+    return charsCount >= options.minLength
   }
   validate(options) {
     if (!isObject(options)) {
@@ -229,21 +206,15 @@ export class AtLeastDigitsRule extends AtLeastBaseRule {
     return digitCount >= options.minLength
   }
 }
-export function usePasswordPolicyService(
-  { useDefaultRules = true } = { useDefaultRules: Boolean }
-): Array<any> {
+export function usePasswordPolicyService(): Array<any> {
   const passwordPolicyCapability = unref(useCapabilityPasswordPolicy())
-  const passwordPolicyRules = []
 
-  if (useDefaultRules && !passwordPolicyCapability.min_characters) {
-    passwordPolicyRules.push(
-      new PasswordPolicy(
-        { mustNotBeEmpty: {} },
-        { mustNotBeEmpty: new MustNotBeEmptyRule({ ...useGettext() }) }
-      )
-    )
+  if (!Object.keys(passwordPolicyCapability).length) {
+    return []
   }
 
+  const passwordPolicyRules = []
+
   if (passwordPolicyCapability.min_characters) {
     passwordPolicyRules.push(
       new PasswordPolicy(
@@ -294,7 +265,7 @@ export function usePasswordPolicyService(
         {
           mustContain: {
             minLength: passwordPolicyCapability.min_special_characters,
-            characters: passwordPolicyCapability.allowed_special_characters
+            characters: passwordPolicyCapability.special_characters
           }
         },
         { mustContain: new MustContainRule({ ...useGettext() }) }
@@ -302,14 +273,12 @@ export function usePasswordPolicyService(
     )
   }
 
-  if (useDefaultRules) {
-    passwordPolicyRules.push(
-      new PasswordPolicy(
-        { atMostCharacters: { maxLength: 72 } },
-        { atMostCharacters: new AtMostCharactersRule({ ...useGettext() }) }
-      )
+  passwordPolicyRules.push(
+    new PasswordPolicy(
+      { atMostCharacters: { maxLength: 72 } },
+      { atMostCharacters: new AtMostCharactersRule({ ...useGettext() }) }
     )
-  }
+  )
 
   return passwordPolicyRules
 }

From 6b3554e6c2904929ab3be032b19c6aaf54bd4a06 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 10:43:33 +0200
Subject: [PATCH 15/29] Lint

---
 .../SideBar/Shares/Links/DetailsAndEdit.vue   | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index f680bceed7a..529fc1efdda 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -465,6 +465,24 @@ export default defineComponent({
       this.createModal(modal)
     },
 
+    checkPassword(password) {
+      // Password checks will be handled via password policy
+      if (this.passwordPolicy.length) {
+        return
+      }
+
+      if (password === '') {
+        this.setModalConfirmButtonDisabled(true)
+        return this.setModalInputErrorMessage(this.$gettext("Password can't be empty"))
+      }
+      if (password.length > 72) {
+        this.setModalConfirmButtonDisabled(true)
+        return this.setModalInputErrorMessage(this.$gettext("Password can't exceed 72 characters"))
+      }
+      this.setModalConfirmButtonDisabled(false)
+      return this.setModalInputErrorMessage(null)
+    },
+
     showPasswordModal() {
       const modal = {
         variation: 'passive',
@@ -493,24 +511,6 @@ export default defineComponent({
         }
       }
       this.createModal(modal)
-    },
-
-    checkPassword(password) {
-      // Password checks will be handled via password policy
-      if (this.passwordPolicy.length) {
-        return
-      }
-
-      if (password === '') {
-        this.setModalConfirmButtonDisabled(true)
-        return this.setModalInputErrorMessage(this.$gettext("Password can't be empty"))
-      }
-      if (password.length > 72) {
-        this.setModalConfirmButtonDisabled(true)
-        return this.setModalInputErrorMessage(this.$gettext("Password can't exceed 72 characters"))
-      }
-      this.setModalConfirmButtonDisabled(false)
-      return this.setModalInputErrorMessage(null)
     }
   }
 })

From f8be36c5be20f83d1db7a4e94d13a0cb8c9709dc Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 11:30:09 +0200
Subject: [PATCH 16/29] add portal vue dependicy to ods

---
 packages/design-system/package.json | 3 ++-
 pnpm-lock.yaml                      | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index ca746502bfa..731d4e74c1e 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -138,7 +138,8 @@
     "vue-inline-svg": "^3.1.0",
     "vue-select": "^3.12.0",
     "web-client": "workspace:@ownclouders/web-client@*",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "portal-vue": "*"
   },
   "engines": {
     "node": ">= 14.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf9112cb477..ef6a57ec779 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -294,6 +294,9 @@ importers:
 
   packages/design-system:
     dependencies:
+      portal-vue:
+        specifier: '*'
+        version: 3.0.0(vue@3.3.4)
       web-client:
         specifier: workspace:@ownclouders/web-client@*
         version: link:../web-client

From d388ddf1d21be936e5b271880809e00779ccdf7a Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 16:09:59 +0200
Subject: [PATCH 17/29] make use of singleton pattern

---
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |   4 +-
 .../composables/capability/useCapability.ts   |   9 +-
 packages/web-pkg/src/composables/index.ts     |   1 +
 .../usePasswordPolicyService.ts               | 286 +-----------------
 packages/web-pkg/src/services/index.ts        |   1 +
 .../src/services/passwordPolicy/index.ts      |   1 +
 .../services/passwordPolicy/passwordPolicy.ts | 106 +++++++
 .../src/services/passwordPolicy/rules.ts      | 204 +++++++++++++
 packages/web-pkg/types.d.ts                   |   9 +-
 .../web-runtime/src/container/bootstrap.ts    |  23 +-
 packages/web-runtime/src/index.ts             |   2 +
 11 files changed, 352 insertions(+), 294 deletions(-)
 create mode 100644 packages/web-pkg/src/services/passwordPolicy/index.ts
 create mode 100644 packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
 create mode 100644 packages/web-pkg/src/services/passwordPolicy/rules.ts

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 529fc1efdda..8b691973d57 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -225,12 +225,12 @@ export default defineComponent({
   },
   emits: ['removePublicLink', 'updateLink'],
   setup() {
-    const passwordPolicy = usePasswordPolicyService()
+    const passwordPolicyService = usePasswordPolicyService()
 
     return {
       space: inject<Ref<SpaceResource>>('space'),
       resource: inject<Ref<Resource>>('resource'),
-      passwordPolicy
+      passwordPolicy: passwordPolicyService.getPolicies()
     }
   },
   data() {
diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index 7d4ffecff4d..f1957ce36fc 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -137,12 +137,5 @@ export const useCapabilityNotifications = createCapabilityComposable(
 )
 export const useCapabilityPasswordPolicy = createCapabilityComposable<PasswordPolicyCapability>(
   'password_policy',
-  {
-    min_characters: 8,
-    min_lower_case_characters: 2,
-    min_upper_case_characters: 2,
-    min_digits: 1,
-    min_special_characters: 2,
-    special_characters: '!#?§'
-  }
+  {}
 )
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index 10f6ddd97e9..0173787fbb7 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -18,3 +18,4 @@ export * from './fileListHeaderPosition'
 export * from './viewMode'
 export * from './search'
 export * from './sse'
+export * from './passwordPolicyService'
diff --git a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
index 0ae6b3a9e5c..bedaa293e05 100644
--- a/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
+++ b/packages/web-pkg/src/composables/passwordPolicyService/usePasswordPolicyService.ts
@@ -1,284 +1,6 @@
-import { useCapabilityPasswordPolicy } from 'web-pkg'
-import { PasswordPolicy } from 'password-sheriff'
-import { isObject, isNaN, isNumber, isString } from 'lodash-es'
-import { unref } from 'vue'
-import { useGettext } from 'vue3-gettext'
-export class MustContainRule {
-  protected $gettext
+import { useService } from 'web-pkg/src/composables/service'
+import { PasswordPolicyService } from 'web-pkg/src/services/passwordPolicy'
 
-  constructor({ $gettext }: any) {
-    this.$gettext = $gettext
-  }
-  explain(options, verified) {
-    return {
-      code: 'mustContain',
-      message: this.$gettext('At least %{param1} of the special characters: %{param2}'),
-      format: [options.minLength, options.characters],
-      ...(verified & { verified })
-    }
-  }
-
-  assert(options, password) {
-    const charsCount = Array.from(password).filter((char) =>
-      options.characters.includes(char)
-    ).length
-
-    return charsCount >= options.minLength
-  }
-  validate(options) {
-    if (!isObject(options)) {
-      throw new Error('options should be an object')
-    }
-
-    if (!isNumber(options.minLength) || isNaN(options.minLength)) {
-      throw new Error('minLength should be a non-zero number')
-    }
-
-    if (!isString(options.characters)) {
-      throw new Error('characters should be a character sequence')
-    }
-  }
-  missing(options, password) {
-    return this.explain(options, this.assert(options, password))
-  }
-}
-
-export class AtMostBaseRule {
-  protected $ngettext
-  protected override explain(options, password)
-  protected override assert(options, password)
-  constructor({ $ngettext }) {
-    this.$ngettext = $ngettext
-  }
-  validate(options) {
-    if (!isObject(options)) {
-      throw new Error('options should be an object')
-    }
-
-    if (!isNumber(options.maxLength) || isNaN(options.maxLength)) {
-      throw new Error('maxLength should be a non-zero number')
-    }
-
-    return true
-  }
-  missing(options, password) {
-    return this.explain(options, this.assert(options, password))
-  }
-}
-
-export class AtMostCharactersRule extends AtMostBaseRule {
-  constructor(args) {
-    super(args)
-  }
-
-  explain(options, verified) {
-    return {
-      code: 'atMostCharacters',
-      message: this.$ngettext(
-        'At most %{param1} character long',
-        'At most %{param1} characters long',
-        options.maxLength
-      ),
-      format: [options.maxLength],
-      ...(verified & { verified })
-    }
-  }
-
-  assert(options, password) {
-    return password.length <= options.maxLength
-  }
-}
-
-export class AtLeastBaseRule {
-  protected $ngettext
-  protected override explain(options, password)
-  protected override assert(options, password)
-  constructor({ $ngettext }) {
-    this.$ngettext = $ngettext
-  }
-  validate(options) {
-    if (!isObject(options)) {
-      throw new Error('options should be an object')
-    }
-
-    if (!isNumber(options.minLength) || isNaN(options.minLength)) {
-      throw new Error('minLength should be a non-zero number')
-    }
-
-    return true
-  }
-  missing(options, password) {
-    return this.explain(options, this.assert(options, password))
-  }
-}
-
-export class AtLeastCharactersRule extends AtLeastBaseRule {
-  constructor(args) {
-    super(args)
-  }
-
-  explain(options, verified) {
-    return {
-      code: 'atLeastCharacters',
-      message: this.$ngettext(
-        'At least %{param1} character long',
-        'At least %{param1} characters long',
-        options.minLength
-      ),
-      format: [options.minLength],
-      ...(verified & { verified })
-    }
-  }
-
-  assert(options, password) {
-    return password.length >= options.minLength
-  }
-}
-
-export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
-  constructor(args) {
-    super(args)
-  }
-
-  explain(options, verified) {
-    return {
-      code: 'atLeastUppercaseCharacters',
-      message: this.$ngettext(
-        'At least %{param1} uppercase character',
-        'At least %{param1} uppercase characters',
-        options.minLength
-      ),
-      format: [options.minLength],
-      ...(verified & { verified })
-    }
-  }
-
-  assert(options, password) {
-    const uppercaseCount = (password || '').match(/[A-Z\xC0-\xD6\xD8-\xDE]/g)?.length
-    return uppercaseCount >= options.minLength
-  }
-}
-
-export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
-  constructor(args) {
-    super(args)
-  }
-
-  explain(options, verified) {
-    return {
-      code: 'atLeastLowercaseCharacters',
-      message: this.$ngettext(
-        'At least %{param1} lowercase character',
-        'At least %{param1} lowercase characters',
-        options.minLength
-      ),
-      format: [options.minLength],
-      ...(verified & { verified })
-    }
-  }
-
-  assert(options, password) {
-    const lowercaseCount = (password || '').match(/[a-z\xDF-\xF6\xF8-\xFF]/g)?.length
-    return lowercaseCount >= options.minLength
-  }
-}
-
-export class AtLeastDigitsRule extends AtLeastBaseRule {
-  constructor(args) {
-    super(args)
-  }
-
-  explain(options, verified) {
-    return {
-      code: 'atLeastDigits',
-      message: this.$ngettext(
-        'At least %{param1} number',
-        'At least %{param1} numbers',
-        options.minLength
-      ),
-      format: [options.minLength],
-      ...(verified & { verified })
-    }
-  }
-
-  assert(options, password) {
-    const digitCount = (password || '').match(/\d/g)?.length
-    return digitCount >= options.minLength
-  }
-}
-export function usePasswordPolicyService(): Array<any> {
-  const passwordPolicyCapability = unref(useCapabilityPasswordPolicy())
-
-  if (!Object.keys(passwordPolicyCapability).length) {
-    return []
-  }
-
-  const passwordPolicyRules = []
-
-  if (passwordPolicyCapability.min_characters) {
-    passwordPolicyRules.push(
-      new PasswordPolicy(
-        { atLeastCharacters: { minLength: passwordPolicyCapability.min_characters } },
-        { atLeastCharacters: new AtLeastCharactersRule({ ...useGettext() }) }
-      )
-    )
-  }
-
-  if (passwordPolicyCapability.min_upper_case_characters) {
-    passwordPolicyRules.push(
-      new PasswordPolicy(
-        {
-          atLeastUppercaseCharacters: {
-            minLength: passwordPolicyCapability.min_upper_case_characters
-          }
-        },
-        { atLeastUppercaseCharacters: new AtLeastUppercaseCharactersRule({ ...useGettext() }) }
-      )
-    )
-  }
-
-  if (passwordPolicyCapability.min_lower_case_characters) {
-    passwordPolicyRules.push(
-      new PasswordPolicy(
-        {
-          atLeastLowercaseCharacters: {
-            minLength: passwordPolicyCapability.min_lower_case_characters
-          }
-        },
-        { atLeastLowercaseCharacters: new AtLeastLowercaseCharactersRule({ ...useGettext() }) }
-      )
-    )
-  }
-
-  if (passwordPolicyCapability.min_digits) {
-    passwordPolicyRules.push(
-      new PasswordPolicy(
-        { atLeastDigits: { minLength: passwordPolicyCapability.min_digits } },
-        { atLeastDigits: new AtLeastDigitsRule({ ...useGettext() }) }
-      )
-    )
-  }
-
-  if (passwordPolicyCapability.min_special_characters) {
-    passwordPolicyRules.push(
-      new PasswordPolicy(
-        {
-          mustContain: {
-            minLength: passwordPolicyCapability.min_special_characters,
-            characters: passwordPolicyCapability.special_characters
-          }
-        },
-        { mustContain: new MustContainRule({ ...useGettext() }) }
-      )
-    )
-  }
-
-  passwordPolicyRules.push(
-    new PasswordPolicy(
-      { atMostCharacters: { maxLength: 72 } },
-      { atMostCharacters: new AtMostCharactersRule({ ...useGettext() }) }
-    )
-  )
-
-  return passwordPolicyRules
+export const usePasswordPolicyService = (): PasswordPolicyService => {
+  return useService('$passwordPolicyService')
 }
diff --git a/packages/web-pkg/src/services/index.ts b/packages/web-pkg/src/services/index.ts
index bb74e593598..f41c44791d0 100644
--- a/packages/web-pkg/src/services/index.ts
+++ b/packages/web-pkg/src/services/index.ts
@@ -4,3 +4,4 @@ export * from './client'
 export * from './eventBus'
 export * from './loadingService'
 export * from './preview'
+export * from './passwordPolicy'
diff --git a/packages/web-pkg/src/services/passwordPolicy/index.ts b/packages/web-pkg/src/services/passwordPolicy/index.ts
new file mode 100644
index 00000000000..600504b2e4b
--- /dev/null
+++ b/packages/web-pkg/src/services/passwordPolicy/index.ts
@@ -0,0 +1 @@
+export * from './passwordPolicy'
diff --git a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
new file mode 100644
index 00000000000..1f1ba79daad
--- /dev/null
+++ b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
@@ -0,0 +1,106 @@
+import { Language } from 'vue3-gettext'
+import {
+  AtLeastCharactersRule,
+  AtLeastDigitsRule,
+  AtLeastLowercaseCharactersRule,
+  AtLeastUppercaseCharactersRule,
+  AtMostCharactersRule,
+  MustContainRule
+} from './rules'
+import { PasswordPolicyCapability } from 'web-client/src/ocs/capabilities'
+import { PasswordPolicy } from 'password-sheriff'
+import get from 'lodash-es/get'
+
+export class PasswordPolicyService {
+  private readonly capability: PasswordPolicyCapability
+  private readonly language: Language
+  private policies = []
+
+  constructor({ store, language }) {
+    this.capability = get(store, 'getters.capabilities.password_policy', {
+      min_characters: 8,
+      min_lower_case_characters: 2,
+      min_upper_case_characters: 2,
+      min_digits: 1,
+      min_special_characters: 2,
+      special_characters: '!#?§'
+    })
+    this.language = language
+    this.buildPolicies()
+  }
+
+  private buildPolicies() {
+    if (!Object.keys(this.capability)) {
+      return
+    }
+
+    if (this.capability.min_characters) {
+      this.policies.push(
+        new PasswordPolicy(
+          { atLeastCharacters: { minLength: this.capability.min_characters } },
+          { atLeastCharacters: new AtLeastCharactersRule({ ...this.language }) }
+        )
+      )
+    }
+
+    if (this.capability.min_upper_case_characters) {
+      this.policies.push(
+        new PasswordPolicy(
+          {
+            atLeastUppercaseCharacters: {
+              minLength: this.capability.min_upper_case_characters
+            }
+          },
+          { atLeastUppercaseCharacters: new AtLeastUppercaseCharactersRule({ ...this.language }) }
+        )
+      )
+    }
+
+    if (this.capability.min_lower_case_characters) {
+      this.policies.push(
+        new PasswordPolicy(
+          {
+            atLeastLowercaseCharacters: {
+              minLength: this.capability.min_lower_case_characters
+            }
+          },
+          { atLeastLowercaseCharacters: new AtLeastLowercaseCharactersRule({ ...this.language }) }
+        )
+      )
+    }
+
+    if (this.capability.min_digits) {
+      this.policies.push(
+        new PasswordPolicy(
+          { atLeastDigits: { minLength: this.capability.min_digits } },
+          { atLeastDigits: new AtLeastDigitsRule({ ...this.language }) }
+        )
+      )
+    }
+
+    if (this.capability.min_special_characters) {
+      this.policies.push(
+        new PasswordPolicy(
+          {
+            mustContain: {
+              minLength: this.capability.min_special_characters,
+              characters: this.capability.special_characters
+            }
+          },
+          { mustContain: new MustContainRule({ ...this.language }) }
+        )
+      )
+    }
+
+    this.policies.push(
+      new PasswordPolicy(
+        { atMostCharacters: { maxLength: 72 } },
+        { atMostCharacters: new AtMostCharactersRule({ ...this.language }) }
+      )
+    )
+  }
+
+  public getPolicies() {
+    return this.policies
+  }
+}
diff --git a/packages/web-pkg/src/services/passwordPolicy/rules.ts b/packages/web-pkg/src/services/passwordPolicy/rules.ts
new file mode 100644
index 00000000000..3dfe07d4903
--- /dev/null
+++ b/packages/web-pkg/src/services/passwordPolicy/rules.ts
@@ -0,0 +1,204 @@
+import { isNaN, isNumber, isObject, isString } from 'lodash-es'
+
+export class MustContainRule {
+  protected $gettext
+
+  constructor({ $gettext }: any) {
+    this.$gettext = $gettext
+  }
+  explain(options, verified) {
+    return {
+      code: 'mustContain',
+      message: this.$gettext('At least %{param1} of the special characters: %{param2}'),
+      format: [options.minLength, options.characters],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    const charsCount = Array.from(password).filter((char) =>
+      options.characters.includes(char)
+    ).length
+
+    return charsCount >= options.minLength
+  }
+  validate(options) {
+    if (!isObject(options)) {
+      throw new Error('options should be an object')
+    }
+
+    if (!isNumber(options.minLength) || isNaN(options.minLength)) {
+      throw new Error('minLength should be a non-zero number')
+    }
+
+    if (!isString(options.characters)) {
+      throw new Error('characters should be a character sequence')
+    }
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
+export class AtMostBaseRule {
+  protected $ngettext
+  protected override explain(options, password)
+  protected override assert(options, password)
+  constructor({ $ngettext }) {
+    this.$ngettext = $ngettext
+  }
+  validate(options) {
+    if (!isObject(options)) {
+      throw new Error('options should be an object')
+    }
+
+    if (!isNumber(options.maxLength) || isNaN(options.maxLength)) {
+      throw new Error('maxLength should be a non-zero number')
+    }
+
+    return true
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
+
+export class AtMostCharactersRule extends AtMostBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atMostCharacters',
+      message: this.$ngettext(
+        'At most %{param1} character long',
+        'At most %{param1} characters long',
+        options.maxLength
+      ),
+      format: [options.maxLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    return password.length <= options.maxLength
+  }
+}
+
+export class AtLeastBaseRule {
+  protected $ngettext
+  protected override explain(options, password)
+  protected override assert(options, password)
+  constructor({ $ngettext }) {
+    this.$ngettext = $ngettext
+  }
+  validate(options) {
+    if (!isObject(options)) {
+      throw new Error('options should be an object')
+    }
+
+    if (!isNumber(options.minLength) || isNaN(options.minLength)) {
+      throw new Error('minLength should be a non-zero number')
+    }
+
+    return true
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
+
+export class AtLeastCharactersRule extends AtLeastBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastCharacters',
+      message: this.$ngettext(
+        'At least %{param1} character long',
+        'At least %{param1} characters long',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    return password.length >= options.minLength
+  }
+}
+
+export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastUppercaseCharacters',
+      message: this.$ngettext(
+        'At least %{param1} uppercase character',
+        'At least %{param1} uppercase characters',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    const uppercaseCount = (password || '').match(/[A-Z\xC0-\xD6\xD8-\xDE]/g)?.length
+    return uppercaseCount >= options.minLength
+  }
+}
+
+export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastLowercaseCharacters',
+      message: this.$ngettext(
+        'At least %{param1} lowercase character',
+        'At least %{param1} lowercase characters',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    const lowercaseCount = (password || '').match(/[a-z\xDF-\xF6\xF8-\xFF]/g)?.length
+    return lowercaseCount >= options.minLength
+  }
+}
+
+export class AtLeastDigitsRule extends AtLeastBaseRule {
+  constructor(args) {
+    super(args)
+  }
+
+  explain(options, verified) {
+    return {
+      code: 'atLeastDigits',
+      message: this.$ngettext(
+        'At least %{param1} number',
+        'At least %{param1} numbers',
+        options.minLength
+      ),
+      format: [options.minLength],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    const digitCount = (password || '').match(/\d/g)?.length
+    return digitCount >= options.minLength
+  }
+}
diff --git a/packages/web-pkg/types.d.ts b/packages/web-pkg/types.d.ts
index 522d5a6ee45..8f4cca31ee1 100644
--- a/packages/web-pkg/types.d.ts
+++ b/packages/web-pkg/types.d.ts
@@ -1,5 +1,11 @@
 import { Ability } from 'web-client/src/helpers/resource/types'
-import { ArchiverService, ClientService, LoadingService, PreviewService } from './src/services'
+import {
+  ArchiverService,
+  ClientService,
+  LoadingService,
+  PreviewService,
+  PasswordPolicyService
+} from './src/services'
 
 export * from './src'
 
@@ -10,5 +16,6 @@ declare module 'vue' {
     $clientService: ClientService
     $loadingService: LoadingService
     $previewService: PreviewService
+    $passwordPolicyService: PasswordPolicyService
   }
 }
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 95dfe4d77eb..4292d3c0e7a 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -11,7 +11,12 @@ import { getBackendVersion, getWebVersion } from './versions'
 import { useLocalStorage } from 'web-pkg/src/composables'
 import { useDefaultThemeName } from '../composables'
 import { authService } from '../services/auth'
-import { ClientService, LoadingService, PreviewService } from 'web-pkg/src/services'
+import {
+  ClientService,
+  LoadingService,
+  PasswordPolicyService,
+  PreviewService
+} from 'web-pkg/src/services'
 import { UppyService } from '../services/uppyService'
 import { default as storeOptions } from '../store'
 import { init as sentryInit } from '@sentry/vue'
@@ -413,6 +418,22 @@ export const announceAuthService = ({
   app.provide('$authService', authService)
 }
 
+/**
+ * @param vue
+ */
+export const announcePasswordPolicyService = ({
+  app,
+  store
+}: {
+  app: App
+  store: Store<any>
+}): void => {
+  const language = app.config.globalProperties.$language
+  const passwordPolicyService = new PasswordPolicyService({ store, language })
+  app.config.globalProperties.passwordPolicyService = passwordPolicyService
+  app.provide('$passwordPolicyService', passwordPolicyService)
+}
+
 /**
  * announce runtime defaults, this is usual the last needed announcement before rendering the actual ui
  *
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 636d1f74d90..e11c51ff731 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -24,6 +24,7 @@ import {
   announceCustomScripts,
   announceLoadingService,
   announcePreviewService,
+  announcePasswordPolicyService,
   announceAdditionalTranslations
 } from './container/bootstrap'
 import { applicationStore } from './container/store'
@@ -87,6 +88,7 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
   app.provide('$archiverService', app.config.globalProperties.$archiverService)
   announceLoadingService({ app })
   announcePreviewService({ app, store, configurationManager })
+  announcePasswordPolicyService({ app, store })
   await announceClient(runtimeConfiguration)
 
   const applicationsPromise = initializeApplications({

From bb0366d3067917e48625ced93b16f6b6c7122334 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 16:12:20 +0200
Subject: [PATCH 18/29] Add comment

---
 packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
index 1f1ba79daad..da410e5dd61 100644
--- a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
@@ -92,6 +92,9 @@ export class PasswordPolicyService {
       )
     }
 
+    /**
+     * Not configurable, backend limitation
+     */
     this.policies.push(
       new PasswordPolicy(
         { atMostCharacters: { maxLength: 72 } },

From 888de32bde81e4082e9da272f82698637b2f9411 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 4 Sep 2023 16:23:25 +0200
Subject: [PATCH 19/29] Bring back default rule

---
 .../SideBar/Shares/Links/DetailsAndEdit.vue   | 19 --------------
 .../services/passwordPolicy/passwordPolicy.ts | 23 ++++++++---------
 .../src/services/passwordPolicy/rules.ts      | 25 +++++++++++++++++++
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 8b691973d57..5da38bc2dc8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -465,24 +465,6 @@ export default defineComponent({
       this.createModal(modal)
     },
 
-    checkPassword(password) {
-      // Password checks will be handled via password policy
-      if (this.passwordPolicy.length) {
-        return
-      }
-
-      if (password === '') {
-        this.setModalConfirmButtonDisabled(true)
-        return this.setModalInputErrorMessage(this.$gettext("Password can't be empty"))
-      }
-      if (password.length > 72) {
-        this.setModalConfirmButtonDisabled(true)
-        return this.setModalInputErrorMessage(this.$gettext("Password can't exceed 72 characters"))
-      }
-      this.setModalConfirmButtonDisabled(false)
-      return this.setModalInputErrorMessage(null)
-    },
-
     showPasswordModal() {
       const modal = {
         variation: 'passive',
@@ -495,7 +477,6 @@ export default defineComponent({
         inputPasswordPolicy: this.passwordPolicy,
         inputType: 'password',
         onCancel: this.hideModal,
-        onInput: (password) => this.checkPassword(password),
         onPasswordChallengeCompleted: () => this.setModalConfirmButtonDisabled(false),
         onPasswordChallengeFailed: () => this.setModalConfirmButtonDisabled(true),
         onConfirm: (password) => {
diff --git a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
index da410e5dd61..adf0f25a008 100644
--- a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
@@ -5,7 +5,8 @@ import {
   AtLeastLowercaseCharactersRule,
   AtLeastUppercaseCharactersRule,
   AtMostCharactersRule,
-  MustContainRule
+  MustContainRule,
+  MustNotBeEmptyRule
 } from './rules'
 import { PasswordPolicyCapability } from 'web-client/src/ocs/capabilities'
 import { PasswordPolicy } from 'password-sheriff'
@@ -17,23 +18,12 @@ export class PasswordPolicyService {
   private policies = []
 
   constructor({ store, language }) {
-    this.capability = get(store, 'getters.capabilities.password_policy', {
-      min_characters: 8,
-      min_lower_case_characters: 2,
-      min_upper_case_characters: 2,
-      min_digits: 1,
-      min_special_characters: 2,
-      special_characters: '!#?§'
-    })
+    this.capability = get(store, 'getters.capabilities.password_policy', {})
     this.language = language
     this.buildPolicies()
   }
 
   private buildPolicies() {
-    if (!Object.keys(this.capability)) {
-      return
-    }
-
     if (this.capability.min_characters) {
       this.policies.push(
         new PasswordPolicy(
@@ -41,6 +31,13 @@ export class PasswordPolicyService {
           { atLeastCharacters: new AtLeastCharactersRule({ ...this.language }) }
         )
       )
+    } else {
+      this.policies.push(
+        new PasswordPolicy(
+          { mustNotBeEmpty: {} },
+          { mustNotBeEmpty: new MustNotBeEmptyRule({ ...this.language }) }
+        )
+      )
     }
 
     if (this.capability.min_upper_case_characters) {
diff --git a/packages/web-pkg/src/services/passwordPolicy/rules.ts b/packages/web-pkg/src/services/passwordPolicy/rules.ts
index 3dfe07d4903..6e94ace40ac 100644
--- a/packages/web-pkg/src/services/passwordPolicy/rules.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/rules.ts
@@ -1,5 +1,30 @@
 import { isNaN, isNumber, isObject, isString } from 'lodash-es'
 
+export class MustNotBeEmptyRule {
+  protected $gettext
+
+  constructor({ $gettext }: any) {
+    this.$gettext = $gettext
+  }
+  explain(options, verified) {
+    return {
+      code: 'mustNotBeEmpty',
+      message: this.$gettext('Must not be empty'),
+      format: [],
+      ...(verified & { verified })
+    }
+  }
+
+  assert(options, password) {
+    return password.length > 0
+  }
+  validate() {
+    return true
+  }
+  missing(options, password) {
+    return this.explain(options, this.assert(options, password))
+  }
+}
 export class MustContainRule {
   protected $gettext
 

From 331e6ab419d6fc7f7559e83f2a9a50eeb421b9d6 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 11:47:42 +0200
Subject: [PATCH 20/29] Add typing

---
 .../__snapshots__/OcModal.spec.ts.snap        |   2 +-
 .../_OcTextInputPassword.vue                  |   4 +-
 .../__snapshots__/MembersPanel.spec.ts.snap   |   4 +-
 .../__snapshots__/MembersPanel.spec.ts.snap   |   4 +-
 .../__snapshots__/SpacesList.spec.ts.snap     |   1 +
 .../__snapshots__/EditPanel.spec.ts.snap      |   8 +-
 .../__snapshots__/SpaceMembers.spec.ts.snap   |   1 +
 .../trash/__snapshots__/Overview.spec.ts.snap |   1 +
 packages/web-client/src/ocs/capabilities.ts   |   1 +
 .../services/passwordPolicy/passwordPolicy.ts |  25 ++--
 .../src/services/passwordPolicy/rules.ts      | 138 ++++++++++++------
 packages/web-runtime/src/store/modal.ts       |   2 +-
 .../resolvePublicLink.spec.ts.snap            |   2 +-
 13 files changed, 122 insertions(+), 71 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 81347339c5e..a282559dfe2 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`OcModal displays input 1`] = `
       <div class="oc-modal-body">
         <!--v-if-->
         <!--v-if-->
-        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" readonly="false" type="text"></oc-text-input-stub>
+        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index f0c95ad3364..bb53468362f 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -61,7 +61,7 @@ export default defineComponent({
       const explained = policyRule.explain()[0]
       const paramObj = {}
 
-      for (var formatKey = 0; formatKey < explained.format.length; formatKey++) {
+      for (let formatKey = 0; formatKey < explained.format.length; formatKey++) {
         paramObj[`param${formatKey + 1}`] = explained.format[formatKey]
       }
 
@@ -78,7 +78,7 @@ export default defineComponent({
 
     watch(password, (value) => {
       for (const passwordPolicyRule of props.passwordPolicy) {
-        if (!passwordPolicyRule.check(value)) {
+        if (!(passwordPolicyRule as any)?.check(value)) {
           return emit('passwordChallengeFailed')
         }
       }
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 13190e9a05c..55a2b9e3b54 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -14,7 +14,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index a696bd97ca1..46df04c1587 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -16,7 +16,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index d24bd14b6e3..cb78a7186aa 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
       <!--v-if-->
     </div>
     <!--v-if-->
+    <portal-target name="app.design-system.password-policy"></portal-target>
   </div>
   <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
     <thead class="oc-thead">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
index b0804cc4c86..5b554323315 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -5,10 +5,10 @@ exports[`EditPanel renders all available inputs 1`] = `
   <user-info-box-stub user="[object Object]"></user-info-box-stub>
   <form autocomplete="off" class="oc-background-highlight oc-p-m" id="user-edit-form">
     <div>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="userName-input" label="User name" readonly="false" type="text"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="displayName-input" label="First and last name" modelvalue="jan" readonly="false" type="text"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="email-input" label="Email" modelvalue="jan@owncloud.com" readonly="false" type="email"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="password-input" label="Password" modelvalue="" placeholder="●●●●●●●●" readonly="false" type="password"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="userName-input" label="User name" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="displayName-input" label="First and last name" modelvalue="jan" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="email-input" label="Email" modelvalue="jan@owncloud.com" passwordpolicy="" readonly="false" type="email"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="password-input" label="Password" modelvalue="" passwordpolicy="" placeholder="●●●●●●●●" readonly="false" type="password"></oc-text-input-stub>
       <div class="oc-mb-s">
         <oc-select-stub clearable="false" disabled="false" filter="[Function]" fixmessageline="false" id="role-input" label="Role" loading="false" multiple="false" optionlabel="displayName" options="[object Object]" readonly="false" searchable="true"></oc-select-stub>
         <div class="oc-text-input-message"></div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
index 4686bb93aba..7bd1fc0e8b5 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
@@ -46,6 +46,7 @@ exports[`SpaceMembers filter toggles the filter on click 1`] = `
             <!--v-if-->
           </div>
           <!--v-if-->
+          <portal-target name="app.design-system.password-policy"></portal-target>
         </div>
         <button aria-label="Close filter" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw close-filter-btn" type="button">
           <!--v-if-->
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 1809d454645..3f2e5ebe93e 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`TrashOverview view states should render spaces list 1`] = `
           <!--v-if-->
         </div>
         <!--v-if-->
+        <portal-target name="app.design-system.password-policy"></portal-target>
       </div>
       <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
         <thead class="oc-thead">
diff --git a/packages/web-client/src/ocs/capabilities.ts b/packages/web-client/src/ocs/capabilities.ts
index 40e38ae0473..410ac89202e 100644
--- a/packages/web-client/src/ocs/capabilities.ts
+++ b/packages/web-client/src/ocs/capabilities.ts
@@ -12,6 +12,7 @@ export interface AppProviderCapability {
 
 export interface PasswordPolicyCapability {
   min_characters?: number
+  max_characters?: number
   min_lower_case_characters?: number
   min_upper_case_characters?: number
   min_digits?: number
diff --git a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
index adf0f25a008..339ef31519e 100644
--- a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
@@ -6,18 +6,20 @@ import {
   AtLeastUppercaseCharactersRule,
   AtMostCharactersRule,
   MustContainRule,
-  MustNotBeEmptyRule
+  MustNotBeEmptyRule,
+  Rule
 } from './rules'
 import { PasswordPolicyCapability } from 'web-client/src/ocs/capabilities'
 import { PasswordPolicy } from 'password-sheriff'
 import get from 'lodash-es/get'
+import { Store } from 'vuex'
 
 export class PasswordPolicyService {
   private readonly capability: PasswordPolicyCapability
   private readonly language: Language
-  private policies = []
+  private policies: Rule[]
 
-  constructor({ store, language }) {
+  constructor({ store, language }: { store: Store<unknown>; language: Language }) {
     this.capability = get(store, 'getters.capabilities.password_policy', {})
     this.language = language
     this.buildPolicies()
@@ -89,18 +91,17 @@ export class PasswordPolicyService {
       )
     }
 
-    /**
-     * Not configurable, backend limitation
-     */
-    this.policies.push(
-      new PasswordPolicy(
-        { atMostCharacters: { maxLength: 72 } },
-        { atMostCharacters: new AtMostCharactersRule({ ...this.language }) }
+    if (this.capability.max_characters) {
+      this.policies.push(
+        new PasswordPolicy(
+          { atMostCharacters: { maxLength: this.capability.max_characters } },
+          { atMostCharacters: new AtMostCharactersRule({ ...this.language }) }
+        )
       )
-    )
+    }
   }
 
-  public getPolicies() {
+  public getPolicies(): Rule[] {
     return this.policies
   }
 }
diff --git a/packages/web-pkg/src/services/passwordPolicy/rules.ts b/packages/web-pkg/src/services/passwordPolicy/rules.ts
index 6e94ace40ac..68eee6f600d 100644
--- a/packages/web-pkg/src/services/passwordPolicy/rules.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/rules.ts
@@ -1,53 +1,79 @@
 import { isNaN, isNumber, isObject, isString } from 'lodash-es'
+import { Language } from 'vue3-gettext'
 
-export class MustNotBeEmptyRule {
+export interface RuleOptions {
+  minLength?: number
+  maxLength?: number
+  characters?: string
+}
+
+export interface RuleExplained {
+  code: string
+  message: string
+  format: (number | string)[]
+  verified?: boolean
+}
+
+export interface Rule {
+  assert(options: RuleOptions, password: string): boolean
+  explain(options: RuleOptions, verified?: boolean): RuleExplained
+  missing(options: RuleOptions, password: string): RuleExplained
+  validate(options?: RuleOptions): boolean
+}
+
+export class MustNotBeEmptyRule implements Rule {
   protected $gettext
 
-  constructor({ $gettext }: any) {
+  constructor({ $gettext }: Language) {
     this.$gettext = $gettext
   }
-  explain(options, verified) {
+
+  explain(options: RuleOptions, verified: boolean): RuleExplained {
     return {
       code: 'mustNotBeEmpty',
       message: this.$gettext('Must not be empty'),
       format: [],
-      ...(verified & { verified })
+      ...(verified && { verified })
     }
   }
 
-  assert(options, password) {
+  assert(options: RuleOptions, password: string): boolean {
     return password.length > 0
   }
-  validate() {
+
+  validate(): boolean {
     return true
   }
-  missing(options, password) {
+
+  missing(options: RuleOptions, password: string): RuleExplained {
     return this.explain(options, this.assert(options, password))
   }
 }
-export class MustContainRule {
+export class MustContainRule implements Rule {
   protected $gettext
 
-  constructor({ $gettext }: any) {
+  constructor({ $gettext }: Language) {
     this.$gettext = $gettext
   }
-  explain(options, verified) {
+
+  explain(options: RuleOptions, verified: boolean): RuleExplained {
     return {
       code: 'mustContain',
       message: this.$gettext('At least %{param1} of the special characters: %{param2}'),
       format: [options.minLength, options.characters],
-      ...(verified & { verified })
+      ...(verified && { verified })
     }
   }
 
-  assert(options, password) {
+  assert(options: RuleOptions, password: string) {
     const charsCount = Array.from(password).filter((char) =>
       options.characters.includes(char)
     ).length
 
     return charsCount >= options.minLength
   }
-  validate(options) {
+
+  validate(options: RuleOptions): boolean {
     if (!isObject(options)) {
       throw new Error('options should be an object')
     }
@@ -59,19 +85,29 @@ export class MustContainRule {
     if (!isString(options.characters)) {
       throw new Error('characters should be a character sequence')
     }
+
+    return true
   }
   missing(options, password) {
     return this.explain(options, this.assert(options, password))
   }
 }
-export class AtMostBaseRule {
+export class AtMostBaseRule implements Rule {
   protected $ngettext
-  protected override explain(options, password)
-  protected override assert(options, password)
-  constructor({ $ngettext }) {
+
+  constructor({ $ngettext }: Language) {
     this.$ngettext = $ngettext
   }
-  validate(options) {
+
+  assert(options: RuleOptions, password: string): boolean {
+    throw new Error('Method not implemented.')
+  }
+
+  explain(options: RuleOptions, verified?: boolean): RuleExplained {
+    throw new Error('Method not implemented.')
+  }
+
+  validate(options: RuleOptions): boolean {
     if (!isObject(options)) {
       throw new Error('options should be an object')
     }
@@ -82,17 +118,18 @@ export class AtMostBaseRule {
 
     return true
   }
-  missing(options, password) {
+
+  missing(options: RuleOptions, password: string): RuleExplained {
     return this.explain(options, this.assert(options, password))
   }
 }
 
 export class AtMostCharactersRule extends AtMostBaseRule {
-  constructor(args) {
+  constructor(args: Language) {
     super(args)
   }
 
-  explain(options, verified) {
+  explain(options: RuleOptions, verified: boolean): RuleExplained {
     return {
       code: 'atMostCharacters',
       message: this.$ngettext(
@@ -101,23 +138,31 @@ export class AtMostCharactersRule extends AtMostBaseRule {
         options.maxLength
       ),
       format: [options.maxLength],
-      ...(verified & { verified })
+      ...(verified && { verified })
     }
   }
 
-  assert(options, password) {
+  assert(options: RuleOptions, password: string): boolean {
     return password.length <= options.maxLength
   }
 }
 
-export class AtLeastBaseRule {
+export class AtLeastBaseRule implements Rule {
   protected $ngettext
-  protected override explain(options, password)
-  protected override assert(options, password)
-  constructor({ $ngettext }) {
+
+  constructor({ $ngettext }: Language) {
     this.$ngettext = $ngettext
   }
-  validate(options) {
+
+  assert(options: RuleOptions, password: string): boolean {
+    throw new Error('Method not implemented.')
+  }
+
+  explain(options: RuleOptions, verified?: boolean): RuleExplained {
+    throw new Error('Method not implemented.')
+  }
+
+  validate(options: RuleOptions): boolean {
     if (!isObject(options)) {
       throw new Error('options should be an object')
     }
@@ -128,17 +173,18 @@ export class AtLeastBaseRule {
 
     return true
   }
-  missing(options, password) {
+
+  missing(options: RuleOptions, password: string): RuleExplained {
     return this.explain(options, this.assert(options, password))
   }
 }
 
-export class AtLeastCharactersRule extends AtLeastBaseRule {
-  constructor(args) {
+export class AtLeastCharactersRule extends AtLeastBaseRule implements Rule {
+  constructor(args: Language) {
     super(args)
   }
 
-  explain(options, verified) {
+  explain(options: RuleOptions, verified: boolean): RuleExplained {
     return {
       code: 'atLeastCharacters',
       message: this.$ngettext(
@@ -147,21 +193,21 @@ export class AtLeastCharactersRule extends AtLeastBaseRule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified & { verified })
+      ...(verified && { verified })
     }
   }
 
-  assert(options, password) {
+  assert(options: RuleOptions, password: string): boolean {
     return password.length >= options.minLength
   }
 }
 
 export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
-  constructor(args) {
+  constructor(args: Language) {
     super(args)
   }
 
-  explain(options, verified) {
+  explain(options: RuleOptions, verified: boolean): RuleExplained {
     return {
       code: 'atLeastUppercaseCharacters',
       message: this.$ngettext(
@@ -170,22 +216,22 @@ export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified & { verified })
+      ...(verified && { verified })
     }
   }
 
-  assert(options, password) {
+  assert(options: RuleOptions, password: string): boolean {
     const uppercaseCount = (password || '').match(/[A-Z\xC0-\xD6\xD8-\xDE]/g)?.length
     return uppercaseCount >= options.minLength
   }
 }
 
 export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
-  constructor(args) {
+  constructor(args: Language) {
     super(args)
   }
 
-  explain(options, verified) {
+  explain(options: RuleOptions, verified: boolean): RuleExplained {
     return {
       code: 'atLeastLowercaseCharacters',
       message: this.$ngettext(
@@ -194,22 +240,22 @@ export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified & { verified })
+      ...(verified && { verified })
     }
   }
 
-  assert(options, password) {
+  assert(options: RuleOptions, password: string): boolean {
     const lowercaseCount = (password || '').match(/[a-z\xDF-\xF6\xF8-\xFF]/g)?.length
     return lowercaseCount >= options.minLength
   }
 }
 
 export class AtLeastDigitsRule extends AtLeastBaseRule {
-  constructor(args) {
+  constructor(args: Language) {
     super(args)
   }
 
-  explain(options, verified) {
+  explain(options: RuleOptions, verified: boolean): RuleExplained {
     return {
       code: 'atLeastDigits',
       message: this.$ngettext(
@@ -218,11 +264,11 @@ export class AtLeastDigitsRule extends AtLeastBaseRule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified & { verified })
+      ...(verified && { verified: false })
     }
   }
 
-  assert(options, password) {
+  assert(options: RuleOptions, password: string): boolean {
     const digitCount = (password || '').match(/\d/g)?.length
     return digitCount >= options.minLength
   }
diff --git a/packages/web-runtime/src/store/modal.ts b/packages/web-runtime/src/store/modal.ts
index 95e62fd41ca..7e5c1351f80 100644
--- a/packages/web-runtime/src/store/modal.ts
+++ b/packages/web-runtime/src/store/modal.ts
@@ -71,7 +71,7 @@ const mutations = {
     state.onConfirm = modal.onConfirm
     state.hasInput = modal.hasInput || false
     state.inputValue = modal.inputValue || null
-    state.inputPasswordPolicy = modal.inputPasswordPolicy || {}
+    state.inputPasswordPolicy = modal.inputPasswordPolicy || []
     state.inputSelectionRange = modal.inputSelectionRange
     state.inputDescription = modal.inputDescription || null
     state.inputLabel = modal.inputLabel || null
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
index bebeafec806..35b83c53929 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`resolvePublicLink password required form should display if password is
     </h2>
   </div>
   <div class="oc-card-body">
-    <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-2" label="Enter password for public link" modelvalue="" readonly="false" type="password"></oc-text-input-stub>
+    <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-2" label="Enter password for public link" modelvalue="" passwordpolicy="" readonly="false" type="password"></oc-text-input-stub>
     <oc-button-stub appearance="filled" class="oc-login-authorize-button" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="submit" type="button" variation="primary"></oc-button-stub>
   </div>
 </form>

From edc7bdc77a9e7876330529dadaa3bd142f0d612b Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 11:52:02 +0200
Subject: [PATCH 21/29] removed unused

---
 .../SideBar/Shares/Links/DetailsAndEdit.spec.ts   | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
index 288305b2525..04af806d719 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
@@ -48,21 +48,6 @@ describe('DetailsAndEdit component', () => {
       expect(setModalInputErrorMessageStub).toHaveBeenCalledWith(expect.anything())
     })
   })
-
-  describe('method "checkPassword"', () => {
-    it('should not show an error if value is valid', () => {
-      const { wrapper } = getShallowMountedWrapper(exampleLink, false, true)
-      const setModalInputErrorMessageStub = jest.spyOn(wrapper.vm, 'setModalInputErrorMessage')
-      wrapper.vm.checkPassword('Password1234')
-      expect(setModalInputErrorMessageStub).toHaveBeenCalledWith(null)
-    })
-    it('should show an error if value is longer than 72 characters', () => {
-      const { wrapper } = getShallowMountedWrapper(exampleLink, false, true)
-      const setModalInputErrorMessageStub = jest.spyOn(wrapper.vm, 'setModalInputErrorMessage')
-      wrapper.vm.checkPassword('n'.repeat(73))
-      expect(setModalInputErrorMessageStub).toHaveBeenCalledWith(expect.anything())
-    })
-  })
 })
 
 function getShallowMountedWrapper(link, expireDateEnforced = false, isModifiable = false) {

From 4c2d173267d8213df9ae9b0ffdbe9503e41ce8cb Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 14:52:42 +0200
Subject: [PATCH 22/29] Change to only get one policy, add types

---
 .../src/components/OcModal/OcModal.vue        |   4 +-
 .../components/OcTextInput/OcTextInput.vue    |   4 +-
 .../_OcTextInputPassword.vue                  |  73 +++++++-----
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |   2 +-
 .../services/passwordPolicy/passwordPolicy.ts | 105 +++++++-----------
 .../src/services/passwordPolicy/rules.ts      |  88 +++++++--------
 packages/web-runtime/src/store/modal.ts       |   2 +-
 7 files changed, 137 insertions(+), 141 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index af56c8f0d4d..668fe122f31 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -354,9 +354,9 @@ export default defineComponent({
      * Password policy for the input
      */
     inputPasswordPolicy: {
-      type: Array,
+      type: Object,
       required: false,
-      default: () => []
+      default: () => {}
     },
     /**
      * Overwrite default focused element
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 9f919c7605c..7efbb6d8034 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -229,8 +229,8 @@ export default defineComponent({
      *
      */
     passwordPolicy: {
-      type: Array,
-      default: () => []
+      type: Object,
+      default: () => {}
     }
   },
   emits: [
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index bb53468362f..d60ff238bca 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -13,23 +13,44 @@
   <portal v-if="showPasswordPolicyInformation" to="app.design-system.password-policy">
     <div class="oc-text-small oc-flex oc-flex-column">
       <span v-text="$gettext('Please enter a password that meets the following criteria:')" />
-      <div v-for="(rule, index) in passwordPolicy" :key="index" class="oc-flex oc-flex-middle">
+      <div
+        v-for="(checkedRule, index) in checkedPasswordPolicy.rules"
+        :key="index"
+        class="oc-flex oc-flex-middle"
+      >
         <oc-icon
           size="small"
-          :name="isPolicyRuleFulfilled(rule) ? 'check' : 'close'"
-          :variation="isPolicyRuleFulfilled(rule) ? 'success' : 'danger'"
+          :name="checkedRule.verified ? 'check' : 'close'"
+          :variation="checkedRule.verified ? 'success' : 'danger'"
         />
-        <span :class="getPolicyMessageClass(rule)" v-text="getPolicyRuleMessage(rule)"></span>
+        <span
+          :class="[
+            { 'oc-text-input-success': checkedRule.verified },
+            { 'oc-text-input-danger': !checkedRule.verified }
+          ]"
+          v-text="getPasswordPolicyRuleMessage(checkedRule)"
+        ></span>
       </div>
     </div>
   </portal>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, unref, watch } from 'vue'
+import { computed, defineComponent, PropType, ref, unref, watch } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcButton from '../OcButton/OcButton.vue'
 import { useGettext } from 'vue3-gettext'
+
+interface PasswordPolicy {
+  rules: unknown[]
+  check(password: string): boolean
+  missing: {
+    code: string
+    message: string
+    format: (number | string)[]
+    verified: boolean
+  }
+}
 export default defineComponent({
   name: 'OCTextInputPassword',
   components: { OcButton, OcIcon },
@@ -38,8 +59,8 @@ export default defineComponent({
   inheritAttrs: true,
   props: {
     passwordPolicy: {
-      type: Array,
-      default: () => []
+      type: Object as PropType<PasswordPolicy>,
+      default: () => {}
     }
   },
   emits: ['passwordChallengeCompleted', 'passwordChallengeFailed'],
@@ -49,7 +70,10 @@ export default defineComponent({
     const passwordEntered = ref(false)
     const password = ref('')
     const showPasswordPolicyInformation = computed(() => {
-      return !!(props.passwordPolicy.length && unref(passwordEntered))
+      return !!(Object.keys(props.passwordPolicy?.rules || {}).length && unref(passwordEntered))
+    })
+    const checkedPasswordPolicy = computed(() => {
+      return props.passwordPolicy.missing(unref(password))
     })
 
     const onInput = (event) => {
@@ -57,31 +81,25 @@ export default defineComponent({
       password.value = event.target.value
     }
 
-    const getPolicyRuleMessage = (policyRule) => {
-      const explained = policyRule.explain()[0]
+    const getPasswordPolicyRuleMessage = (rule) => {
       const paramObj = {}
 
-      for (let formatKey = 0; formatKey < explained.format.length; formatKey++) {
-        paramObj[`param${formatKey + 1}`] = explained.format[formatKey]
+      for (let formatKey = 0; formatKey < rule.format.length; formatKey++) {
+        paramObj[`param${formatKey + 1}`] = rule.format[formatKey]
       }
 
-      return $gettext(explained.message, paramObj, true)
-    }
-
-    const isPolicyRuleFulfilled = (policyRule) => {
-      return policyRule.check(password.value)
-    }
-
-    const getPolicyMessageClass = (policyRule) => {
-      return policyRule.check(password.value) ? 'oc-text-input-success' : 'oc-text-input-danger'
+      return $gettext(rule.message, paramObj, true)
     }
 
     watch(password, (value) => {
-      for (const passwordPolicyRule of props.passwordPolicy) {
-        if (!(passwordPolicyRule as any)?.check(value)) {
-          return emit('passwordChallengeFailed')
-        }
+      if (!Object.keys(props.passwordPolicy).length) {
+        return
       }
+
+      if (!props.passwordPolicy.check(value)) {
+        return emit('passwordChallengeFailed')
+      }
+
       emit('passwordChallengeCompleted')
     })
 
@@ -90,9 +108,8 @@ export default defineComponent({
       onInput,
       showPassword,
       showPasswordPolicyInformation,
-      isPolicyRuleFulfilled,
-      getPolicyRuleMessage,
-      getPolicyMessageClass
+      checkedPasswordPolicy,
+      getPasswordPolicyRuleMessage
     }
   }
 })
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 5da38bc2dc8..144260d02c5 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -230,7 +230,7 @@ export default defineComponent({
     return {
       space: inject<Ref<SpaceResource>>('space'),
       resource: inject<Ref<Resource>>('resource'),
-      passwordPolicy: passwordPolicyService.getPolicies()
+      passwordPolicy: passwordPolicyService.getPolicy()
     }
   },
   data() {
diff --git a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
index 339ef31519e..70fc4321d9d 100644
--- a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
@@ -6,8 +6,7 @@ import {
   AtLeastUppercaseCharactersRule,
   AtMostCharactersRule,
   MustContainRule,
-  MustNotBeEmptyRule,
-  Rule
+  MustNotBeEmptyRule
 } from './rules'
 import { PasswordPolicyCapability } from 'web-client/src/ocs/capabilities'
 import { PasswordPolicy } from 'password-sheriff'
@@ -17,91 +16,71 @@ import { Store } from 'vuex'
 export class PasswordPolicyService {
   private readonly capability: PasswordPolicyCapability
   private readonly language: Language
-  private policies: Rule[]
+  private policy: PasswordPolicy
 
   constructor({ store, language }: { store: Store<unknown>; language: Language }) {
-    this.capability = get(store, 'getters.capabilities.password_policy', {})
+    this.capability = get(store, 'getters.capabilities.password_policy', {
+      min_characters: 10,
+      max_characters: 72,
+      min_lower_case_characters: 2,
+      min_upper_case_characters: 2,
+      min_digits: 2,
+      min_special_characters: 2,
+      special_characters: '!*?'
+    })
     this.language = language
-    this.buildPolicies()
+    this.buildPolicy()
   }
 
-  private buildPolicies() {
+  private buildPolicy() {
+    const ruleset = {
+      atLeastCharacters: new AtLeastCharactersRule({ ...this.language }),
+      mustNotBeEmpty: new MustNotBeEmptyRule({ ...this.language }),
+      atLeastUppercaseCharacters: new AtLeastUppercaseCharactersRule({ ...this.language }),
+      atLeastLowercaseCharacters: new AtLeastLowercaseCharactersRule({ ...this.language }),
+      atLeastDigits: new AtLeastDigitsRule({ ...this.language }),
+      mustContain: new MustContainRule({ ...this.language }),
+      atMostCharacters: new AtMostCharactersRule({ ...this.language })
+    }
+    const rules = {} as unknown
+
     if (this.capability.min_characters) {
-      this.policies.push(
-        new PasswordPolicy(
-          { atLeastCharacters: { minLength: this.capability.min_characters } },
-          { atLeastCharacters: new AtLeastCharactersRule({ ...this.language }) }
-        )
-      )
+      rules.atLeastCharacters = { minLength: this.capability.min_characters }
     } else {
-      this.policies.push(
-        new PasswordPolicy(
-          { mustNotBeEmpty: {} },
-          { mustNotBeEmpty: new MustNotBeEmptyRule({ ...this.language }) }
-        )
-      )
+      rules.mustNotBeEmpty = {}
     }
 
     if (this.capability.min_upper_case_characters) {
-      this.policies.push(
-        new PasswordPolicy(
-          {
-            atLeastUppercaseCharacters: {
-              minLength: this.capability.min_upper_case_characters
-            }
-          },
-          { atLeastUppercaseCharacters: new AtLeastUppercaseCharactersRule({ ...this.language }) }
-        )
-      )
+      rules.atLeastUppercaseCharacters = {
+        minLength: this.capability.min_upper_case_characters
+      }
     }
 
     if (this.capability.min_lower_case_characters) {
-      this.policies.push(
-        new PasswordPolicy(
-          {
-            atLeastLowercaseCharacters: {
-              minLength: this.capability.min_lower_case_characters
-            }
-          },
-          { atLeastLowercaseCharacters: new AtLeastLowercaseCharactersRule({ ...this.language }) }
-        )
-      )
+      rules.atLeastLowercaseCharacters = {
+        minLength: this.capability.min_lower_case_characters
+      }
     }
 
     if (this.capability.min_digits) {
-      this.policies.push(
-        new PasswordPolicy(
-          { atLeastDigits: { minLength: this.capability.min_digits } },
-          { atLeastDigits: new AtLeastDigitsRule({ ...this.language }) }
-        )
-      )
+      rules.atLeastDigits = { minLength: this.capability.min_digits }
     }
 
     if (this.capability.min_special_characters) {
-      this.policies.push(
-        new PasswordPolicy(
-          {
-            mustContain: {
-              minLength: this.capability.min_special_characters,
-              characters: this.capability.special_characters
-            }
-          },
-          { mustContain: new MustContainRule({ ...this.language }) }
-        )
-      )
+      rules.mustContain = {
+        minLength: this.capability.min_special_characters,
+        characters: this.capability.special_characters
+      }
     }
 
     if (this.capability.max_characters) {
-      this.policies.push(
-        new PasswordPolicy(
-          { atMostCharacters: { maxLength: this.capability.max_characters } },
-          { atMostCharacters: new AtMostCharactersRule({ ...this.language }) }
-        )
-      )
+      rules.atMostCharacters = { maxLength: this.capability.max_characters }
     }
+
+    this.policy = new PasswordPolicy(rules, ruleset)
   }
 
-  public getPolicies(): Rule[] {
-    return this.policies
+  public getPolicy(): PasswordPolicy {
+    return this.policy
   }
 }
diff --git a/packages/web-pkg/src/services/passwordPolicy/rules.ts b/packages/web-pkg/src/services/passwordPolicy/rules.ts
index 68eee6f600d..0a5d02f0c04 100644
--- a/packages/web-pkg/src/services/passwordPolicy/rules.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/rules.ts
@@ -1,43 +1,43 @@
-import { isNaN, isNumber, isObject, isString } from 'lodash-es'
+import { isNaN, isNumber, isObject, isString, isBoolean } from 'lodash-es'
 import { Language } from 'vue3-gettext'
 
-export interface RuleOptions {
+export interface PasswordPolicyRuleOptions {
   minLength?: number
   maxLength?: number
   characters?: string
 }
 
-export interface RuleExplained {
+export interface PasswordPolicyRuleExplained {
   code: string
   message: string
   format: (number | string)[]
   verified?: boolean
 }
 
-export interface Rule {
-  assert(options: RuleOptions, password: string): boolean
-  explain(options: RuleOptions, verified?: boolean): RuleExplained
-  missing(options: RuleOptions, password: string): RuleExplained
-  validate(options?: RuleOptions): boolean
+export interface PasswordPolicyRule {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean
+  explain(options: PasswordPolicyRuleOptions, verified?: boolean): PasswordPolicyRuleExplained
+  missing(options: PasswordPolicyRuleOptions, password: string): PasswordPolicyRuleExplained
+  validate(options?: PasswordPolicyRuleOptions): boolean
 }
 
-export class MustNotBeEmptyRule implements Rule {
+export class MustNotBeEmptyRule implements PasswordPolicyRule {
   protected $gettext
 
   constructor({ $gettext }: Language) {
     this.$gettext = $gettext
   }
 
-  explain(options: RuleOptions, verified: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified: boolean): PasswordPolicyRuleExplained {
     return {
       code: 'mustNotBeEmpty',
       message: this.$gettext('Must not be empty'),
       format: [],
-      ...(verified && { verified })
+      ...(isBoolean(verified) && { verified })
     }
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     return password.length > 0
   }
 
@@ -45,27 +45,27 @@ export class MustNotBeEmptyRule implements Rule {
     return true
   }
 
-  missing(options: RuleOptions, password: string): RuleExplained {
+  missing(options: PasswordPolicyRuleOptions, password: string): PasswordPolicyRuleExplained {
     return this.explain(options, this.assert(options, password))
   }
 }
-export class MustContainRule implements Rule {
+export class MustContainRule implements PasswordPolicyRule {
   protected $gettext
 
   constructor({ $gettext }: Language) {
     this.$gettext = $gettext
   }
 
-  explain(options: RuleOptions, verified: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified: boolean): PasswordPolicyRuleExplained {
     return {
       code: 'mustContain',
       message: this.$gettext('At least %{param1} of the special characters: %{param2}'),
       format: [options.minLength, options.characters],
-      ...(verified && { verified })
+      ...(isBoolean(verified) && { verified })
     }
   }
 
-  assert(options: RuleOptions, password: string) {
+  assert(options: PasswordPolicyRuleOptions, password: string) {
     const charsCount = Array.from(password).filter((char) =>
       options.characters.includes(char)
     ).length
@@ -73,7 +73,7 @@ export class MustContainRule implements Rule {
     return charsCount >= options.minLength
   }
 
-  validate(options: RuleOptions): boolean {
+  validate(options: PasswordPolicyRuleOptions): boolean {
     if (!isObject(options)) {
       throw new Error('options should be an object')
     }
@@ -92,22 +92,22 @@ export class MustContainRule implements Rule {
     return this.explain(options, this.assert(options, password))
   }
 }
-export class AtMostBaseRule implements Rule {
+export class AtMostBaseRule implements PasswordPolicyRule {
   protected $ngettext
 
   constructor({ $ngettext }: Language) {
     this.$ngettext = $ngettext
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     throw new Error('Method not implemented.')
   }
 
-  explain(options: RuleOptions, verified?: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified?: boolean): PasswordPolicyRuleExplained {
     throw new Error('Method not implemented.')
   }
 
-  validate(options: RuleOptions): boolean {
+  validate(options: PasswordPolicyRuleOptions): boolean {
     if (!isObject(options)) {
       throw new Error('options should be an object')
     }
@@ -119,7 +119,7 @@ export class AtMostBaseRule implements Rule {
     return true
   }
 
-  missing(options: RuleOptions, password: string): RuleExplained {
+  missing(options: PasswordPolicyRuleOptions, password: string): PasswordPolicyRuleExplained {
     return this.explain(options, this.assert(options, password))
   }
 }
@@ -129,7 +129,7 @@ export class AtMostCharactersRule extends AtMostBaseRule {
     super(args)
   }
 
-  explain(options: RuleOptions, verified: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified: boolean): PasswordPolicyRuleExplained {
     return {
       code: 'atMostCharacters',
       message: this.$ngettext(
@@ -138,31 +138,31 @@ export class AtMostCharactersRule extends AtMostBaseRule {
         options.maxLength
       ),
       format: [options.maxLength],
-      ...(verified && { verified })
+      ...(isBoolean(verified) && { verified })
     }
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     return password.length <= options.maxLength
   }
 }
 
-export class AtLeastBaseRule implements Rule {
+export class AtLeastBaseRule implements PasswordPolicyRule {
   protected $ngettext
 
   constructor({ $ngettext }: Language) {
     this.$ngettext = $ngettext
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     throw new Error('Method not implemented.')
   }
 
-  explain(options: RuleOptions, verified?: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified?: boolean): PasswordPolicyRuleExplained {
     throw new Error('Method not implemented.')
   }
 
-  validate(options: RuleOptions): boolean {
+  validate(options: PasswordPolicyRuleOptions): boolean {
     if (!isObject(options)) {
       throw new Error('options should be an object')
     }
@@ -174,17 +174,17 @@ export class AtLeastBaseRule implements Rule {
     return true
   }
 
-  missing(options: RuleOptions, password: string): RuleExplained {
+  missing(options: PasswordPolicyRuleOptions, password: string): PasswordPolicyRuleExplained {
     return this.explain(options, this.assert(options, password))
   }
 }
 
-export class AtLeastCharactersRule extends AtLeastBaseRule implements Rule {
+export class AtLeastCharactersRule extends AtLeastBaseRule implements PasswordPolicyRule {
   constructor(args: Language) {
     super(args)
   }
 
-  explain(options: RuleOptions, verified: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified: boolean): PasswordPolicyRuleExplained {
     return {
       code: 'atLeastCharacters',
       message: this.$ngettext(
@@ -193,11 +193,11 @@ export class AtLeastCharactersRule extends AtLeastBaseRule implements Rule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified && { verified })
+      ...(isBoolean(verified) && { verified })
     }
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     return password.length >= options.minLength
   }
 }
@@ -207,7 +207,7 @@ export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
     super(args)
   }
 
-  explain(options: RuleOptions, verified: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified: boolean): PasswordPolicyRuleExplained {
     return {
       code: 'atLeastUppercaseCharacters',
       message: this.$ngettext(
@@ -216,11 +216,11 @@ export class AtLeastUppercaseCharactersRule extends AtLeastBaseRule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified && { verified })
+      ...(isBoolean(verified) && { verified })
     }
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     const uppercaseCount = (password || '').match(/[A-Z\xC0-\xD6\xD8-\xDE]/g)?.length
     return uppercaseCount >= options.minLength
   }
@@ -231,7 +231,7 @@ export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
     super(args)
   }
 
-  explain(options: RuleOptions, verified: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified: boolean): PasswordPolicyRuleExplained {
     return {
       code: 'atLeastLowercaseCharacters',
       message: this.$ngettext(
@@ -240,11 +240,11 @@ export class AtLeastLowercaseCharactersRule extends AtLeastBaseRule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified && { verified })
+      ...(isBoolean(verified) && { verified })
     }
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     const lowercaseCount = (password || '').match(/[a-z\xDF-\xF6\xF8-\xFF]/g)?.length
     return lowercaseCount >= options.minLength
   }
@@ -255,7 +255,7 @@ export class AtLeastDigitsRule extends AtLeastBaseRule {
     super(args)
   }
 
-  explain(options: RuleOptions, verified: boolean): RuleExplained {
+  explain(options: PasswordPolicyRuleOptions, verified: boolean): PasswordPolicyRuleExplained {
     return {
       code: 'atLeastDigits',
       message: this.$ngettext(
@@ -264,11 +264,11 @@ export class AtLeastDigitsRule extends AtLeastBaseRule {
         options.minLength
       ),
       format: [options.minLength],
-      ...(verified && { verified: false })
+      ...(isBoolean(verified) && { verified })
     }
   }
 
-  assert(options: RuleOptions, password: string): boolean {
+  assert(options: PasswordPolicyRuleOptions, password: string): boolean {
     const digitCount = (password || '').match(/\d/g)?.length
     return digitCount >= options.minLength
   }
diff --git a/packages/web-runtime/src/store/modal.ts b/packages/web-runtime/src/store/modal.ts
index 7e5c1351f80..95e62fd41ca 100644
--- a/packages/web-runtime/src/store/modal.ts
+++ b/packages/web-runtime/src/store/modal.ts
@@ -71,7 +71,7 @@ const mutations = {
     state.onConfirm = modal.onConfirm
     state.hasInput = modal.hasInput || false
     state.inputValue = modal.inputValue || null
-    state.inputPasswordPolicy = modal.inputPasswordPolicy || []
+    state.inputPasswordPolicy = modal.inputPasswordPolicy || {}
     state.inputSelectionRange = modal.inputSelectionRange
     state.inputDescription = modal.inputDescription || null
     state.inputLabel = modal.inputLabel || null

From 995606dc5b97d3634579a965db2c6dd791854860 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 14:55:39 +0200
Subject: [PATCH 23/29] Fix types

---
 .../_OcTextInputPassword.vue                   | 18 +++++++++---------
 .../services/passwordPolicy/passwordPolicy.ts  |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index d60ff238bca..45ac0171645 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -14,21 +14,21 @@
     <div class="oc-text-small oc-flex oc-flex-column">
       <span v-text="$gettext('Please enter a password that meets the following criteria:')" />
       <div
-        v-for="(checkedRule, index) in checkedPasswordPolicy.rules"
+        v-for="(testedRule, index) in testedPasswordPolicy.rules"
         :key="index"
         class="oc-flex oc-flex-middle"
       >
         <oc-icon
           size="small"
-          :name="checkedRule.verified ? 'check' : 'close'"
-          :variation="checkedRule.verified ? 'success' : 'danger'"
+          :name="testedRule.verified ? 'check' : 'close'"
+          :variation="testedRule.verified ? 'success' : 'danger'"
         />
         <span
           :class="[
-            { 'oc-text-input-success': checkedRule.verified },
-            { 'oc-text-input-danger': !checkedRule.verified }
+            { 'oc-text-input-success': testedRule.verified },
+            { 'oc-text-input-danger': !testedRule.verified }
           ]"
-          v-text="getPasswordPolicyRuleMessage(checkedRule)"
+          v-text="getPasswordPolicyRuleMessage(testedRule)"
         ></span>
       </div>
     </div>
@@ -44,7 +44,7 @@ import { useGettext } from 'vue3-gettext'
 interface PasswordPolicy {
   rules: unknown[]
   check(password: string): boolean
-  missing: {
+  missing(password: string): {
     code: string
     message: string
     format: (number | string)[]
@@ -72,7 +72,7 @@ export default defineComponent({
     const showPasswordPolicyInformation = computed(() => {
       return !!(Object.keys(props.passwordPolicy?.rules || {}).length && unref(passwordEntered))
     })
-    const checkedPasswordPolicy = computed(() => {
+    const testedPasswordPolicy = computed(() => {
       return props.passwordPolicy.missing(unref(password))
     })
 
@@ -108,7 +108,7 @@ export default defineComponent({
       onInput,
       showPassword,
       showPasswordPolicyInformation,
-      checkedPasswordPolicy,
+      testedPasswordPolicy,
       getPasswordPolicyRuleMessage
     }
   }
diff --git a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
index 70fc4321d9d..540e753abb8 100644
--- a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
@@ -42,7 +42,7 @@ export class PasswordPolicyService {
       mustContain: new MustContainRule({ ...this.language }),
       atMostCharacters: new AtMostCharactersRule({ ...this.language })
     }
-    const rules = {} as unknown
+    const rules = {} as any
 
     if (this.capability.min_characters) {
       rules.atLeastCharacters = { minLength: this.capability.min_characters }

From b57d0f25cdcf4f5e361a32d96e1de92e75e2fe98 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 15:18:08 +0200
Subject: [PATCH 24/29] Fix unit tests

---
 .../components/OcModal/__snapshots__/OcModal.spec.ts.snap | 2 +-
 .../SideBar/__snapshots__/MembersPanel.spec.ts.snap       | 4 ++--
 .../SideBar/__snapshots__/MembersPanel.spec.ts.snap       | 4 ++--
 .../Users/SideBar/__snapshots__/EditPanel.spec.ts.snap    | 8 ++++----
 .../SideBar/Shares/Links/DetailsAndEdit.spec.ts           | 8 ++++++--
 .../pages/__snapshots__/resolvePublicLink.spec.ts.snap    | 2 +-
 .../web-test-helpers/src/mocks/defaultComponentMocks.ts   | 4 +++-
 7 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index a282559dfe2..81347339c5e 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`OcModal displays input 1`] = `
       <div class="oc-modal-body">
         <!--v-if-->
         <!--v-if-->
-        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
+        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" readonly="false" type="text"></oc-text-input-stub>
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 55a2b9e3b54..13190e9a05c 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -14,7 +14,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 46df04c1587..a696bd97ca1 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -16,7 +16,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
index 5b554323315..b0804cc4c86 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -5,10 +5,10 @@ exports[`EditPanel renders all available inputs 1`] = `
   <user-info-box-stub user="[object Object]"></user-info-box-stub>
   <form autocomplete="off" class="oc-background-highlight oc-p-m" id="user-edit-form">
     <div>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="userName-input" label="User name" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="displayName-input" label="First and last name" modelvalue="jan" passwordpolicy="" readonly="false" type="text"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="email-input" label="Email" modelvalue="jan@owncloud.com" passwordpolicy="" readonly="false" type="email"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="password-input" label="Password" modelvalue="" passwordpolicy="" placeholder="●●●●●●●●" readonly="false" type="password"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="userName-input" label="User name" readonly="false" type="text"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="displayName-input" label="First and last name" modelvalue="jan" readonly="false" type="text"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="email-input" label="Email" modelvalue="jan@owncloud.com" readonly="false" type="email"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="password-input" label="Password" modelvalue="" placeholder="●●●●●●●●" readonly="false" type="password"></oc-text-input-stub>
       <div class="oc-mb-s">
         <oc-select-stub clearable="false" disabled="false" filter="[Function]" fixmessageline="false" id="role-input" label="Role" loading="false" multiple="false" optionlabel="displayName" options="[object Object]" readonly="false" searchable="true"></oc-select-stub>
         <div class="oc-text-input-message"></div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
index 04af806d719..b6c6a1688bf 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
@@ -4,7 +4,8 @@ import {
   createStore,
   defaultPlugins,
   shallowMount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  defaultComponentMocks
 } from 'web-test-helpers'
 import { mockDeep } from 'jest-mock-extended'
 import { Resource } from 'web-client'
@@ -52,6 +53,7 @@ describe('DetailsAndEdit component', () => {
 
 function getShallowMountedWrapper(link, expireDateEnforced = false, isModifiable = false) {
   const storeOptions = defaultStoreMockOptions
+  const mocks = defaultComponentMocks()
   const store = createStore(storeOptions)
   return {
     wrapper: shallowMount(DetailsAndEdit, {
@@ -70,9 +72,11 @@ function getShallowMountedWrapper(link, expireDateEnforced = false, isModifiable
         file: mockDeep<Resource>()
       },
       global: {
+        mocks,
         renderStubDefaultSlot: true,
         stubs: { OcDatepicker: false, 'date-picker': true },
-        plugins: [...defaultPlugins(), store]
+        plugins: [...defaultPlugins(), store],
+        provide: mocks
       }
     })
   }
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
index 35b83c53929..bebeafec806 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`resolvePublicLink password required form should display if password is
     </h2>
   </div>
   <div class="oc-card-body">
-    <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-2" label="Enter password for public link" modelvalue="" passwordpolicy="" readonly="false" type="password"></oc-text-input-stub>
+    <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-2" label="Enter password for public link" modelvalue="" readonly="false" type="password"></oc-text-input-stub>
     <oc-button-stub appearance="filled" class="oc-login-authorize-button" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="submit" type="button" variation="primary"></oc-button-stub>
   </div>
 </form>
diff --git a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
index e506d8eac6a..8ff1b4a649b 100644
--- a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
+++ b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
@@ -3,6 +3,7 @@ import {
   ClientService,
   LoadingService,
   LoadingTaskCallbackArguments,
+  PasswordPolicyService,
   PreviewService
 } from 'web-pkg/src/services'
 import { Router, RouteLocationNormalizedLoaded, RouteLocationRaw } from 'vue-router'
@@ -33,6 +34,7 @@ export const defaultComponentMocks = ({ currentRoute = undefined }: ComponentMoc
       addTask: (callback) => {
         return callback(mock<LoadingTaskCallbackArguments>())
       }
-    })
+    }),
+    $passwordPolicyService: mockDeep<PasswordPolicyService>()
   }
 }

From f742b1c69acc9dd2c24ef101e119a90c93cc96d1 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 15:24:30 +0200
Subject: [PATCH 25/29] React on code review

---
 packages/design-system/src/components/OcModal/OcModal.vue | 5 +++--
 .../src/components/OcTextInput/OcTextInput.vue            | 8 +++++---
 .../_OcTextInputPassword/_OcTextInputPassword.vue         | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 668fe122f31..8900ed1c7a4 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -102,6 +102,7 @@ import OcIcon from '../OcIcon/OcIcon.vue'
 import OcTextInput from '../OcTextInput/OcTextInput.vue'
 import { FocusTrap } from 'focus-trap-vue'
 import { FocusTargetOrFalse, FocusTargetValueOrFalse } from 'focus-trap'
+import { PasswordPolicy } from '../_OcTextInputPassword/_OcTextInputPassword.vue'
 
 /**
  * Modals are generally used to force the user to focus on confirming or completing a single action.
@@ -354,9 +355,9 @@ export default defineComponent({
      * Password policy for the input
      */
     inputPasswordPolicy: {
-      type: Object,
+      type: Object as PropType<PasswordPolicy>,
       required: false,
-      default: () => {}
+      default: () => ({})
     },
     /**
      * Overwrite default focused element
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 7efbb6d8034..2b74175a769 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -77,7 +77,9 @@ import { defineComponent, HTMLAttributes, PropType } from 'vue'
 import uniqueId from '../../utils/uniqueId'
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
-import OcTextInputPassword from '../_OcTextInputPassword/_OcTextInputPassword.vue'
+import OcTextInputPassword, {
+  PasswordPolicy
+} from '../_OcTextInputPassword/_OcTextInputPassword.vue'
 
 /**
  * Form Inputs are used to allow users to provide text input when the expected
@@ -229,8 +231,8 @@ export default defineComponent({
      *
      */
     passwordPolicy: {
-      type: Object,
-      default: () => {}
+      type: Object as PropType<PasswordPolicy>,
+      default: () => ({})
     }
   },
   emits: [
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 45ac0171645..ab1cd3f8575 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -41,7 +41,7 @@ import OcIcon from '../OcIcon/OcIcon.vue'
 import OcButton from '../OcButton/OcButton.vue'
 import { useGettext } from 'vue3-gettext'
 
-interface PasswordPolicy {
+export interface PasswordPolicy {
   rules: unknown[]
   check(password: string): boolean
   missing(password: string): {
@@ -60,7 +60,7 @@ export default defineComponent({
   props: {
     passwordPolicy: {
       type: Object as PropType<PasswordPolicy>,
-      default: () => {}
+      default: () => ({})
     }
   },
   emits: ['passwordChallengeCompleted', 'passwordChallengeFailed'],

From bec11426792d68740d054351934104fc75fdf46d Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 15:29:32 +0200
Subject: [PATCH 26/29] Delete mock data

---
 .../src/services/passwordPolicy/passwordPolicy.ts      | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
index 540e753abb8..dac86de30c6 100644
--- a/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
+++ b/packages/web-pkg/src/services/passwordPolicy/passwordPolicy.ts
@@ -19,15 +19,7 @@ export class PasswordPolicyService {
   private policy: PasswordPolicy
 
   constructor({ store, language }: { store: Store<unknown>; language: Language }) {
-    this.capability = get(store, 'getters.capabilities.password_policy', {
-      min_characters: 10,
-      max_characters: 72,
-      min_lower_case_characters: 2,
-      min_upper_case_characters: 2,
-      min_digits: 2,
-      min_special_characters: 2,
-      special_characters: '!*?'
-    })
+    this.capability = get(store, 'getters.capabilities.password_policy', {})
     this.language = language
     this.buildPolicy()
   }

From 70af602eb394c8c7af1689f59eb71f6b27461639 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 15:37:37 +0200
Subject: [PATCH 27/29] Fix types

---
 .../_OcTextInputPassword/_OcTextInputPassword.vue      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index ab1cd3f8575..f8cd7783470 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -45,10 +45,12 @@ export interface PasswordPolicy {
   rules: unknown[]
   check(password: string): boolean
   missing(password: string): {
-    code: string
-    message: string
-    format: (number | string)[]
-    verified: boolean
+    rules: {
+      code: string
+      message: string
+      format: (number | string)[]
+      verified: boolean
+    }[]
   }
 }
 export default defineComponent({

From 7120c72f5e2cf0bee5e5572dc7518fd194932e63 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 15:56:46 +0200
Subject: [PATCH 28/29] Fix unit tests

---
 .../components/OcModal/__snapshots__/OcModal.spec.ts.snap | 2 +-
 .../src/components/OcTextInput/OcTextInput.spec.ts        | 2 +-
 .../SideBar/__snapshots__/MembersPanel.spec.ts.snap       | 4 ++--
 .../SideBar/__snapshots__/MembersPanel.spec.ts.snap       | 4 ++--
 .../Users/SideBar/__snapshots__/EditPanel.spec.ts.snap    | 8 ++++----
 .../pages/__snapshots__/resolvePublicLink.spec.ts.snap    | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 81347339c5e..b992ac294d8 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`OcModal displays input 1`] = `
       <div class="oc-modal-body">
         <!--v-if-->
         <!--v-if-->
-        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" readonly="false" type="text"></oc-text-input-stub>
+        <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
index 401f6c551d3..f0979f62863 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
@@ -133,7 +133,7 @@ describe('OcTextInput', () => {
     it.each(['text', 'number', 'email', 'password'])(
       'should set the provided type for the input',
       (type) => {
-        const wrapper = getShallowWrapper({ type: type })
+        const wrapper = getMountedWrapper({ props: { type: type } })
         expect(wrapper.find('input').attributes('type')).toBe(type)
       }
     )
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 13190e9a05c..52dfc481fa7 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -14,7 +14,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index a696bd97ca1..b9d43d71037 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -16,7 +16,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" readonly="false" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
index b0804cc4c86..0f1cffd340c 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -5,10 +5,10 @@ exports[`EditPanel renders all available inputs 1`] = `
   <user-info-box-stub user="[object Object]"></user-info-box-stub>
   <form autocomplete="off" class="oc-background-highlight oc-p-m" id="user-edit-form">
     <div>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="userName-input" label="User name" readonly="false" type="text"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="displayName-input" label="First and last name" modelvalue="jan" readonly="false" type="text"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="email-input" label="Email" modelvalue="jan@owncloud.com" readonly="false" type="email"></oc-text-input-stub>
-      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="password-input" label="Password" modelvalue="" placeholder="●●●●●●●●" readonly="false" type="password"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="userName-input" label="User name" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="displayName-input" label="First and last name" modelvalue="jan" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" errormessage="" fixmessageline="true" id="email-input" label="Email" modelvalue="jan@owncloud.com" passwordpolicy="[object Object]" readonly="false" type="email"></oc-text-input-stub>
+      <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="password-input" label="Password" modelvalue="" passwordpolicy="[object Object]" placeholder="●●●●●●●●" readonly="false" type="password"></oc-text-input-stub>
       <div class="oc-mb-s">
         <oc-select-stub clearable="false" disabled="false" filter="[Function]" fixmessageline="false" id="role-input" label="Role" loading="false" multiple="false" optionlabel="displayName" options="[object Object]" readonly="false" searchable="true"></oc-select-stub>
         <div class="oc-text-input-message"></div>
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
index bebeafec806..0d3e74fff56 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`resolvePublicLink password required form should display if password is
     </h2>
   </div>
   <div class="oc-card-body">
-    <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-2" label="Enter password for public link" modelvalue="" readonly="false" type="password"></oc-text-input-stub>
+    <oc-text-input-stub class="oc-mb-s" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-2" label="Enter password for public link" modelvalue="" passwordpolicy="[object Object]" readonly="false" type="password"></oc-text-input-stub>
     <oc-button-stub appearance="filled" class="oc-login-authorize-button" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="submit" type="button" variation="primary"></oc-button-stub>
   </div>
 </form>

From 342101ef9427f7ae548b526a41c7d77eeb682f38 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 5 Sep 2023 16:55:36 +0200
Subject: [PATCH 29/29] Add placeholder for edit link passwords, add copy
 password icon

---
 .../src/components/OcModal/OcModal.vue        | 15 +++++++++++
 .../_OcTextInputPassword.vue                  | 27 +++++++++++++++----
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |  1 +
 packages/web-runtime/src/App.vue              |  1 +
 packages/web-runtime/src/store/modal.ts       |  1 +
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 8900ed1c7a4..3b703949e4f 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -40,6 +40,7 @@
               v-model="userInputValue"
               class="oc-modal-body-input"
               :error-message="inputError"
+              :placeholder="inputPlaceholder"
               :label="inputLabel"
               :type="inputType"
               :password-policy="inputPasswordPolicy"
@@ -327,6 +328,14 @@ export default defineComponent({
       required: false,
       default: null
     },
+    /**
+     * Placeholder of the text input field
+     */
+    inputPlaceholder: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * Additional description message for the input field
      */
@@ -580,6 +589,12 @@ export default defineComponent({
       }
     }
   }
+
+  .oc-text-input-password-wrapper {
+    button {
+      background-color: var(--oc-color-background-highlight) !important;
+    }
+  }
 }
 </style>
 
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index f8cd7783470..16298720369 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -2,6 +2,16 @@
   <div ref="inputPasswordWrapper" class="oc-text-input-password-wrapper">
     <input v-bind="$attrs" :type="showPassword ? 'text' : 'password'" @input="onInput" />
     <oc-button
+      v-if="password"
+      class="oc-text-input-copy-password-button oc-px-s oc-background-default"
+      appearance="raw"
+      size="small"
+      @click="copyPasswordToClipboard"
+    >
+      <oc-icon size="small" :name="copyPasswordIcon" />
+    </oc-button>
+    <oc-button
+      v-if="password"
       class="oc-text-input-show-password-toggle oc-px-s oc-background-default"
       appearance="raw"
       size="small"
@@ -71,6 +81,8 @@ export default defineComponent({
     const showPassword = ref(false)
     const passwordEntered = ref(false)
     const password = ref('')
+    const copyPasswordIconInitial = 'file-copy'
+    const copyPasswordIcon = ref(copyPasswordIconInitial)
     const showPasswordPolicyInformation = computed(() => {
       return !!(Object.keys(props.passwordPolicy?.rules || {}).length && unref(passwordEntered))
     })
@@ -93,6 +105,12 @@ export default defineComponent({
       return $gettext(rule.message, paramObj, true)
     }
 
+    const copyPasswordToClipboard = () => {
+      navigator.clipboard.writeText(unref(password))
+      copyPasswordIcon.value = 'check'
+      setTimeout(() => (copyPasswordIcon.value = copyPasswordIconInitial), 500)
+    }
+
     watch(password, (value) => {
       if (!Object.keys(props.passwordPolicy).length) {
         return
@@ -108,10 +126,13 @@ export default defineComponent({
     return {
       $gettext,
       onInput,
+      password,
       showPassword,
       showPasswordPolicyInformation,
       testedPasswordPolicy,
-      getPasswordPolicyRuleMessage
+      getPasswordPolicyRuleMessage,
+      copyPasswordToClipboard,
+      copyPasswordIcon
     }
   }
 })
@@ -133,10 +154,6 @@ export default defineComponent({
   input:focus {
     outline: none;
   }
-
-  button {
-    background-color: var(--oc-color-background-highlight) !important;
-  }
 }
 .oc-text-input-password-wrapper:focus-within {
   border-color: var(--oc-color-swatch-passive-default);
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 144260d02c5..8186d7c0d3d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -475,6 +475,7 @@ export default defineComponent({
         confirmDisabled: true,
         inputLabel: this.$gettext('Password'),
         inputPasswordPolicy: this.passwordPolicy,
+        inputPlaceholder: this.link.password ? '●●●●●●●●' : null,
         inputType: 'password',
         onCancel: this.hideModal,
         onPasswordChallengeCompleted: () => this.setModalConfirmButtonDisabled(false),
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 4ad09934953..2543ce66e98 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -14,6 +14,7 @@
       :message="modal.message"
       :has-input="modal.hasInput"
       :input-description="modal.inputDescription"
+      :input-placeholder="modal.inputPlaceholder"
       :input-password-policy="modal.inputPasswordPolicy"
       :input-disabled="modal.inputDisabled"
       :input-error="modal.inputError"
diff --git a/packages/web-runtime/src/store/modal.ts b/packages/web-runtime/src/store/modal.ts
index 95e62fd41ca..d1d505278c6 100644
--- a/packages/web-runtime/src/store/modal.ts
+++ b/packages/web-runtime/src/store/modal.ts
@@ -74,6 +74,7 @@ const mutations = {
     state.inputPasswordPolicy = modal.inputPasswordPolicy || {}
     state.inputSelectionRange = modal.inputSelectionRange
     state.inputDescription = modal.inputDescription || null
+    state.inputPlaceholder = modal.inputPlaceholder || null
     state.inputLabel = modal.inputLabel || null
     state.inputError = modal.inputError || null
     state.inputDisabled = modal.inputDisabled || false