You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Settings.vue 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!--
  2. - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
  3. -
  4. - @author Gary Kim <gary@garykim.dev>
  5. -
  6. - @license GNU AGPL version 3 or any later version
  7. -
  8. - This program is free software: you can redistribute it and/or modify
  9. - it under the terms of the GNU Affero General Public License as
  10. - published by the Free Software Foundation, either version 3 of the
  11. - License, or (at your option) any later version.
  12. -
  13. - This program is distributed in the hope that it will be useful,
  14. - but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. - GNU Affero General Public License for more details.
  17. -
  18. - You should have received a copy of the GNU Affero General Public License
  19. - along with this program. If not, see <http://www.gnu.org/licenses/>.
  20. -
  21. -->
  22. <template>
  23. <NcAppSettingsDialog :open="open"
  24. :show-navigation="true"
  25. :title="t('files', 'Files settings')"
  26. @update:open="onClose">
  27. <!-- Settings API-->
  28. <NcAppSettingsSection id="settings" :title="t('files', 'Files settings')">
  29. <NcCheckboxRadioSwitch :checked.sync="show_hidden"
  30. @update:checked="setConfig('show_hidden', $event)">
  31. {{ t('files', 'Show hidden files') }}
  32. </NcCheckboxRadioSwitch>
  33. <NcCheckboxRadioSwitch :checked.sync="crop_image_previews"
  34. @update:checked="setConfig('crop_image_previews', $event)">
  35. {{ t('files', 'Crop image previews') }}
  36. </NcCheckboxRadioSwitch>
  37. </NcAppSettingsSection>
  38. <!-- Settings API-->
  39. <NcAppSettingsSection v-if="settings.length !== 0"
  40. id="more-settings"
  41. :title="t('files', 'Additional settings')">
  42. <template v-for="setting in settings">
  43. <Setting :key="setting.name" :el="setting.el" />
  44. </template>
  45. </NcAppSettingsSection>
  46. <!-- Webdav URL-->
  47. <NcAppSettingsSection id="webdav" :title="t('files', 'WebDAV')">
  48. <NcInputField id="webdav-url-input"
  49. :show-trailing-button="true"
  50. :success="webdavUrlCopied"
  51. :trailing-button-label="t('files', 'Copy to clipboard')"
  52. :value="webdavUrl"
  53. readonly="readonly"
  54. type="url"
  55. @focus="$event.target.select()"
  56. @trailing-button-click="copyCloudId">
  57. <template #trailing-button-icon>
  58. <Clipboard :size="20" />
  59. </template>
  60. </NcInputField>
  61. <em>
  62. <a class="setting-link"
  63. :href="webdavDocs"
  64. target="_blank"
  65. rel="noreferrer noopener">
  66. {{ t('files', 'Use this address to access your Files via WebDAV') }} ↗
  67. </a>
  68. </em>
  69. <br>
  70. <em>
  71. <a class="setting-link" :href="appPasswordUrl">
  72. {{ t('files', 'If you have enabled 2FA, you must create and use a new app password by clicking here.') }} ↗
  73. </a>
  74. </em>
  75. </NcAppSettingsSection>
  76. </NcAppSettingsDialog>
  77. </template>
  78. <script>
  79. import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
  80. import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
  81. import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
  82. import Clipboard from 'vue-material-design-icons/Clipboard.vue'
  83. import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
  84. import Setting from '../components/Setting.vue'
  85. import { emit } from '@nextcloud/event-bus'
  86. import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
  87. import { getCurrentUser } from '@nextcloud/auth'
  88. import { loadState } from '@nextcloud/initial-state'
  89. import { showError, showSuccess } from '@nextcloud/dialogs'
  90. import { translate } from '@nextcloud/l10n'
  91. import axios from '@nextcloud/axios'
  92. const userConfig = loadState('files', 'config', {
  93. show_hidden: false,
  94. crop_image_previews: true,
  95. })
  96. export default {
  97. name: 'Settings',
  98. components: {
  99. Clipboard,
  100. NcAppSettingsDialog,
  101. NcAppSettingsSection,
  102. NcCheckboxRadioSwitch,
  103. NcInputField,
  104. Setting,
  105. },
  106. props: {
  107. open: {
  108. type: Boolean,
  109. default: false,
  110. },
  111. },
  112. data() {
  113. return {
  114. ...userConfig,
  115. // Settings API
  116. settings: window.OCA?.Files?.Settings?.settings || [],
  117. // Webdav infos
  118. webdavUrl: generateRemoteUrl('dav/files/' + encodeURIComponent(getCurrentUser()?.uid)),
  119. webdavDocs: 'https://docs.nextcloud.com/server/stable/go.php?to=user-webdav',
  120. appPasswordUrl: generateUrl('/settings/user/security#generate-app-token-section'),
  121. webdavUrlCopied: false,
  122. }
  123. },
  124. beforeMount() {
  125. // Update the settings API entries state
  126. this.settings.forEach(setting => setting.open())
  127. },
  128. beforeDestroy() {
  129. // Update the settings API entries state
  130. this.settings.forEach(setting => setting.close())
  131. },
  132. methods: {
  133. onClose() {
  134. this.$emit('close')
  135. },
  136. setConfig(key, value) {
  137. emit('files:config:updated', { key, value })
  138. axios.post(generateUrl('/apps/files/api/v1/config/' + key), {
  139. value,
  140. })
  141. },
  142. async copyCloudId() {
  143. document.querySelector('input#webdav-url-input').select()
  144. if (!navigator.clipboard) {
  145. // Clipboard API not available
  146. showError(t('files', 'Clipboard is not available'))
  147. return
  148. }
  149. await navigator.clipboard.writeText(this.webdavUrl)
  150. this.webdavUrlCopied = true
  151. showSuccess(t('files', 'WebDAV URL copied to clipboard'))
  152. setTimeout(() => {
  153. this.webdavUrlCopied = false
  154. }, 5000)
  155. },
  156. t: translate,
  157. },
  158. }
  159. </script>
  160. <style lang="scss" scoped>
  161. .setting-link:hover {
  162. text-decoration: underline;
  163. }
  164. </style>