<template>
  <q-card class="12">
    <q-card-section class="fit row justify-start content-center items-center">
      <div class="col-xs-12 col-sm-6 text-center text-h6">Neues Mitglied</div>
    </q-card-section>
    <q-card-section>
      <MainUserSettings :user="user" :new-user="true" @update:user="setUser" />
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import MainUserSettings from 'src/plugins/user/components/settings/MainUserSettings.vue';
import { useStore } from 'vuex';
import { UserSessionState } from '../store';

export default defineComponent({
  name: 'NewUser',
  components: { MainUserSettings },
  setup() {
    const store = useStore<UserSessionState>();
    const user = ref<FG.User>({
      userid: '',
      display_name: '',
      firstname: '',
      lastname: '',
      mail: '',
      roles: [],
    });
    function setUser(value: FG.User) {
      store.dispatch('users/setUser', value).catch((error) => {
        console.warn(error);
      });
    }
    return { user, setUser };
  },
});
</script>

<style scoped></style>
