MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 23:25:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Check validity of URL

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-03-28 15:45:39 +01:00
parent d6f08a2d70
commit 06a23ea29a
3 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web-src/src/components/ModalDialogAddRss.vue
View File

@ -13,10 +13,11 @@
v-model="url"
class="input is-shadowless"
type="url"
pattern="http[s]?://.*"
pattern="http[s]?://.+"
required
:placeholder="$t('dialog.add.rss.placeholder')"
:disabled="loading"
@input="check_url"
/>
<mdicon class="icon is-left" name="rss" size="16" />
</p>
@ -38,6 +39,7 @@
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream"
>
@ -66,6 +68,7 @@ export default {
data() {
return {
disabled: true,
loading: false,
url: ''
}
@ -96,6 +99,10 @@ export default {
.catch(() => {
this.loading = false
})
},
check_url(event) {
const { validity } = event.target
this.disabled = validity.patternMismatch || validity.valueMissing
}
}
}

17
web-src/src/components/ModalDialogAddUrlStream.vue
View File

@ -13,10 +13,11 @@
v-model="url"
class="input is-shadowless"
type="url"
pattern="http[s]?://.*"
pattern="http[s]?://.+"
required
:placeholder="$t('dialog.add.stream.placeholder')"
:disabled="loading"
@input="check_url"
/>
<mdicon class="icon is-left" name="web" size="16" />
</p>
@ -36,11 +37,16 @@
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" />
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-text-dark"
@click="add_stream"
>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play"
>
@ -69,6 +75,7 @@ export default {
data() {
return {
disabled: true,
loading: false,
url: ''
}
@ -78,7 +85,6 @@ export default {
show() {
if (this.show) {
this.loading = false
// We need to delay setting the focus to the input field until the field is part of the dom and visible
setTimeout(() => {
this.$refs.url_field.focus()
@ -100,7 +106,10 @@ export default {
this.loading = false
})
},
check_url(event) {
const { validity } = event.target
this.disabled = validity.patternMismatch || validity.valueMissing
},
play() {
this.loading = true
webapi

8
web-src/src/mystyles.scss
View File

@ -215,6 +215,14 @@ a.navbar-item {
min-height: calc(100vh - calc(2 * $navbar-height));
}
.is-disabled {
cursor: not-allowed;
opacity: 0.5;
> * {
pointer-events: none;
}
}
.fd-cover {
align-items: center;
display: flex;