Allow use of the enter key for password input for code-server (#479)

nol166 · code-asher · commit 12265786dfe5 · 2019-04-12T10:35:30.000-05:00
* Allow use of the enter key for password input for code-server

* Remove function, make html form

* Remove function and create html form

* Handle form submit action

* Remove button listener

* Check if form exists
diff --git a/packages/app/browser/src/app.html b/packages/app/browser/src/app.html
@@ -7,22 +7,24 @@
 </head>
 
 <body>
-	<div class="login">
-		<div class="back"> <- Back </div>
-		<h4 class="title">code-server</h4>
-		<h2 class="subtitle">
-			Enter server password
-		</h2>
-		<div class="mdc-text-field">
-			<input type="password" id="password" class="mdc-text-field__input" required>
-			<label class="mdc-floating-label" for="password">Password</label>
-			<div class="mdc-line-ripple"></div>
-		</div>
-		<button id="submit" class="mdc-button mdc-button--unelevated">
-			<span class="mdc-button__label">Enter IDE</span>
-		</button>
-		<div id="error-display"></div>
-	</div>
+	<form id="login-form">
+		<div class="login">
+			<div class="back">
+				<- Back </div> <h4 class="title">code-server</h4>
+					<h2 class="subtitle">
+						Enter server password
+					</h2>
+						<div class="mdc-text-field">
+							<input type="password" id="password" class="mdc-text-field__input" required>
+							<label class="mdc-floating-label" for="password">Password</label>
+							<div class="mdc-line-ripple"></div>
+						</div>
+						<button id="submit" class="mdc-button mdc-button--unelevated">
+							<span class="mdc-button__label">Enter IDE</span>
+						</button>
+					<div id="error-display"></div>
+			</div>
+	</form>
 </body>
 
 </html>
diff --git a/packages/app/browser/src/app.ts b/packages/app/browser/src/app.ts
@@ -20,11 +20,14 @@ window.addEventListener("message", (event) => {
 });
 
 const password = document.getElementById("password") as HTMLInputElement;
-const submit = document.getElementById("submit") as HTMLButtonElement;
-if (!submit) {
-	throw new Error("No submit button found");
+const form = document.getElementById("login-form") as HTMLFormElement;
+
+if (!form) {
+	throw new Error("No password form found");
 }
-submit.addEventListener("click", () => {
+
+form.addEventListener("submit", (e) => {
+	e.preventDefault();
 	document.cookie = `password=${password.value}`;
 	location.reload();
 });
@@ -38,4 +41,4 @@ const errorDisplay = document.getElementById("error-display") as HTMLDivElement;
 
 if (document.referrer === document.location.href && matches) {
 	errorDisplay.innerText = "Password is incorrect!";
-}
+}
