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-06-14 09:51:55 +09:00
parent 8814fc9c9c
commit 3a4833818f
5 changed files with 109 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/client/app/common/views/components/material/button.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="ui-button"> <div class="ui-button">
<button> <button :type="type">
<slot></slot> <slot></slot>
</button> </button>
</div> </div>
@ -25,6 +25,7 @@ export default Vue.extend({
> button > button
display block display block
width 100% width 100%
margin 32px 0 16px 0
padding 0 padding 0
color $theme-color-foreground color $theme-color-foreground
font-weight bold font-weight bold

43
src/client/app/common/views/components/material/input.vue
View file

@ -3,16 +3,40 @@
<div class="input"> <div class="input">
<span class="label" ref="label"><slot></slot></span> <span class="label" ref="label"><slot></slot></span>
<div class="prefix" ref="prefix" @click="focus"><slot name="prefix"></slot></div> <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 class="suffix" @click="focus"><slot name="suffix"></slot></div>
</div> </div>
<div class="text"><slot name="text"></slot></div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ 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() { data() {
return { return {
focused: false focused: false
@ -38,13 +62,13 @@ export default Vue.extend({
@import '~const.styl' @import '~const.styl'
.ui-input .ui-input
margin-bottom 32px margin-bottom 16px
padding-top 16px
> .input > .input
display flex display flex
margin-top 16px
padding 6px 12px padding 6px 12px
background #f5f5f5 background rgba(#000, 0.035)
border-radius 6px border-radius 6px
> .label > .label
@ -89,9 +113,16 @@ export default Vue.extend({
> .suffix > .suffix
padding-left 4px padding-left 4px
> .text
margin 8px 0
font-size 14px
> p
margin 0
&.focused &.focused
> .input > .input
background #eee background rgba(#000, 0.05)
> .label > .label
color $theme-color color $theme-color

54
src/client/app/common/views/components/signup.vue
View file

@ -1,20 +1,27 @@
<template> <template>
<form class="mk-signup" @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:@username%</p> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" autocomplete="off" required @input="onChangeUsername">
<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"/> <span>%i18n:@username%</span>
<p class="profile-page-url-preview" v-if="shouldShowProfileUrl">{{ `${url}/@${username}` }}</p> <span slot="prefix">@</span>
<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p> <span slot="suffix">@{{ host }}</span>
<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p> <p slot="text" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p>
<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p> <p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p>
<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p> <p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p>
<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p> <p slot="text" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p>
<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-short%</p> <p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p>
<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-long%</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>
<label class="password"> <label class="password">
<p class="caption">%fa:lock%%i18n:@password%</p> <ui-input v-model="password" type="password" autocomplete="off" required @input="onChangePassword">
<input v-model="password" type="password" placeholder="%i18n:@password-placeholder%" 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="meter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
<div class="value" ref="passwordMetar"></div> <div class="value" ref="passwordMetar"></div>
</div> </div>
@ -23,14 +30,15 @@
<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:@strong-password%</p> <p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:@strong-password%</p>
</label> </label>
<label class="retype-password"> <label class="retype-password">
<p class="caption">%fa:lock%%i18n:@password%(%i18n:@retype%)</p> <ui-input v-model="retypedPassword" type="password" autocomplete="off" required @input="onChangePasswordRetype">
<input v-model="retypedPassword" type="password" placeholder="%i18n:@retype-placeholder%" 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 == '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> <p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@password-not-matched%</p>
</label> </label>
<label class="recaptcha"> <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-sitekey="recaptchaSitekey"></div>
<div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" :data-sitekey="recaptchaSitekey"></div>
</label> </label>
<label class="agree-tou"> <label class="agree-tou">
<input name="agree-tou" type="checkbox" autocomplete="off" required/> <input name="agree-tou" type="checkbox" autocomplete="off" required/>
@ -43,18 +51,18 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
const getPasswordStrength = require('syuilo-password-strength'); 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({ export default Vue.extend({
data() { data() {
return { return {
host,
username: '', username: '',
password: '', password: '',
retypedPassword: '', retypedPassword: '',
url, url,
touUrl: `${docsUrl}/${lang}/tou`, touUrl: `${docsUrl}/${lang}/tou`,
recaptchaSitekey, recaptchaSitekey,
recaptchaed: false,
usernameState: null, usernameState: null,
passwordStrength: '', passwordStrength: '',
passwordRetypeState: null passwordRetypeState: null
@ -130,19 +138,9 @@ export default Vue.extend({
alert('%i18n:@some-error%'); alert('%i18n:@some-error%');
(window as any).grecaptcha.reset(); (window as any).grecaptcha.reset();
this.recaptchaed = false;
}); });
} }
}, },
created() {
(window as any).onRecaptchaed = () => {
this.recaptchaed = true;
};
(window as any).onRecaptchaExpired = () => {
this.recaptchaed = false;
};
},
mounted() { mounted() {
const head = document.getElementsByTagName('head')[0]; const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script'); const script = document.createElement('script');

41
src/client/app/mobile/views/pages/signup.vue
View file

@ -1,28 +1,18 @@
<template> <template>
<div class="signup"> <div class="signup">
<h1>Misskeyをはじめる</h1> <h1>Misskeyをはじめる</h1>
<p>いつでも、どこからでもMisskeyを利用できます。もちろん、無料です。</p> <mk-signup/>
<div class="form">
<p>新規登録</p>
<div>
<mk-signup/>
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({});
mounted() {
document.documentElement.style.background = '#293946';
}
});
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.signup .signup
padding 16px padding 32px
margin 0 auto margin 0 auto
max-width 500px max-width 500px
@ -30,28 +20,7 @@ export default Vue.extend({
margin 0 margin 0
padding 8px padding 8px
font-size 1.5em font-size 1.5em
font-weight normal font-weight bold
color #c3c6ca color #444
& + 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
</style> </style>

80
src/client/app/mobile/views/pages/welcome.vue
View file

@ -2,7 +2,13 @@
<div class="welcome"> <div class="welcome">
<div> <div>
<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"> <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"> <form @submit.prevent="onSubmit">
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange">
<span>ユーザー名</span> <span>ユーザー名</span>
@ -20,13 +26,6 @@
<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a> <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
</div> </div>
</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> <footer>
<small>{{ copyright }}</small> <small>{{ copyright }}</small>
</footer> </footer>
@ -88,10 +87,11 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.welcome .welcome
background #fff text-align center
//background #fff
> div > div
padding 16px padding 32px
margin 0 auto margin 0 auto
max-width 500px max-width 500px
@ -100,11 +100,36 @@ export default Vue.extend({
max-width 200px max-width 200px
margin 0 auto margin 0 auto
.form > .host
margin-bottom 16px 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 > form
padding 16px
button button
display block display block
@ -127,36 +152,9 @@ export default Vue.extend({
border-color #444 border-color #444
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2) 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 > footer
text-align center text-align center
color #fff color #444
> small > small
display block display block