Complete server manager and load channel list

This commit is contained in:
Midgard 2020-03-26 23:25:35 +01:00
parent 9c8dc01f18
commit 4ce30be711
Signed by: midgard
GPG key ID: 511C112F1331BBB4
3 changed files with 146 additions and 63 deletions

View file

@ -7,10 +7,13 @@ body {
line-height: 1.5;
}
input {
input, button {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
h1 {
text-align: center;
@ -23,8 +26,12 @@ h1 img {
}
#login {
display: none;
text-align: center;
}
#login:target {
display: block;
}
#login table {
margin: 0 auto 1em;
}

View file

@ -14,26 +14,35 @@
<script type="text/javascript">document.body.innerHTML = "";</script>
<h1><img src="/assets/feathermost.svg" alt=""/> Feathermost</h1>
<form id="login">
<h2 id="add-a-server">Add a server</h2>
<div id="server_selection">
<ul id="server_selection_list"></ul>
<a href="#login"><button id="server_selection_add">Add a server</button></a>
</div>
<div id="login">
<h2>Add a server</h2>
<table>
<tr id="login_server_row">
<th>Server</th>
<td><input type="text" id="login_server" value="http://localhost:8080" required/></td>
</tr><tr>
<th>Username</th>
<td><input type="text" id="login_username" required/></td>
<th>Email or username</th>
<td><input type="text" id="login_login_id" required/></td>
</tr><tr>
<th>Password</th>
<td><input type="password" id="login_password" required/></td>
</tr>
</table>
<input type="button" id="login_button" value="Log in"/>
<button id="login_button">Log in</button>
<a href="#"><button id="server_selection_add">Cancel</button></a>
<div id="login_message"></div>
</form>
</div>
<pre id="user_json"></pre>
<ul id="channel_list"></ul>
<div id="channel_contents"></div>
<script type="text/javascript" src="/ajax.js"></script>
<script type="text/javascript" src="/main.js"></script>

175
main.js
View file

@ -10,34 +10,37 @@ function byId(id, nullOk=false) {
const LOCALSTORAGE_KEY_SERVER = "mattermostServer";
const RE_SERVER_ITEM = new RegExp(`^${LOCALSTORAGE_KEY_SERVER}_(.*)\$`, "").compile();
class Storage {
const RE_SERVER_ITEM = new RegExp(`^${LOCALSTORAGE_KEY_SERVER}_(.*)\$`, "");
const Storage = {
getServers() {
let servers = [];
for (var i = 0; i < window.localStorage.length; i++) {
const key = window.localStorage.key(i);
const matches = key.match(RE_SERVER_ITEM);
if (matches) {
servers.push(matches[1]);
const endpoint = matches[1];
console.debug(`Found logged in endpoint ${endpoint}`);
let stored = JSON.parse(window.localStorage.getItem(Storage._key_for(endpoint)));
servers.push({...stored, endpoint});
}
}
return servers;
}
},
_key_for(endpoint) {
return `${LOCALSTORAGE_KEY_SERVER}_${endpoint}`;
}
},
clear(endpoint) {
window.localStorage.removeItem(this._key_for(endpoint));
}
window.localStorage.removeItem(Storage._key_for(endpoint));
},
store(endpoint, login_id, token) {
window.localStorage.setItem(this._key_for(endpoint), JSON.stringify({login_id, token}));
}
window.localStorage.setItem(Storage._key_for(endpoint), JSON.stringify({login_id, token}));
},
get(endpoint) {
return JSON.parse(window.localStorage.getItem(this._key_for(endpoint)) || "null");
return JSON.parse(window.localStorage.getItem(Storage._key_for(endpoint)) || "null");
}
}
@ -124,11 +127,13 @@ class MattermostClient {
}
async myTeams() {
const stored = this.storage.get(this.api.id);
const response = await this.api.get("/users/me/teams", stored.token);
return response.responseJson;
}
async myChannels(team_id) {
const stored = this.storage.get(this.api.id);
const response = await this.api.get(`/users/me/teams/${team_id}/channels`, stored.token);
return response.responseJson;
}
@ -148,82 +153,144 @@ function normalizedEndpoint(endpoint) {
return `${protocol}${domain}${path}`;
}
function humanReadableEndpoint(endpoint) {
let matches = endpoint.match(/^(https?:\/\/.+)\/api\/v4$/i);
if (!matches) throw Error("Invalid endpoint URL");
return matches[1];
}
function createClient(endpoint) {
const api = new MattermostApi(normalizedEndpoint(endpoint));
const storage = new Storage();
return new MattermostClient(api, storage);
return new MattermostClient(api, Storage);
}
function buttonDisable(element, text) {
element.value = text;
if (!element.dataset.originalText) {
element.dataset.originalText = element.innerText;
}
element.innerText = text;
element.disabled = true;
}
function buttonEnable(element, text) {
element.value = text;
function buttonEnable(element) {
element.innerText = element.dataset.originalText;
element.disabled = false;
}
function populateServerSelectionList() {
const servers = Storage.getServers();
let nodes = [];
for (let server of servers) {
const li = document.createElement("li");
const endpoint = humanReadableEndpoint(server.endpoint);
li.innerText = `${server.login_id}@${endpoint} `;
const logoutButton = document.createElement("button");
logoutButton.className = "logout";
logoutButton.innerText = "Log out";
logoutButton.addEventListener("click", e => logOut(endpoint, e.currentTarget));
li.appendChild(logoutButton);
nodes.push(li);
}
byId("server_selection_list").innerHTML = "";
byId("server_selection_list").append(...nodes);
}
populateServerSelectionList();
function populateChannelList() {
async function addChannelItems(endpoint) {
const client = createClient(endpoint);
const teams = await client.myTeams();
console.log(teams);
for (let team of teams) {
let nodes = [];
const channels = await client.myChannels(team.id);
console.log(channels);
for (let channel of channels) {
const li = document.createElement("li");
const a = document.createElement("a");
a.href = "javascript:void(0)";
switch (channel.type) {
case "O": // Public channel
a.innerText = `${team.name}/${channel.name}`;
break;
case "P": // Private channel
a.innerText = `🔒 ${team.name}/${channel.name}`;
break;
case "D": // Direct message
a.innerText = `👤 ...`;
break;
case "G": // Group chat
a.innerText = `👥 ${channel.display_name}`;
break;
default: // Unsupported
a.innerText = `${channel.type} ${team.name}/${channel.name}`;
break;
}
a.addEventListener("click", () => switchToChannel(team.id, channel.id));
li.appendChild(a);
nodes.push(li);
}
byId("channel_list").append(...nodes);
}
}
const servers = Storage.getServers();
byId("channel_list").innerHTML = "";
for (let server of servers) {
addChannelItems(server.endpoint);
}
}
populateChannelList();
function logIn() {
byId("user_json").innerText = "";
const client = createClient(byId("login_server").value);
const client = createClient(byId("server").value);
buttonDisable(byId("login_button"), "Logging in...");
buttonDisable(byId("login"), "Logging in...");
client.logIn(byId("username").value, byId("password").value)
client.logIn(byId("login_login_id").value, byId("login_password").value)
.then(json => {
buttonEnable(byId("login"), "Logged in");
buttonEnable(byId("login_button"));
byId("login_message").innerText = "";
byId("user_json").innerText = JSON.stringify(json, null, 2);
byId("channel_list").innerText = `Logged in as ${json.username}`;
window.location = "#";
populateServerSelectionList();
populateChannelList();
})
.catch(error => {
console.error(error);
buttonEnable(byId("login"), "Could not log in");
buttonEnable(byId("login_button"));
byId("login_message").innerText = `${error}`;
});
}
function logOut() {
const client = createClient(byId("server").value);
function logOut(endpoint, button) {
const client = createClient(endpoint);
buttonDisable(byId("logout"), "Logging out...");
buttonDisable(button, "Logging out...");
client.logOut()
.then(response => {
buttonEnable(byId("logout"), "Logged out");
byId("logout_message").innerText = "";
byId("user_json").innerText = "";
console.info("Succesfully logged out");
populateServerSelectionList();
populateChannelList();
})
.catch(error => {
console.error(error);
buttonEnable(byId("logout"), "Could not log out");
byId("logout_message").innerText = `${error}`;
const span = document.createElement("span");
span.innerText = `Failed to log out: ${error.message}`;
button.parentElement.appendChild(span);
buttonEnable(button);
});
}
function validateToken() {
byId("user_json").innerText = "";
const client = createClient(byId("server").value);
buttonDisable(byId("validate"), "Validating token...");
let cred = client.storage.get(client.api.id);
if (!cred || !cred.token) {
buttonEnable(byId("validate"), "No token, log in first");
return;
function switchToChannel(team_id, channel_id) {
window.location = "#channel_contents";
}
client.usersMe()
.then(json => {
buttonEnable(byId("validate"), "Validation succeeded");
byId("validate_message").innerText = "";
byId("user_json").innerText = JSON.stringify(json, null, 2);
})
.catch(error => {
console.error(error);
buttonEnable(byId("validate"), "Validation failed");
byId("validate_message").innerText = `${error}`;
});
}
byId("login_button").addEventListener("click", logIn);