add current source files
[codereview/com/tweet2pocket.git] / web / index.qml
1 import Silk.HTML 5.0
2 import Silk.Cache 1.0
3 import Silk.Utils 1.0
4 import Silk.Bootstrap 2.3 as Bootstrap
5 import QtQml 2.1
6 import '../api' as API
7
8 Template {
9     id: root
10
11     Cache { id: cache }
12     Session { id: session }
13
14     QtObject {
15         id: d
16         property bool authorized: twitter.user_id.length > 0
17     }
18
19     SilkConfig {
20         id: config
21         property variant twitter: {'consumerKey': '', 'consumerSecret': ''}
22         property variant pocket: {'consumerKey': '', 'redirectUri': ''}
23     }
24
25     API.Twitter {
26         id: twitter
27         consumerKey: config.twitter.consumerKey
28         consumerSecret: config.twitter.consumerSecret
29         token: session.twitter ? session.twitter.token : ''
30         tokenSecret: session.twitter ? session.twitter.token_secret : ''
31         user_id: session.twitter ? session.twitter.user_id : ''
32         screen_name: session.twitter ? session.twitter.screen_name : ''
33         property var profile_image: session.twitter ? session.twitter.profile_image : undefined
34     }
35
36     API.Pocket {
37         id: pocket
38         consumerKey: config.pocket.consumerKey
39         redirectUri: config.pocket.redirectUri
40     }
41
42     UserInput {
43         id: input
44
45         onSubmit: {
46             console.debug('+ UserInput.onSubmit', http.requestHeader['x-forwarded-for'])
47             if (typeof http.requestCookies.session_id !== 'undefined') {
48                 console.debug('http.requestCookies.session_id.value', http.requestCookies.session_id.value)
49                 session.key = http.requestCookies.session_id.value
50                 if (session.twitter && !session.twitter.profile_image) {
51                     http.loading = true
52
53                     var request = new XMLHttpRequest
54                     request.onreadystatechange = function() {
55                         switch (request.readyState) {
56                         case XMLHttpRequest.DONE: {
57                             twitter.profile_image = JSON.parse(request.responseText).profile_image_url
58                             var data = session.twitter
59                             data.profile_image = twitter.profile_image
60                             session.twitter = data
61                             http.loading = false
62                             break }
63                         }
64                     }
65                     var header = twitter.authHeader('GET', 'https://api.twitter.com/1.1/account/verify_credentials.json');
66                     request.open('GET', 'https://api.twitter.com/1.1/account/verify_credentials.json');
67                     request.setRequestHeader('Authorization', header);
68                     request.send();
69                 }
70                 if (session.pocket && session.pocket.token && session.pocket.username) {
71                     pocket.token = session.pocket.token
72                     pocket.username = session.pocket.username
73                 }
74             }
75             console.debug('- UserInput.onSubmit')
76         }
77     }
78
79     title: "Tweet 2 Pocket"
80
81     Bootstrap.Container {
82         Bootstrap.HeroUnit {
83             H1 { A { href: '/'; text: root.title } }
84             Bootstrap.Lead { text: '「あとで」「後で」で始まる自分のつぶやきを、自動で <a href="http://getpocket.com/" target="_blank">pocket</a> に保存する簡単なサービスです。' }
85         }
86
87         Bootstrap.RowFluid {
88             Bootstrap.Span6 {
89                 Form {
90                     enabled: !d.authorized
91                     _class: 'form-signin'
92                     method: 'POST'
93                     action: '/twitter.qml'
94
95                     H2 {
96                         _class: 'form-signin-heading'
97                         Text { text: '1. Twitter アカウントでログイン' }
98                     }
99                     P {
100                         _class: 'text-center'
101                         Bootstrap.Btn {
102                             _class: 'btn-primary btn-large'
103                             type: 'submit'
104                             Text { text: 'ログイン' }
105                         }
106                     }
107                     Input { type: 'hidden'; name: 'action'; value: 'authorize' }
108                 }
109                 Form {
110                     enabled: d.authorized
111                     _class: 'form-signin'
112                     method: 'POST'
113                     action: '/twitter.qml'
114
115                     H2 {
116                         _class: 'form-signin-heading muted'
117                         Text { text: '1. Twitter アカウントでログイン' }
118                     }
119                     P {
120                         _class: 'text-info text-center'
121                         Img {
122                             enabled: typeof twitter.profile_image !== 'undefined' && twitter.profile_image3
123                             src: enabled ? twitter.profile_image : ''
124                             width: '24'
125                             height: '24'
126                         }
127                         Text {
128                             text: '@%1 '.arg(twitter.screen_name)
129                         }
130                         Bootstrap.Btn {
131                             type: 'submit'
132                             Text { text: qsTr('ログアウト') }
133                         }
134                     }
135                     Input { type: 'hidden'; name: 'action'; value: 'unauthorize' }
136                 }
137                 Form {
138                     enabled: pocket.username.length === 0
139                     _class: 'form-signin'
140                     method: 'POST'
141                     action: '/pocket.qml'
142
143                     H2 {
144                         _class: 'form-signin-heading%1'.arg(d.authorized ? '' : ' muted')
145                         Text { text: '2. pocket アカウントを紐付ける' }
146                     }
147                     P {
148                         _class: 'text-center'
149                         Bootstrap.Btn {
150                             _class: 'btn-primary btn-large'
151                             type: 'submit'
152                             text: '認証開始'
153                             disabled: d.authorized ? '' : 'disabled'
154                         }
155                     }
156                     Input { type: 'hidden'; name: 'action'; value: 'authenticate' }
157                 }
158                 Form {
159                     enabled: pocket.username.length > 0
160                     _class: 'form-signin'
161                     method: 'POST'
162                     action: '/pocket.qml'
163
164                     H2 {
165                         _class: 'form-signin-heading muted'
166                         Text { text: '2. pocket アカウントを紐付ける' }
167                     }
168                     P {
169                         _class: 'text-info text-center'
170                         Text { text: '%1 '.arg(pocket.username) }
171                         Bootstrap.Btn {
172                             type: 'submit'
173                             text: '紐付けの解除'
174                         }
175                     }
176                     Input { type: 'hidden'; name: 'action'; value: 'unauthenticate' }
177                 }
178             }
179             Bootstrap.Span6 {
180                 Div {
181                     _class: 'form-signin'
182                     H2 {
183                         _class: 'form-signin-heading%1'.arg(d.authorized && pocket.username.length > 0 ? '': ' muted')
184                         Text { text: '3. "あとで〜" とつぶやく' }
185                     }
186                     P {
187                         _class: 'text-center'
188                         A {
189                             href: 'https://twitter.com/share'
190                             _class: 'twitter-share-button'
191                             property string data_url: 'http://tweet2pocket.com/'
192                             property string data_text: 'あとで自分の pocket に自動保存されるつぶやきはこちら'
193                             property string data_lang: 'ja'
194                             property string data_size: 'large'
195                             property string data_count: 'none'
196                             property string data_hashtags: 'tweet2pocket'
197                             text: 'ツイート'
198                         }
199                         Script {
200                             text: "!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');"
201                         }
202                     }
203                 }
204
205                 Div {
206                     _class: 'form-signin'
207                     H2 {
208                         _class: 'form-signin-heading%1'.arg(d.authorized && pocket.username.length > 0 ? '': ' muted')
209                         Text { text: '4. Pocket に保存されます' }
210                     }
211                     P {
212                         _class: 'text-center'
213                         Bootstrap.ABtn {
214                             _class: 'btn-large'
215                             text: 'pocket を開く...'
216                             href: 'http://getpocket.com/a/queue/'
217                             target: '_blank'
218                         }
219                         P {
220                             _class: 'text-info text-center'
221                             text: ' 反映されるまでに数分かかります'
222                         }
223                     }
224                 }
225             }
226         }
227     }
228
229     Footer {
230         _class: 'footer'
231         Bootstrap.Container {
232             P {
233                 _class: 'text-center'
234                 text: 'Tweet2Pocket はウェブフレームワーク <a href="http://silk.qtquick.me/" target="_blank">Silk</a> のデモサービスとして開発されました。'
235             }
236             P {
237                 _class: 'text-center'
238                 text: 'Tweet2Pocket に関するお問い合わせは <a href="http://twitter.com/task_jp" target="_blank">@task_jp</a> まで。'
239             }
240         }
241     }
242 }