Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-10 19:57:37 +09:00
parent c869883d76
commit 7664354187
2 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/web/app/common/views/components/signup.vue
View file

@ -1,5 +1,5 @@
<template>
<form class="form" @submit.prevent="onSubmit" autocomplete="off">
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
<label class="username">
<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"/>
@ -24,7 +24,7 @@
</label>
<label class="retype-password">
<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 == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
</label>
@ -145,12 +145,12 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.form
.mk-signup
min-width 302px
label
display block
margin 16px 0
margin 0 0 16px 0
> .caption
margin 0 0 4px 0
@ -260,7 +260,7 @@ export default Vue.extend({
color #555
button
margin 0 0 32px 0
margin 0
padding 16px
width 100%
font-size 1em

21
src/web/app/desktop/views/pages/welcome.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="root">
<div class="mk-welcome">
<main>
<div>
<h1>Share<br>Everything!</h1>
@ -17,8 +17,9 @@
<p class="c">{ _COPYRIGHT_ }</p>
</div>
</footer>
<modal name="signup">
<mk-signup></mk-signup>
<modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">新規登録</header>
<mk-signup :class="$style.signupForm"></mk-signup>
</modal>
</div>
</template>
@ -43,7 +44,7 @@ export default Vue.extend({
</style>
<style lang="stylus" scoped>
.root
.mk-welcome
display flex
flex-direction column
flex 1
@ -127,3 +128,15 @@ export default Vue.extend({
font-size 10px
</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>