pixelfed/resources/assets/components/groups/CreateGroup.vue

360 lines
10 KiB
Vue

<template>
<div class="create-group-component col-12 col-md-9" style="height: 100vh - 51px !important;overflow:hidden">
<div v-if="!hide" class="row h-100 bg-lighter">
<div class="col-12 col-md-8 border-left">
<div class="bg-dark p-5 mx-n3">
<p class="h1 font-weight-bold text-light mb-2">Create Group</p>
<p class="text-lighter mb-0">Create a new federated Group that is compatible with other Pixelfed and Lemmy servers</p>
</div>
<div class="px-2 mb-5">
<div class="mt-4">
<text-input
label="Group Name"
:value="name"
:hasLimit="true"
:maxLimit="limit.name.max"
placeholder="Add your group name"
helpText="Alphanumeric characters only, you can change this later."
:largeInput="true"
@update="handleUpdate('name', $event)"
/>
<hr>
<select-input
label="Group Type"
:value="membership"
:categories="membershipCategories"
placeholder="Select a type"
helpText="Select the membership type, you can change this later."
@update="handleUpdate('membership', $event)"
/>
<hr>
<select-input
label="Group Category"
:value="category"
:categories="categories"
placeholder="Select a category"
helpText="Choose the most relevant category to improve discovery and visibility"
@update="handleUpdate('category', $event)"
/>
<hr>
<text-area-input
label="Group Description"
:value="description"
:hasLimit="true"
:maxLimit="limit.description.max"
placeholder="Describe your groups purpose in a few words"
helpText="Describe your groups purpose in a few words, you can change this later."
@update="handleUpdate('description', $event)"
/>
<hr>
<checkbox-input
label="Adult Content"
inputText="Allow Adult Content"
:value="configuration.adult"
helpText="Groups that allow adult content should enable this or risk suspension or deletion by instance admins. Illegal content is prohibited. You can change this later."
/>
<hr>
<checkbox-input
label=""
inputText="I agree to the the Community Guidelines and Terms of Use and will administrate this group according to the rules set by this server. I understand that failure to abide by these terms may lead to the suspension of this group, and my account."
:value="hasConfirmed"
:strongText="false"
@update="handleUpdate('hasConfirmed', $event)"
/>
<!-- <div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1" v-model="hasConfirmed">
<label class="form-check-label" for="gridCheck1">
I agree to the <a href="#">Community Guidelines</a> and <a href="#">Terms of Use</a>
</label>
</div>
</div>
</div> -->
<button
class="btn btn-primary btn-block font-weight-bold rounded-pill mt-4"
@click="createGroup"
:disabled="!hasConfirmed">
Create Group
</button>
</div>
</div>
</div>
<div class="col-12 col-md-4 bg-white">
<!-- <div>
<button
v-if="page <= 4"
class="btn btn-primary btn-block font-weight-bold rounded-pill mt-4"
@click="nextPage"
:disabled="!membership">
Next
</button>
<button
v-if="page == 5"
class="btn btn-primary btn-block font-weight-bold rounded-pill mt-4"
@click="createGroup"
:disabled="!hasConfirmed">
Create Group
</button>
<button
v-if="page >= 2"
class="btn btn-light btn-block font-weight-bold rounded-pill border mt-4"
@click="prevPage">
Back
</button>
<div v-if="maxPage > 2" class="mt-4">
<p v-if="name && name.length">
<span class="text-lighter">Name:</span>
<span class="font-weight-bold">{{ name }}</span>
</p>
<p v-if="description && description.length">
<span class="text-lighter">Description:</span>
<span>{{ description }}</span>
</p>
<p v-if="membership && membership.length">
<span class="text-lighter">Membership:</span>
<span class="text-capitalize">{{ membership }}</span>
</p>
<p v-if="category && category.length">
<span class="text-lighter">Category:</span>
<span class="text-capitalize">{{ category }}</span>
</p>
</div>
</div> -->
</div>
</div>
</div>
</template>
<script type="text/javascript">
import TextInput from '@/groups/partials/CreateForm/TextInput.vue';
import SelectInput from '@/groups/partials/CreateForm/SelectInput.vue';
import TextAreaInput from '@/groups/partials/CreateForm/TextAreaInput.vue';
import CheckboxInput from '@/groups/partials/CreateForm/CheckboxInput.vue';
export default {
components: {
"text-input": TextInput,
"select-input": SelectInput,
"text-area-input": TextAreaInput,
"checkbox-input": CheckboxInput,
},
data() {
return {
hide: true,
name: null,
page: 1,
maxPage: 1,
description: null,
membership: "placeholder",
submitting: false,
categories: [],
category: "",
limit: {
name: {
max: 60
},
description: {
max: 500
}
},
configuration: {
types: {
text: true,
photos: true,
videos: true,
// events: false,
polls: true
},
federation: true,
adult: false,
discoverable: false,
autospam: false,
dms: false,
slowjoin: {
enabled: false,
age: 90,
limit: {
post: 1,
comment: 20,
threads: 2,
likes: 5,
hashtags: 5,
mentions: 1,
autolinks: 1
}
}
},
hasConfirmed: false,
permissionChecked: false,
membershipCategories: [
{ key: 'Public', value: 'public' },
{ key: 'Private', value: 'private' },
{ key: 'Local', value: 'local' },
],
}
},
mounted() {
this.permissionCheck();
this.fetchCategories();
},
methods: {
permissionCheck() {
axios.post('/api/v0/groups/permission/create')
.then(res => {
if(res.data.permission == false) {
swal('Limit reached', 'You cannot create any more groups', 'error');
this.hide = true;
} else {
this.hide = false;
}
this.permissionChecked = true;
});
},
submit($event) {
$event.preventDefault();
this.submitting = true;
axios.post('/api/v0/groups/create', {
name: this.name,
description: this.description,
membership: this.membership
}).then(res => {
console.log(res.data);
window.location.href = res.data.url;
}).catch(err => {
console.log(err.response);
})
},
fetchCategories() {
axios.get('/api/v0/groups/categories/list')
.then(res => {
this.categories = res.data.map(c => {
return {
key: c,
value: c
}
});
})
},
createGroup() {
axios.post('/api/v0/groups/create', {
name: this.name,
description: this.description,
membership: this.membership,
configuration: this.configuration
})
.then(res => {
console.log(res.data);
location.href = res.data.url;
})
},
handleUpdate(key, val) {
this[key] = val;
}
}
}
</script>
<style lang="scss">
.create-group-component {
.submit-button {
width: 130px;
}
.multistep {
margin-top: 30px;
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
text-align: center;
padding-left: 0;
}
.multistep li {
list-style-type: none;
text-transform: uppercase;
font-size: 9px;
font-weight: 700;
width: 20%;
float: left;
position: relative;
color: #B8C2CC;
}
.multistep li.active {
color: #000;
}
.multistep li:before {
content: counter(step);
counter-increment: step;
width: 24px;
height: 24px;
line-height: 26px;
display: block;
font-size: 12px;
color: #B8C2CC;
background: #F3F4F6;
border-radius: 25px;
margin: 0 auto 10px auto;
transition: background 400ms;
}
.multistep li:after {
content: '';
width: 100%;
height: 2px;
background: #dee2e6;
position: absolute;
left: -50%;
top: 11px;
z-index: -1;
transition: background 400ms;
}
.multistep li:first-child:after {
content: none;
}
.multistep li.active:before,
.multistep li.active:after {
background: #2c78bf;
color: white;
transition: background 400ms;
}
.col-form-label {
font-weight: 600;
text-align: right;
}
}
</style>