init 2

frontend/src/components/UI/Login.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="text-center">
+    <v-btn icon @click="showLogin = true">
+      <v-icon>mdi-account</v-icon>
+    </v-btn>
+    <v-dialog v-model="showLogin" width="500">
+      <v-flex class="login-form text-xs-center">
+        <v-card>
+          <v-card-text>
+            <v-form>
+              <v-text-field
+                v-if="!options.isLoggingIn"
+                v-model="user.name"
+                light="light"
+                prepend-icon="person"
+                label="Name"
+              ></v-text-field>
+              <v-text-field
+                v-model="user.email"
+                light="light"
+                prepend-icon="mdi-email"
+                label="Email"
+                type="email"
+              ></v-text-field>
+              <v-text-field
+                v-model="user.password"
+                light="light"
+                prepend-icon="mdi-lock"
+                label="Password"
+                type="password"
+              ></v-text-field>
+              <v-checkbox
+                class="mb-2 mt-0"
+                v-if="options.isLoggingIn"
+                v-model="options.shouldStayLoggedIn"
+                light="light"
+                label="Stay logged in?"
+                hide-details="hide-details"
+              ></v-checkbox>
+              <v-btn
+                v-if="options.isLoggingIn"
+                @click.prevent="login"
+                dark
+                color="primary"
+                block="block"
+                type="submit"
+                >Sign in</v-btn
+              >
+              <v-btn
+                v-else
+                block="block"
+                type="submit"
+                @click.prevent="options.isLoggingIn = true"
+                >Sign up</v-btn
+              >
+            </v-form>
+          </v-card-text>
+          <!-- <v-card-actions v-if="options.isLoggingIn" class="card-actions">
+            Don't have an account?
+            <v-btn
+              color="primary"
+              light="light"
+              @click="options.isLoggingIn = false"
+            >
+              Sign up
+            </v-btn>
+          </v-card-actions> -->
+        </v-card>
+      </v-flex>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import api from "../../api";
+export default {
+  props: {},
+  data() {
+    return {
+      showLogin: false,
+      user: {
+        email: "",
+        password: "",
+      },
+      options: {
+        isLoggingIn: true,
+      },
+    };
+  },
+  methods: {
+    async login() {
+      let key = await api.login(this.user.email, this.user.password);
+    },
+  },
+};
+</script>
+
+<style>
+</style>