Skip to content
Snippets Groups Projects
Commit 3a483381 authored by syuilo's avatar syuilo
Browse files

wip

parent 8814fc9c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/app/common/views/components/material/button.vue
+ 2
− 1
View file @ 3a483381
<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
......
src/client/app/common/views/components/material/input.vue
+ 37
− 6
View file @ 3a483381
......@@ -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
......
src/client/app/common/views/components/signup.vue
+ 26
− 28
View file @ 3a483381
<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');
......
src/client/app/mobile/views/pages/signup.vue
+ 5
− 36
View file @ 3a483381
<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>
src/client/app/mobile/views/pages/welcome.vue
+ 39
− 41
View file @ 3a483381
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment