pixelfed/resources/assets/components/groups/CreateGroup.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>