Mercurial > xmpp-account-manager
annotate client.js @ 13:8724e28ccbd7
Improve styling.
author | Emmanuel Gil Peyrot <linkmauve@linkmauve.fr> |
---|---|
date | Sat, 22 Dec 2018 18:07:00 +0100 |
parents | 139b223dafb0 |
children | 962f64b156dd |
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); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
46 //const url = 'https://' + domainpart + '/.well-known/host-meta'; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
47 const url = '/.well-known/host-meta'; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
48 const xhr = new XMLHttpRequest(); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
49 xhr.onload = function (evt) { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
50 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
|
51 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
|
52 let bosh_service = null; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
53 while (true) { |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
54 const link = links.iterateNext(); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
55 if (!link) |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
56 break; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
57 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
|
58 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
|
59 break; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
60 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
61 // TODO: also support WebSocket. |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
62 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
63 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
|
64 resolve(bosh_service); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
65 }; |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
66 xhr.open('GET', url); |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
67 xhr.send(); |
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 } |
d6df73b466f6
Implement XEP-0156 to discover the right BOSH endpoint.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
0
diff
changeset
|
70 |
0 | 71 function onConnect(status) |
72 { | |
73 if (status == Strophe.Status.CONNECTING) { | |
74 console.log('Strophe is connecting.'); | |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
75 connect_button.value = 'Log out'; |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
76 connect_button.classList.add('disconnect'); |
0 | 77 jid_element.disabled = true; |
78 pass_element.disabled = true; | |
5
cd0434bb2eb1
Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
4
diff
changeset
|
79 spinner_img.hidden = false; |
0 | 80 } else if (status == Strophe.Status.CONNFAIL) { |
81 console.log('Strophe failed to connect.'); | |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
82 onDisconnected(); |
0 | 83 } else if (status == Strophe.Status.DISCONNECTING) { |
84 console.log('Strophe is disconnecting.'); | |
5
cd0434bb2eb1
Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
4
diff
changeset
|
85 spinner_img.hidden = false; |
0 | 86 } else if (status == Strophe.Status.DISCONNECTED) { |
87 console.log('Strophe is disconnected.'); | |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
88 onDisconnected(); |
0 | 89 } else if (status == Strophe.Status.CONNECTED) { |
90 console.log('Strophe is connected.'); | |
91 onConnected(); | |
92 } | |
93 } | |
94 | |
95 function onConnected() | |
96 { | |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
97 jid_element.hidden = true; |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
98 pass_element.hidden = true; |
0 | 99 connected_div.hidden = false; |
5
cd0434bb2eb1
Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
4
diff
changeset
|
100 spinner_img.hidden = true; |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
101 initRoster(connection); |
3
5aa1bf7154b0
Add a simple PEP node viewer and editor.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
1
diff
changeset
|
102 initPEP(connection); |
0 | 103 initNickname(connection); |
104 initAvatar(connection); | |
105 } | |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
106 |
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
107 function onDisconnected() |
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
108 { |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
109 connect_button.value = 'Log in'; |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
110 connect_button.classList.remove('disconnect'); |
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
111 jid_element.hidden = false; |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
112 jid_element.disabled = false; |
13
8724e28ccbd7
Improve styling.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
12
diff
changeset
|
113 pass_element.hidden = false; |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
114 pass_element.disabled = false; |
5
cd0434bb2eb1
Add a spinner on connecting/disconnecting.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
4
diff
changeset
|
115 spinner_img.hidden = true; |
12
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
116 connected_div.hidden = true; |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
117 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
|
118 while (table.hasChildNodes()) { |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
119 table.removeChild(table.lastChild); |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
120 } |
12
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
121 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
|
122 while (table.hasChildNodes()) { |
139b223dafb0
Actually remove all of the extra data on disconnect.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
10
diff
changeset
|
123 table.removeChild(table.lastChild); |
4
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
124 } |
5e97e1808a35
Add support for the roster.
Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
parents:
3
diff
changeset
|
125 } |
0 | 126 }); |