Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 | 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 3x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 3x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<v-card class="mx-auto" :max-width="520" elevation="8">
<v-card-title class="text-h6 font-weight-bold">
{{ currentTab === 'login' ? 'ログイン' : 'アカウント登録' }}
</v-card-title>
<!-- タブ見出し -->
<v-tabs v-model="currentTab" bg-color="transparent" grow :density="isMobile ? 'compact' : 'default'">
<v-tab
value="login"
variant="text"
rounded="0"
class="text-body-1 font-weight-medium"
text="ログイン"
/>
<v-tab
value="register"
variant="text"
rounded="0"
class="text-body-1 font-weight-medium"
text="新規登録"
/>
</v-tabs>
<v-divider />
<!-- タブの中身 -->
<v-window v-model="currentTab">
<!-- ログイン -->
<v-window-item value="login">
<v-card-text>
<v-row>
<v-col cols="5" class="d-flex flex-column justify-center align-center">
<v-btn
variant="text"
prepend-icon="mdi-google"
@click="$emit('oauth', 'google')"
>
Google で続行
</v-btn>
</v-col>
<v-divider vertical />
<v-col cols="7">
<v-form @submit.prevent="submitLogin" v-model="login.valid">
<v-text-field
v-model="login.email"
label="メールアドレス"
type="email"
autocomplete="email"
:rules="[rules.required, rules.email]"
prepend-inner-icon="mdi-email-outline"
/>
<v-text-field
v-model="login.password"
label="パスワード"
type="password"
autocomplete="current-password"
:rules="[rules.required]"
prepend-inner-icon="mdi-lock-outline"
/>
<div class="d-flex justify-space-between align-center mt-2">
<v-checkbox v-model="login.remember" label="ログイン情報を保存" density="compact" hide-details />
</div>
<v-btn
class="mt-4"
type="submit"
color="primary"
block
:loading="loading"
:disabled="!login.valid"
>
ログイン
</v-btn>
<!-- <v-btn variant="text" size="small" @click="$emit('forgot-password')">パスワードをお忘れですか？</v-btn>-->
</v-form>
</v-col>
</v-row>
</v-card-text>
</v-window-item>
<!-- 新規登録 -->
<v-window-item value="register">
<v-card-text>
<v-form @submit.prevent="submitRegister" v-model="register.valid">
<v-text-field
v-model="register.name"
label="氏名"
:rules="[rules.required]"
autocomplete="name"
prepend-inner-icon="mdi-account-outline"
/>
<v-text-field
v-model="register.email"
label="メールアドレス"
type="email"
:rules="[rules.required, rules.email]"
autocomplete="email"
prepend-inner-icon="mdi-email-outline"
/>
<v-text-field
v-model="register.password"
label="パスワード"
type="password"
:rules="[rules.required, (v)=>rules.minLen(v, 8)]"
autocomplete="new-password"
prepend-inner-icon="mdi-lock-outline"
/>
<v-text-field
v-model="register.passwordConfirm"
label="パスワード（確認）"
type="password"
:rules="[rules.required, (v)=>rules.same(v, register.password, 'パスワードが一致しません')]"
autocomplete="new-password"
prepend-inner-icon="mdi-lock-check-outline"
/>
<v-btn
class="mt-4"
type="submit"
color="primary"
block
:loading="loading"
:disabled="!register.valid"
>
アカウントを作成
</v-btn>
</v-form>
</v-card-text>
</v-window-item>
</v-window>
<v-divider />
</v-card>
</template>
<script setup lang="ts">
// region Dependency Injection
import {computed, ref} from 'vue'
import {useDisplay} from 'vuetify'
// endregion Dependency Injection
// region Component Injection
// endregion Component Injection
// region interface
// endregion interface
// region constants
const { mobile } = useDisplay()
// endregion constants
// region props
/**
* 外から読み書きしたい場合は v-model:tab を使えるように
*/
const props = withDefaults(defineProps<{
tab?: 'login' | 'register'
loading?: boolean
}>(), {
tab: 'login',
loading: false,
})
// endregion props
// region variable
// endregion variable
// region properties
// タブの双方向バインド
const _tab = ref<'login' | 'register'>(props.tab)
const currentTab = computed({
get: () => _tab.value,
set: (v: 'login' | 'register') => {
_tab.value = v
emit('update:tab', v)
},
})
const isMobile = computed(() => mobile.value)
const loading = computed(() => props.loading)
// endregion properties
// region emits
const emit = defineEmits<{
(e: 'update:tab', value: 'login' | 'register'): void
(e: 'login', payload: { email: string; password: string; remember: boolean }): void
(e: 'register', payload: { name: string; email: string; password: string }): void
(e: 'oauth', provider: 'google' | 'github'): void
(e: 'forgot-password'): void
}>()
// endregion emits
// region validator
const login = ref({
email: '',
password: '',
remember: true,
valid: false,
})
const register = ref({
name: '',
email: '',
password: '',
passwordConfirm: '',
valid: false,
})
const rules = {
required: (v: string) => !!v || '必須項目です',
email: (v: string) => /.+@.+\..+/.test(v) || 'メール形式が不正です',
minLen: (v: string, n = 8) => (v?.length >= n) || `${n}文字以上で入力してください`,
same: (v: string, target: string, msg = '一致しません') => v === target || msg,
}
// endregion validator
// region methods
function submitLogin() {
if (!login.value.valid) return
emit('login', {
email: login.value.email,
password: login.value.password,
remember: login.value.remember,
})
}
function submitRegister() {
if (!register.value.valid) return
emit('register', {
name: register.value.name,
email: register.value.email,
password: register.value.password,
})
}// endregion methods
// region export
// endregion export
</script>
<style scoped>
</style>
|