Skip to content

Commit

Permalink
basic settings opening and settings button/pfp
Browse files Browse the repository at this point in the history
  • Loading branch information
iiPythonx committed Jul 24, 2024
1 parent ee78788 commit 6ba6c8b
Show file tree
Hide file tree
Showing 23 changed files with 1,526 additions and 125 deletions.
2 changes: 0 additions & 2 deletions nightwatch/desktop/src/css/lib.bundle.css

This file was deleted.

5 changes: 2 additions & 3 deletions nightwatch/desktop/src/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ body {
background-color: var(--sd-black-d10);
}
ul.nav {
gap: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
Expand Down Expand Up @@ -63,8 +62,8 @@ ul.nav {

/* Popper popups */
div.nw-tooltip {
background: #222;
color: white;
background: var(--sd-black-d5);
color: var(--sd-white);
font-weight: bold;
padding: 5px;
border-radius: 4px;
Expand Down
7 changes: 4 additions & 3 deletions nightwatch/desktop/src/frames/errors/login.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<div id = "failure"></div>
<script>
(() => {
const { auth } = nightwatch;
document.getElementById("failure").innerHTML = `
<h5>Login Failure</h5>
<hr>
<p>
The authentication server you use (${nightwatch.auth_server}) has failed to authenticate you. <br>
Error details: <code>${nightwatch._error.message}</code>
The authentication server you use (${auth.auth_server}) has failed to authenticate you. <br>
Error details: <code>${auth._error.message}</code>
</p>
<div class = "d-flex justify-content-end gap-2">
<button class = "btn btn-secondary" onclick = "load_frame_as_modal('settings');">Settings</button>
<button class = "btn btn-danger" onclick = "load_frame('auth/login');">Relogin</button>
</div>
`;
delete nightwatch._error;
delete auth._error;
})();
</script>
5 changes: 3 additions & 2 deletions nightwatch/desktop/src/frames/errors/network.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<div id = "failure"></div>
<script>
(() => {
const { auth } = nightwatch;
document.getElementById("failure").innerHTML = `
<h5>Network Failure</h5>
<hr>
<p>
Nightwatch was unable to connect to ${nightwatch.auth_server} to authenticate you. <br>
Nightwatch was unable to connect to ${auth.server} to authenticate you. <br>
Check the console (<code>Ctrl+Shift+I</code>) to find out why.
</p>
<div class = "d-flex justify-content-end gap-2">
<button class = "btn btn-secondary" onclick = "load_frame_as_modal('settings');">Settings</button>
<button class = "btn btn-danger" onclick = "main_login();">Retry</button>
</div>
`;
delete nightwatch._error;
delete auth._error;
})();
</script>
6 changes: 4 additions & 2 deletions nightwatch/desktop/src/frames/server/add.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
</form>
<script>
(() => {
const { conn, frame } = nightwatch;

const button = document.querySelector("button[type = 'submit']");
const address_input = document.getElementById("addressInput");
const set_error = (error) => {
Expand All @@ -38,8 +40,8 @@
if (!address.endsWith("/gateway")) address += "/gateway";

// Attempt to add server
const result = await nightwatch.add_server(address);
if (result.type === "success") return close_modal();
const result = await conn.add_server(address);
if (result.type === "success") return frame.close_modal();
set_error(result.message);
});
})();
Expand Down
8 changes: 4 additions & 4 deletions nightwatch/desktop/src/frames/server/chat.html
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ <h4>Members</h4>
</div>
<script>
(async () => {
const { auth } = nightwatch;

// Main websocket handling
class NightwatchWebsocket {
Expand Down Expand Up @@ -241,10 +242,10 @@ <h4>Members</h4>

// Main events
async identify() {
const authorization = await nightwatch.authorize(`https://${this.url.slice(0, -8)}`);
if (authorization.code !== 200) return notifier.alert(`Failed to authorize server: ${authorization.data}`);
const authorization = await auth.authorize(`https://${this.url.slice(0, -8)}`);
if (authorization.code !== 200) return console.error(`Failed to authorize server: ${authorization.data}`);
this.send_payload("identify", {
auth_server: `https://${nightwatch.auth_server}`,
auth_server: `https://${auth.server}`,
token: authorization.data
});
}
Expand All @@ -265,7 +266,6 @@ <h4>Members</h4>
function scroll(group) {
const newMessageHeight = group.offsetHeight + parseInt(getComputedStyle(group).marginBottom);
const scrollOffset = chat.scrollTop + chat.offsetHeight;
console.log(newMessageHeight, scrollOffset + 10, chat.scrollTop, chat.offsetHeight);
if (chat.scrollHeight - newMessageHeight <= scrollOffset + 10) chat.scrollTop = chat.scrollHeight;
}

Expand Down
3 changes: 2 additions & 1 deletion nightwatch/desktop/src/frames/server/notice.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ <h5>Third-party Server Notice</h5>
</div>
</div>
<script>
const { frame } = nightwatch;
document.getElementById("continue").addEventListener("click", () => {
localStorage.setItem("acknowledged", "1");
load_frame_as_modal("server/add");
frame.load_as_modal("server/add");
});
</script>
24 changes: 22 additions & 2 deletions nightwatch/desktop/src/frames/settings.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,30 @@
<div>
<h5>Settings</h5>
<h5>Client Settings</h5>
<hr>
<p>This is eventually where settings will go.</p>
<div id = "settings-container">
<div class = "d-flex justify-content-between">
<p>Auth Server</p>
<input value = "auth.iipython.dev">
</div>
</div>
<hr>
<div class = "d-flex justify-content-end gap-2">
<button class = "btn btn-secondary" onclick = "close_modal();">Close</button>
<button class = "btn btn-success" onclick = "close_modal();">Save</button>
</div>
</div>
<!-- <script>
(() => {
const settings = [
{
id: "auth_server",
name: "Auth Server",
html: `<input>`
}
]
for (const setting of settings) {
const element = document.createElement("div");
element.classList.add("d-flex justify-content-end")
}
})();
</script> -->
24 changes: 14 additions & 10 deletions nightwatch/desktop/src/frames/welcome.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<div id = "welcome"></div>
<script>
(() => {
const { auth, conn, frame, settings } = nightwatch;
document.getElementById("welcome").innerHTML = `
<h2>Hello, ${nightwatch.user.username}.</h2>
<h2>Hello, ${auth.user.username}.</h2>
<hr>
<h5><b>First steps</b></h5>
<p>
Expand All @@ -14,7 +15,7 @@ <h5><b>Service overview</b></h5>
<p>
Nightwatch is composed of a client (the desktop app you're using right now), a chat server, and an authentication server. <br>
To ensure users are unique, users will be assigned an ID ending with the auth server their data is stored on. For example, <br>
yours is <code>${nightwatch.user.id}</code>. This ID won't change unless you switch authentication servers (available in settings).
yours is <code>${auth.user.id}</code>. This ID won't change unless you switch authentication servers (available in settings).
</p>
<hr>
<h5><b>Everything else</b></h5>
Expand All @@ -25,6 +26,9 @@ <h5><b>Everything else</b></h5>
</p>
`;

// Handle settings button
settings.set_image_url("https://cdn.discordapp.com/avatars/633185043774177280/6a5f84397ba7b5099a84a78102305095.webp?size=80");

// Load in servers
const server_list = document.getElementById("serverList");
server_list.innerHTML = `
Expand All @@ -41,13 +45,13 @@ <h5><b>Everything else</b></h5>
server_button.setAttribute("data-nightwatch-server", server.url);

// Handle tooltip
server_button.addEventListener("mouseover", () => create_tooltip(server_button, server.name));
server_button.addEventListener("mouseleave", remove_tooltip);
server_button.addEventListener("mouseover", () => frame.create_tooltip(server_button, server.name));
server_button.addEventListener("mouseleave", frame.remove_tooltip);

// Handle accessing server
server_button.addEventListener("click", () => {
nightwatch.active_server = server.url;
load_frame("server/chat");
frame.load("server/chat");
});

// Create image
Expand All @@ -59,19 +63,19 @@ <h5><b>Everything else</b></h5>
server_list.prepend(server_button);
}

for (const server of nightwatch.servers) add_server(server);
for (const server of conn.servers) add_server(server);

// Handle loading after-the-fact
nightwatch.on_server_added = add_server;
nightwatch.on_server_removed = (server) => {
conn.on_server_added = add_server;
conn.on_server_removed = (server) => {
const element = document.querySelector(`li[data-nightwatch-server = "${server.url}"]`);
if (element) element.remove();
}

// Handle adding servers
document.getElementById("add-server").addEventListener("click", () => {
if (+localStorage.getItem("acknowledged")) return load_frame_as_modal("server/add");
load_frame_as_modal("server/notice");
if (+localStorage.getItem("acknowledged")) return frame.load_as_modal("server/add");
frame.load_as_modal("server/notice");
});
})();
</script>
43 changes: 40 additions & 3 deletions nightwatch/desktop/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,59 @@
<link rel = "stylesheet" href = "/css/bootstrap.min.css" />
<link rel = "stylesheet" href = "/css/soda.css" />
<link rel = "stylesheet" href = "/css/main.css" />
<link rel = "stylesheet" href = "/css/lib.bundle.css" />

<title>Nightwatch</title>
</head>
<body>

<!-- Navbar -->
<ul class = "nav" id = "serverList"></ul>
<ul class = "nav justify-content-between">
<ul style = "list-style: none;" class = "d-flex p-0 m-0 gap-2" id = "serverList"></ul>
<div class = "dropdown d-flex justify-content-center">
<button style = "background: none; width: 45px;" class = "p-0" aria-expanded = "false">
<li class = "nav-item server-btn"></li>
</button>
<ul class = "dropdown-menu" style = "background-color: var(--sd-black-d5);">
<li>
<a class = "dropdown-item d-flex align-items-center gap-2" onclick = "load_frame_as_modal('settings');" type = "button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
</svg>
<span>Settings</span>
</a>
</li>
<li>
<a class = "dropdown-item d-flex align-items-center gap-2" onclick = "nightwatch.logout();" type = "button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"/>
<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"/>
</svg>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</ul>

<!-- All frames should be injected in here via JS -->
<main></main>

<!-- JS -->
<script src = "/js/frame.js"></script>
<script src = "/js/lib.bundle.js"></script>
<script src = "/js/nightwatch.js"></script>
<script src = "/js/frame.js"></script>
<script src = "/js/main.js"></script>

<!-- Experiment with Bootstrap JS -->
<!-- TODO: get rid of this UTTER nonsense -->
<script src = "/js/bootstrap/index.js"></script>
<script src = "/js/bootstrap/manipulator.js"></script>
<script src = "/js/bootstrap/config.js"></script>
<script src = "/js/bootstrap/selector-engine.js"></script>
<script src = "/js/bootstrap/event-handler.js"></script>
<script src = "/js/bootstrap/data.js"></script>
<script src = "/js/bootstrap/base-component.js"></script>
<script src = "/js/bootstrap/dropdown.js"></script>
</body>
</html>
Loading

0 comments on commit 6ba6c8b

Please sign in to comment.