This commit is contained in:
syuilo 2018-06-15 07:56:56 +09:00
parent d90f75425f
commit 0ac9120064
14 changed files with 80 additions and 77 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off"> <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" autocomplete="off" required @input="onChangeUsername"> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" required @input="onChangeUsername">
<span>%i18n:@username%</span> <span>%i18n:@username%</span>
<span slot="prefix">@</span> <span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span> <span slot="suffix">@{{ host }}</span>
@ -12,7 +12,7 @@
<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 == '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> <p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p>
</ui-input> </ui-input>
<ui-input v-model="password" type="password" autocomplete="off" required @input="onChangePassword" :with-password-meter="true"> <ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true">
<span>%i18n:@password%</span> <span>%i18n:@password%</span>
<span slot="prefix">%fa:lock%</span> <span slot="prefix">%fa:lock%</span>
<div slot="text"> <div slot="text">
@ -21,7 +21,7 @@
<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p> <p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p>
</div> </div>
</ui-input> </ui-input>
<ui-input v-model="retypedPassword" type="password" autocomplete="off" required @input="onChangePasswordRetype"> <ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
<span>%i18n:@password% (%i18n:@retype%)</span> <span>%i18n:@password% (%i18n:@retype%)</span>
<span slot="prefix">%fa:lock%</span> <span slot="prefix">%fa:lock%</span>
<div slot="text"> <div slot="text">
@ -31,7 +31,7 @@
</ui-input> </ui-input>
<div class="g-recaptcha" :data-sitekey="recaptchaSitekey" style="margin: 16px 0;"></div> <div class="g-recaptcha" :data-sitekey="recaptchaSitekey" style="margin: 16px 0;"></div>
<label class="agree-tou" style="display: block; margin: 16px 0;"> <label class="agree-tou" style="display: block; margin: 16px 0;">
<input name="agree-tou" type="checkbox" autocomplete="off" required/> <input name="agree-tou" type="checkbox" required/>
<p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p> <p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p>
</label> </label>
<ui-button type="submit">%i18n:@create%</ui-button> <ui-button type="submit">%i18n:@create%</ui-button>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="ui-button"> <div class="ui-button" :class="[styl]">
<button :type="type"> <button :type="type" @click="$emit('click')">
<slot></slot> <slot></slot>
</button> </button>
</div> </div>
@ -20,7 +20,9 @@ export default Vue.extend({
styl: 'fill' styl: 'fill'
}; };
}, },
inject: ['isCardChild'], inject: {
isCardChild: { default: false }
},
created() { created() {
if (this.isCardChild) { if (this.isCardChild) {
this.styl = 'line'; this.styl = 'line';

View file

@ -25,9 +25,13 @@ export default Vue.extend({
root(isDark) root(isDark)
margin 16px margin 16px
padding 16px padding 16px
color isDark ? #fff : #000
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12) box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
@media (min-width 500px)
padding 32px
> header > header
font-weight normal font-weight normal
font-size 24px font-size 24px

View file

@ -11,7 +11,7 @@ import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: { props: {
disabled: { disabled: {
type: String, type: Boolean,
required: false required: false
} }
} }

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="ui-input" :class="[{ focused, filled }, styl]"> <div class="ui-input" :class="[{ focused, filled }, styl]">
<div class="icon" ref="icon"><slot name="icon"></slot></div> <div class="icon" ref="icon"><slot name="icon"></slot></div>
<div class="input" @click="focus"> <div class="input" @click="focus" @mousedown="focus">
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength"> <div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
<div class="value" ref="passwordMetar"></div> <div class="value" ref="passwordMetar"></div>
</div> </div>
@ -62,7 +62,6 @@ export default Vue.extend({
required: false required: false
}, },
autocomplete: { autocomplete: {
type: String,
required: false required: false
}, },
withPasswordMeter: { withPasswordMeter: {
@ -113,7 +112,9 @@ export default Vue.extend({
} }
} }
}, },
inject: ['isCardChild'], inject: {
isCardChild: { default: false }
},
created() { created() {
if (this.isCardChild) { if (this.isCardChild) {
this.styl = 'line'; this.styl = 'line';
@ -160,6 +161,7 @@ root(isDark, fill)
> .input > .input
display flex display flex
cursor text
if fill if fill
padding 6px 12px padding 6px 12px

View file

@ -87,7 +87,7 @@ root(isDark)
width 20px width 20px
height 20px height 20px
background none background none
border solid 2px rgba(#000, 0.54) border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
border-radius 100% border-radius 100%
transition inherit transition inherit

View file

@ -48,7 +48,9 @@ export default Vue.extend({
this.v = v; this.v = v;
} }
}, },
inject: ['isCardChild'], inject: {
isCardChild: { default: false }
},
created() { created() {
if (this.isCardChild) { if (this.isCardChild) {
this.styl = 'line'; this.styl = 'line';
@ -101,7 +103,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
height 1px height 1px
background rgba(#000, 0.42) background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
&:after &:after
content '' content ''
@ -141,14 +143,15 @@ root(isDark, fill)
font-weight fill ? bold : normal font-weight fill ? bold : normal
font-size 16px font-size 16px
height 32px height 32px
color isDark ? #fff : #000
background transparent background transparent
border none border none
border-radius 0 border-radius 0
outline none outline none
box-shadow none box-shadow none
&[type='file'] *
display none color #000
> .prefix > .prefix
> .suffix > .suffix

View file

@ -92,7 +92,7 @@ root(isDark)
margin 3px 0 0 0 margin 3px 0 0 0
width 34px width 34px
height 14px height 14px
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25) background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
outline none outline none
border-radius 14px border-radius 14px
transition inherit transition inherit

View file

@ -1,6 +1,8 @@
declare const _HOST_: string; declare const _HOST_: string;
declare const _HOSTNAME_: string; declare const _HOSTNAME_: string;
declare const _URL_: string; declare const _URL_: string;
declare const _NAME_: string;
declare const _DESCRIPTION_: string;
declare const _API_URL_: string; declare const _API_URL_: string;
declare const _WS_URL_: string; declare const _WS_URL_: string;
declare const _DOCS_URL_: string; declare const _DOCS_URL_: string;
@ -21,6 +23,8 @@ declare const _GOOGLE_MAPS_API_KEY_: string;
export const host = _HOST_; export const host = _HOST_;
export const hostname = _HOSTNAME_; export const hostname = _HOSTNAME_;
export const url = _URL_; export const url = _URL_;
export const name = _NAME_;
export const description = _DESCRIPTION_;
export const apiUrl = _API_URL_; export const apiUrl = _API_URL_;
export const wsUrl = _WS_URL_; export const wsUrl = _WS_URL_;
export const docsUrl = _DOCS_URL_; export const docsUrl = _DOCS_URL_;

View file

@ -1,41 +1,27 @@
<template> <template>
<mk-ui> <mk-ui>
<span slot="header">%fa:cog%%i18n:@settings%</span> <span slot="header">%fa:cog%%i18n:@settings%</span>
<main> <main :data-darkmode="$store.state.device.darkmode">
<p v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></p> <div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div>
<div> <div>
<x-profile/> <x-profile/>
<ui-card> <ui-card>
<div slot="title">%fa:palette% %i18n:@design%</div> <div slot="title">%fa:palette% %i18n:@design%</div>
<div>
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch> <ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
</div>
<div>
<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch> <ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
</div>
<div> <div>
<div class="md-body-2">%i18n:@timeline%</div> <div class="md-body-2">%i18n:@timeline%</div>
<div>
<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch> <ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
</div>
<div>
<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch> <ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
</div>
<div>
<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch> <ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
</div> </div>
</div>
<div> <div>
<div class="md-body-2">%i18n:@post-style%</div> <div class="md-body-2">%i18n:@post-style%</div>
<ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio> <ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio>
<ui-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</ui-radio> <ui-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</ui-radio>
</div> </div>
@ -43,26 +29,11 @@
<ui-card> <ui-card>
<div slot="title">%fa:cog% %i18n:@behavior%</div> <div slot="title">%fa:cog% %i18n:@behavior%</div>
<div>
<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch> <ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
</div>
<div>
<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch> <ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
</div>
<div>
<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch> <ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
</div>
<div>
<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch> <ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
</div>
<div>
<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch> <ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
</div>
</ui-card> </ui-card>
<ui-card> <ui-card>
@ -98,13 +69,16 @@
<template v-if="latestVersion !== undefined"> <template v-if="latestVersion !== undefined">
<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div> <div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
</template> </template>
<md-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate"> <ui-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate">
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template> <template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
<template v-else>%i18n:@check-for-updates%</template> <template v-else>%i18n:@check-for-updates%</template>
</md-button> </ui-button>
</ui-card> </ui-card>
</div> </div>
<p><small>ver {{ version }} ({{ codename }})</small></p>
<footer>
<small>ver {{ version }} ({{ codename }})</small>
</footer>
</main> </main>
</mk-ui> </mk-ui>
</template> </template>
@ -249,13 +223,18 @@ root(isDark)
max-width 500px max-width 500px
width 100% width 100%
> p > .signin-as
display block margin 16px
margin 16px 0
padding 16px padding 16px
text-align center text-align center
color isDark ? #cad2da : #2c662d color isDark ? #49ab63 : #2c662d
background #fcfff5 background isDark ? #273c34 : #fcfff5
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
> footer
margin 16px
text-align center
color isDark ? #c9d2e0 : #888
main[data-darkmode] main[data-darkmode]
root(true) root(true)

View file

@ -30,11 +30,13 @@
<ui-input type="file" @change="onAvatarChange"> <ui-input type="file" @change="onAvatarChange">
<span>%i18n:@avatar%</span> <span>%i18n:@avatar%</span>
<span slot="icon">%fa:image%</span> <span slot="icon">%fa:image%</span>
<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input> </ui-input>
<ui-input type="file" @change="onBannerChange"> <ui-input type="file" @change="onBannerChange">
<span>%i18n:@banner%</span> <span>%i18n:@banner%</span>
<span slot="icon">%fa:image%</span> <span slot="icon">%fa:image%</span>
<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input> </ui-input>
<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch> <ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
@ -62,7 +64,8 @@ export default Vue.extend({
isBot: false, isBot: false,
isCat: false, isCat: false,
saving: false, saving: false,
uploading: false avatarUploading: false,
bannerUploading: false
}; };
}, },
@ -80,7 +83,7 @@ export default Vue.extend({
methods: { methods: {
onAvatarChange([file]) { onAvatarChange([file]) {
this.uploading = true; this.avatarUploading = true;
const data = new FormData(); const data = new FormData();
data.append('file', file); data.append('file', file);
@ -93,16 +96,16 @@ export default Vue.extend({
.then(response => response.json()) .then(response => response.json())
.then(f => { .then(f => {
this.avatarId = f.id; this.avatarId = f.id;
this.uploading = false; this.avatarUploading = false;
}) })
.catch(e => { .catch(e => {
this.uploading = false; this.avatarUploading = false;
alert('%18n:!@upload-failed%'); alert('%18n:!@upload-failed%');
}); });
}, },
onBannerChange([file]) { onBannerChange([file]) {
this.uploading = true; this.bannerUploading = true;
const data = new FormData(); const data = new FormData();
data.append('file', file); data.append('file', file);
@ -115,10 +118,10 @@ export default Vue.extend({
.then(response => response.json()) .then(response => response.json())
.then(f => { .then(f => {
this.bannerId = f.id; this.bannerId = f.id;
this.uploading = false; this.bannerUploading = false;
}) })
.catch(e => { .catch(e => {
this.uploading = false; this.bannerUploading = false;
alert('%18n:!@upload-failed%'); alert('%18n:!@upload-failed%');
}); });
}, },

View file

@ -35,7 +35,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { apiUrl, copyright, host } from '../../../config'; import { apiUrl, copyright, host, name, description } from '../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
@ -48,7 +48,9 @@ export default Vue.extend({
apiUrl, apiUrl,
copyright, copyright,
users: [], users: [],
host host,
name,
description
}; };
}, },
mounted() { mounted() {

View file

@ -15,6 +15,8 @@ export type Source = {
*/ */
url: string; url: string;
}; };
name?: string;
description?: string;
url: string; url: string;
port: number; port: number;
https?: { [x: string]: string }; https?: { [x: string]: string };

View file

@ -79,6 +79,8 @@ const consts = {
_DEV_URL_: config.dev_url, _DEV_URL_: config.dev_url,
_LANG_: '%lang%', _LANG_: '%lang%',
_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]), _LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
_NAME_: config.name,
_DESCRIPTION_: config.description,
_HOST_: config.host, _HOST_: config.host,
_HOSTNAME_: config.hostname, _HOSTNAME_: config.hostname,
_URL_: config.url, _URL_: config.url,