MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-28 08:05: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" v-model="url"
class="input is-shadowless" class="input is-shadowless"
type="url" type="url"
pattern="http[s]?://.*" pattern="http[s]?://.+"
required required
:placeholder="$t('dialog.add.rss.placeholder')" :placeholder="$t('dialog.add.rss.placeholder')"
:disabled="loading" :disabled="loading"
@input="check_url"
/> />
<mdicon class="icon is-left" name="rss" size="16" /> <mdicon class="icon is-left" name="rss" size="16" />
</p> </p>
@ -38,6 +39,7 @@
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" /> <span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a> </a>
<a <a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream" @click="add_stream"
> >
@ -66,6 +68,7 @@ export default {
data() { data() {
return { return {
disabled: true,
loading: false, loading: false,
url: '' url: ''
} }
@ -96,6 +99,10 @@ export default {
.catch(() => { .catch(() => {
this.loading = false 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" v-model="url"
class="input is-shadowless" class="input is-shadowless"
type="url" type="url"
pattern="http[s]?://.*" pattern="http[s]?://.+"
required required
:placeholder="$t('dialog.add.stream.placeholder')" :placeholder="$t('dialog.add.stream.placeholder')"
:disabled="loading" :disabled="loading"
@input="check_url"
/> />
<mdicon class="icon is-left" name="web" size="16" /> <mdicon class="icon is-left" name="web" size="16" />
</p> </p>
@ -36,11 +37,16 @@
<mdicon class="icon" name="cancel" size="16" /> <mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" /> <span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" />
</a> </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" /> <mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" /> <span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a> </a>
<a <a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play" @click="play"
> >
@ -69,6 +75,7 @@ export default {
data() { data() {
return { return {
disabled: true,
loading: false, loading: false,
url: '' url: ''
} }
@ -78,7 +85,6 @@ export default {
show() { show() {
if (this.show) { if (this.show) {
this.loading = false this.loading = false
// We need to delay setting the focus to the input field until the field is part of the dom and visible // We need to delay setting the focus to the input field until the field is part of the dom and visible
setTimeout(() => { setTimeout(() => {
this.$refs.url_field.focus() this.$refs.url_field.focus()
@ -100,7 +106,10 @@ export default {
this.loading = false this.loading = false
}) })
}, },
check_url(event) {
const { validity } = event.target
this.disabled = validity.patternMismatch || validity.valueMissing
},
play() { play() {
this.loading = true this.loading = true
webapi webapi

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

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