misskey/src/client/app/mobile/views/pages/welcome.vue

206 lines
4.3 KiB
Vue
Raw Normal View History

2018-02-21 19:11:24 +01:00
<template>
2018-02-21 21:05:19 +01:00
<div class="welcome">
2018-04-27 12:12:15 +02:00
<div>
<h1><b>Misskey</b>へようこそ</h1>
<p>Twitter風ミニブログSNSMisskeyへようこそ共有したいことを投稿したりタイムラインでみんなの投稿を読むこともできます<br><a href="/signup">アカウントを作成する</a></p>
<div class="form">
<p>%fa:lock% ログイン</p>
2018-02-21 21:05:19 +01:00
<div>
2018-04-27 12:12:15 +02:00
<form @submit.prevent="onSubmit">
<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
<input v-model="password" type="password" placeholder="パスワード" required/>
<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
</form>
<div>
<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
</div>
2018-02-21 21:05:19 +01:00
</div>
</div>
2018-04-27 12:12:15 +02:00
<div class="tl">
<p>%fa:comments R% タイムラインを見てみる</p>
<mk-welcome-timeline/>
</div>
<div class="users">
<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${user.username}`">
<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
</div>
<footer>
<small>{{ copyright }}</small>
</footer>
2018-02-21 21:05:19 +01:00
</div>
2018-02-21 19:11:24 +01:00
</div>
</template>
2018-02-21 21:05:19 +01:00
<script lang="ts">
import Vue from 'vue';
2018-03-16 19:33:36 +01:00
import { apiUrl, copyright } from '../../../config';
2018-02-21 21:05:19 +01:00
export default Vue.extend({
data() {
return {
signing: false,
user: null,
username: '',
password: '',
token: '',
2018-03-16 19:33:36 +01:00
apiUrl,
2018-03-17 15:01:17 +01:00
copyright,
users: []
2018-02-21 21:05:19 +01:00
};
},
mounted() {
2018-03-17 15:01:17 +01:00
(this as any).api('users', {
sort: '+follower',
limit: 20
}).then(users => {
this.users = users;
});
2018-02-21 21:05:19 +01:00
},
methods: {
onUsernameChange() {
(this as any).api('users/show', {
username: this.username
}).then(user => {
this.user = user;
});
},
onSubmit() {
this.signing = true;
(this as any).api('signin', {
username: this.username,
password: this.password,
2018-04-07 20:58:11 +02:00
token: this.user && this.user.twoFactorEnabled ? this.token : undefined
2018-02-21 21:05:19 +01:00
}).then(() => {
location.reload();
}).catch(() => {
alert('something happened');
this.signing = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
.welcome
2018-04-27 12:12:15 +02:00
background linear-gradient(to bottom, #1e1d65, #bd6659)
2018-02-21 21:05:19 +01:00
2018-04-27 12:12:15 +02:00
> div
padding 16px
margin 0 auto
max-width 500px
2018-02-21 21:05:19 +01:00
2018-04-27 12:12:15 +02:00
h1
margin 0
padding 8px
font-size 1.5em
font-weight normal
color #cacac3
& + p
margin 0 0 16px 0
padding 0 8px 0 8px
color #949fa9
.form
margin-bottom 16px
background #fff
2018-04-29 01:51:17 +02:00
border solid 1px rgba(#000, 0.2)
2018-04-27 12:12:15 +02:00
border-radius 8px
overflow hidden
> p
margin 0
padding 12px 20px
color #555
background #f5f5f5
2018-02-21 21:05:19 +01:00
border-bottom solid 1px #ddd
> div
2018-03-16 19:33:36 +01:00
2018-04-27 12:12:15 +02:00
> form
padding 16px
border-bottom solid 1px #ddd
input
display block
padding 12px
margin 0 0 16px 0
width 100%
font-size 1em
2018-04-29 01:51:17 +02:00
color rgba(#000, 0.7)
2018-04-27 12:12:15 +02:00
background #fff
outline none
border solid 1px #ddd
border-radius 4px
button
display block
width 100%
padding 10px
margin 0
color #333
font-size 1em
text-align center
text-decoration none
text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
background-image linear-gradient(#fafafa, #eaeaea)
border 1px solid #ddd
border-bottom-color #cecece
border-radius 4px
&:active
background-color #767676
background-image none
border-color #444
2018-04-29 01:51:17 +02:00
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
2018-04-27 12:12:15 +02:00
> div
padding 16px
text-align center
2018-03-16 19:33:36 +01:00
2018-04-27 12:12:15 +02:00
> .tl
background #fff
2018-04-29 01:51:17 +02:00
border solid 1px rgba(#000, 0.2)
2018-04-27 12:12:15 +02:00
border-radius 8px
overflow hidden
> p
margin 0
padding 12px 20px
color #555
background #f5f5f5
border-bottom solid 1px #ddd
2018-03-16 19:33:36 +01:00
2018-04-27 12:12:15 +02:00
> .mk-welcome-timeline
max-height 300px
overflow auto
2018-03-17 15:01:17 +01:00
2018-04-27 12:12:15 +02:00
> .users
margin 12px 0 0 0
2018-03-17 15:01:17 +01:00
> *
display inline-block
2018-04-27 12:12:15 +02:00
margin 4px
2018-03-17 15:01:17 +01:00
2018-04-27 12:12:15 +02:00
> *
display inline-block
width 38px
height 38px
vertical-align top
border-radius 6px
2018-03-16 19:33:36 +01:00
2018-04-27 12:12:15 +02:00
> footer
text-align center
color #fff
2018-03-17 15:01:17 +01:00
2018-04-27 12:12:15 +02:00
> small
display block
margin 16px 0 0 0
opacity 0.7
2018-03-16 19:33:36 +01:00
2018-02-21 21:05:19 +01:00
</style>