typescript-vue-shared.fixture

/// src/component/LoginView.vue
<template>
  <logged-in v-if="user" :user="user" @logout="logout"></logged-in>
  <login-form v-else @login="login"></login-form>
</template>

<script lang="ts">
import LoginForm from "@/component/LoginForm.vue";
import LoggedIn from "@/component/LoggedIn.vue";
import User from "@/model/User";

export default {
  data() {
    return {
      user: null
    }
  },
  components: {
    LoginForm,
    LoggedIn
  },
  login(user: User) {
    this.user = user;
  },
  logout() {
    this.user = null;
  }
}
</script>

/// src/component/LoginForm.vue
<template>
  <form @submit="login">
    <h1>Login form</h1>

    <input v-model="email" name="email" type="email" />
    <input v-model="password" name="password" type="password" />

    <qrcode-vue :value="url"></qrcode-vue>

    <button type="submit" v-bind:disabled="pending">Login</button>
  </form>
</template>

<script lang="ts">
import QrcodeVue from "qrcode.vue";

export default {
  data() {
    return {
      email: '',
      password: '',
      pending: false
    }
  },
  components: {
    QrcodeVue
  },
  async login() {
    try {
      this.pending = true;
      const response = await fetch(
        '/login',
        {
          method: 'POST',
          body: JSON.stringify({
            email: this.email,
            password: this.password
          })
        }
      );
    } catch (error) {
      console.error(error);
    } finally {
      this.pending = false;
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>

/// src/component/LoggedIn.vue
<template>
  <p>
    Hello {userName}!
    <button type="button" v-bind:disabled="pending" v-on:click="logout">Logout</button>
  </p>
</template>

<script lang="ts">
import User, { getUserName } from '@/model/User';

export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      pending: false
    }
  },
  computed: {
    userName() {
      const user: User = this.user;

      return user ? getUserName(user) : '';
    }
  },
  async logout() {
    try {
      this.pending = true;
      await fetch('/logout');
    } catch (error) {
      console.error(error);
    } finally {
      this.pending = false;
    }
  }
}
</script>

<style scoped>
p {
  font-size: 14pt;
}
</style>

/// src/model/User.ts
import Role from './Role';

type User = {
  id: string;
  email: string;
  role: Role;
  firstName?: string;
  lastName?: string;
}

function getUserName(user: User): string {
  return [user.firstName, user.lastName]
    .filter(name => name !== undefined)
    .join(' ');
}

export default User;
export { getUserName };

/// src/model/Role.ts
type Role = "admin" | "client" | "provider";

export default Role;