Skip to content

Commit 1c47f34

Browse files
NEKOYASANNEKOYASAN
committed
ログインメニューの作成
1 parent bb45e43 commit 1c47f34

File tree

1 file changed

+171
-69
lines changed

1 file changed

+171
-69
lines changed

‎src/pages/account/login.vue‎

Lines changed: 171 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,118 @@
11
<template>
2-
<div class="LoginPage">
3-
<v-flex>
4-
<div class="Logo">
5-
<Logo style="height: 80vw; max-height: 350px; width: 100%;" />
6-
</div>
7-
<div class="LoginForm">
8-
<v-form>
9-
<v-text-field
10-
v-model="email"
11-
:counter="32"
12-
label="email"
13-
outlined
14-
dark
15-
prepend-icon="mdi-email"
16-
/>
17-
<v-text-field
18-
v-model="password"
19-
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
20-
:type="showPassword ? 'text' : 'password'"
21-
:counter="32"
22-
label="Password"
23-
outlined
24-
dark
25-
prepend-icon="mdi-lock"
26-
@click:append="showPassword = !showPassword"
27-
/>
28-
<v-btn
29-
block
30-
outlined
31-
color="white"
32-
height="40px"
33-
:loading="loading"
34-
:disabled="loading"
35-
@click="doLogin"
36-
>
37-
LOGIN
38-
</v-btn>
39-
</v-form>
40-
</div>
41-
</v-flex>
42-
</div>
2+
<v-bottom-sheet
3+
v-model="sheet"
4+
class="sheet"
5+
fullscreen
6+
hide-overlay
7+
persistent
8+
>
9+
<v-card class="card">
10+
<v-card-title class="card-title" />
11+
<v-card-text class="card-text">
12+
<v-container class="container">
13+
<v-layout align-center="true" column>
14+
<v-row>
15+
<h2 class="english-title">
16+
LOGIN
17+
</h2>
18+
</v-row>
19+
<v-row>
20+
<h1 class="japanese-title">
21+
ログインしてください
22+
</h1>
23+
</v-row>
24+
<div class="divider" />
25+
<v-row class="row-input">
26+
<h3 class="input-title">
27+
メールアドレス
28+
</h3>
29+
<InputField
30+
v-model="email"
31+
class="input-field"
32+
label="メールアドレス"
33+
require
34+
type="email"
35+
/>
36+
</v-row>
37+
<v-row class="row-input">
38+
<h3 class="input-title">
39+
パスワード
40+
</h3>
41+
<InputField
42+
v-model="password"
43+
class="input-field"
44+
label="パスワード"
45+
require
46+
type="password"
47+
/>
48+
</v-row>
49+
50+
<v-row class="row-input">
51+
<v-btn
52+
:disabled="disableLogin"
53+
:loading="loading"
54+
block
55+
class="button"
56+
color="#FFDB6C"
57+
height="60px"
58+
rounded
59+
@click="doLogin"
60+
>
61+
ログインする
62+
</v-btn>
63+
</v-row>
64+
<v-row class="row">
65+
<v-btn
66+
:disabled="loading"
67+
block
68+
class="button"
69+
color="#ffffff"
70+
height="60px"
71+
text
72+
to="/"
73+
>
74+
パスワードを忘れた方へ
75+
</v-btn>
76+
</v-row>
77+
</v-layout>
78+
</v-container>
79+
</v-card-text>
80+
</v-card>
81+
</v-bottom-sheet>
4382
</template>
4483

4584
<script lang="ts">
4685
import Vue from 'vue'
47-
import { vxm } from '@/store'
48-
import firebase from '@/plugins/firebase'
49-
import Logo from '@/assets/svgs/logo.svg'
86+
import firebase from '~/plugins/firebase'
87+
import { vxm } from '~/store'
88+
import InputField from '@/components/InputField.vue'
5089
5190
export type DataType = {
5291
email: string
5392
password: string
54-
showPassword: boolean
5593
loading: boolean
94+
sheet: boolean
5695
}
5796
5897
export default Vue.extend({
5998
components: {
60-
Logo
99+
InputField
61100
},
62101
data(): DataType {
63102
return {
64103
email: '',
65104
password: '',
66-
showPassword: false,
67-
loading: false
105+
loading: false,
106+
sheet: true
107+
}
108+
},
109+
computed: {
110+
disableLogin(): boolean {
111+
return !(
112+
this.email &&
113+
this.password &&
114+
this.email.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)
115+
)
68116
}
69117
},
70118
methods: {
@@ -87,26 +135,80 @@ export default Vue.extend({
87135
</script>
88136

89137
<style lang="scss" scoped>
90-
.LoginPage {
91-
text-align: center;
92-
.Logo {
93-
text-align: center;
94-
}
95-
.LoginTitle {
96-
color: #fff;
97-
font-family: 'Noto Sans JP', sans-serif;
98-
font-size: 5em;
99-
}
100-
.DataBlock {
101-
margin: 0 -12px;
102-
.studycard {
103-
margin-bottom: 20px;
104-
}
105-
}
106-
.LoginForm {
107-
width: 90%;
108-
max-width: 600px;
109-
margin: 50px auto;
110-
}
138+
.sheet {
139+
margin-top: 40px !important;
140+
}
141+
.card {
142+
background-color: $color-base-color-07;
143+
border-radius: 24px 24px 0 0 !important;
144+
}
145+
146+
.card-title {
147+
padding: 8px !important;
148+
}
149+
.card-text {
150+
padding: 0 !important;
151+
}
152+
153+
.container {
154+
padding: 0 16px 16px;
155+
}
156+
157+
.row {
158+
margin: 0;
159+
padding: 0;
160+
}
161+
162+
.row-input {
163+
padding: 0;
164+
width: 100%;
165+
max-width: 640px;
166+
margin: 10px 0 30px 0;
167+
}
168+
169+
.col {
170+
padding: 0;
171+
}
172+
173+
.message {
174+
align-self: center;
175+
color: $color-white !important;
176+
}
177+
178+
.add-button {
179+
align-self: start;
180+
float: right;
181+
}
182+
.english-title {
183+
color: $color-white;
184+
font-weight: bold;
185+
font-size: 15px;
186+
line-height: 20px;
187+
margin: 10px auto;
188+
}
189+
.japanese-title {
190+
color: $color-white;
191+
font-weight: bold;
192+
font-size: 20px;
193+
line-height: 34px;
194+
}
195+
.input-title {
196+
color: $color-white;
197+
font-weight: bold;
198+
font-size: 15px;
199+
line-height: 34px;
200+
margin: 0 auto;
201+
}
202+
.divider {
203+
width: 90vw;
204+
margin: 10px 0 50px 0;
205+
border: 0.5px solid $color-base-color-01;
206+
}
207+
.input-field {
208+
width: 100%;
209+
}
210+
.button {
211+
font-size: 16px;
212+
font-weight: bold;
111213
}
112214
</style>

0 commit comments

Comments
 (0)