First alpha

src/components/modals/InputModal.tsx

@@ -0,0 +1,40 @@
+import { h, Component } from 'preact';
+import "./modal.scss"
+import { Modal } from './Modal';
+
+
+export class InputModal extends Component<{ title: string, fieldname: string, type: "text" | "password", onResult: (result) => void }, {}> {
+   input: HTMLInputElement;
+   rand: string;
+   constructor(props) {
+      super(props);
+      this.rand = Math.random().toString();
+   }
+
+   componentWillUnmount() {
+      if (this.input)
+         this.input.value = "";
+   }
+
+   render() {
+      return <Modal title={this.props.title} onClose={() => this.props.onResult(null)}>
+         <fieldset style="border:none;">
+            <label for={this.rand}>{this.props.fieldname}</label>
+            <input style="min-width: 85%" autofocus ref={elm => {
+               this.input = elm
+               if (this.input)
+                  setTimeout(() => this.input.focus(), 0)
+            }} type={this.props.type} id={this.rand} placeholder={this.props.fieldname} onKeyDown={evt => {
+               if (evt.keyCode === 13) {
+                  this.props.onResult(this.input.value)
+               }
+            }} />
+            <div style="text-align: right;">
+               <button class="primary" style="display: inline-block;" onClick={() => {
+                  this.props.onResult(this.input.value);
+               }}>Enter</button>
+            </div>
+         </fieldset>
+      </Modal>
+   }
+}

src/components/modals/LoadingModal.tsx

@@ -0,0 +1,9 @@
+import { h, Component } from 'preact';
+import "./modal.scss"
+import { Modal } from './Modal';
+
+export default function LoadingModal() {
+   return <Modal title="Loading" noClose>
+      <div class="spinner primary" style="height: 80px; width: 80px; margin: 3rem auto;"></div>
+   </Modal>
+}

src/components/modals/Modal.tsx

@@ -0,0 +1,31 @@
+import { h, Component } from 'preact';
+import "./modal.scss"
+
+
+export class Modal extends Component<{ title: string, onClose?: () => void, noClose?: boolean }, {}> {
+   constructor(props) {
+      super(props);
+   }
+
+   render() {
+      return <div class="modal_container" onClick={(evt) => {
+         let path = evt.composedPath();
+         if (!path.find(e => {
+            let res = false;
+            let s = (e as Element);
+            if (s) {
+               if (s.classList) {
+                  res = s.classList.contains("card")
+               }
+            }
+            return res;
+         }))
+            if (this.props.onClose) this.props.onClose();
+      }}>
+         <div class="card" >
+            <h3 class="section">{this.props.title}</h3>
+            {this.props.children}
+         </div>
+      </div>
+   }
+}

src/components/modals/YesNoModal.tsx

@@ -0,0 +1,39 @@
+import { h, Component } from 'preact';
+import "./modal.scss"
+import { Modal } from './Modal';
+
+
+export class YesNoModal extends Component<{ title: string, onResult: (result: boolean | undefined) => void }, {}> {
+   constructor(props) {
+      super(props);
+      this.onKeyDown = this.onKeyDown.bind(this);
+   }
+
+   componentWillMount() {
+      window.addEventListener("keydown", this.onKeyDown);
+   }
+
+   componentWillUnmount() {
+      window.removeEventListener("keydown", this.onKeyDown);
+   }
+
+   onKeyDown(evt: KeyboardEvent) {
+      if (evt.keyCode === 74 || evt.keyCode === 89) this.props.onResult(true)
+      else if (evt.keyCode === 78) this.props.onResult(false)
+   }
+
+   render() {
+      return <Modal title={this.props.title} onClose={() => this.props.onResult(undefined)}>
+         <fieldset style="border:none;">
+            <div style="text-align: right;">
+               <button class="primary" style="display: inline-block;" onClick={() => {
+                  this.props.onResult(false);
+               }}>No</button>
+               <button class="primary" style="display: inline-block;" onClick={() => {
+                  this.props.onResult(true);
+               }}>Yes</button>
+            </div>
+         </fieldset>
+      </Modal>
+   }
+}

src/components/modals/modal.scss

@@ -0,0 +1,19 @@
+.modal_container {
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0, 0, 0, 0.8);
+   z-index: 32;
+}
+
+.modal_container>.card {
+   position: absolute;
+   left: 0;
+   right: 0;
+   top: 10%;
+   width: 80%;
+   max-width: 800px;
+   margin: auto;
+}