wip
This commit is contained in:
parent
c869883d76
commit
7664354187
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<form class="form" @submit.prevent="onSubmit" autocomplete="off">
|
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
|
||||||
<label class="username">
|
<label class="username">
|
||||||
<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
|
<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
|
||||||
<input v-model="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @keyup="onChangeUsername"/>
|
<input v-model="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @keyup="onChangeUsername"/>
|
||||||
|
@ -24,7 +24,7 @@
|
||||||
</label>
|
</label>
|
||||||
<label class="retype-password">
|
<label class="retype-password">
|
||||||
<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
|
<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
|
||||||
<input v-model="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required @keyup="onChangePasswordRetype"/>
|
<input v-model="retypedPassword" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required @keyup="onChangePasswordRetype"/>
|
||||||
<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
|
<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
|
||||||
<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
|
<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
|
||||||
</label>
|
</label>
|
||||||
|
@ -145,12 +145,12 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.form
|
.mk-signup
|
||||||
min-width 302px
|
min-width 302px
|
||||||
|
|
||||||
label
|
label
|
||||||
display block
|
display block
|
||||||
margin 16px 0
|
margin 0 0 16px 0
|
||||||
|
|
||||||
> .caption
|
> .caption
|
||||||
margin 0 0 4px 0
|
margin 0 0 4px 0
|
||||||
|
@ -260,7 +260,7 @@ export default Vue.extend({
|
||||||
color #555
|
color #555
|
||||||
|
|
||||||
button
|
button
|
||||||
margin 0 0 32px 0
|
margin 0
|
||||||
padding 16px
|
padding 16px
|
||||||
width 100%
|
width 100%
|
||||||
font-size 1em
|
font-size 1em
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="root">
|
<div class="mk-welcome">
|
||||||
<main>
|
<main>
|
||||||
<div>
|
<div>
|
||||||
<h1>Share<br>Everything!</h1>
|
<h1>Share<br>Everything!</h1>
|
||||||
|
@ -17,8 +17,9 @@
|
||||||
<p class="c">{ _COPYRIGHT_ }</p>
|
<p class="c">{ _COPYRIGHT_ }</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<modal name="signup">
|
<modal name="signup" width="500px" height="auto" scrollable>
|
||||||
<mk-signup></mk-signup>
|
<header :class="$style.signupFormHeader">新規登録</header>
|
||||||
|
<mk-signup :class="$style.signupForm"></mk-signup>
|
||||||
</modal>
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -43,7 +44,7 @@ export default Vue.extend({
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.root
|
.mk-welcome
|
||||||
display flex
|
display flex
|
||||||
flex-direction column
|
flex-direction column
|
||||||
flex 1
|
flex 1
|
||||||
|
@ -127,3 +128,15 @@ export default Vue.extend({
|
||||||
font-size 10px
|
font-size 10px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style lang="stylus" module>
|
||||||
|
.signupForm
|
||||||
|
padding 24px 48px 48px 48px
|
||||||
|
|
||||||
|
.signupFormHeader
|
||||||
|
padding 48px 0 12px 0
|
||||||
|
margin: 0 48px
|
||||||
|
font-size 1.5em
|
||||||
|
color #777
|
||||||
|
border-bottom solid 1px #eee
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue