new.vue

<!--
Copyright 2017 ODK Central Developers
See the NOTICE file at the top-level directory of this distribution and at
https://github.com/getodk/central-frontend/blob/master/NOTICE.

This file is part of ODK Central. It is subject to the license terms in
the LICENSE file found in the top-level directory of this distribution and at
https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
including this file, may be copied, modified, propagated, or distributed
except according to the terms contained in the LICENSE file.
-->
<template>
  <modal id="user-new" :state="state" :hideable="!awaitingResponse" backdrop
    @hide="$emit('hide')" @shown="focusEmailInput">
    <template #title>{{ $t('title') }}</template>
    <template #body>
      <p class="modal-introduction">
        {{ !config.oidcEnabled ? $t('introduction[0]') : $t('oidcIntroduction[0]') }}
      </p>
      <form @submit.prevent="submit">
        <form-group ref="email" v-model.trim="email" type="email"
          :placeholder="$t('field.email')" required autocomplete="off"/>
        <form-group v-model.trim="displayName" type="text"
          :placeholder="$t('field.displayName')" autocomplete="off"/>
        <div class="modal-actions">
          <button type="submit" class="btn btn-primary"
            :aria-disabled="awaitingResponse">
            {{ $t('action.create') }} <spinner :state="awaitingResponse"/>
          </button>
          <button type="button" class="btn btn-link"
            :aria-disabled="awaitingResponse" @click="$emit('hide')">
            {{ $t('action.cancel') }}
          </button>
        </div>
      </form>
    </template>
  </modal>
</template>

<script>
import { equals } from 'ramda';

import FormGroup from '../form-group.vue';
import Modal from '../modal.vue';
import Spinner from '../spinner.vue';

import useRequest from '../../composables/request';
import { noop } from '../../util/util';

export default {
  name: 'UserNew',
  components: { FormGroup, Modal, Spinner },
  inject: ['config'],
  props: {
    state: {
      type: Boolean,
      default: false
    }
  },
  emits: ['hide', 'success'],
  setup() {
    const { request, awaitingResponse } = useRequest();
    return { request, awaitingResponse };
  },
  data() {
    return {
      email: '',
      displayName: ''
    };
  },
  watch: {
    state(state) {
      if (state) return;
      this.email = '';
      this.displayName = '';
    }
  },
  methods: {
    focusEmailInput() {
      this.$refs.email.focus();
    },
    submit() {
      const postData = { email: this.email };
      if (this.displayName !== '') postData.displayName = this.displayName;
      this.request({
        method: 'POST',
        url: '/v1/users',
        data: postData,
        problemToAlert: ({ code, details }) =>
          (code === 409.3 && equals(details.fields, ['email', 'deleted'])
            ? this.$t('problem.409_3', { email: details.values[0] })
            : null)
      })
        .then(response => {
          this.$emit('success', response.data);
        })
        .catch(noop);
    }
  }
};
</script>

<i18n lang="json5">
{
  "en": {
    // This is the title at the top of a pop-up.
    "title": "Create Web User",
    "introduction": [
      "Once you create this account, the email address you provide will be sent instructions on how to set a password and proceed."
    ],
    "oidcIntroduction": [
      "Users on your login server must have a Central account to log in to Central. Once you create this account, the user on your login server with the email address you provide will be able to log in to Central."
    ],
    "problem": {
      "409_3": "It looks like {email} already has an account. Please try another email address."
    }
  }
}
</i18n>

<!-- Autogenerated by destructure.js -->
<i18n>
{
  "cs": {
    "title": "Vytvořit webového uživatele",
    "introduction": [
      "Po vytvoření tohoto účtu vám bude zaslána e-mailová adresa, kterou zadáte, s pokyny, jak nastavit heslo a jak pokračovat."
    ],
    "oidcIntroduction": [
      "Uživatelé na přihlašovacím serveru musí mít účet Central, aby se mohli přihlásit do Central. Jakmile tento účet vytvoříte, bude se uživatel na přihlašovacím serveru s vámi zadanou e-mailovou adresou moci přihlásit do Centralu."
    ]
  },
  "de": {
    "title": "Web-Benutzer anlegen",
    "introduction": [
      "Sobald Sie dieses Benutzerkonto angelegt haben, senden wir eine Email mit weiteren Schritten zur Passworterstellung an die angegebene E-Mail-Adresse."
    ],
    "oidcIntroduction": [
      "Benutzer auf Ihrem Anmeldeserver müssen über ein Central-Konto verfügen, um sich bei Central anzumelden. Sobald Sie dieses Konto erstellt haben, kann sich der Benutzer auf Ihrem Anmeldeserver mit der von Ihnen angegebenen E-Mail-Adresse bei Central anmelden."
    ]
  },
  "es": {
    "title": "Crear usuario web",
    "introduction": [
      "Al crear esta cuenta, se enviarán al correo electrónico que ha proporcionado las instrucciones para establecer una contraseña y cómo proceder."
    ],
    "oidcIntroduction": [
      "Los usuarios de su servidor de inicio de sesión deben tener una cuenta de Central para iniciar sesión en Central. Una vez que cree esta cuenta, el usuario en su servidor de inicio de sesión con la dirección de correo electrónico que proporcione podrá iniciar sesión en Central."
    ]
  },
  "fr": {
    "title": "Créer un utilisateur web",
    "introduction": [
      "Une fois que vous aurez créé ce compte, l'adresse de courriel que vous aurez fournie recevra des instructions sur la manière de définir un mot de passe et de procéder."
    ],
    "oidcIntroduction": [
      "Les utilisateurs de votre serveur de connexion doivent avoir un compte Central pour se connecter à Central. Une fois ce compte créé, l'utilisateur de votre serveur de connexion ayant cette adresse de courriel pourra se connecter à Central."
    ],
    "problem": {
      "409_3": "Il semblerait que {email} dispose déjà d'un compte. Merci d'essayer une autre adresse de courriel."
    }
  },
  "id": {
    "title": "Buat Pengguna Web",
    "introduction": [
      "Setelah Anda membuat akun, instruksi untuk mengatur kata sandi dan tahap selanjutnya akan dikirimkan ke alamat email yang Anda sediakan."
    ]
  },
  "it": {
    "title": "Crea un Utente Web",
    "introduction": [
      "Una volta creato questo account, all'indirizzo email fornito verranno inviate le istruzioni su come impostare una password e procedere."
    ],
    "oidcIntroduction": [
      "Gli utenti del server di accesso devono avere un account Central per accedere a Central. Una volta creato questo account, l'utente del server di accesso con l'indirizzo e-mail fornito potrà accedere a Central."
    ],
    "problem": {
      "409_3": "Sembra che {email} abbia già un account. Per favore, prova un altro indirizzo email."
    }
  },
  "ja": {
    "title": "Webユーザーの作成",
    "introduction": [
      "このアカウントを作成すると、登録したメールアドレスにパスワード設定方法と今後の手順を記載したメールが送信されます。"
    ]
  },
  "sw": {
    "title": "Unda Mtumiaji wa Wavuti",
    "introduction": [
      "Ukishafungua akaunti hii, barua pepe utakayotoa itatumiwa maelekezo ya jinsi ya kuweka nenosiri na kuendelea."
    ],
    "oidcIntroduction": [
      "Watumiaji kwenye seva yako ya kuingia lazima wawe na akaunti ya Kati ili kuingia Kati. Mara tu unapofungua akaunti hii, mtumiaji kwenye seva yako ya kuingia na anwani ya barua pepe unayotoa ataweza kuingia kwenye Central."
    ]
  }
}
</i18n>