Notes/static/js/node.mjs

import { h, Component, createRef } from 'preact'
import htm from 'htm'
import { signal } from 'preact/signals'
import { Keys, Key } from 'key'
import Crypto from 'crypto'
import { Checklist, ChecklistGroup } from 'checklist'
const html = htm.bind(h)

export class NodeUI extends Component {
	constructor(props) {//{{{
		super(props)
		this.menu = signal(false)
		this.node = signal(null)
		this.nodeContent = createRef()
		this.nodeProperties = createRef()
		this.keys = signal([])
		this.page = signal('node')
		window.addEventListener('popstate', evt => {
			if (evt.state && evt.state.hasOwnProperty('nodeID'))
				this.goToNode(evt.state.nodeID, true)
			else
				this.goToNode(0, true)
		})

		window.addEventListener('keydown', evt => this.keyHandler(evt))
	}//}}}
	render() {//{{{
		if (this.node.value === null)
			return

		let node = this.node.value
		document.title = `N: ${node.Name}`

		let crumbs = [
			html`<div class="crumb" onclick=${() => this.goToNode(0)}>Start</div>`
		]

		crumbs = crumbs.concat(node.Crumbs.slice(0).map(node =>
			html`<div class="crumb" onclick=${() => this.goToNode(node.ID)}>${node.Name}</div>`
		).reverse())

		let children = node.Children.sort((a, b) => {
			if (a.Name.toLowerCase() > b.Name.toLowerCase()) return 1
			if (a.Name.toLowerCase() < b.Name.toLowerCase()) return -1
			return 0
		}).map(child => html`
			<div class="child-node" onclick=${() => this.goToNode(child.ID)}>${child.Name}</div>
		`)

		let modified = ''
		if (this.props.app.nodeModified.value)
			modified = 'modified'


		// Page to display
		let page = ''
		switch (this.page.value) {
			case 'node':
				if (node.ID == 0) {
					page = html`
						<div style="cursor: pointer; color: #000; text-align: center;" onclick=${() => this.page.value = 'schedule-events'}>Schedule events</div>
						${children.length > 0 ? html`<div class="child-nodes">${children}</div><div id="notes-version">Notes version ${window._VERSION}</div>` : html``}
					`
				} else {
					let padlock = ''
					if (node.CryptoKeyID > 0)
						padlock = html`<img src="/images/${window._VERSION}/padlock-black.svg" style="height: 24px;" />`

					page = html`
						${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
						<div class="node-name">
							${node.Name} ${padlock}
						</div>
						<${NodeContent} key=${node.ID} node=${node} ref=${this.nodeContent} />
						<${NodeEvents} events=${node.ScheduleEvents.value} />
						<${Checklist} ui=${this} groups=${node.ChecklistGroups} />
						<${NodeFiles} node=${this.node.value} />
					`
				}
				break

			case 'upload':
				page = html`<${UploadUI} nodeui=${this} />`
				break

			case 'node-properties':
				page = html`<${NodeProperties} ref=${this.nodeProperties} nodeui=${this} />`
				break

			case 'keys':
				page = html`<${Keys} nodeui=${this} />`
				break

			case 'profile-settings':
				page = html`<${ProfileSettings} nodeui=${this} />`
				break

			case 'search':
				page = html`<${Search} nodeui=${this} />`
				break

			case 'schedule-events':
				page = html`<${ScheduleEventList} nodeui=${this} />`
				break
		}

		let menu = () => (this.menu.value ? html`<${Menu} nodeui=${this} />` : null)
		let checklist = () =>
			html`
				<div class="checklist" onclick=${evt => { evt.stopPropagation(); this.toggleChecklist() }}>
					<img src="/images/${window._VERSION}/${this.showChecklist() ? 'checklist-on.svg' : 'checklist-off.svg'}" />
				</div>`

		return html`
			<${menu} />
			<header class="${modified}" onclick=${() => this.saveNode()}>
				<div class="tree"><img src="/images/${window._VERSION}/tree.svg" onclick=${() => document.getElementById('app').classList.toggle('toggle-tree')} /></div>
				<div class="name">Notes</div>
				<div class="markdown" onclick=${evt => { evt.stopPropagation(); this.toggleMarkdown() }}><img src="/images/${window._VERSION}/${node.RenderMarkdown.value ? 'markdown.svg' : 'markdown-hollow.svg'}" /></div>
				<${checklist} />
				<div class="search"   onclick=${evt => { evt.stopPropagation(); this.showPage('search') }}><img src="/images/${window._VERSION}/search.svg" /></div>
				<div class="add"      onclick=${evt => this.createNode(evt)}><img src="/images/${window._VERSION}/add.svg" /></div>
				<div class="keys"     onclick=${evt => { evt.stopPropagation(); this.showPage('keys') }}><img src="/images/${window._VERSION}/padlock.svg" /></div>
				<div class="menu"     onclick=${evt => this.showMenu(evt)}>☰</div>
			</header>

			<div id="crumbs">
				<div class="crumbs">${crumbs}</crumbs>
			</div>

			${page}
		`
	}//}}}
	async componentDidMount() {//{{{
		// When rendered and fetching the node, keys could be needed in order to
		// decrypt the content.
		await this.retrieveKeys()

		this.props.app.startNode.retrieve(node => {
			this.node.value = node

			// The tree isn't guaranteed to have loaded yet. This is also run from
			// the tree code, in case the node hasn't loaded.
			this.props.app.tree.crumbsUpdateNodes(node)
		})
	}//}}}

	keyHandler(evt) {//{{{
		let handled = true

		// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
		// Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
		// Thus, the exception is acceptable to consequent use of alt+shift.
		if (!(evt.shiftKey && evt.altKey) && !(evt.key.toUpperCase() == 'S' && evt.ctrlKey))
			return

		switch (evt.key.toUpperCase()) {
			case 'C':
				this.showPage('node')
				break

			case 'E':
				this.showPage('keys')
				break

			case 'M':
				this.toggleMarkdown()
				break

			case 'N':
				this.createNode()
				break

			case 'P':
				this.showPage('node-properties')
				break

			case 'S':
				if (this.page.value == 'node')
					this.saveNode()
				else if (this.page.value == 'node-properties')
					this.nodeProperties.current.save()
				break

			case 'U':
				this.showPage('upload')
				break

			case 'F':
				this.showPage('search')
				break

			default:
				handled = false
		}

		if (handled) {
			evt.preventDefault()
			evt.stopPropagation()
		}
	}//}}}
	showMenu(evt) {//{{{
		evt.stopPropagation()
		this.menu.value = true
	}//}}}
	logout() {//{{{
		window.localStorage.removeItem('session.UUID')
		location.href = '/'
	}//}}}

	goToNode(nodeID, dontPush) {//{{{
		if (this.props.app.nodeModified.value) {
			if (!confirm("Changes not saved. Do you want to discard changes?"))
				return
		}

		if (!dontPush)
			history.pushState({ nodeID }, '', `/?node=${nodeID}`)

		// New node is fetched in order to retrieve content and files.
		// Such data is unnecessary to transfer for tree/navigational purposes.
		let node = new Node(this.props.app, nodeID)
		node.retrieve(node => {
			this.props.app.nodeModified.value = false
			this.node.value = node
			this.showPage('node')

			// Tree needs to know another node is selected, in order to render any
			// previously selected node not selected.
			this.props.app.tree.setSelected(node)

			// Hide tree toggle, as this would be the next natural action to do manually anyway.
			// At least in mobile mode.
			document.getElementById('app').classList.remove('toggle-tree')
		})
	}//}}}
	createNode(evt) {//{{{
		if (evt)
			evt.stopPropagation()
		let name = prompt("Name")
		if (!name)
			return
		this.node.value.create(name, nodeID => {
			console.log('before', this.props.app.startNode)
			this.props.app.startNode = new Node(this.props.app, nodeID)
			console.log('after', this.props.app.startNode)
			this.props.app.tree.retrieve(() => {
				this.goToNode(nodeID)
			})
		})
	}//}}}
	saveNode() {//{{{
		let content = this.node.value.content()
		this.node.value.setContent(content)
		this.node.value.save(() => {
			this.props.app.nodeModified.value = false
			this.node.value.retrieve()
		})
	}//}}}
	renameNode() {//{{{
		let name = prompt("New name")
		if (!name)
			return

		this.node.value.rename(name, () => {
			this.goToNode(this.node.value.ID)
			this.menu.value = false
		})
	}//}}}
	deleteNode() {//{{{
		if (!confirm("Do you want to delete this note and all sub-notes?"))
			return
		this.node.value.delete(() => {
			this.goToNode(this.node.value.ParentID)
			this.menu.value = false
		})
	}//}}}

	async retrieveKeys() {//{{{
		return new Promise((resolve, reject) => {
			this.props.app.request('/key/retrieve', {})
				.then(res => {
					this.keys.value = res.Keys.map(keyData => new Key(keyData, this.keyCounter))
					resolve(this.keys.value)
				})
				.catch(reject)
		})
	}//}}}
	keyCounter() {//{{{
		return window._app.current.request('/key/counter', {})
			.then(res => BigInt(res.Counter))
			.catch(window._app.current.responseError)
	}//}}}
	getKey(id) {//{{{
		let keys = this.keys.value
		for (let i = 0; i < keys.length; i++)
			if (keys[i].ID == id)
				return keys[i]
		return null
	}//}}}

	showPage(pg) {//{{{
		this.page.value = pg
	}//}}}
	showChecklist() {//{{{
		return (this.node.value.ChecklistGroups && this.node.value.ChecklistGroups.length > 0) | this.node.value.ShowChecklist.value
	}//}}}
	toggleChecklist() {//{{{
		this.node.value.ShowChecklist.value = !this.node.value.ShowChecklist.value
	}//}}}
	toggleMarkdown() {//{{{
		this.node.value.RenderMarkdown.value = !this.node.value.RenderMarkdown.value
	}//}}}
}

class NodeContent extends Component {
	constructor(props) {//{{{
		super(props)
		this.contentDiv = createRef()
		this.state = {
			modified: false,
		}
	}//}}}
	render({ node }) {//{{{
		let content = ''
		try {
			content = node.content()
		} catch (err) {
			return html`
				<div id="node-content" class="node-content encrypted">${err.message}</div>
			`
		}

		var element
		if (node.RenderMarkdown.value)
			element = html`<${MarkdownContent} key='markdown-content' content=${content} />`
		else
			element = html`
				<div class="grow-wrap">
					<textarea id="node-content" class="node-content" ref=${this.contentDiv} oninput=${evt => this.contentChanged(evt)} required rows=1>${content}</textarea>
				</div>
			`

		return element
	}//}}}
	componentDidMount() {//{{{
		this.resize()
		window.addEventListener('resize', () => this.resize())
	}//}}}
	componentDidUpdate() {//{{{
		this.resize()
	}//}}}
	contentChanged(evt) {//{{{
		window._app.current.nodeModified.value = true
		const content = evt.target.value
		this.props.node.setContent(content)
		this.resize()
	}//}}}
	resize() {//{{{
		let textarea = document.getElementById('node-content')
		if (textarea)
			textarea.parentNode.dataset.replicatedValue = textarea.value
	}//}}}
	unlock() {//{{{
		let pass = prompt(`Password for "${this.props.model.description}"`)
		if (!pass)
			return

		try {
			this.props.model.unlock(pass)
			this.forceUpdate()
		} catch (err) {
			alert(err)
		}
	}//}}}
}

class MarkdownContent extends Component {
	render({ content }) {//{{{
		return html`<div id="markdown"></div>`
	}//}}}
	componentDidMount() {//{{{
		const markdown = document.getElementById('markdown')
		if (markdown)
			markdown.innerHTML = marked.parse(this.props.content)
	}//}}}
}

class NodeEvents extends Component {
	render({ events }) {//{{{
		if (events.length == 0)
			return html``

		const eventElements = events.map(evt => {
			const dt = evt.Time.split('T')
			return html`<div>${dt[0]} ${dt[1].slice(0, 5)}</div>`
		})
		return html`
			<div id="schedule-section">
				<div class="header">Schedule events</div>
				${eventElements}
			</div>
		`
	}//}}}
}

class NodeFiles extends Component {
	render({ node }) {//{{{
		if (node.Files === null || node.Files.length == 0)
			return

		let files = node.Files
			.sort((a, b) => {
				if (a.Filename.toUpperCase() < b.Filename.toUpperCase()) return -1
				if (a.Filename.toUpperCase() > b.Filename.toUpperCase()) return 1
				return 0
			})
			.map(file =>
				html`
					<div class="filename" onclick=${() => node.download(file.ID)}>${file.Filename}</div>
					<div class="size">${this.formatSize(file.Size)}</div>
				`
			)

		return html`
			<div id="file-section">
				<div class="header">Files</div>
				<div class="files">
					${files}
				</div>
			</div>
		`
	}//}}}
	formatSize(size) {//{{{
		if (size < 1048576) {
			return `${Math.round(size / 1024)} KiB`
		} else {
			return `${Math.round(size / 1048576)} MiB`
		}
	}//}}}
}

export class Node {
	constructor(app, nodeID) {//{{{
		this.app = app
		this.ID = nodeID
		this.ParentID = 0
		this.UserID = 0
		this.CryptoKeyID = 0
		this.Name = ''
		this.RenderMarkdown = signal(false)
		this.Markdown = false
		this.ShowChecklist = signal(false)
		this._content = ''
		this.Children = []
		this.Crumbs = []
		this.Files = []
		this._decrypted = false
		this._expanded = false // start value for the TreeNode component,
		this.ChecklistGroups = {}
		this.ScheduleEvents = signal([])
		// it doesn't control it afterwards.
		// Used to expand the crumbs upon site loading.
	}//}}}
	retrieve(callback) {//{{{
		this.app.request('/schedule/list', { NodeID: this.ID })
			.then(res => {
				this.ScheduleEvents.value = res.ScheduleEvents
			})

		this.app.request('/node/retrieve', { ID: this.ID })
			.then(res => {
				this.ParentID = res.Node.ParentID
				this.UserID = res.Node.UserID
				this.CryptoKeyID = res.Node.CryptoKeyID
				this.Name = res.Node.Name
				this._content = res.Node.Content
				this.Children = res.Node.Children
				this.Crumbs = res.Node.Crumbs
				this.Files = res.Node.Files
				this.Markdown = res.Node.Markdown
				this.RenderMarkdown.value = this.Markdown
				this.initChecklist(res.Node.ChecklistGroups)
				callback(this)
			})
			.catch(this.app.responseError)
	}//}}}
	delete(callback) {//{{{
		this.app.request('/node/delete', {
			NodeID: this.ID,
		})
			.then(callback)
			.catch(this.app.responseError)
	}//}}}
	create(name, callback) {//{{{
		this.app.request('/node/create', {
			Name: name.trim(),
			ParentID: this.ID,
		})
			.then(res => {
				callback(res.Node.ID)
			})
			.catch(this.app.responseError)
	}//}}}
	async save(callback) {//{{{
		try {
			await this.#encrypt()

			let req = {
				NodeID: this.ID,
				Content: this._content,
				CryptoKeyID: this.CryptoKeyID,
				Markdown: this.Markdown,
				TimeOffset: -(new Date().getTimezoneOffset()),
			}
			this.app.request('/node/update', req)
				.then(callback)
				.catch(this.app.responseError)
		} catch (err) {
			this.app.responseError(err)
		}
	}//}}}
	rename(name, callback) {//{{{
		this.app.request('/node/rename', {
			Name: name.trim(),
			NodeID: this.ID,
		})
			.then(callback)
			.catch(this.app.responseError)
	}//}}}
	download(fileID) {//{{{
		let headers = {
			'Content-Type': 'application/json',
		}

		if (this.app.session.UUID !== '')
			headers['X-Session-Id'] = this.app.session.UUID

		let fname = ""
		fetch("/node/download", {
			method: 'POST',
			headers,
			body: JSON.stringify({
				NodeID: this.ID,
				FileID: fileID,
			}),
		})
			.then(response => {
				let match = response.headers.get('content-disposition').match(/filename="([^"]*)"/)
				fname = match[1]
				return response.blob()
			})
			.then(blob => {
				let url = window.URL.createObjectURL(blob)
				let a = document.createElement('a')
				a.href = url
				a.download = fname
				document.body.appendChild(a) // we need to append the element to the dom -> otherwise it will not work in firefox
				a.click()
				a.remove()  //afterwards we remove the element again
			})
	}//}}}
	content() {//{{{
		if (this.CryptoKeyID != 0 && !this._decrypted)
			this.#decrypt()
		return this._content
	}//}}}
	setContent(new_content) {//{{{
		this._content = new_content
		if (this.CryptoKeyID == 0)
			// Logic behind plaintext not being decrypted is that
			// only encrypted values can be in a decrypted state.
			this._decrypted = false
		else
			this._decrypted = true
	}//}}}
	async setCryptoKey(new_key) {//{{{
		return this.#encrypt(true, new_key)
	}//}}}
	#decrypt() {//{{{
		if (this.CryptoKeyID == 0 || this._decrypted)
			return

		let obj_key = this.app.nodeUI.current.getKey(this.CryptoKeyID)
		if (obj_key === null || obj_key.ID != this.CryptoKeyID)
			throw ('Invalid key')

		// Ask user to unlock key first
		var pass = null
		while (pass || obj_key.status() == 'locked') {
			pass = prompt(`Password for "${obj_key.description}"`)
			if (!pass)
				throw new Error(`Key "${obj_key.description}" is locked`)

			try {
				obj_key.unlock(pass)
			} catch (err) {
				alert(err)
			}
			pass = null
		}

		if (obj_key.status() == 'locked')
			throw new Error(`Key "${obj_key.description}" is locked`)

		let crypto = new Crypto(obj_key.key)
		this._decrypted = true
		this._content = sjcl.codec.utf8String.fromBits(
			crypto.decrypt(this._content)
		)
	}//}}}
	async #encrypt(change_key = false, new_key = null) {//{{{
		// Nothing to do if not changing key and already encrypted.
		if (!change_key && this.CryptoKeyID != 0 && !this._decrypted)
			return this._content

		let content = this.content()

		// Changing key to no encryption or already at no encryption -
		// set to not decrypted (only encrypted values can be
		// decrypted) and return plain value.
		if ((change_key && new_key === null) || (!change_key && this.CryptoKeyID == 0)) {
			this._decrypted = false
			this.CryptoKeyID = 0
			return content
		}

		let key_id = change_key ? new_key.ID : this.CryptoKeyID
		let obj_key = this.app.nodeUI.current.getKey(key_id)
		if (obj_key === null || obj_key.ID != key_id)
			throw ('Invalid key')

		if (obj_key.status() == 'locked')
			throw new Error(`Key "${obj_key.description}" is locked`)

		let crypto = new Crypto(obj_key.key)
		let content_bits = sjcl.codec.utf8String.toBits(content)
		let counter = await this.app.nodeUI.current.keyCounter()
		this.CryptoKeyID = obj_key.ID
		this._content = crypto.encrypt(content_bits, counter, true)
		this._decrypted = false
		return this._content
	}//}}}
	initChecklist(checklistData) {//{{{
		if (checklistData === undefined || checklistData === null)
			return
		this.ChecklistGroups = checklistData.map(groupData => {
			return new ChecklistGroup(groupData)
		})
	}//}}}
}

class Menu extends Component {
	render({ nodeui }) {//{{{
		return html`
			<div id="blackout" onclick=${() => nodeui.menu.value = false}></div>
			<div id="menu">
				<div class="section">Current note</div>
				<div class="item" onclick=${() => { nodeui.renameNode(); nodeui.menu.value = false }}>Rename</div>
				<div class="item" onclick=${() => { nodeui.showPage('upload'); nodeui.menu.value = false }}>Upload</div>
				<div class="item " onclick=${() => { nodeui.showPage('node-properties'); nodeui.menu.value = false }}>Properties</div>
				<div class="item separator" onclick=${() => { nodeui.deleteNode(); nodeui.menu.value = false }}>Delete</div>

				<div class="section">User</div>
				<div class="item" onclick=${() => { nodeui.showPage('profile-settings'); nodeui.menu.value = false }}>Settings</div>
				<div class="item" onclick=${() => { nodeui.logout(); nodeui.menu.value = false }}>Log out</div>
			</div>
		`
	}//}}}
}
class UploadUI extends Component {
	constructor(props) {//{{{
		super(props)
		this.file = createRef()
		this.filelist = signal([])
		this.fileRefs = []
		this.progressRefs = []
	}//}}}
	render({ nodeui }) {//{{{
		let filelist = this.filelist.value
		let files = []
		for (let i = 0; i < filelist.length; i++) {
			files.push(html`<div key=file_${i} ref=${this.fileRefs[i]} class="file">${filelist.item(i).name}</div><div class="progress" ref=${this.progressRefs[i]}></div>`)
		}

		return html`
			<div id="blackout" onclick=${() => nodeui.showPage('node')}></div>
			<div id="upload">
				<input type="file" ref=${this.file} onchange=${() => this.upload()} multiple />
				<div class="files">
					${files}
				</div>
			</div>
		`
	}//}}}
	componentDidMount() {//{{{
		this.file.current.focus()
	}//}}}

	upload() {//{{{
		let nodeID = this.props.nodeui.node.value.ID
		this.fileRefs = []
		this.progressRefs = []

		let input = this.file.current
		this.filelist.value = input.files
		for (let i = 0; i < input.files.length; i++) {
			this.fileRefs.push(createRef())
			this.progressRefs.push(createRef())

			this.postFile(
				input.files[i],
				nodeID,
				progress => {
					this.progressRefs[i].current.innerHTML = `${progress}%`
				},
				res => {
					this.props.nodeui.node.value.Files.push(res.File)
					this.props.nodeui.forceUpdate()

					this.fileRefs[i].current.classList.add("done")
					this.progressRefs[i].current.classList.add("done")

					this.props.nodeui.showPage('node')
				})
		}
	}//}}}
	postFile(file, nodeID, progressCallback, doneCallback) {//{{{
		var formdata = new FormData()
		formdata.append('file', file)
		formdata.append('NodeID', nodeID)

		var request = new XMLHttpRequest()

		request.addEventListener("error", () => {
			window._app.current.responseError({ upload: "An unknown error occured" })
		})

		request.addEventListener("loadend", () => {
			if (request.status != 200) {
				window._app.current.responseError({ upload: request.statusText })
				return
			}

			let response = JSON.parse(request.response)
			if (!response.OK) {
				window._app.current.responseError({ upload: response.Error })
				return
			}

			doneCallback(response)
		})

		request.upload.addEventListener('progress', evt => {
			var fileSize = file.size

			if (evt.loaded <= fileSize)
				progressCallback(Math.round(evt.loaded / fileSize * 100))
			if (evt.loaded == evt.total)
				progressCallback(100)
		})

		request.open('post', '/node/upload')
		request.setRequestHeader("X-Session-Id", window._app.current.session.UUID)
		//request.timeout = 45000
		request.send(formdata)
	}//}}}
}
class NodeProperties extends Component {
	constructor(props) {//{{{
		super(props)
		this.props.nodeui.retrieveKeys()
		this.selected_key_id = 0
	}//}}}
	render({ nodeui }) {//{{{
		let keys = nodeui.keys.value
			.sort((a, b) => {
				if (a.description < b.description) return -1
				if (a.description > b.description) return 1
				return 0
			})
			.map(key => {
				this.props.nodeui.keys.value.some(uikey => {
					if (uikey.ID == nodeui.node.value.ID) {
						this.selected_key_id = nodeui.node.value.ID
						return true
					}
				})

				if (nodeui.node.value.CryptoKeyID == key.ID)
					this.selected_key_id = key.ID

				return html`
					<div class="key ${key.status()}">
						<input type="radio" name="key" id="key-${key.ID}" checked=${nodeui.node.value.CryptoKeyID == key.ID} disabled=${key.status() == 'locked'} oninput=${() => this.selected_key_id = key.ID} />
						<label for="key-${key.ID}">${key.description}</label>
					</div>`
			})

		return html`
			<div id="properties">
				<h1>Note properties</h1>

				<div style="margin-bottom: 16px">These properties are only for this note.</div>

				<div class="checks">
					<input type="checkbox" id="render-markdown" checked=${nodeui.node.value.Markdown} onchange=${evt => nodeui.node.value.Markdown = evt.target.checked} />
					<label for="render-markdown">Markdown view</label>

				</div>

				<h2>Encryption</h2>
				<div class="key">
					<input type="radio" id="key-none" name="key" checked=${nodeui.node.value.CryptoKeyID == 0} oninput=${() => this.selected_key_id = 0} />
					<label for="key-none">None</label>
				</div>
				${keys}

				<button style="margin-top: 32px" onclick=${() => this.save()}>Save</button>
			</div>
		`
	}//}}}
	async save() {//{{{
		let nodeui = this.props.nodeui
		let node = nodeui.node.value

		// Find the actual key object used for encryption
		let new_key = nodeui.getKey(this.selected_key_id)
		let current_key = nodeui.getKey(node.CryptoKeyID)

		if (current_key && current_key.status() == 'locked') {
			alert("Decryption key is locked and can not be used.")
			return
		}

		if (new_key && new_key.status() == 'locked') {
			alert("Key is locked and can not be used.")
			return
		}

		await node.setCryptoKey(new_key)

		if (node.Markdown != node.RenderMarkdown.value)
			node.RenderMarkdown.value = node.Markdown

		node.save(() => this.props.nodeui.showPage('node'))
	}//}}}
}

class Search extends Component {
	constructor() {//{{{
		super()
		this.state = {
			matches: [],
			results_returned: false,
		}
	}//}}}
	render({ nodeui }, { matches, results_returned }) {//{{{
		let match_elements = [
			html`<h2>Results</h2>`,
		]
		let matched_nodes = matches.map(node => html`
			<div class="matched-node" onclick=${() => nodeui.goToNode(node.ID)}>
				${node.Name}
			</div>
		`)
		match_elements.push(html`<div class="matches">${matched_nodes}</div>`)

		return html`
			<div id="search">
				<h1>Search</h1>

				<input type="text" id="search-for" placeholder="Search for" onkeydown=${evt => this.keyHandler(evt)} />
				<button onclick=${() => this.search()}>Search</button>

				${results_returned ? match_elements : ''}
			</div>`
	}//}}}
	componentDidMount() {//{{{
		document.getElementById('search-for').focus()
	}//}}}

	keyHandler(evt) {//{{{
		let handled = true

		switch (evt.key.toUpperCase()) {
			case 'ENTER':
				this.search()
				break

			default:
				handled = false
		}

		if (handled) {
			evt.preventDefault()
			evt.stopPropagation()
		}
	}//}}}
	search() {//{{{
		let Search = document.getElementById('search-for').value

		window._app.current.request('/node/search', { Search })
			.then(res => {
				this.setState({
					matches: res.Nodes,
					results_returned: true,

				})
			})
			.catch(window._app.current.responseError)
	}//}}}
}

class ProfileSettings extends Component {
	render({ nodeui }, { }) {//{{{
		return html`
			<div id="profile-settings">
				<h1>User settings</h1>

				<h2>Password</h2>
				<div class="passwords">
					<div>Current</div>
					<input type="password" id="current-password" placeholder="Current password" onkeydown=${evt => this.keyHandler(evt)} />

					<div>New</div>
					<input type="password" id="new-password1"    placeholder="Password"        onkeydown=${evt => this.keyHandler(evt)} />

					<div>Repeat</div>
					<input type="password" id="new-password2"    placeholder="Repeat password" onkeydown=${evt => this.keyHandler(evt)} />
				</div>

				<button onclick=${() => this.updatePassword()}>Change password</button>
			</div>`
	}//}}}
	componentDidMount() {//{{{
		document.getElementById('current-password').focus()
	}//}}}

	keyHandler(evt) {//{{{
		let handled = true

		switch (evt.key.toUpperCase()) {
			case 'ENTER':
				this.updatePassword()
				break

			default:
				handled = false
		}

		if (handled) {
			evt.preventDefault()
			evt.stopPropagation()
		}
	}//}}}
	updatePassword() {//{{{
		let curr_pass = document.getElementById('current-password').value
		let pass1 = document.getElementById('new-password1').value
		let pass2 = document.getElementById('new-password2').value

		try {
			if (pass1.length < 4) {
				throw new Error('Password has to be at least 4 characters long')
			}

			if (pass1 != pass2) {
				throw new Error(`Passwords don't match`)
			}

			window._app.current.request('/user/password', {
				CurrentPassword: curr_pass,
				NewPassword: pass1,
			})
				.then(res => {
					if (res.CurrentPasswordOK)
						alert('Password is changed successfully')
					else
						alert('Current password is invalid')
				})
		} catch (err) {
			alert(err.message)
		}

	}//}}}
}

class ScheduleEventList extends Component {
	static CALENDAR = Symbol('CALENDAR')
	static LIST = Symbol('LIST')
	constructor() {//{{{
		super()
		this.tab = signal(ScheduleEventList.CALENDAR)
	}//}}}
	render() {//{{{
		var tab
		switch (this.tab.value) {
			case ScheduleEventList.CALENDAR:
				tab = html`<${ScheduleCalendarTab} />`
				break;
			case ScheduleEventList.LIST:
				tab = html`<${ScheduleEventListTab} />`
				break;
		}

		return html`
		<div style="margin: 32px">
			<div class="folder">
				<div class="tabs">
					<div onclick=${() => this.tab.value = ScheduleEventList.CALENDAR} class="tab ${this.tab.value == ScheduleEventList.CALENDAR ? 'selected' : ''}">Calendar</div>
					<div onclick=${() => this.tab.value = ScheduleEventList.LIST} class="tab ${this.tab.value == ScheduleEventList.LIST ? 'selected' : ''}">List</div>
					<div class="hack"></div>
				</div>
				<div class="content">
					${tab}
				</div>
			</div>
		</div>
		`
	}//}}}
}

class ScheduleEventListTab extends Component {
	constructor() {//{{{
		super()
		this.events = signal(null)
		this.retrieveFutureEvents()
	}//}}}
	render() {//{{{
		if (this.events.value === null)
			return

		let events = this.events.value.sort((a, b) => {
			if (a.Time < b.Time) return -1
			if (a.Time > b.Time) return 1
			return 0
		}).map(evt => {
			console.log(evt)
			const dt = evt.Time.split('T')
			const remind = () => {
				if (evt.RemindMinutes > 0)
					return html`${evt.RemindMinutes} min`
			}
			const nodeLink = () => html`<a href="/?node=${evt.Node.ID}">${evt.Node.Name}</a>`


			return html`
				<div class="date">${dt[0]}</div>
				<div class="time">${dt[1].slice(0, 5)}</div>
				<div class="remind"><${remind} /></div>
				<div class="description">${evt.Description}</div>
				<div class="node"><${nodeLink} /></div>
			`
		})

		return html`
			<div id="schedule-events">
				<div class="header">Date</div>
				<div class="header">Time</div>
				<div class="header">Reminder</div>
				<div class="header">Event</div>
				<div class="header">Node</div>
				${events}
			</div>
		`
	}//}}}
	retrieveFutureEvents() {//{{{
		_app.current.request('/schedule/list')
			.then(data => {
				this.events.value = data.ScheduleEvents
			})
	}//}}}
}

class ScheduleCalendarTab extends Component {
	constructor() {//{{{
		super()
	}//}}}
	componentDidMount() {
		let calendarEl = document.getElementById('fullcalendar');
		this.calendar = new FullCalendar.Calendar(calendarEl, {
			initialView: 'dayGridMonth',
			events: this.events,
			eventTimeFormat: {
				hour12: false,
				hour: '2-digit',
				minute: '2-digit',
			},
			firstDay: 1,
		});
		this.calendar.render();
	}
	render() {
		return html`<div id="fullcalendar"></div>`
	}
	events(info, successCallback, failureCallback) {
		const req = {
			StartDate: info.startStr,
			EndDate: info.endStr,
		}
		_app.current.request('/schedule/list', req)
			.then(data => {
				const fullcalendarEvents = data.ScheduleEvents.map(sch => {
					return {
						title: sch.Description,
						start: sch.Time,
						url: `/?node=${sch.Node.ID}`,
					}
				})
				successCallback(fullcalendarEvents)
			})
	}
}


// vim: foldmethod=marker