PluralKit/web/app/SystemEditPage.vue

<template>
    <b-container>
        <b-container v-if="loading" class="d-flex justify-content-center"><b-spinner class="m-5"></b-spinner></b-container>
        <b-form v-else>
            <h1>Editing "{{ system.name || system.id }}"</h1>
            <b-form-group label="System name">
                <b-form-input v-model="system.name" placeholder="Enter something..."></b-form-input>
            </b-form-group>

            <b-form-group label="Description">
                <b-form-textarea v-model="system.description" placeholder="Enter something..." rows="3" max-rows="3" maxlength="1000"></b-form-textarea>
            </b-form-group>

            <b-form-group label="System tag">
                <b-form-input maxlength="30" v-model="system.tag" placeholder="Enter something..."></b-form-input>
                <template v-slot:description>
                    This is added to the names of proxied accounts. For example: <code>John {{ system.tag }}</code>
                </template>
            </b-form-group>

            <b-form-group class="d-flex justify-content-end">
                <b-button type="reset" variant="outline-secondary">Back</b-button>
                <b-button v-if="!saving" type="submit" variant="primary" v-on:click="save">Save</b-button>
                <b-button v-else variant="primary" disabled>
                    <b-spinner small></b-spinner>
                    <span class="sr-only">Saving...</span>
                </b-button>
            <b-form-group>
        </b-form>
    </b-container>
</template>

<script>
import BButton from 'bootstrap-vue/es/components/button/button';
import BContainer from 'bootstrap-vue/es/components/layout/container';
import BLink from 'bootstrap-vue/es/components/link/link';
import BSpinner from 'bootstrap-vue/es/components/spinner/spinner';
import BForm from 'bootstrap-vue/es/components/form/form';
import BFormInput from 'bootstrap-vue/es/components/form-input/form-input';
import BFormGroup from 'bootstrap-vue/es/components/form-group/form-group';
import BFormTextarea from 'bootstrap-vue/es/components/form-textarea/form-textarea';

import API from "./API";

export default {
    data() {
        return {
            loading: false,
            saving: false,
            system: null
        }
    },
    props: ["me", "id"],
    created() {
        this.fetch()
    },
    watch: {
        "id": "fetch"
    },
    methods: {
        async fetch() {
            this.loading = true;
            this.system = await API.fetchSystem(this.id);
            if (!this.me || !this.system || this.system.id != this.me.id) {
                this.$router.push({name: "system", params: {id: this.id}});
            }
            this.loading = false;
        },
        async save() {
            this.saving = true;
            if (await API.saveSystem(this.system)) {
                this.$router.push({ name: "system", params: {id: this.system.id} });
            }
            this.saving = false;
        }
    },
    components: {BButton, BContainer, BLink, BSpinner, BForm, BFormGroup, BFormInput, BFormTextarea}
}
</script>

<style>

</style>