blob: ba7df911e5abb246e6a9dd4b85d69f0693d8b8a9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<template>
<div class="index">
<main v-if="$store.getters.isSignedIn">
<p class="fetching" v-if="fetching">%i18n:@loading%<mk-ellipsis/></p>
<x-form
class="form"
ref="form"
v-if="state == 'waiting'"
:session="session"
@denied="state = 'denied'"
@accepted="accepted"
/>
<div class="denied" v-if="state == 'denied'">
<h1>%i18n:@denied%</h1>
<p>%i18n:@denied-paragraph%</p>
</div>
<div class="accepted" v-if="state == 'accepted'">
<h1>{{ session.app.isAuthorized ? '%i18n:@already-authorized%' : '%i18n:@allowed%' }}</h1>
<p v-if="session.app.callbackUrl">%i18n:@callback-url%<mk-ellipsis/></p>
<p v-if="!session.app.callbackUrl">%i18n:@please-go-back%</p>
</div>
<div class="error" v-if="state == 'fetch-session-error'">
<p>%i18n:@error%</p>
</div>
</main>
<main class="signin" v-if="!$store.getters.isSignedIn">
<h1>%i18n:@sign-in%</h1>
<mk-signin/>
</main>
<footer><img src="/assets/auth/icon.svg" alt="Misskey"/></footer>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XForm from './form.vue';
export default Vue.extend({
components: {
XForm
},
data() {
return {
state: null,
session: null,
fetching: true
};
},
computed: {
token(): string {
return this.$route.params.token;
}
},
mounted() {
if (!this.$store.getters.isSignedIn) return;
// Fetch session
(this as any).api('auth/session/show', {
token: this.token
}).then(session => {
this.session = session;
this.fetching = false;
// 既に連携していた場合
if (this.session.app.isAuthorized) {
(this as any).api('auth/accept', {
token: this.session.token
}).then(() => {
this.accepted();
});
} else {
this.state = 'waiting';
}
}).catch(error => {
this.state = 'fetch-session-error';
this.fetching = false;
});
},
methods: {
accepted() {
this.state = 'accepted';
if (this.session.app.callbackUrl) {
location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`;
}
}
}
});
</script>
<style lang="stylus" scoped>
.index
> main
width 100%
max-width 500px
margin 0 auto
text-align center
background #fff
box-shadow 0px 4px 16px rgba(#000, 0.2)
> .fetching
margin 0
padding 32px
color #555
> div:not(.form)
padding 64px
> h1
margin 0 0 8px 0
padding 0
font-size 20px
font-weight normal
> p
margin 0
color #555
&.denied > h1
color #e65050
&.accepted > h1
color #54af7c
&.signin
padding 32px 32px 16px 32px
> h1
margin 0 0 22px 0
padding 0
font-size 20px
font-weight normal
color #555
@media (max-width 600px)
max-width none
box-shadow none
@media (max-width 500px)
> div
> h1
font-size 16px
> footer
> img
display block
width 32px
height 32px
margin 16px auto
</style>
|
