! Fixing message box to look decent

- Moving Initialization code into src/init.js

freechat-client/pages/index.html

@@ -44,15 +44,15 @@
 		<ul class="scrollarea list-unstyled components" id="messages-list"></ul>
 
 		<div class="container" id="send-container">
-			<form class="form-inline">
+			<div class="input-group" id="message-area">
-				<div class="form-group">
+				<textarea rows="1" class="form-control" placeholder="Message" aria-describedby="message-btn" id="message-box"></textarea>
-					<input type="text" class="form-control" id="message-box" placehold="Message">
+			  <div class="input-group-append">
-					<button class="btn btn-primary" type="button">Send</button>
+				<button class="btn btn-outline-secondary btn-nav-settings" type="button" id="message-btn">Send</button>
-				</div>
+			  </div>
-			</form>
+			</div>
+
 		</div>
 	</div>
-	<!-- Message box -->
 </div>
 
 <div id="joinform" class="modal fade" tabindex="-1">
@@ -88,20 +88,6 @@
 	</div>
 </div>
 
-<!-- Warning Toast -->
-<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-  <div class="toast-header">
-	  <!-- <img src="..." class="rounded mr-2" alt="..."> -->
-    <strong class="mr-auto">Warning</strong>
-    <small class="text-muted">just now</small>
-    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="toast-body" id="warning-toast"></div>
-</div>
-
-
 </body>
 <!-- JQuery doesn't load so our squishy boi of the the collapsable menu literally doesn't work-->
 <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
@@ -110,21 +96,6 @@
 <script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper.js"></script>
 <script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper-utils.js"></script>
 <script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
-<script>
+<script type="text/javascript" src="../src/init.js"></script>
-(async () => {
-	const { ipcRenderer } = require('electron')
-	const auth = require('../src/auth.js')
-	const { add_server_to_config } = require ('../src/settings.js')
-
-	$('#add-admin-json').click(async () => await add_server_to_config() )
-	
-	try {
-		await auth.init()
-	} catch(err) {
-		console.log('Failure in IPC call')
-		console.log(err)
-	}
-})()
-</script>
 </html>
 

freechat-client/sass/message-box.scss

@@ -0,0 +1,14 @@
+// Now the message box which must be pinned at the bottom
+#send-container {
+	position: absolute;
+	bottom: 0;
+	height: 60px;
+}
+
+#message-box {
+	margin-top: auto;
+}
+
+#message-area {
+	width: 50vw;
+}

freechat-client/sass/style.scss

@@ -3,6 +3,7 @@
 @import 'join-modal';
 @import 'channels';
 @import 'settings-modal';
+@import 'message-box';
 
 body {
     color: $text;
@@ -113,20 +114,4 @@ ul ul a {
 	max-height: 1005px; // 1080 - $send-container-height
 }
 
-// Now the message box which must be pinned at the bottom
-#send-container {
-	position: absolute;
-	bottom: 0;
-	height: 50px;
-	width: 100vw;
-}
-
-#message-box {
-	padding-right: 25px;
-}
-
-#message-submit {
-	padding-left: 25px;
-	width: 25px;
-}
 

freechat-client/src/init.js

@@ -0,0 +1,24 @@
+const { ipcRenderer } = require('electron')
+const $ = require('jquery')
+
+
+// Path is from pages/index.html
+const auth = require('../src/auth.js')
+const { add_to_server_config } = require('../src/settings.js')
+const message = require('../src/messages.js')
+
+
+$('#add-admin-json').click(async () => { await add_server_to_config() } )
+$('#message-box').on('keypress', async (event) => {
+	if(event.keyCode == 13 && !event.shiftKey ) {
+		await message.send()
+	}
+})
+
+$('#message-btn').on('click', () => console.log('submitting'))
+
+auth.init()
+.then(
+	value => console.log('Got config', value),
+	reason => console.log('Failure in IPC call', reason) 
+)