Notes/static/js/node.mjs
2024-01-13 10:46:52 +01:00

962 lines
26 KiB
JavaScript

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`
${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} />
<${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
}
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 nodeContent = this.nodeContent.current
if (this.page.value != 'node' || nodeContent === null)
return
*/
let content = this.node.value.content()
this.node.value.setContent(content)
this.node.value.save(() => this.props.app.nodeModified.value = false)
}//}}}
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 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 = {}
// it doesn't control it afterwards.
// Used to expand the crumbs upon site loading.
}//}}}
retrieve(callback) {//{{{
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,
}
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)
}
}//}}}
}
// vim: foldmethod=marker