From 36297ba84036a7afbc0e511d06d6edf2803388f5 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 21 Oct 2019 17:45:35 +0900
Subject: [PATCH] Update BaseCard component

---
 frontend/components/molecules/BaseCard.vue  | 27 +++++++++---------
 frontend/components/organisms/LoginForm.vue | 31 ++++++++++-----------
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/frontend/components/molecules/BaseCard.vue b/frontend/components/molecules/BaseCard.vue
index 5f2ba0b3..1afa7f8c 100644
--- a/frontend/components/molecules/BaseCard.vue
+++ b/frontend/components/molecules/BaseCard.vue
@@ -1,18 +1,18 @@
 <template>
   <v-card>
-    <v-card-title class="grey lighten-2">
-      {{ title }}
-    </v-card-title>
-    <v-container grid-list-sm>
-      <v-layout wrap>
-        <v-flex xs12>
-          <slot name="content" />
-        </v-flex>
-      </v-layout>
-    </v-container>
+    <v-toolbar
+      color="primary white--text"
+      flat
+    >
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+    </v-toolbar>
+    <v-card-text class="text--primary mt-3 pl-4">
+      <slot name="content" />
+    </v-card-text>
     <v-card-actions>
       <v-spacer />
       <v-btn
+        v-if="cancelText"
         class="text-capitalize"
         text
         color="primary"
@@ -22,6 +22,7 @@
         {{ cancelText }}
       </v-btn>
       <v-btn
+        v-if="agreeText"
         class="text-none"
         text
         :disabled="disabled"
@@ -44,13 +45,11 @@ export default {
     },
     cancelText: {
       type: String,
-      default: '',
-      required: true
+      default: ''
     },
     agreeText: {
       type: String,
-      default: '',
-      required: true
+      default: ''
     },
     disabled: {
       type: Boolean,
diff --git a/frontend/components/organisms/LoginForm.vue b/frontend/components/organisms/LoginForm.vue
index 9efa1476..8313070c 100644
--- a/frontend/components/organisms/LoginForm.vue
+++ b/frontend/components/organisms/LoginForm.vue
@@ -1,9 +1,11 @@
 <template>
-  <v-card class="elevation-12">
-    <v-toolbar color="primary" dark flat>
-      <v-toolbar-title>Login</v-toolbar-title>
-    </v-toolbar>
-    <v-card-text>
+  <base-card
+    title="Login"
+    agree-text="Login"
+    :disabled="!valid"
+    @agree="tryLogin"
+  >
+    <template #content>
       <v-form
         ref="form"
         v-model="valid"
@@ -26,24 +28,19 @@
           type="password"
         />
       </v-form>
-    </v-card-text>
-    <v-card-actions>
-      <div class="flex-grow-1" />
-      <v-btn
-        :disabled="!valid"
-        color="primary"
-        @click="tryLogin"
-      >
-        Login
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    </template>
+  </base-card>
 </template>
 
 <script>
 import { userNameRules, passwordRules } from '@/rules/index'
+import BaseCard from '@/components/molecules/BaseCard'
 
 export default {
+  components: {
+    BaseCard
+  },
+
   props: {
     login: {
       type: Function,