mirror of
https://github.com/misskey-dev/misskey
synced 2024-06-26 12:28:27 +02:00
288 lines
7.6 KiB
HTML
288 lines
7.6 KiB
HTML
<mk-settings>
|
|
<div class="nav">
|
|
<p class={ active: page == 'account' } onmousedown={ setPage.bind(null, 'account') }><i class="fa fa-fw fa-user"></i>アカウント</p>
|
|
<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }><i class="fa fa-fw fa-desktop"></i>Web</p>
|
|
<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }><i class="fa fa-fw fa-bell-o"></i>通知</p>
|
|
<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }><i class="fa fa-fw fa-cloud"></i>ドライブ</p>
|
|
<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }><i class="fa fa-fw fa-puzzle-piece"></i>アプリ</p>
|
|
<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }><i class="fa fa-fw fa-twitter"></i>Twitter</p>
|
|
<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }><i class="fa fa-fw fa-sign-in"></i>ログイン履歴</p>
|
|
<p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }><i class="fa fa-fw fa-unlock-alt"></i>%i18n:desktop.tags.mk-settings.password%</p>
|
|
<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }><i class="fa fa-fw fa-key"></i>API</p>
|
|
</div>
|
|
<div class="pages">
|
|
<section class="account" show={ page == 'account' }>
|
|
<h1>アカウント</h1>
|
|
<label class="avatar">
|
|
<p>アバター</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
|
<button class="style-normal" onclick={ avatar }>画像を選択</button>
|
|
</label>
|
|
<label>
|
|
<p>名前</p>
|
|
<input ref="accountName" type="text" value={ I.name }/>
|
|
</label>
|
|
<label>
|
|
<p>場所</p>
|
|
<input ref="accountLocation" type="text" value={ I.profile.location }/>
|
|
</label>
|
|
<label>
|
|
<p>自己紹介</p>
|
|
<textarea ref="accountDescription">{ I.description }</textarea>
|
|
</label>
|
|
<label>
|
|
<p>誕生日</p>
|
|
<input ref="accountBirthday" type="date" value={ I.profile.birthday }/>
|
|
</label>
|
|
<button class="style-primary" onclick={ updateAccount }>保存</button>
|
|
</section>
|
|
|
|
<section class="web" show={ page == 'web' }>
|
|
<h1>デザイン</h1>
|
|
<a href="/i/customize-home">ホームをカスタマイズ</a>
|
|
</section>
|
|
|
|
<section class="web" show={ page == 'web' }>
|
|
</section>
|
|
|
|
<section class="apps" show={ page == 'apps' }>
|
|
<h1>アプリケーション</h1>
|
|
<mk-authorized-apps/>
|
|
</section>
|
|
|
|
<section class="twitter" show={ page == 'twitter' }>
|
|
<h1>Twitter</h1>
|
|
<mk-twitter-setting/>
|
|
</section>
|
|
|
|
<section class="signin" show={ page == 'signin' }>
|
|
<h1>ログイン履歴</h1>
|
|
<mk-signin-history/>
|
|
</section>
|
|
|
|
<section class="password" show={ page == 'password' }>
|
|
<h1>%i18n:desktop.tags.mk-settings.password%</h1>
|
|
<mk-password-setting/>
|
|
</section>
|
|
|
|
<section class="api" show={ page == 'api' }>
|
|
<h1>API</h1>
|
|
<mk-api-info/>
|
|
</section>
|
|
</div>
|
|
<style>
|
|
:scope
|
|
display flex
|
|
width 100%
|
|
height 100%
|
|
|
|
input:not([type])
|
|
input[type='text']
|
|
input[type='password']
|
|
input[type='email']
|
|
input[type='date']
|
|
textarea
|
|
padding 8px
|
|
width 100%
|
|
font-size 16px
|
|
color #55595c
|
|
border solid 1px #dadada
|
|
border-radius 4px
|
|
|
|
&:hover
|
|
border-color #aeaeae
|
|
|
|
&:focus
|
|
border-color #aeaeae
|
|
|
|
> .nav
|
|
flex 0 0 200px
|
|
width 100%
|
|
height 100%
|
|
padding 16px 0 0 0
|
|
overflow auto
|
|
border-right solid 1px #ddd
|
|
|
|
> p
|
|
display block
|
|
padding 10px 16px
|
|
margin 0
|
|
color #666
|
|
cursor pointer
|
|
user-select none
|
|
transition margin-left 0.2s ease
|
|
|
|
> i
|
|
margin-right 4px
|
|
|
|
&:hover
|
|
color #555
|
|
|
|
&.active
|
|
margin-left 8px
|
|
color $theme-color !important
|
|
|
|
> .pages
|
|
width 100%
|
|
height 100%
|
|
flex auto
|
|
overflow auto
|
|
|
|
> section
|
|
padding 32px
|
|
|
|
// & + section
|
|
// margin-top 16px
|
|
|
|
h1
|
|
display block
|
|
margin 0
|
|
padding 0 0 8px 0
|
|
font-size 1em
|
|
color #555
|
|
border-bottom solid 1px #eee
|
|
|
|
label
|
|
display block
|
|
margin 16px 0
|
|
|
|
&:after
|
|
content ""
|
|
display block
|
|
clear both
|
|
|
|
> p
|
|
margin 0 0 8px 0
|
|
font-weight bold
|
|
color #373a3c
|
|
|
|
&.checkbox
|
|
> input
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
|
|
&:checked + p
|
|
color $theme-color
|
|
|
|
> p
|
|
width calc(100% - 32px)
|
|
margin 0 0 0 32px
|
|
font-weight bold
|
|
|
|
&:last-child
|
|
font-weight normal
|
|
color #999
|
|
|
|
&.account
|
|
> .general
|
|
> .avatar
|
|
> img
|
|
display block
|
|
float left
|
|
width 64px
|
|
height 64px
|
|
border-radius 4px
|
|
|
|
> button
|
|
float left
|
|
margin-left 8px
|
|
|
|
</style>
|
|
<script>
|
|
import updateAvatar from '../scripts/update-avatar';
|
|
import notify from '../scripts/notify';
|
|
|
|
this.mixin('i');
|
|
this.mixin('api');
|
|
|
|
this.page = 'account';
|
|
|
|
this.setPage = page => {
|
|
this.page = page;
|
|
};
|
|
|
|
this.avatar = () => {
|
|
updateAvatar(this.I);
|
|
};
|
|
|
|
this.updateAccount = () => {
|
|
this.api('i/update', {
|
|
name: this.refs.accountName.value,
|
|
location: this.refs.accountLocation.value || null,
|
|
description: this.refs.accountDescription.value || null,
|
|
birthday: this.refs.accountBirthday.value || null
|
|
}).then(() => {
|
|
notify('プロフィールを更新しました');
|
|
});
|
|
};
|
|
</script>
|
|
</mk-settings>
|
|
|
|
<mk-api-info>
|
|
<p>Token:<code>{ I.token }</code></p>
|
|
<p>APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。</p>
|
|
<p>アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。</p>
|
|
<p>万が一このトークンが漏れたりその可能性がある場合は<a class="regenerate" onclick={ regenerateToken }>トークンを再生成</a>できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)</p>
|
|
<style>
|
|
:scope
|
|
display block
|
|
color #4a535a
|
|
|
|
code
|
|
padding 4px
|
|
background #eee
|
|
</style>
|
|
<script>
|
|
import passwordDialog from '../scripts/password-dialog';
|
|
|
|
this.mixin('i');
|
|
this.mixin('api');
|
|
|
|
this.regenerateToken = () => {
|
|
passwordDialog('%i18n:desktop.tags.mk-api-info.regenerate-token%', password => {
|
|
this.api('i/regenerate_token', {
|
|
password: password
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
</mk-api-info>
|
|
|
|
<mk-password-setting>
|
|
<button onclick={ reset }>%i18n:desktop.tags.mk-password-setting.reset%</button>
|
|
<style>
|
|
:scope
|
|
display block
|
|
color #4a535a
|
|
</style>
|
|
<script>
|
|
import passwordDialog from '../scripts/password-dialog';
|
|
import dialog from '../scripts/dialog';
|
|
import notify from '../scripts/notify';
|
|
|
|
this.mixin('i');
|
|
this.mixin('api');
|
|
|
|
this.reset = () => {
|
|
passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-current-password%', currentPassword => {
|
|
passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-new-password%', newPassword => {
|
|
passwordDialog('%i18n:desktop.tags.mk-password-setting.enter-new-password-again%', newPassword2 => {
|
|
if (newPassword !== newPassword2) {
|
|
dialog(null, '%i18n:desktop.tags.mk-password-setting.not-match%', [{
|
|
text: 'OK'
|
|
}]);
|
|
return;
|
|
}
|
|
this.api('i/change_password', {
|
|
current_password: currentPassword,
|
|
new_password: newPassword
|
|
}).then(() => {
|
|
notify('%i18n:desktop.tags.mk-password-setting.changed%');
|
|
});
|
|
});
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
</mk-password-setting>
|