first commit

ui/src/router/views/login.vue

@@ -0,0 +1,92 @@
+<script>
+import Layout from '@layouts/main.vue'
+import { authMethods } from '@state/helpers'
+import appConfig from '@src/app.config'
+import store from '@state/store'
+
+export default {
+  page: {
+    title: 'Log in',
+    meta: [{ name: 'description', content: `Log in to ${appConfig.title}` }],
+  },
+  components: { Layout },
+  data() {
+    return {
+      username: '',
+      password: '',
+      authError: null,
+      tryingToLogIn: false,
+    }
+  },
+  computed: {
+    placeholders() {
+      return process.env.NODE_ENV === 'production'
+        ? {}
+        : {
+            username: 'Enter your username',
+            password: 'Enter your password',
+          }
+    },
+  },
+  mounted() {
+    // console.log(process.env.API_BASE_URL)
+  },
+  methods: {
+    ...authMethods,
+    // Try to log the user in with the username
+    // and password they provided.
+    tryToLogIn() {
+      this.tryingToLogIn = true
+      // Reset the authError if it existed.
+      this.authError = null
+      return this.logIn({
+        username: this.username,
+        password: this.password,
+      })
+        .then((token) => {
+          this.tryingToLogIn = false
+          store.dispatch('users/me').then((data) => {
+            this.$router.push(this.$route.query.redirectFrom || { name: 'home' })
+          })
+          // Redirect to the originally requested page, or to the home page
+        })
+        .catch((error) => {
+          this.tryingToLogIn = false
+          this.authError = error
+        })
+    },
+  },
+}
+</script>
+
+<template>
+  <Layout>
+    <form @submit.prevent="tryToLogIn">
+      <b-field label="Email">
+        <b-input
+          v-model="username"
+          tag="b-input"
+          name="username"
+          :placeholder="placeholders.username"
+      /></b-field>
+      <b-field label="Password">
+        <b-input
+          v-model="password"
+          tag="b-input"
+          name="password"
+          type="password"
+          :placeholder="placeholders.password"
+        />
+      </b-field>
+      <b-button tag="input" native-type="submit" :disabled="tryingToLogIn" type="is-primary">
+        <BaseIcon v-if="tryingToLogIn" name="sync" spin />
+        <span v-else>
+          Log in
+        </span>
+      </b-button>
+      <p v-if="authError">
+        There was an error logging in to your account.
+      </p>
+    </form>
+  </Layout>
+</template>