session management

Author: MathMan05

src/webpage/jsontypes.ts

@@ -73,15 +73,7 @@ interface readyjson {
 		country_code: string;
 		users: userjson[];
 		merged_members: [memberjson][];
-		sessions: {
-			active: boolean;
-			activities: []; //will need to find example of this
-			client_info: {
-				version: number;
-			};
-			session_id: string;
-			status: string;
-		}[];
+		sessions: sessionJson[];
 		resume_gateway_url: string;
 		consents: {
 			personalization: {
@@ -104,6 +96,50 @@ interface readyjson {
 		};
 	};
 }
+export interface sessionJson {
+	active: boolean;
+	activities: []; //will need to find example of this
+	client_info: {
+		version: number;
+	};
+	session_id: string;
+	status: string;
+}
+export interface sesLocation {
+	is_eu: boolean;
+	city: string | null;
+	region: string | null;
+	region_code: string | null;
+	country_name: string;
+	country_code: string;
+	continent_name: string;
+	continent_code: string;
+	latitude: number;
+	longitude: number;
+	postal: string | null;
+	calling_code: string;
+	flag: string;
+	emoji_flag: string;
+	emoji_unicode: string;
+}
+export interface expSessionJson {
+	id: string;
+	id_hash: string;
+	status: string;
+	activities: [];
+	client_status: {};
+	approx_last_used_time: string;
+	client_info: {
+		platform?: string;
+		location?: string;
+		os?: string;
+		version?: number;
+	};
+	last_seen: string;
+	last_seen_ip: string;
+	last_seen_location: string | null;
+	last_seen_location_info: sesLocation | null;
+}
 export interface GuildOverrides {
 	channel_overrides: {
 		message_notifications: number;
@@ -1187,6 +1223,7 @@ type opRTC12 = {
 		];
 	};
 };
+
 export {
 	readyjson,
 	dirrectjson,

src/webpage/localuser.ts

@@ -6,6 +6,7 @@ import {createImg, getapiurls, getBulkUsers, installPGet, SW} from "./utils/util
 import {getBulkInfo, setTheme, Specialuser} from "./utils/utils.js";
 import {
 	channeljson,
+	expSessionJson,
 	guildFolder,
 	mainuserjson,
 	memberjson,
@@ -14,6 +15,7 @@ import {
 	messagejson,
 	presencejson,
 	readyjson,
+	sessionJson,
 	startTypingjson,
 	wsjson,
 } from "./jsontypes.js";
@@ -2973,6 +2975,86 @@ class Localuser {
 				devPortal.addHTMLArea(appListContainer);
 			});
 		}
+		//TODO session
+
+		{
+			const manageSessions = settings.addButton(I18n.deviceManage.title());
+			(async () => {
+				const json = (await (
+					await fetch(this.info.api + "/auth/sessions?extended=true", {headers: this.headers})
+				).json()) as {user_sessions: expSessionJson[]};
+				for (const session of json.user_sessions.sort(
+					(a, b) => +new Date(a.last_seen) - +new Date(b.last_seen),
+				)) {
+					const div = document.createElement("div");
+					div.classList.add("flexltr", "sessionDiv");
+
+					const info = document.createElement("div");
+					info.classList.add("flexttb");
+					div.append(info);
+
+					let line2 = "";
+					const last = session.last_seen_location_info;
+					if (last) {
+						line2 += last.country_name;
+						if (last.region) line2 += ", " + last.region;
+						if (last.city) line2 += ", " + last.city;
+					}
+					if (line2) {
+						line2 += " • ";
+					}
+					const format = new Intl.RelativeTimeFormat(I18n.lang, {style: "short"});
+					const time = (Date.now() - +new Date(session.last_seen)) / 1000;
+					if (time < 60) {
+						line2 += format.format(-Math.floor(time), "seconds");
+					} else if (time < 60 * 60) {
+						line2 += format.format(-Math.floor(time / 60), "minutes");
+					} else if (time < 60 * 60 * 24) {
+						line2 += format.format(-Math.floor(time / 60 / 60), "hours");
+					} else if (time < 60 * 60 * 24 * 7) {
+						line2 += format.format(-Math.floor(time / 60 / 60 / 24), "days");
+					} else if (time < 60 * 60 * 24 * 365) {
+						line2 += format.format(-Math.floor(time / 60 / 60 / 24 / 7), "weeks");
+					} else {
+						line2 += format.format(-Math.floor(time / 60 / 60 / 24 / 365), "years");
+					}
+					const loc = document.createElement("span");
+					loc.textContent = line2;
+					info.append(loc);
+					const r = manageSessions.addHTMLArea(div);
+					div.onclick = () => {
+						const sub = manageSessions.addSubOptions(I18n.deviceManage.manageDev());
+						sub.addText(I18n.deviceManage.ip(session.last_seen_ip));
+						sub.addText(I18n.deviceManage.last(session.approx_last_used_time));
+						if (last) {
+							sub.addText(I18n.deviceManage.estimateWarn());
+							sub.addText(I18n.deviceManage.continent(last.continent_name));
+							sub.addText(I18n.deviceManage.country(last.country_name));
+							if (last.region) sub.addText(I18n.deviceManage.region(last.region));
+							if (last.city) sub.addText(I18n.deviceManage.city(last.city));
+							if (last.postal) sub.addText(I18n.deviceManage.postal(last.postal));
+							sub.addText(I18n.deviceManage.longitude(last.longitude + ""));
+							sub.addText(I18n.deviceManage.latitude(last.latitude + ""));
+						}
+						if (session.id !== this.session_id) {
+							sub.addButtonInput("", I18n.deviceManage.logout(), () => {
+								div.remove();
+								r.html = document.createElement("div");
+								manageSessions.returnFromSub();
+								fetch(this.info.api + "/auth/sessions/logout", {
+									method: "POST",
+									headers: this.headers,
+									body: JSON.stringify({
+										session_id_hashes: [session.id_hash],
+									}),
+								});
+							});
+						} else sub.addText(I18n.deviceManage.curSes());
+					};
+				}
+			})();
+		}
+
 		{
 			const deleteAccount = settings.addButton(I18n.localuser.deleteAccount()).addForm(
 				"",

src/webpage/style.css

@@ -183,6 +183,12 @@ body {
 	min-height: 0;
 	display: flex;
 }
+.sessionDiv {
+	padding: 8px;
+	background: #00000040;
+	border-radius: 4px;
+	cursor: pointer;
+}
 .trustedDomain {
 	display: flex;
 	align-items: center;

translations/en.json

@@ -821,6 +821,22 @@
 		"report":"If you found this page within the client please report it:",
 		"whatelse":"What else do you think should happen?"
 	},
+	"deviceManage":{
+		"title":"Manage Sessions",
+		"manageDev":"Manage Device",
+		"ip":"Last known IP: $1",
+		"estimateWarn":"Warning: All of this information is just a best guess, this could be incorrect.",
+		"country":"Country: $1",
+		"region":"Region: $1",
+		"city":"City: $1",
+		"postal":"Postal: $1",
+		"continent":"Continent: $1",
+		"latitude":"Latitude: $1",
+		"longitude":"Longitude: $1",
+		"last":"Approximately last used: $1",
+		"logout":"Logout",
+		"curSes":"This is the current session, you have to logout via the other menu"
+	},
 	"widget": "Guild Widget",
 	"widgetEnabled": "Widget enabled",
 	"incorrectURLS": "## This instance has likely sent the incorrect URLs.\n### If you're the instance owner please see [here](https://docs.spacebar.chat/setup/server/) under *Connecting from remote machines* to correct the issue.\n Would you like Fermi to automatically try to fix this error to let you connect to the instance?",