AWS Amplifyを使ってサインインを実装する

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<style lang="sass" scoped>
.about
  text-align: center
</style>

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/signin">Sign in</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  color: #2c3e50;
}
#nav {
  text-align: center;
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

Home.vue

<template>
  <div class="home">
    <div>
      <img alt="Vue logo" src="../assets/logo.png" />
      <HelloWorld msg="Welcome to Your Vue.js App" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  }
};
</script>
<style lang="sass" scoped>
.home
  text-align: center
</style>

router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    },
    {
      path: "/signin",
      name: "signin",
      component: () => import("./views/Signin.vue")
    }
  ]
});

Signin.vue

<template>
  <vs-row vs-justify="center">
    <vs-col type="flex" vs-lg="6" vs-xs="10">
      <vs-card fixedHeight>
        <div slot="header">
          <h3>
            Sign in
          </h3>
        </div>
        <div class="centerx">
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="email"
                label-placeholder="email"
                v-model="userInfo.email"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="password"
                label-placeholder="Password"
                v-model="userInfo.password"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-button class="signin" @click="signin">Sign in</vs-button>
            </vs-col>
          </vs-row>
          <div slot="footer" class="error-message">
            {{ this.errorMessage }}
          </div>
        </div>
      </vs-card>
    </vs-col>
  </vs-row>
</template>
<script>
export default {
  name: "signin",
  data() {
    return {
      userInfo: {
        email: "",
        password: ""
      },
      errorMessage: ""
    };
  },
  methods: {
    signin() {
      this.$Amplify.Auth.signIn(this.userInfo.email, this.userInfo.password)
        .then(user => console.log(user))
        .catch(err => {
          console.log(err);
          this.errorMessage = "サインインできませんでした";
        });
    }
  }
};
</script>
<style lang="sass" scoped>
.centerx
  display: flex
  align-items: center
  justify-content: center
  flex-wrap: wrap

.input
  width:100%
  padding: 16px 64px

.signin
  width: calc(100% - 64px * 2)
  padding: 16px 0
  margin: 32px 64px 0

.error-message
  color: #FF0000
  margin: 32px 64px
</style>