paricafe/src/web/app/common/views/components/signup.vue

288 lines
8.2 KiB
Vue
Raw Normal View History

2018-02-10 01:22:14 -06:00
<template>
2018-02-10 04:57:37 -06:00
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
2018-02-10 01:22:14 -06:00
<label class="username">
<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
2018-02-10 21:08:43 -06:00
<input v-model="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @input="onChangeUsername"/>
<p class="profile-page-url-preview" v-if="shouldShowProfileUrl">{{ `${url}/${username}` }}</p>
2018-02-10 01:22:14 -06:00
<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:common.tags.mk-signup.checking%</p>
<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.available%</p>
<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.unavailable%</p>
<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.error%</p>
<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.invalid-format%</p>
<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-short%</p>
<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-long%</p>
</label>
<label class="password">
<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%</p>
2018-02-10 21:08:43 -06:00
<input v-model="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required @input="onChangePassword"/>
<div class="meter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
2018-02-10 01:22:14 -06:00
<div class="value" ref="passwordMetar"></div>
</div>
<p class="info" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.weak-password%</p>
<p class="info" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.normal-password%</p>
<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.strong-password%</p>
</label>
<label class="retype-password">
<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
2018-02-10 21:08:43 -06:00
<input v-model="retypedPassword" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required @input="onChangePasswordRetype"/>
2018-02-10 01:22:14 -06:00
<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>
<label class="recaptcha">
<p class="caption"><template v-if="recaptchaed">%fa:toggle-on%</template><template v-if="!recaptchaed">%fa:toggle-off%</template>%i18n:common.tags.mk-signup.recaptcha%</p>
2018-02-10 21:08:43 -06:00
<div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" :data-sitekey="recaptchaSitekey"></div>
2018-02-10 01:22:14 -06:00
</label>
<label class="agree-tou">
<input name="agree-tou" type="checkbox" autocomplete="off" required/>
<p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p>
</label>
<button type="submit">%i18n:common.tags.mk-signup.create%</button>
</form>
</template>
<script lang="ts">
import Vue from 'vue';
const getPasswordStrength = require('syuilo-password-strength');
2018-02-10 21:08:43 -06:00
import { url, docsUrl, lang, recaptchaSitekey } from '../../../config';
2018-02-10 01:22:14 -06:00
export default Vue.extend({
2018-02-10 02:01:32 -06:00
data() {
return {
username: '',
password: '',
retypedPassword: '',
2018-02-10 21:08:43 -06:00
url,
2018-02-10 02:01:32 -06:00
touUrl: `${docsUrl}/${lang}/tou`,
recaptchaSitekey,
recaptchaed: false,
usernameState: null,
passwordStrength: '',
passwordRetypeState: null
2018-02-10 01:22:14 -06:00
}
},
2018-02-10 21:08:43 -06:00
computed: {
shouldShowProfileUrl(): boolean {
return (this.username != '' &&
this.usernameState != 'invalid-format' &&
this.usernameState != 'min-range' &&
this.usernameState != 'max-range');
}
},
2018-02-10 02:01:32 -06:00
methods: {
onChangeUsername() {
if (this.username == '') {
this.usernameState = null;
return;
}
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
const err =
!this.username.match(/^[a-zA-Z0-9\-]+$/) ? 'invalid-format' :
this.username.length < 3 ? 'min-range' :
this.username.length > 20 ? 'max-range' :
null;
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
if (err) {
this.usernameState = err;
return;
}
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
this.usernameState = 'wait';
2018-02-10 01:22:14 -06:00
2018-02-17 21:35:18 -06:00
(this as any).api('username/available', {
2018-02-10 02:01:32 -06:00
username: this.username
}).then(result => {
this.usernameState = result.available ? 'ok' : 'unavailable';
}).catch(err => {
this.usernameState = 'error';
});
},
onChangePassword() {
if (this.password == '') {
this.passwordStrength = '';
return;
}
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
const strength = getPasswordStrength(this.password);
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
},
onChangePasswordRetype() {
if (this.retypedPassword == '') {
this.passwordRetypeState = null;
return;
2018-02-10 01:22:14 -06:00
}
2018-02-10 02:01:32 -06:00
this.passwordRetypeState = this.password == this.retypedPassword ? 'match' : 'not-match';
},
onSubmit() {
2018-02-17 21:35:18 -06:00
(this as any).api('signup', {
2018-02-10 02:01:32 -06:00
username: this.username,
password: this.password,
'g-recaptcha-response': (window as any).grecaptcha.getResponse()
}).then(() => {
2018-02-17 21:35:18 -06:00
(this as any).api('signin', {
2018-02-10 02:01:32 -06:00
username: this.username,
password: this.password
}).then(() => {
location.href = '/';
});
}).catch(() => {
alert('%i18n:common.tags.mk-signup.some-error%');
(window as any).grecaptcha.reset();
this.recaptchaed = false;
});
}
},
created() {
(window as any).onRecaptchaed = () => {
this.recaptchaed = true;
};
(window as any).onRecaptchaExpired = () => {
this.recaptchaed = false;
};
},
mounted() {
2018-02-10 01:22:14 -06:00
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
head.appendChild(script);
2018-02-10 02:01:32 -06:00
}
});
</script>
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
<style lang="stylus" scoped>
2018-03-02 22:47:55 -06:00
@import '~const.styl'
2018-02-10 04:57:37 -06:00
.mk-signup
2018-02-10 02:01:32 -06:00
min-width 302px
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
label
display block
2018-02-10 04:57:37 -06:00
margin 0 0 16px 0
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
> .caption
margin 0 0 4px 0
color #828888
font-size 0.95em
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
> [data-fa]
margin-right 0.25em
color #96adac
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
> .info
display block
margin 4px 0
font-size 0.8em
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
> [data-fa]
margin-right 0.3em
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&.username
.profile-page-url-preview
display block
margin 4px 8px 0 4px
font-size 0.8em
color #888
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&:empty
display none
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&:not(:empty) + .info
margin-top 0
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&.password
.meter
display block
margin-top 8px
width 100%
height 8px
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&[data-strength='']
display none
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&[data-strength='low']
> .value
background #d73612
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&[data-strength='medium']
> .value
background #d7ca12
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
&[data-strength='high']
> .value
background #61bb22
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
> .value
display block
width 0%
height 100%
background transparent
border-radius 4px
transition all 0.1s ease
[type=text], [type=password]
user-select text
display inline-block
cursor auto
padding 0 12px
margin 0
width 100%
line-height 44px
font-size 1em
color #333 !important
background #fff !important
outline none
border solid 1px rgba(0, 0, 0, 0.1)
border-radius 4px
box-shadow 0 0 0 114514px #fff inset
transition all .3s ease
&:hover
border-color rgba(0, 0, 0, 0.2)
transition all .1s ease
&:focus
color $theme-color !important
border-color $theme-color
box-shadow 0 0 0 1024px #fff inset, 0 0 0 4px rgba($theme-color, 10%)
transition all 0s ease
&:disabled
opacity 0.5
.agree-tou
padding 4px
border-radius 4px
&:hover
background #f4f4f4
&:active
background #eee
&, *
cursor pointer
p
display inline
color #555
button
2018-02-10 04:57:37 -06:00
margin 0
2018-02-10 02:01:32 -06:00
padding 16px
width 100%
font-size 1em
color #fff
background $theme-color
border-radius 3px
&:hover
background lighten($theme-color, 5%)
&:active
background darken($theme-color, 5%)
2018-02-10 01:22:14 -06:00
2018-02-10 02:01:32 -06:00
</style>