Add error message for incorrect password. Fix issue #55 (#201)

coder · Mar 12, 2019 · 0efae1f · 0efae1f
1 parent 7cc7aa5
commit 0efae1f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/packages/app/browser/src/app.html b/packages/app/browser/src/app.html
@@ -8,21 +8,20 @@
 
 <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 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>
 </body>
 

diff --git a/packages/app/browser/src/app.scss b/packages/app/browser/src/app.scss
@@ -106,3 +106,16 @@ body {
 
     // transition: 500ms opacity ease;
 }
+
+#error-display {
+    box-sizing: border-box;
+    color: #bb2d0f;
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0.3px;
+    line-height: 12px;
+    padding: 8px;
+    padding-bottom: 0;
+    padding-top: 20px;
+    text-align: center;
+}
diff --git a/packages/app/browser/src/app.ts b/packages/app/browser/src/app.ts
@@ -28,3 +28,14 @@ submit.addEventListener("click", () => {
 	document.cookie = `password=${password.value}`;
 	location.reload();
 });
+
+/**
+ * Notify user on load of page if previous password was unsuccessful
+ */
+const reg = new RegExp(`password=(\\w+);?`);
+const matches = document.cookie.match(reg);
+const errorDisplay = document.getElementById("error-display") as HTMLDivElement;
+
+if (document.referrer === document.location.href && matches) {
+	errorDisplay.innerText = "Password is incorrect!";
+}