mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
216 lines
9.3 KiB
Plaintext
216 lines
9.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>Setup</title>
|
|
|
|
<style>
|
|
.lds-ring {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.lds-ring div {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 8px;
|
|
border: 6px solid black;
|
|
border-radius: 50%;
|
|
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: black transparent transparent transparent;
|
|
}
|
|
.lds-ring div:nth-child(1) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.lds-ring div:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.lds-ring div:nth-child(3) {
|
|
animation-delay: -0.15s;
|
|
}
|
|
@keyframes lds-ring {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<noscript>Trilium requires JavaScript to be enabled.</noscript>
|
|
<div class="container">
|
|
<div id="setup-dialog" class="col-md-12 col-lg-8 col-xl-6 mx-auto" style="padding-top: 25px; font-size: larger; display: none;">
|
|
<h1>Trilium Notes setup</h1>
|
|
|
|
<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" 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" style="margin-bottom: 15px;">
|
|
<label><input type="radio" name="setup-type" value="sync-from-server" data-bind="checked: setupType">
|
|
I have server instance already and I want to setup sync with it</label>
|
|
</div>
|
|
|
|
<button type="button" data-bind="disable: !setupTypeSelected(), click: selectSetupType" class="btn btn-primary">Next</button>
|
|
</div>
|
|
|
|
<div data-bind="visible: step() == 'new-document'">
|
|
<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 class="form-group">
|
|
<label for="password2">Theme</label>
|
|
|
|
<div style="display: flex; justify-content: space-around;">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="theme" id="theme-light" value="light" data-bind="checked: theme" checked>
|
|
<label class="form-check-label" for="theme-light">light</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="theme" id="theme-dark" value="dark" data-bind="checked: theme">
|
|
<label class="form-check-label" for="theme-dark">dark</label>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="font-size: smaller;margin-top: 10px;"><em>Theme can be later changed in Options -> Appearance.</em></p>
|
|
</div>
|
|
|
|
<button type="button" data-bind="click: back" class="btn btn-secondary">Back</button>
|
|
|
|
|
|
|
|
<button type="button" data-bind="click: finish" class="btn btn-primary">Finish setup</button>
|
|
</div>
|
|
|
|
<div data-bind="visible: step() == 'new-document-in-progress'">
|
|
<h2>Document initialization in progress</h2>
|
|
|
|
<div style="display: flex; justify-content: flex-start; margin-top: 20px;">
|
|
<div class="lds-ring" style="margin-right: 20px;">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div style="line-height: 60px;">
|
|
<p>You will be shortly redirected to the application.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-bind="visible: step() == 'sync-from-desktop'">
|
|
<h2>Sync from Desktop</h2>
|
|
|
|
<p>This setup needs to be initiated from the desktop instance:</p>
|
|
|
|
<ol>
|
|
<li>Open your desktop instance of Trilium Notes.</li>
|
|
<li>From the Trilium Menu, click Options.</li>
|
|
<li>Click on Sync tab.</li>
|
|
<li>Change server instance address to: <span id="current-host"></span> and click save.</li>
|
|
<li>Click "Test sync" button to verify connection is successfull.</li>
|
|
<li>Once you've completed these steps, click <a href="/">here</a>.</li>
|
|
</ol>
|
|
|
|
<button type="button" data-bind="click: back" class="btn btn-secondary">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>
|
|
|
|
<button type="button" data-bind="click: back" class="btn btn-secondary">Back</button>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
<script type="text/javascript">
|
|
global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
|
|
|
|
window.glob = {
|
|
sourceId: ''
|
|
};
|
|
|
|
window.syncInProgress = <%= syncInProgress ? 'true' : 'false' %>;
|
|
</script>
|
|
|
|
<!-- Required for correct loading of scripts in Electron -->
|
|
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
|
|
|
|
<script src="libraries/jquery.min.js"></script>
|
|
<script src="libraries/jquery.hotkeys.js"></script>
|
|
|
|
<link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="libraries/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="libraries/knockout.min.js"></script>
|
|
|
|
<script src="app/setup.js" crossorigin type="module"></script>
|
|
<link href="stylesheets/theme-light.css" rel="stylesheet">
|
|
</body>
|
|
</html>
|