%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="Social">
<ValidationObserver ref="form">
<form @submit.prevent="save" role="form" method="POST">
<div class="relative mb-4">
<label for="twitter" class="form-label">Twitter</label>
<ValidationProvider :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }" v-slot="{ errors }">
<input class="form-control"
v-model="twitter"
type="text"
id="twitter"
name="twitter"
placeholder="e.g. twitter.com/TakeASeat__" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="relative mb-4">
<label for="facebook" class="form-label">Facebook</label>
<ValidationProvider :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }" v-slot="{ errors }">
<input class="form-control"
v-model="facebook"
type="text"
id="facebook"
name="facebook"
placeholder="e.g. facebook.com/takeaseat.co.uk" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="relative mb-4">
<label for="instagram" class="form-label">Instagram</label>
<ValidationProvider :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }" v-slot="{ errors }">
<input class="form-control"
v-model="instagram"
type="text"
id="instagram"
name="instagram"
placeholder="e.g. instagram.com/takeaseat_therapy" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="relative mb-4">
<label for="Linkedin" class="form-label">Linkedin</label>
<ValidationProvider :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }" v-slot="{ errors }">
<input class="form-control"
v-model="linkedin"
type="text"
id="Linkedin"
name="Linkedin"
placeholder="e.g. linkedin.com/company/takeaseat" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="flex items-center justify-center">
<button
class="btn btn-small btn-primary rounded-full"
type="submit">
<span v-if="working == false">Save Changes</span>
<span
class="flex items-center justify-center"
v-else>
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Saving</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</Block>
</template>
<script>
export default {
data() {
return {
working: false,
twitter: '',
facebook: '',
instagram: '',
linkedin: ''
}
},
async fetch() {
const { data } = await this.$axios.$get('/account/details/social')
for (const [key, value] of Object.entries(data)) {
if(value !== null) {
this[key] = value;
} else if(Array.isArray(value) && value !== null) {
this[key].push(value);
}
}
},
methods: {
async save() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/account/details/social/update', {
twitter: this.twitter,
facebook: this.facebook,
instagram: this.instagram,
linkedin: this.linkedin
}).then((response) => {
this.working = false;
this.$store.dispatch('account/progress/get', { slug: 'settings' })
this.$toast.success(response).goAway(1500);
}).catch(error => {
this.working = false;
this.$refs.form.setErrors(error.response.data.errors);
})
})
}
}
}
</script>
Zerion Mini Shell 1.0