flaschengeist-frontend/src/plugins/user/components/settings/MainUserSettings.vue

<template>
  <q-form @submit="save" @reset="reset">
    <q-linear-progress indeterminate rounded color="primary" v-if="loading" />
    <q-card-section class="fit row justify-start content-center items-center">
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Vorname"
        :rules="[notEmpty]"
        v-model="props.user.firstname"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Nachname"
        :rules="[notEmpty]"
        v-model="props.user.lastname"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Benutzername"
        readonly
        :value="props.user.userid"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="E-Mail"
        :rules="[isEmail, notEmpty]"
        v-model="props.user.mail"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Display Name"
        :rules="[notEmpty]"
        v-model="props.user.display_name"
        filled
      />
      <q-select
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Rollen"
        filled
        multiple
        use-chips
        v-model="props.user.roles"
        :readonly="() => canSetRoles()"
        :options="allRoles"
        option-label="name"
        option-value="name"
      />
    </q-card-section>
    <q-separator />
    <q-card-section class="fit row justify-start content-center items-center">
      <q-input
        v-if="isCurrentUser"
        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
        label="Password"
        type="password"
        hint="Password muss immer eingetragen werden"
        :rules="[notEmpty]"
        v-model="password"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
        label="Neues Password"
        type="password"
        v-model="new_password"
        filled
      />
      <q-input
        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
        label="Wiederhole neues Password"
        type="password"
        :disable="new_password.length == 0"
        :rules="[samePassword]"
        v-model="new_password2"
        filled
      />
    </q-card-section>
    <q-card-actions align="right">
      <q-btn label="Reset" type="reset" />
      <q-btn color="primary" type="submit" label="Speichern" />
    </q-card-actions>
  </q-form>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  ref,
  onBeforeMount
} from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { hasPermission } from 'src/components/permission';

interface Props {
  user?: FG.User;
}

export default defineComponent({
  name: 'MainUserSettings',
  props: ['user'],
  setup(props: Props, { root }) {
    const store = <Store<StateInterface>>root.$store;

    onBeforeMount(() => {
      store.dispatch('user/getRoles', false).catch(error => {
        console.warn(error);
      });
    });

    const isCurrentUser = computed(
      () => props.user?.userid === store.state.user.currentUser?.userid
    );

    const canSetRoles = computed(() => hasPermission('users_set_roles', store));

    const oldUser = computed(() => {
      if (isCurrentUser.value) return <FG.User>store.state.user.currentUser;
      else
        return store.state.user.users.filter(user => {
          user.userid === props.user?.userid;
        })[0];
    });

    const allRoles = computed(() =>
      store.state.user.roles.map(role => role.name)
    );
    const password = ref('');
    const new_password = ref('');
    const new_password2 = ref('');

    function save() {
      let changed = <FG.User>props.user;
      changed = Object.assign(changed, {
        password: password.value
      });
      if (new_password.value != '') {
        changed = Object.assign(changed, {
          new_password: new_password.value
        });
      }
      store.dispatch('user/updateUser', changed).catch(error => {
        console.warn(error);
      });
    }

    function reset() {
      props.user = oldUser.value;
      password.value = '';
      new_password.value = '';
      new_password2.value = '';
    }

    function samePassword(val: string) {
      return val == new_password.value || 'Passwörter sind nicht identisch!';
    }

    function notEmpty(val: string) {
      return !!val || 'Feld darf nicht leer sein!';
    }

    function isEmail(val: string | null) {
      return (
        !val ||
        /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w\w+)+$/.test(val) ||
        'E-Mail ist nicht valide.'
      );
    }

    const loading = computed(() => store.state.user.loading > 0);

    return {
      props,
      allRoles,
      canSetRoles,
      password,
      new_password,
      new_password2,
      samePassword,
      isCurrentUser,
      isEmail,
      notEmpty,
      save,
      reset,
      loading
    };
  }
});
</script>