wip
This commit is contained in:
syuilo
parent
8814fc9c9c
commit
3a4833818f
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="ui-button">
|
||||
<button>
|
||||
<button :type="type">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -25,6 +25,7 @@ export default Vue.extend({
|
|||
> button
|
||||
display block
|
||||
width 100%
|
||||
margin 32px 0 16px 0
|
||||
padding 0
|
||||
color $theme-color-foreground
|
||||
font-weight bold
|
||||
|
|
|
|||
|
|
@ -3,16 +3,40 @@
|
|||
<div class="input">
|
||||
<span class="label" ref="label"><slot></slot></span>
|
||||
<div class="prefix" ref="prefix" @click="focus"><slot name="prefix"></slot></div>
|
||||
<input ref="input" :value="value" @input="$emit('input', $event.target.value)" @focus="focused = true" @blur="focused = false">
|
||||
<input ref="input"
|
||||
:type="type"
|
||||
:value="value"
|
||||
:required="required"
|
||||
:readonly="readonly"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false">
|
||||
<div class="suffix" @click="focus"><slot name="suffix"></slot></div>
|
||||
</div>
|
||||
<div class="text"><slot name="text"></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['value'],
|
||||
props: {
|
||||
value: {
|
||||
required: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false
|
||||
|
|
@ -38,13 +62,13 @@ export default Vue.extend({
|
|||
@import '~const.styl'
|
||||
|
||||
.ui-input
|
||||
margin-bottom 32px
|
||||
margin-bottom 16px
|
||||
padding-top 16px
|
||||
|
||||
> .input
|
||||
display flex
|
||||
margin-top 16px
|
||||
padding 6px 12px
|
||||
background #f5f5f5
|
||||
background rgba(#000, 0.035)
|
||||
border-radius 6px
|
||||
|
||||
> .label
|
||||
|
|
@ -89,9 +113,16 @@ export default Vue.extend({
|
|||
> .suffix
|
||||
padding-left 4px
|
||||
|
||||
> .text
|
||||
margin 8px 0
|
||||
font-size 14px
|
||||
|
||||
> p
|
||||
margin 0
|
||||
|
||||
&.focused
|
||||
> .input
|
||||
background #eee
|
||||
background rgba(#000, 0.05)
|
||||
|
||||
> .label
|
||||
color $theme-color
|
||||
|
|
|
|||
|
|
@ -1,20 +1,27 @@
|
|||
<template>
|
||||
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
|
||||
<label class="username">
|
||||
<p class="caption">%fa:at%%i18n:@username%</p>
|
||||
<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,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>
|
||||
<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p>
|
||||
<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p>
|
||||
<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p>
|
||||
<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p>
|
||||
<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p>
|
||||
<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-short%</p>
|
||||
<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-long%</p>
|
||||
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" autocomplete="off" required @input="onChangeUsername">
|
||||
<span>%i18n:@username%</span>
|
||||
<span slot="prefix">@</span>
|
||||
<span slot="suffix">@{{ host }}</span>
|
||||
<p slot="text" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p>
|
||||
<p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p>
|
||||
<p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p>
|
||||
<p slot="text" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p>
|
||||
<p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p>
|
||||
<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-short%</p>
|
||||
<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-long%</p>
|
||||
</ui-input>
|
||||
</label>
|
||||
<label class="password">
|
||||
<p class="caption">%fa:lock%%i18n:@password%</p>
|
||||
<input v-model="password" type="password" placeholder="%i18n:@password-placeholder%" autocomplete="off" required @input="onChangePassword"/>
|
||||
<ui-input v-model="password" type="password" autocomplete="off" required @input="onChangePassword">
|
||||
<span>%i18n:@password%</span>
|
||||
<span slot="prefix">%fa:lock%</span>
|
||||
<div slot="text">
|
||||
|
||||
</div>
|
||||
</ui-input>
|
||||
<div class="meter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
|
||||
<div class="value" ref="passwordMetar"></div>
|
||||
</div>
|
||||
|
|
@ -23,14 +30,15 @@
|
|||
<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:@strong-password%</p>
|
||||
</label>
|
||||
<label class="retype-password">
|
||||
<p class="caption">%fa:lock%%i18n:@password%(%i18n:@retype%)</p>
|
||||
<input v-model="retypedPassword" type="password" placeholder="%i18n:@retype-placeholder%" autocomplete="off" required @input="onChangePasswordRetype"/>
|
||||
<ui-input v-model="retypedPassword" type="password" autocomplete="off" required @input="onChangePasswordRetype">
|
||||
<span>%i18n:@password% (%i18n:@retype%)</span>
|
||||
<span slot="prefix">%fa:lock%</span>
|
||||
</ui-input>
|
||||
<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:@password-matched%</p>
|
||||
<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@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:@recaptcha%</p>
|
||||
<div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" :data-sitekey="recaptchaSitekey"></div>
|
||||
<div class="g-recaptcha" :data-sitekey="recaptchaSitekey"></div>
|
||||
</label>
|
||||
<label class="agree-tou">
|
||||
<input name="agree-tou" type="checkbox" autocomplete="off" required/>
|
||||
|
|
@ -43,18 +51,18 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
const getPasswordStrength = require('syuilo-password-strength');
|
||||
import { url, docsUrl, lang, recaptchaSitekey } from '../../../config';
|
||||
import { host, url, docsUrl, lang, recaptchaSitekey } from '../../../config';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
host,
|
||||
username: '',
|
||||
password: '',
|
||||
retypedPassword: '',
|
||||
url,
|
||||
touUrl: `${docsUrl}/${lang}/tou`,
|
||||
recaptchaSitekey,
|
||||
recaptchaed: false,
|
||||
usernameState: null,
|
||||
passwordStrength: '',
|
||||
passwordRetypeState: null
|
||||
|
|
@ -130,19 +138,9 @@ export default Vue.extend({
|
|||
alert('%i18n:@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() {
|
||||
const head = document.getElementsByTagName('head')[0];
|
||||
const script = document.createElement('script');
|
||||
|
|
|
|||
|
|
@ -1,28 +1,18 @@
|
|||
<template>
|
||||
<div class="signup">
|
||||
<h1>Misskeyをはじめる</h1>
|
||||
<p>いつでも、どこからでもMisskeyを利用できます。もちろん、無料です。</p>
|
||||
<div class="form">
|
||||
<p>新規登録</p>
|
||||
<div>
|
||||
<mk-signup/>
|
||||
</div>
|
||||
</div>
|
||||
<mk-signup/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#293946';
|
||||
}
|
||||
});
|
||||
export default Vue.extend({});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.signup
|
||||
padding 16px
|
||||
padding 32px
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
|
||||
|
|
@ -30,28 +20,7 @@ export default Vue.extend({
|
|||
margin 0
|
||||
padding 8px
|
||||
font-size 1.5em
|
||||
font-weight normal
|
||||
color #c3c6ca
|
||||
|
||||
& + p
|
||||
margin 0 0 16px 0
|
||||
padding 0 8px 0 8px
|
||||
color #949fa9
|
||||
|
||||
.form
|
||||
background #fff
|
||||
border solid 1px rgba(#000, 0.2)
|
||||
border-radius 8px
|
||||
overflow hidden
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 12px 20px
|
||||
color #555
|
||||
background #f5f5f5
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
> div
|
||||
padding 16px
|
||||
font-weight bold
|
||||
color #444
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,13 @@
|
|||
<div class="welcome">
|
||||
<div>
|
||||
<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
|
||||
<div class="form">
|
||||
<p class="host">{{ host }}</p>
|
||||
<div class="about">
|
||||
<h2>{{ name || 'unidentified' }}</h2>
|
||||
<p v-html="description || '%i18n:common.about%'"></p>
|
||||
<router-link class="signup" to="/signup">新規登録</router-link>
|
||||
</div>
|
||||
<div class="login">
|
||||
<form @submit.prevent="onSubmit">
|
||||
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange">
|
||||
<span>ユーザー名</span>
|
||||
|
|
@ -20,13 +26,6 @@
|
|||
<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl">
|
||||
<p>%fa:comments R% タイムラインを見てみる</p>
|
||||
<mk-welcome-timeline/>
|
||||
</div>
|
||||
<div class="users">
|
||||
<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
|
||||
</div>
|
||||
<footer>
|
||||
<small>{{ copyright }}</small>
|
||||
</footer>
|
||||
|
|
@ -88,10 +87,11 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.welcome
|
||||
background #fff
|
||||
text-align center
|
||||
//background #fff
|
||||
|
||||
> div
|
||||
padding 16px
|
||||
padding 32px
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
|
||||
|
|
@ -100,11 +100,36 @@ export default Vue.extend({
|
|||
max-width 200px
|
||||
margin 0 auto
|
||||
|
||||
.form
|
||||
margin-bottom 16px
|
||||
> .host
|
||||
display block
|
||||
text-align center
|
||||
padding 6px 12px
|
||||
line-height 32px
|
||||
font-weight bold
|
||||
color #333
|
||||
background rgba(#000, 0.035)
|
||||
border-radius 6px
|
||||
|
||||
> .about
|
||||
margin-top 16px
|
||||
padding 16px
|
||||
color #444
|
||||
background #fff
|
||||
border-radius 6px
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
|
||||
> p
|
||||
margin 8px
|
||||
|
||||
> .signup
|
||||
font-weight bold
|
||||
|
||||
> .login
|
||||
margin 16px 0
|
||||
|
||||
> form
|
||||
padding 16px
|
||||
|
||||
button
|
||||
display block
|
||||
|
|
@ -127,36 +152,9 @@ export default Vue.extend({
|
|||
border-color #444
|
||||
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
|
||||
|
||||
> .tl
|
||||
background #fff
|
||||
border solid 1px rgba(#000, 0.2)
|
||||
border-radius 8px
|
||||
overflow hidden
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 12px 20px
|
||||
color #555
|
||||
background #f5f5f5
|
||||
border-bottom solid 1px #ddd
|
||||
|
||||
> .mk-welcome-timeline
|
||||
max-height 300px
|
||||
overflow auto
|
||||
|
||||
> .users
|
||||
margin 12px 0 0 0
|
||||
|
||||
> *
|
||||
display inline-block
|
||||
margin 4px
|
||||
width 38px
|
||||
height 38px
|
||||
border-radius 6px
|
||||
|
||||
> footer
|
||||
text-align center
|
||||
color #fff
|
||||
color #444
|
||||
|
||||
> small
|
||||
display block
|
||||
|
|
|
|||
Loading…
Reference in a new issue