diff options
Diffstat (limited to 'src/components/AddFeed.vue')
| -rw-r--r-- | src/components/AddFeed.vue | 148 |
1 files changed, 85 insertions, 63 deletions
diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue index 2adacd8ad..a07125d3a 100644 --- a/src/components/AddFeed.vue +++ b/src/components/AddFeed.vue @@ -1,41 +1,45 @@ <template> <Modal @close="$emit('close')"> <div id="new-feed" news-add-feed="Navigation.feed"> - <form ng-submit="Navigation.createFeed(Navigation.feed)" - ng-init="Navigation.feed.autoDiscover=true" - name="feedform"> + ng-init="Navigation.feed.autoDiscover=true" + name="feedform"> <fieldset ng-disabled="Navigation.addingFeed" style="padding: 16px"> <input type="text" - :value="feed" - ng-model="Navigation.feed.url" - ng-class="{'ng-invalid': + :value="feed" + ng-model="Navigation.feed.url" + ng-class="{'ng-invalid': !Navigation.addingFeed && Navigation.feedUrlExists(Navigation.feed.url) }" - :placeholder="t('news','Web address')" - name="address" - pattern="[^\s]+" - required - autofocus> + :placeholder="t('news', 'Web address')" + name="address" + pattern="[^\s]+" + required + autofocus /> <p class="error" - ng-show="!Navigation.addingFeed && + ng-show="!Navigation.addingFeed && Navigation.feedUrlExists(Navigation.feed.url)"> - {{ t('news', 'Feed exists already!') }} + {{ t("news", "Feed exists already!") }} </p> <!-- select a folder --> <CheckboxRadioSwitch :checked.sync="createNewFolder" type="switch"> - {{ t('news', 'New folder') }}? + {{ t("news", "New folder") }}? </CheckboxRadioSwitch> - <Multiselect v-if="!createNewFolder" v-model="folder" :options="folders" track-by="id" label="name"/> + <Multiselect v-if="!createNewFolder" + v-model="folder" + :options="folders" + track-by="id" + label="name" /> <!-- add a folder --> - <input type="text" - ng-model="Navigation.feed.newFolder" - ng-class="{'ng-invalid': + <input v-if="createNewFolder" + type="text" + ng-model="Navigation.feed.newFolder" + ng-class="{'ng-invalid': !Navigation.addingFeed && !Navigation.addingFeed && Navigation.showNewFolder && @@ -43,52 +47,59 @@ Navigation.feed.newFolder ) }" - :placeholder="t('news','Folder name')" - name="folderName" - v-if="createNewFolder" - style="width: 90%" - required> - + :placeholder="t('news', 'Folder name')" + name="folderName" + style="width: 90%" + required /> - <p class="error" ng-show="!Navigation.addingFeed && + <p class="error" + ng-show="!Navigation.addingFeed && Navigation.folderNameExists(Navigation.feed.newFolder)"> - {{ t('news', 'Folder exists already!') }} + {{ t("news", "Folder exists already!") }} </p> <!-- basic auth --> <CheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch"> - {{ t('news', 'Credentials') }}? + {{ t("news", "Credentials") }}? </CheckboxRadioSwitch> <div v-if="withBasicAuth" class="add-feed-basicauth"> - <p class="warning">{{ - t('news', - 'HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!') - }}></p> + <p class="warning"> + {{ + t( + "news", + "HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!" + ) + }}> + </p> <input type="text" - ng-model="Navigation.feed.user" - :placeholder="t('news','Username')" - name="user" - autofocus> + ng-model="Navigation.feed.user" + :placeholder="t('news', 'Username')" + name="user" + autofocus /> <input type="password" - ng-model="Navigation.feed.password" - :placeholder="t('news','Password')" - name="password" autocomplete="new-password"> + ng-model="Navigation.feed.password" + :placeholder="t('news', 'Password')" + name="password" + autocomplete="new-password" /> </div> <CheckboxRadioSwitch :checked.sync="autoDiscover" type="switch"> - {{ t('news', 'Auto discover Feed') }}? + {{ t("news", "Auto discover Feed") }}? </CheckboxRadioSwitch> - <Button :wide="true" type="primary" @click="addFeed()" ng-disabled=" + <Button :wide="true" + type="primary" + ng-disabled=" Navigation.feedUrlExists(Navigation.feed.url) || ( Navigation.showNewFolder && Navigation.folderNameExists(folder.name) - )"> - {{t('news','Subscribe')}} + )" + @click="addFeed()"> + {{ t("news", "Subscribe") }} </Button> </fieldset> </form> @@ -97,6 +108,8 @@ </template> <script> +/* eslint-disable vue/require-prop-type-constructor */ + import Modal from '@nextcloud/vue/dist/Components/Modal' import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch' import Button from '@nextcloud/vue/dist/Components/Button' @@ -107,42 +120,51 @@ export default { Modal, CheckboxRadioSwitch, Button, - Multiselect + Multiselect, + }, + props: { + feed: '', + }, + emits: ['close'], + data() { + return { + folder: {}, + autoDiscover: true, + createNewFolder: false, + withBasicAuth: false, + } }, computed: { folders() { return this.$store.state.folders - } + }, }, methods: { newFolder() { - this.createNewFolder = true; + this.createNewFolder = true }, abortNewFolder() { - this.createNewFolder = false; + this.createNewFolder = false }, addFeed() { - this.$store.dispatch('addFeed', {feedReq: { url: this.feed, folder: this.folder, autoDiscover: true}}) - } - }, - props: { - feed: '', - folder: {}, - autoDiscover: true, - withBasicAuth: false, - createNewFolder: false + this.$store.dispatch('addFeed', { + feedReq: { + url: this.feed, + folder: this.folder, + autoDiscover: true, + }, + }) + }, }, - emits: ['close'] } </script> <style scoped> +input { + width: 100% +} - input { - width: 100%; - } - .multiselect { - width: 100%; - } - +.multiselect { + width: 100% +} </style> |