some styling for create link form

css/main.css

@@ -173,7 +173,7 @@ button.text:hover {
     background-image: url('../images/client-icons/weechat.svg');
 }
 
-button.primary, a.primary, button.secondary, a.secondary {
+.primary, .secondary {
     text-decoration: none;
     font-weight: bold;
     text-align: center;
@@ -182,22 +182,32 @@ button.primary, a.primary, button.secondary, a.secondary {
     line-height: 24px;
 }
 
-button.secondary, a.secondary {
+.secondary {
     background: var(--background);
     color: var(--link);
 }
 
-button.primary, a.primary {
+.primary {
     background: var(--link);
     color: var(--background);
     border-radius: 32px;
 }
 
-button.primary, button.secondary {
+button.primary, input[type='submit'].primary, button.secondary, input[type='submit'].secondary {
     border: none;
     font-size: inherit;
 }
 
+input[type='text'].large {
+    width: 100%;
+    padding: 12px;
+    background: var(--background);
+    border: 1px solid var(--foreground);
+    border-radius: 16px;
+    font-size: 14px;
+    line-height: 24px;
+}
+
 .fullwidth {
     display: block;
     width: 100%;
@@ -212,4 +222,10 @@ button.primary, button.secondary {
 
 .ClientView .actions img {
     height: 100%;
+}
+
+.CreateLinkView h2 {
+    padding: 0 40px;
+    word-break: break-all;
+    text-align: center;
 }

src/Link.js

@@ -67,7 +67,7 @@ function orderedUnique(array) {
 }
 
 export class Link {
-	static parseFragment(fragment) {
+	static parse(fragment) {
 		if (!fragment) {
 			return null;
 		}

src/RootViewModel.js

@@ -49,7 +49,7 @@ export class RootViewModel extends ViewModel {
 
 	updateHash(hash) {
 		const oldLink = this.link;
-		this.link = Link.parseFragment(hash);
+		this.link = Link.parse(hash);
 		this._updateChildVMs(oldLink);
 	}
 

src/create/CreateLinkView.js

@@ -20,14 +20,28 @@ import {PreviewView} from "../preview/PreviewView.js";
 export class CreateLinkView extends TemplateView {
 	render(t, vm) {
 		return t.div({className: "CreateLinkView card"}, [
+			t.h1(
+				{className: {hidden: vm => vm.previewViewModel}},
+				"Create shareable links to Matrix rooms, users or messages without being tied to any app"
+			),
 			t.mapView(vm => vm.previewViewModel, childVM => childVM ? new PreviewView(childVM) : null),
 			t.h2({className: {hidden: vm => !vm.linkUrl}}, t.a({href: vm => vm.linkUrl}, vm => vm.linkUrl)),
-			t.div(t.input({
+			t.form({action: "#", onSubmit: evt => this._onSubmit(evt)}, [
-				className: "fullwidth",
+				t.div(t.input({
-				type: "text",
+					className: "fullwidth large",
-				onChange: evt => vm.createLink(evt.target.value),
+					type: "text",
-				placeholder: "#room:example.com, @user:example.com"
+					name: "identifier",
-			})),
+					placeholder: "#room:example.com, @user:example.com"
+				})),
+				t.div(t.input({className: "primary fullwidth", type: "submit", value: "Create link"}))
+			]),
 		]);
 	}
+
+	_onSubmit(evt) {
+		evt.preventDefault();
+		const form = evt.target;
+		const identifier = form.elements.identifier.value;
+		this.value.createLink(identifier);
+	}
 }

src/create/CreateLinkViewModel.js

@@ -25,7 +25,7 @@ export class CreateLinkViewModel extends ViewModel {
 	}
 
     async createLink(identifier) {
-        this._link = Link.parseFragment(identifier);
+        this._link = Link.parse(identifier);
         if (this._link) {
         	// TODO: abort previous load
         	this.previewViewModel = new PreviewViewModel(this.childOptions({
@@ -34,6 +34,8 @@ export class CreateLinkViewModel extends ViewModel {
         	}));
         	this.emitChange();
         	await this.previewViewModel.load();
+        } else {
+        	this.previewViewModel = null;
         }
         this.emitChange();
     }