loginページをsignupページに合わせる

Author: NEKOYASAN

src/pages/account/login.vue

@@ -1,110 +1,69 @@
 <template>
-  <v-bottom-sheet
-    v-model="sheet"
-    class="sheet"
-    fullscreen
-    hide-overlay
-    persistent
-    scrollable
-  >
-    <v-card class="card">
-      <v-card-title class="card-title" />
-      <v-card-text class="card-text">
-        <v-container class="container">
-          <v-layout align-center="true" column>
-            <v-row>
-              <h2 class="english-title">
-                LOGIN
-              </h2>
-            </v-row>
-            <v-row>
-              <h1 class="japanese-title">
-                ログインしてください
-              </h1>
-            </v-row>
-            <div class="divider" />
-            <v-row class="row-input">
-              <h3 class="input-title">
-                メールアドレス
-              </h3>
-              <InputField
-                v-model="email"
-                class="input-field"
-                label="メールアドレス"
-                require
-                type="email"
-              />
-            </v-row>
-            <v-row class="row-input">
-              <h3 class="input-title">
-                パスワード
-              </h3>
-              <InputField
-                v-model="password"
-                class="input-field"
-                label="パスワード"
-                require
-                type="password"
-              />
-            </v-row>
-
-            <v-row class="row-input">
-              <v-btn
-                :disabled="disableLogin"
-                :loading="loading"
-                block
-                class="button"
-                color="#FFDB6C"
-                height="60px"
-                rounded
-                @click="doLogin"
-              >
-                ログインする
-              </v-btn>
-            </v-row>
-            <v-row class="row">
-              <v-btn
-                :disabled="loading"
-                block
-                class="button"
-                color="#ffffff"
-                height="60px"
-                text
-                to="/"
-              >
-                パスワードを忘れた方へ
-              </v-btn>
-            </v-row>
-          </v-layout>
-        </v-container>
-      </v-card-text>
-    </v-card>
-  </v-bottom-sheet>
+  <bottom-sheet-layer fullscreen title="ログインしてください" title-en="LOGIN">
+    <template v-slot:LayerContents>
+      <dl>
+        <dt class="SignIn-ItemTitle">メールアドレス</dt>
+        <dd class="SignIn-Item">
+          <input-field
+            v-model="email"
+            label="[email protected]"
+            require
+            type="email"
+          />
+        </dd>
+        <dt class="SignIn-ItemTitle">パスワード</dt>
+        <dd class="SignIn-Item">
+          <input-field
+            v-model="password"
+            label="パスワード"
+            require
+            type="password"
+          />
+        </dd>
+      </dl>
+    </template>
+    <template v-slot:LayerFooter>
+      <div class="SignIn-ButtonOuter">
+        <action-button
+          :is-disabled="disableLogin"
+          :is-loading="loading"
+          class="SignIn-Button"
+          text="ログイン"
+          theme="primary"
+          @onClick="doLogin"
+        />
+        <v-btn
+          :disabled="loading"
+          block
+          class="button"
+          color="#ffffff"
+          height="60px"
+          text
+          to="/"
+        >
+          <span>パスワードを忘れた方へ</span>
+        </v-btn>
+      </div>
+    </template>
+  </bottom-sheet-layer>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import firebase from '~/plugins/firebase'
-import { vxm } from '~/store'
+import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
+import ActionButton from '@/components/ActionButton.vue'
 import InputField from '@/components/InputField.vue'
-
-export type DataType = {
-  email: string
-  password: string
-  loading: boolean
-  sheet: boolean
-}
+import firebase from '@/plugins/firebase'
+import { vxm } from '~/store'
 
 export default Vue.extend({
-  components: {
-    InputField
-  },
-  data(): DataType {
+  components: { BottomSheetLayer, ActionButton, InputField },
+  layout: 'background',
+  data() {
     return {
       email: '',
       password: '',
-      loading: false,
-      sheet: true
+      loading: false
     }
   },
   computed: {
@@ -136,80 +95,20 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.sheet {
-  margin-top: 40px !important;
-}
-.card {
-  background-color: $color-base-color-07;
-  border-radius: 24px 24px 0 0 !important;
-}
-
-.card-title {
-  padding: 8px !important;
-}
-.card-text {
-  padding: 0 !important;
-}
-
-.container {
-  padding: 0 16px 16px;
-}
-
-.row {
-  margin: 0;
-  padding: 0;
-}
-
-.row-input {
-  padding: 0;
-  width: 100%;
-  max-width: 640px;
-  margin: 10px 0 20px 0;
-}
-
-.col {
-  padding: 0;
-}
-
-.message {
-  align-self: center;
-  color: $color-white !important;
-}
-
-.add-button {
-  align-self: start;
-  float: right;
-}
-.english-title {
-  color: $color-white;
-  font-weight: bold;
-  font-size: 15px;
-  line-height: 20px;
-  margin: 10px auto;
-}
-.japanese-title {
-  color: $color-white;
+.SignIn-ItemTitle {
+  font-size: 16px;
   font-weight: bold;
-  font-size: 20px;
-  line-height: 34px;
-}
-.input-title {
   color: $color-white;
-  font-weight: bold;
-  font-size: 15px;
-  line-height: 34px;
-  margin: 0 auto;
+  text-align: center;
+  margin: 4px 0;
 }
-.divider {
-  width: 90vw;
-  margin: 10px 0 20px 0;
-  border: 0.5px solid $color-base-color-01;
+.SignIn-Item {
+  margin: 20px 0;
 }
-.input-field {
-  width: 100%;
+.SignIn-ButtonOuter {
+  justify-content: space-between;
 }
-.button {
-  font-size: 16px;
-  font-weight: bold;
+.SignIn-Button {
+  flex: 0 1 48%;
 }
 </style>