mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-09-20 00:08:01 +00:00
360 lines
10 KiB
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>
|