diff options
Diffstat (limited to 'src')
5 files changed, 109 insertions, 112 deletions
diff --git a/src/client/app/common/views/components/material/button.vue b/src/client/app/common/views/components/material/button.vue index 0c768cf4cc..8dacedbac6 100644 --- a/src/client/app/common/views/components/material/button.vue +++ b/src/client/app/common/views/components/material/button.vue @@ -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 diff --git a/src/client/app/common/views/components/material/input.vue b/src/client/app/common/views/components/material/input.vue index fe64354908..6564b3aa6c 100644 --- a/src/client/app/common/views/components/material/input.vue +++ b/src/client/app/common/views/components/material/input.vue @@ -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 diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue index f8bf7dd798..3adb10f2c3 100644 --- a/src/client/app/common/views/components/signup.vue +++ b/src/client/app/common/views/components/signup.vue @@ -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'); diff --git a/src/client/app/mobile/views/pages/signup.vue b/src/client/app/mobile/views/pages/signup.vue index b8245beb00..f2b29bca60 100644 --- a/src/client/app/mobile/views/pages/signup.vue +++ b/src/client/app/mobile/views/pages/signup.vue @@ -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> diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue index 07891fd56b..01b20aa472 100644 --- a/src/client/app/mobile/views/pages/welcome.vue +++ b/src/client/app/mobile/views/pages/welcome.vue @@ -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 |