0
0
switched/src/client/components/signup.vue

192 lines
6.6 KiB
Vue
Raw Normal View History

2018-02-10 16:22:14 +09:00
<template>
2018-06-15 07:56:56 +09:00
<form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
2018-08-22 01:02:56 +09:00
<template v-if="meta">
<mk-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
<span>{{ $t('invitation-code') }}</span>
2019-02-18 11:13:56 +09:00
<template #prefix><fa icon="id-card-alt"/></template>
Use PostgreSQL instead of MongoDB (#4572) * wip * Update note.ts * Update timeline.ts * Update core.ts * wip * Update generate-visibility-query.ts * wip * wip * wip * wip * wip * Update global-timeline.ts * wip * wip * wip * Update vote.ts * wip * wip * Update create.ts * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update files.ts * wip * wip * Update CONTRIBUTING.md * wip * wip * wip * wip * wip * wip * wip * wip * Update read-notification.ts * wip * wip * wip * wip * wip * wip * wip * Update cancel.ts * wip * wip * wip * Update show.ts * wip * wip * Update gen-id.ts * Update create.ts * Update id.ts * wip * wip * wip * wip * wip * wip * wip * Docker: Update files about Docker (#4599) * Docker: Use cache if files used by `yarn install` was not updated This patch reduces the number of times to installing node_modules. For example, `yarn install` step will be skipped when only ".config/default.yml" is updated. * Docker: Migrate MongoDB to Postgresql Misskey uses Postgresql as a database instead of Mongodb since version 11. * Docker: Uncomment about data persistence This patch will save a lot of databases. * wip * wip * wip * Update activitypub.ts * wip * wip * wip * Update logs.ts * wip * Update drive-file.ts * Update register.ts * wip * wip * Update mentions.ts * wip * wip * wip * Update recommendation.ts * wip * Update index.ts * wip * Update recommendation.ts * Doc: Update docker.ja.md and docker.en.md (#1) (#4608) Update how to set up misskey. * wip * :v: * wip * Update note.ts * Update postgre.ts * wip * wip * wip * wip * Update add-file.ts * wip * wip * wip * Clean up * Update logs.ts * wip * :pizza: * wip * Ad notes * wip * Update api-visibility.ts * Update note.ts * Update add-file.ts * tests * tests * Update postgre.ts * Update utils.ts * wip * wip * Refactor * wip * Refactor * wip * wip * Update show-users.ts * Update update-instance.ts * wip * Update feed.ts * Update outbox.ts * Update outbox.ts * Update user.ts * wip * Update list.ts * Update update-hashtag.ts * wip * Update update-hashtag.ts * Refactor * Update update.ts * wip * wip * :v: * clean up * docs * Update push.ts * wip * Update api.ts * wip * :v: * Update make-pagination-query.ts * :v: * Delete hashtags.ts * Update instances.ts * Update instances.ts * Update create.ts * Update search.ts * Update reversi-game.ts * Update signup.ts * Update user.ts * id * Update example.yml * :art: * objectid * fix * reversi * reversi * Fix bug of chart engine * Add test of chart engine * Improve test * Better testing * Improve chart engine * Refactor * Add test of chart engine * Refactor * Add chart test * Fix bug * コミットし忘れ * Refactoring * :v: * Add tests * Add test * Extarct note tests * Refactor * 存在しないユーザーにメンションできなくなっていた問題を修正 * Fix bug * Update update-meta.ts * Fix bug * Update mention.vue * Fix bug * Update meta.ts * Update CONTRIBUTING.md * Fix bug * Fix bug * Fix bug * Clean up * Clean up * Update notification.ts * Clean up * Add mute tests * Add test * Refactor * Add test * Fix test * Refactor * Refactor * Add tests * Update utils.ts * Update utils.ts * Fix test * Update package.json * Update update.ts * Update manifest.ts * Fix bug * Fix bug * Add test * :art: * Update endpoint permissions * Updaye permisison * Update person.ts #4299 * データベースと同期しないように * Fix bug * Fix bug * Update reversi-game.ts * Use a feature of Node v11.7.0 to extract a public key (#4644) * wip * wip * :v: * Refactoring #1540 * test * test * test * test * test * test * test * Fix bug * Fix test * :sushi: * wip * #4471 * Add test for #4335 * Refactor * Fix test * Add tests * :clock4: * Fix bug * Add test * Add test * rename * Fix bug
2019-04-07 21:50:36 +09:00
<template #desc v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainerEmail)"></template>
</mk-input>
<mk-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername">
<span>{{ $t('username') }}</span>
2019-02-18 11:13:56 +09:00
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
2019-02-24 03:56:15 +09:00
<template #desc>
<span v-if="usernameState == 'wait'" style="color:#999"><fa :icon="faSpinner" pulse fixed-width/> {{ $t('checking') }}</span>
<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('available') }}</span>
<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('unavailable') }}</span>
<span v-if="usernameState == 'error'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('error') }}</span>
<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('invalid-format') }}</span>
<span v-if="usernameState == 'min-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('too-short') }}</span>
<span v-if="usernameState == 'max-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('too-long') }}</span>
2019-02-24 03:56:15 +09:00
</template>
</mk-input>
<mk-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword">
<span>{{ $t('password') }}</span>
<template #prefix><fa :icon="faLock"/></template>
2019-02-18 11:13:56 +09:00
<template #desc>
<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('weak-password') }}</p>
<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('normal-password') }}</p>
<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('strong-password') }}</p>
2019-02-18 09:48:00 +09:00
</template>
</mk-input>
<mk-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
<span>{{ $t('password') }} ({{ $t('retype') }})</span>
<template #prefix><fa :icon="faLock"/></template>
2019-02-18 11:13:56 +09:00
<template #desc>
<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('password-matched') }}</p>
<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('password-not-matched') }}</p>
2019-02-18 09:48:00 +09:00
</template>
</mk-input>
<mk-switch v-model="ToSAgreement" v-if="meta.tosUrl">
<i18n path="agreeTo">
<a :href="meta.tosUrl" target="_blank">{{ $t('tos') }}</a>
</i18n>
</mk-switch>
2018-11-07 12:09:24 +09:00
<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
<mk-button type="submit" :disabled=" submitting || !(meta.tosUrl ? ToSAgreement : true) || passwordRetypeState == 'not-match'" primary>{{ $t('start') }}</mk-button>
2018-08-22 01:02:56 +09:00
</template>
2018-02-10 16:22:14 +09:00
</form>
</template>
<script lang="ts">
import Vue from 'vue';
import { faLock, faExclamationTriangle, faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons';
2018-02-10 16:22:14 +09:00
const getPasswordStrength = require('syuilo-password-strength');
2018-11-11 12:35:30 +09:00
import { toUnicode } from 'punycode';
import i18n from '../i18n';
import { host, url } from '../config';
import MkButton from './ui/button.vue';
import MkInput from './ui/input.vue';
import MkSwitch from './ui/switch.vue';
2018-02-10 16:22:14 +09:00
export default Vue.extend({
i18n,
components: {
MkButton,
MkInput,
MkSwitch,
},
2018-12-19 00:39:28 +09:00
2018-02-10 17:01:32 +09:00
data() {
return {
2018-11-11 12:35:30 +09:00
host: toUnicode(host),
2018-02-10 17:01:32 +09:00
username: '',
password: '',
retypedPassword: '',
2018-08-17 19:17:23 +09:00
invitationCode: '',
2018-02-11 12:08:43 +09:00
url,
2018-02-10 17:01:32 +09:00
usernameState: null,
passwordStrength: '',
2018-08-17 19:17:23 +09:00
passwordRetypeState: null,
meta: {},
submitting: false,
ToSAgreement: false,
faLock, faExclamationTriangle, faSpinner, faCheck
2018-02-10 16:22:14 +09:00
}
},
2018-12-19 00:39:28 +09:00
2018-02-11 12:08:43 +09:00
computed: {
shouldShowProfileUrl(): boolean {
return (this.username != '' &&
this.usernameState != 'invalid-format' &&
this.usernameState != 'min-range' &&
this.usernameState != 'max-range');
}
},
2018-12-19 00:39:28 +09:00
2018-08-17 19:17:23 +09:00
created() {
2018-11-09 08:13:34 +09:00
this.$root.getMeta().then(meta => {
2018-08-17 19:17:23 +09:00
this.meta = meta;
});
},
2018-12-19 00:39:28 +09:00
2018-08-19 19:15:29 +09:00
mounted() {
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-12-19 00:39:28 +09:00
2018-02-10 17:01:32 +09:00
methods: {
onChangeUsername() {
if (this.username == '') {
this.usernameState = null;
return;
}
2018-02-10 16:22:14 +09:00
2018-02-10 17:01:32 +09:00
const err =
!this.username.match(/^[a-zA-Z0-9_]+$/) ? 'invalid-format' :
this.username.length < 1 ? 'min-range' :
2018-02-10 17:01:32 +09:00
this.username.length > 20 ? 'max-range' :
null;
2018-02-10 16:22:14 +09:00
2018-02-10 17:01:32 +09:00
if (err) {
this.usernameState = err;
return;
}
2018-02-10 16:22:14 +09:00
2018-02-10 17:01:32 +09:00
this.usernameState = 'wait';
2018-02-10 16:22:14 +09:00
2018-11-09 08:13:34 +09:00
this.$root.api('username/available', {
2018-02-10 17:01:32 +09:00
username: this.username
}).then(result => {
this.usernameState = result.available ? 'ok' : 'unavailable';
}).catch(err => {
this.usernameState = 'error';
});
},
2018-12-19 00:39:28 +09:00
2018-02-10 17:01:32 +09:00
onChangePassword() {
if (this.password == '') {
this.passwordStrength = '';
return;
}
2018-02-10 16:22:14 +09:00
2018-02-10 17:01:32 +09:00
const strength = getPasswordStrength(this.password);
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
},
2018-12-19 00:39:28 +09:00
2018-02-10 17:01:32 +09:00
onChangePasswordRetype() {
if (this.retypedPassword == '') {
this.passwordRetypeState = null;
return;
2018-02-10 16:22:14 +09:00
}
2018-02-10 17:01:32 +09:00
this.passwordRetypeState = this.password == this.retypedPassword ? 'match' : 'not-match';
},
2018-12-19 00:39:28 +09:00
2018-02-10 17:01:32 +09:00
onSubmit() {
if (this.submitting) return;
this.submitting = true;
2018-11-09 08:13:34 +09:00
this.$root.api('signup', {
2018-02-10 17:01:32 +09:00
username: this.username,
password: this.password,
2018-08-17 19:17:23 +09:00
invitationCode: this.invitationCode,
2018-11-07 12:09:24 +09:00
'g-recaptcha-response': this.meta.enableRecaptcha ? (window as any).grecaptcha.getResponse() : null
}).then(() => {
2018-11-09 08:13:34 +09:00
this.$root.api('signin', {
2018-02-10 17:01:32 +09:00
username: this.username,
password: this.password
}).then(res => {
2018-12-19 00:41:53 +09:00
localStorage.setItem('i', res.i);
2019-02-26 06:54:49 +09:00
location.href = '/';
2018-02-10 17:01:32 +09:00
});
}).catch(() => {
this.submitting = false;
this.$root.dialog({
type: 'error',
text: this.$t('some-error')
});
2018-02-10 17:01:32 +09:00
2018-11-07 12:09:24 +09:00
if (this.meta.enableRecaptcha) {
2018-07-19 00:04:09 +09:00
(window as any).grecaptcha.reset();
}
2018-02-10 17:01:32 +09:00
});
}
}
});
</script>