Mercurial > xmpp-account-manager
annotate client.js @ 15:3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
author | Emmanuel Gil Peyrot <linkmauve@linkmauve.fr> |
---|---|
date | Sat, 22 Dec 2018 18:38:27 +0100 |
parents | 962f64b156dd |
children | 07543f7f5e89 |
rev | line source |
---|---|
0 | 1 'use strict'; |
2 | |
3 document.addEventListener('DOMContentLoaded', function () { | |
1
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
4 let connection = null; |
0 | 5 |
6 const jid_element = document.getElementById('jid'); | |
7 const pass_element = document.getElementById('pass'); | |
8 const connect_button = document.getElementById('connect'); | |
10
e47b9bd55192
Also use a spinner on nickname get/set.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
5
diff
changeset
|
9 const spinner_img = document.getElementById('connect-spinner'); |
0 | 10 |
11 const connected_div = document.getElementById('connected'); | |
12 | |
13 const avatar_img = document.getElementById('avatar'); | |
14 | |
1
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
15 function rawInput(data) |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
16 { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
17 console.log('RECV', data); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
18 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
19 |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
20 function rawOutput(data) |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
21 { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
22 console.log('SENT', data); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
23 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
24 |
0 | 25 connect_button.addEventListener('click', function (evt) { |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
26 if (!connect_button.classList.contains('disconnect')) { |
1
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
27 const jid = jid_element.value; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
28 getBOSHService(jid).then((bosh_service) => { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
29 connection = new Strophe.Connection(bosh_service); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
30 connection.rawInput = rawInput; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
31 connection.rawOutput = rawOutput; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
32 connection.connect(jid, |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
33 pass_element.value, |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
34 onConnect); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
35 }); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
36 } else if (connection != null) { |
0 | 37 connection.disconnect(); |
38 } | |
39 evt.preventDefault(); | |
40 }); | |
41 | |
1
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
42 function getBOSHService(jid) |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
43 { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
44 return new Promise((resolve, reject) => { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
45 const [nodepart, domainpart] = jid.split('@', 2); |
14
962f64b156dd
Stop hardcoding XEP-0156 file to the current domain.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
13
diff
changeset
|
46 const url = 'https://' + domainpart + '/.well-known/host-meta'; |
1
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
47 const xhr = new XMLHttpRequest(); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
48 xhr.onload = function (evt) { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
49 const xml = evt.target.responseXML; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
50 const links = parseXPath(xml, './xrd:XRD/xrd:Link', XPathResult.ORDERED_NODE_ITERATOR_TYPE); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
51 let bosh_service = null; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
52 while (true) { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
53 const link = links.iterateNext(); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
54 if (!link) |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
55 break; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
56 if (link.getAttributeNS(null, 'rel') == 'urn:xmpp:alt-connections:xbosh') { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
57 bosh_service = link.getAttributeNS(null, 'href'); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
58 break; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
59 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
60 // TODO: also support WebSocket. |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
61 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
62 console.log('bosh_service', bosh_service); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
63 resolve(bosh_service); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
64 }; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
65 xhr.open('GET', url); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
66 xhr.send(); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
67 }); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
68 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
69 |
0 | 70 function onConnect(status) |
71 { | |
72 if (status == Strophe.Status.CONNECTING) { | |
73 console.log('Strophe is connecting.'); | |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
74 connect_button.value = 'Log out'; |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
75 connect_button.classList.add('disconnect'); |
0 | 76 jid_element.disabled = true; |
77 pass_element.disabled = true; | |
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
14
diff
changeset
|
78 displaySpinner(spinner_img); |
0 | 79 } else if (status == Strophe.Status.CONNFAIL) { |
80 console.log('Strophe failed to connect.'); | |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
81 onDisconnected(); |
0 | 82 } else if (status == Strophe.Status.DISCONNECTING) { |
83 console.log('Strophe is disconnecting.'); | |
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
14
diff
changeset
|
84 displaySpinner(spinner_img); |
0 | 85 } else if (status == Strophe.Status.DISCONNECTED) { |
86 console.log('Strophe is disconnected.'); | |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
87 onDisconnected(); |
0 | 88 } else if (status == Strophe.Status.CONNECTED) { |
89 console.log('Strophe is connected.'); | |
90 onConnected(); | |
91 } | |
92 } | |
93 | |
94 function onConnected() | |
95 { | |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
96 jid_element.hidden = true; |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
97 pass_element.hidden = true; |
0 | 98 connected_div.hidden = false; |
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
14
diff
changeset
|
99 hideSpinner(spinner_img); |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
100 initRoster(connection); |
3
5aa1bf7154b0
Add a simple PEP node viewer and editor.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
101 initPEP(connection); |
0 | 102 initNickname(connection); |
103 initAvatar(connection); | |
104 } | |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
105 |
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
106 function onDisconnected() |
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
107 { |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
108 connect_button.value = 'Log in'; |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
109 connect_button.classList.remove('disconnect'); |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
110 jid_element.hidden = false; |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
111 jid_element.disabled = false; |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
112 pass_element.hidden = false; |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
113 pass_element.disabled = false; |
15
3eed9fe0bd7c
End spinners with either a green ✔ or a red ✘.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
14
diff
changeset
|
114 hideSpinner(spinner_img); |
12
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
115 connected_div.hidden = true; |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
116 let table = document.getElementById('roster-table'); |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
117 while (table.hasChildNodes()) { |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
118 table.removeChild(table.lastChild); |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
119 } |
12
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
120 table = document.getElementById('pep-table'); |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
121 while (table.hasChildNodes()) { |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
122 table.removeChild(table.lastChild); |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
123 } |
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
124 } |
0 | 125 }); |