responsive setup page

This commit is contained in:
azivner 2019-01-05 21:49:40 +01:00
parent 373408e401
commit a103886ea5
4 changed files with 99 additions and 91 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "trilium", "name": "trilium",
"version": "0.27.1-beta", "version": "0.27.2-beta",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -1,4 +1,5 @@
const sql = require('./sql'); const sql = require('./sql');
const sqlInit = require('./sql_init');
const optionService = require('./options'); const optionService = require('./options');
const dateUtils = require('./date_utils'); const dateUtils = require('./date_utils');
const syncTableService = require('./sync_table'); const syncTableService = require('./sync_table');
@ -408,10 +409,12 @@ async function cleanupDeletedNotes() {
await sql.execute("UPDATE note_revisions SET content = NULL WHERE note_revisions.content IS NOT NULL AND noteId IN (SELECT noteId FROM notes WHERE isDeleted = 1 AND notes.dateModified <= ?)", [dateUtils.dateStr(cutoffDate)]); await sql.execute("UPDATE note_revisions SET content = NULL WHERE note_revisions.content IS NOT NULL AND noteId IN (SELECT noteId FROM notes WHERE isDeleted = 1 AND notes.dateModified <= ?)", [dateUtils.dateStr(cutoffDate)]);
} }
// first cleanup kickoff 5 minutes after startup sqlInit.dbReady.then(() => {
setTimeout(cls.wrap(cleanupDeletedNotes), 5 * 60 * 1000); // first cleanup kickoff 5 minutes after startup
setTimeout(cls.wrap(cleanupDeletedNotes), 5 * 60 * 1000);
setInterval(cls.wrap(cleanupDeletedNotes), 4 * 3600 * 1000); setInterval(cls.wrap(cleanupDeletedNotes), 4 * 3600 * 1000);
});
module.exports = { module.exports = {
createNewNote, createNewNote,

View File

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="col-md-5 offset-md-3" style="padding-top: 25px;"> <div class="col-xs-12 col-sm-10 col-md-6 col-lg-4 col-xl-4 mx-auto" style="padding-top: 25px;">
<h1>Trilium login</h1> <h1>Trilium login</h1>
<% if (failedAuth) { %> <% if (failedAuth) { %>
@ -60,6 +60,8 @@
device = /Mobi/.test(navigator.userAgent) ? "mobile" : "desktop"; device = /Mobi/.test(navigator.userAgent) ? "mobile" : "desktop";
} }
console.log("Setting device cookie to:", device);
setCookie("trilium-device", device); setCookie("trilium-device", device);
function setCookie(name, value) { function setCookie(name, value) {

View File

@ -2,113 +2,116 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Setup</title> <title>Setup</title>
</head> </head>
<body> <body>
<div id="setup-dialog" style="width: 700px; margin: auto; padding-top: 50px; display:none; font-size: larger;"> <div class="container">
<h1>Trilium Notes setup</h1> <div id="setup-dialog" class="col-md-12 col-lg-8 col-xl-6 mx-auto" style="padding-top: 25px;">
<h1>Trilium Notes setup</h1>
<div class="alert alert-warning" id="alert" style="display: none;"> <div class="alert alert-warning" id="alert" style="display: none;">
</div>
<div id="setup-type" data-bind="visible: step() == 'setup-type'" style="margin-top: 20px;">
<div class="radio" style="margin-bottom: 15px;">
<label><input type="radio" name="setup-type" value="new-document" data-bind="checked: setupType">
I'm a new user and I want to create new Trilium document for my notes</label>
</div>
<div class="radio" data-bind="if: instanceType == 'server'" style="margin-bottom: 15px;">
<label><input type="radio" name="setup-type" value="sync-from-desktop" data-bind="checked: setupType">
I have desktop instance already and I want to setup sync with it</label>
</div>
<div class="radio" data-bind="if: instanceType == 'desktop'" style="margin-bottom: 15px;">
<label><input type="radio" name="setup-type" value="sync-from-server" data-bind="checked: setupType">
I have server instance up and I want to setup sync with it</label>
</div> </div>
<button type="button" data-bind="disable: !setupTypeSelected(), click: selectSetupType" class="btn btn-primary">Next</button> <div id="setup-type" data-bind="visible: step() == 'setup-type'" style="margin-top: 20px;">
</div> <div class="radio" style="margin-bottom: 15px;">
<label><input type="radio" name="setup-type" value="new-document" data-bind="checked: setupType">
I'm a new user and I want to create new Trilium document for my notes</label>
</div>
<div class="radio" data-bind="if: instanceType == 'server'" style="margin-bottom: 15px;">
<label><input type="radio" name="setup-type" value="sync-from-desktop" data-bind="checked: setupType">
I have desktop instance already and I want to setup sync with it</label>
</div>
<div class="radio" data-bind="if: instanceType == 'desktop'" style="margin-bottom: 15px;">
<label><input type="radio" name="setup-type" value="sync-from-server" data-bind="checked: setupType">
I have server instance up and I want to setup sync with it</label>
</div>
<div data-bind="visible: step() == 'new-document'"> <button type="button" data-bind="disable: !setupTypeSelected(), click: selectSetupType" class="btn btn-primary">Next</button>
<h2>New document</h2>
<p>You're almost done with the setup. The last thing is to choose username and password using which you'll login to the application.
This password is also used for generating encryption key which encrypts protected notes.</p>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" data-bind="value: username" placeholder="Choose alphanumeric username">
</div>
<div class="form-group">
<label for="password1">Password</label>
<input type="password" class="form-control" data-bind="value: password1" placeholder="Password">
</div>
<div class="form-group">
<label for="password2">Repeat password</label>
<input type="password" class="form-control" data-bind="value: password2" placeholder="Password">
</div> </div>
<button type="button" data-bind="click: back" class="btn btn-default">Back</button> <div data-bind="visible: step() == 'new-document'">
<h2>New document</h2>
&nbsp; <p>You're almost done with the setup. The last thing is to choose username and password using which you'll login to the application.
This password is also used for generating encryption key which encrypts protected notes.</p>
<button type="button" data-bind="click: finish" class="btn btn-primary">Finish setup</button> <div class="form-group">
</div> <label for="username">Username</label>
<input type="text" class="form-control" data-bind="value: username" placeholder="Choose alphanumeric username">
</div>
<div class="form-group">
<label for="password1">Password</label>
<input type="password" class="form-control" data-bind="value: password1" placeholder="Password">
</div>
<div class="form-group">
<label for="password2">Repeat password</label>
<input type="password" class="form-control" data-bind="value: password2" placeholder="Password">
</div>
<div data-bind="visible: step() == 'sync-from-desktop'"> <button type="button" data-bind="click: back" class="btn btn-default">Back</button>
<h2>Sync from Desktop</h2>
<p>This setup needs to be initiated from the desktop instance:</p> &nbsp;
<ol> <button type="button" data-bind="click: finish" class="btn btn-primary">Finish setup</button>
<li>please open your desktop instance of Trilium Notes</li>
<li>click on Options button in the top right</li>
<li>click on Sync tab</li>
<li>configure server instance address to the: <span id="current-host"></span> and click save.</li>
<li>click on "Test sync" button</li>
<li>once you've done all this, click <a href="/">here</a></li>
</ol>
<button type="button" data-bind="click: back" class="btn btn-default">Back</button>
</div>
<div data-bind="visible: step() == 'sync-from-server'">
<h2>Sync from Server</h2>
<p>Please enter Trilium server address and credentials below. This will download the whole Trilium document from server and setup sync to it. Depending on the document size and your connection speed, this may take a while.</p>
<div class="form-group">
<label for="sync-server-host">Trilium server address</label>
<input type="text" id="syncServerHost" class="form-control" data-bind="value: syncServerHost" placeholder="https://<hostname>:<port>">
</div>
<div class="form-group">
<label for="sync-proxy">Proxy server (optional)</label>
<input type="text" id="sync-proxy" class="form-control" data-bind="value: syncProxy" placeholder="https://<hostname>:<port>">
<p><strong>Note:</strong> If you leave proxy setting blank, system proxy will be used (applies to desktop/electron build only)</p>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" class="form-control" data-bind="value: username" placeholder="Username">
</div>
<div class="form-group">
<label for="password1">Password</label>
<input type="password" id="password1" class="form-control" data-bind="value: password1" placeholder="Password">
</div> </div>
<button type="button" data-bind="click: back" class="btn btn-default">Back</button> <div data-bind="visible: step() == 'sync-from-desktop'">
<h2>Sync from Desktop</h2>
&nbsp; <p>This setup needs to be initiated from the desktop instance:</p>
<button type="button" data-bind="click: finish" class="btn btn-primary">Finish setup</button> <ol>
</div> <li>please open your desktop instance of Trilium Notes</li>
<li>click on Options button in the top right</li>
<li>click on Sync tab</li>
<li>configure server instance address to the: <span id="current-host"></span> and click save.</li>
<li>click on "Test sync" button</li>
<li>once you've done all this, click <a href="/">here</a></li>
</ol>
<div data-bind="visible: step() == 'sync-in-progress'"> <button type="button" data-bind="click: back" class="btn btn-default">Back</button>
<h2>Sync in progress</h2> </div>
<div class="alert alert-success">Sync has been correctly set up. It will take some time for the initial sync to finish. Once it's done, you'll be redirected to the login page.</div> <div data-bind="visible: step() == 'sync-from-server'">
<h2>Sync from Server</h2>
<div data-bind="if: instanceType == 'desktop'"> <p>Please enter Trilium server address and credentials below. This will download the whole Trilium document from server and setup sync to it. Depending on the document size and your connection speed, this may take a while.</p>
Outstanding sync items: <strong id="outstanding-syncs">N/A</strong>
<div class="form-group">
<label for="sync-server-host">Trilium server address</label>
<input type="text" id="syncServerHost" class="form-control" data-bind="value: syncServerHost" placeholder="https://<hostname>:<port>">
</div>
<div class="form-group">
<label for="sync-proxy">Proxy server (optional)</label>
<input type="text" id="sync-proxy" class="form-control" data-bind="value: syncProxy" placeholder="https://<hostname>:<port>">
<p><strong>Note:</strong> If you leave proxy setting blank, system proxy will be used (applies to desktop/electron build only)</p>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" class="form-control" data-bind="value: username" placeholder="Username">
</div>
<div class="form-group">
<label for="password1">Password</label>
<input type="password" id="password1" class="form-control" data-bind="value: password1" placeholder="Password">
</div>
<button type="button" data-bind="click: back" class="btn btn-default">Back</button>
&nbsp;
<button type="button" data-bind="click: finish" class="btn btn-primary">Finish setup</button>
</div>
<div data-bind="visible: step() == 'sync-in-progress'">
<h2>Sync in progress</h2>
<div class="alert alert-success">Sync has been correctly set up. It will take some time for the initial sync to finish. Once it's done, you'll be redirected to the login page.</div>
<div data-bind="if: instanceType == 'desktop'">
Outstanding sync items: <strong id="outstanding-syncs">N/A</strong>
</div>
</div> </div>
</div> </div>
</div> </div>