Settings menu

client_html/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
 name = "client_html"
 version = "0.1.0"
-description = "A Tauri App"
-authors = ["you"]
+description = ""
+authors = ["Amy <rain@skuld.network>"]
 license = ""
 repository = ""
 edition = "2021"

client_html/assets/index.html

@@ -137,6 +137,7 @@ button:disabled {
 
 #textentry {
     display: flex;
+    align-items: center;
 }
 
 #textentry input {
@@ -151,6 +152,68 @@ button:disabled {
     color: var(--col-text-1);
 }
 
+.icon-button {
+    width: 2em;
+    height: 2em;
+    margin-right: 0.5em;
+    padding: 1em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2em;
+}
+
+.settings-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.settings-modal {
+    width: min(26em, calc(100vw - 2em));
+    background: var(--col-2);
+    border: 0.1em solid var(--col-3);
+    border-radius: 0.5em;
+    padding: 1em;
+    box-sizing: border-box;
+}
+
+.settings-modal h3 {
+    margin: 0 0 0.8em 0;
+    color: var(--col-text-2);
+}
+
+.settings-field {
+    margin-bottom: 0.75em;
+}
+
+.settings-field label {
+    display: block;
+    margin-bottom: 0.3em;
+}
+
+.settings-field input {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: inherit;
+    padding: 0.5em;
+    border: none;
+    border-radius: 0.3em;
+    background-color: var(--col-3);
+    color: var(--col-text-1);
+}
+
+.settings-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5em;
+    margin-top: 1em;
+}
+
 .user-item,
 .message-item {
     margin-bottom: 0.5em;
@@ -212,14 +275,33 @@ button:disabled {
                     <!-- Add messages here -->
                 </div>
                 <div id="textentry">
+                    <button id="settings-button" class="icon-button" type="button" title="Settings" aria-label="Open settings">⚙</button>
                     <input id="message-input" type="text" placeholder="Message #channel-name">
-                    <button onclick="submitMessageToServer()">Send</button>
+                    <button id="send-button" onclick="submitMessageToServer()">Send</button>
                 </div>
             </div>
 
         </div>
     </div>
 
+    <div id="settings-modal-overlay" class="settings-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title">
+        <div class="settings-modal">
+            <h3 id="settings-modal-title">Connection Settings</h3>
+            <div class="settings-field">
+                <label for="hostname-input">Hostname</label>
+                <input id="hostname-input" type="text" placeholder="example.com">
+            </div>
+            <div class="settings-field">
+                <label for="password-input">Password</label>
+                <input id="password-input" placeholder="Enter password">
+            </div>
+            <div class="settings-actions">
+                <button type="button" id="settings-cancel-button">Cancel</button>
+                <button type="button" id="settings-save-button">Save</button>
+            </div>
+        </div>
+    </div>
+
     <script>
 
 /// (time, channel, username, content, isPending)
@@ -228,6 +310,10 @@ selectedChannel = null;
 selectedUsers = new Set();
 username = `Myst#${randomNumericString(4)}`;
 customChannels = new Set();
+settings = {
+    hostname: '',
+    password: 'null'
+};
 
 function randomNumericString(length) {
     let v = 10 ** length;
@@ -272,6 +358,35 @@ function bindEnterToAction(inputSelector, action) {
     });
 }
 
+function openSettingsModal() {
+    const overlay = document.querySelector('#settings-modal-overlay');
+    const hostnameInput = document.querySelector('#hostname-input');
+    const passwordInput = document.querySelector('#password-input');
+
+    hostnameInput.value = settings.hostname;
+    if (settings.password === '') {
+        passwordInput.value = 'null';
+    } else {
+        passwordInput.value = settings.password;
+    }
+    overlay.style.display = 'flex';
+    hostnameInput.focus();
+}
+
+function closeSettingsModal() {
+    const overlay = document.querySelector('#settings-modal-overlay');
+    overlay.style.display = 'none';
+}
+
+function saveSettings() {
+    const hostnameInput = document.querySelector('#hostname-input');
+    const passwordInput = document.querySelector('#password-input');
+
+    settings.hostname = hostnameInput.value.trim();
+    settings.password = passwordInput.value;
+    closeSettingsModal();
+}
+
 function visualUpdate() {
     const messagesDiv = document.querySelector('#messages');
     messagesDiv.innerHTML = "";
@@ -291,7 +406,7 @@ function visualUpdate() {
 
     // Disable input when no channel or "all" is selected
     const input = document.querySelector('#message-input');
-    const sendButton = document.querySelector('#textentry button');
+    const sendButton = document.querySelector('#send-button');
     const isAllSelected = !selectedChannel;
     input.disabled = isAllSelected;
     sendButton.disabled = isAllSelected;
@@ -381,7 +496,6 @@ function visualUpdate() {
     }
 }
 
-// TODO: Send to server
 async function submitMessageToServer() {
     const input = document.querySelector('#message-input');
     const message = input.value.trim();
@@ -396,7 +510,9 @@ async function submitMessageToServer() {
         {
             channel: selectedChannel,
             sender: username,
-            content: message
+            content: message,
+            hostname: settings.hostname,
+            password: settings.password
         }
     );
 
@@ -408,7 +524,10 @@ async function submitMessageToServer() {
 async function receiveMessagesFromServer() {
     const result = await window.__TAURI_INTERNALS__.invoke(
         "receive_messages",
-        {}
+        {
+            hostname: settings.hostname,
+            password: settings.password
+        }
     );
 
     console.log("Received messages from server:", result);
@@ -420,9 +539,31 @@ function main() {
     receiveMessagesFromServer();
     visualUpdate();
 
+    const settingsButton = document.querySelector('#settings-button');
+    const settingsSaveButton = document.querySelector('#settings-save-button');
+    const settingsCancelButton = document.querySelector('#settings-cancel-button');
+    const settingsOverlay = document.querySelector('#settings-modal-overlay');
+
+    settingsButton.addEventListener('click', openSettingsModal);
+    settingsSaveButton.addEventListener('click', saveSettings);
+    settingsCancelButton.addEventListener('click', closeSettingsModal);
+    settingsOverlay.addEventListener('click', (event) => {
+        if (event.target === settingsOverlay) {
+            closeSettingsModal();
+        }
+    });
+
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && settingsOverlay.style.display === 'flex') {
+            closeSettingsModal();
+        }
+    });
+
     bindEnterToAction('#message-input', submitMessageToServer);
     bindEnterToAction('#channel-input', createChannel);
     bindEnterToAction('#username-input', setUsername);
+    bindEnterToAction('#hostname-input', saveSettings);
+    bindEnterToAction('#password-input', saveSettings);
 
     setInterval(() => {
         receiveMessagesFromServer();

client_html/src/main.rs

@@ -21,10 +21,9 @@ fn greet(name: &str) -> String {
     format!("Hello, {}!", name)
 }
 
-// TODO: Pass hostname and password from frontend
 #[tauri::command]
-fn receive_messages() -> Vec<(u128, String, String, String)> {
-    let msges = client_shared::utils::rx_messages("ch.skuld.network", "null", 2);
+fn receive_messages(hostname: &str, password: &str) -> Vec<(u128, String, String, String)> {
+    let msges = client_shared::utils::rx_messages(hostname, password, 2);
 
     let Ok(msges) = msges else {
         return vec![];
@@ -38,10 +37,9 @@ fn receive_messages() -> Vec<(u128, String, String, String)> {
     out
 }
 
-// TODO: Pass hostname and password from frontend
 // TODO: Handle errors
 #[tauri::command]
-fn send_message(channel: &str, sender: &str, content: &str) {
+fn send_message(channel: &str, sender: &str, content: &str, hostname: &str, password: &str) {
     let message = client_shared::message::Message::new(sender, content, channel);
-    let _ = client_shared::utils::tx_message("ch.skuld.network", "null", 2, message);
+    let _ = client_shared::utils::tx_message(hostname, password, 2, message);
 }

client_html/tauri.conf.json

@@ -11,9 +11,9 @@
     "windows": [
       {
         "title": "Channel",
-        "width": 800,
+        "width": 1200,
         "height": 600,
-        "resizable": true,
+        "resizable": false,
         "fullscreen": false
       }
     ],