forked from cory/tildefriends
feat(user_settings): finish ui, add ability to export and create identities, add tildefriends.css to the /static/ folder
This commit is contained in:
parent
392206c19e
commit
4992ff3a2d
@ -1,18 +1,44 @@
|
||||
import * as tfrpc from '/tfrpc.js';
|
||||
|
||||
tfrpc.register(async function getIdentities() {
|
||||
return ssb.getIdentities();
|
||||
});
|
||||
tfrpc.register(async function createID(id) {
|
||||
return await ssb.createIdentity();
|
||||
});
|
||||
tfrpc.register(async function getPrivateKey(id) {
|
||||
return bip39Words(await ssb.getPrivateKey(id));
|
||||
});
|
||||
tfrpc.register(async function getThemes() {
|
||||
// TODO
|
||||
return ['solarized', 'gruvbox', 'light'];
|
||||
});
|
||||
tfrpc.register(async function setTheme() {
|
||||
// TODO
|
||||
console.warn("setTheme called - not implemented")
|
||||
return null;
|
||||
});
|
||||
tfrpc.register(async function reload() {
|
||||
await main();
|
||||
});
|
||||
|
||||
async function main() {
|
||||
// Get body.html
|
||||
const body = utf8Decode(await getFile("body.html"));
|
||||
const body = utf8Decode(await getFile('body.html'));
|
||||
|
||||
// Build the document
|
||||
const document = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="tildefriends.css"/>
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
<script src="script.js" type="module"></script>
|
||||
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
|
||||
<script src="tf-theme-picker.js" type="module"></script>
|
||||
<script src="tf-password-form.js" type="module"></script>
|
||||
<script src="tf-delete-account-btn.js" type="module"></script>
|
||||
<script src="tf-identity-manager.js" type="module"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="flex-column">
|
||||
${body}
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
@ -1,130 +1,20 @@
|
||||
<h1>h1</h1>
|
||||
<h2>h2</h2>
|
||||
<h3>hxc3</h3>
|
||||
<h1>Your settings</h1>
|
||||
|
||||
Notice: this example app fetches an image and an audio file from a third-party website.
|
||||
Those will not work offline. <a href="/">This is a link.</a>
|
||||
<div class="box flex-column">
|
||||
<h2>Appearance</h2>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<button class="red" onclick="hello()">button.red</button>
|
||||
<button class="green">button.green</button>
|
||||
<button class="blue">button.blue</button>
|
||||
<button class="yellow">button.yellow</button>
|
||||
<button>button</button>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<code>
|
||||
x = 5;
|
||||
y = 6;
|
||||
z = x + y;
|
||||
</code>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<audio controls>
|
||||
<source src="https://www.audiocheck.net/Audio/audiocheck.net_brownnoise.ogg" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
|
||||
<br />
|
||||
|
||||
<img src="https://picsum.photos/id/37/500/250" alt="Italian Trulli">
|
||||
|
||||
|
||||
<div class="box flex">
|
||||
Hello
|
||||
<div class="box flex">
|
||||
Hello
|
||||
<div class="box flex">
|
||||
Hello
|
||||
<div class="box flex">
|
||||
Hello
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tf-theme-picker></tf-theme-picker>
|
||||
</div>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim leo a urna gravida, vel pulvinar magna blandit. Cras eleifend, elit ac faucibus gravida, justo mauris ornare nisi, eget ultrices lorem tortor vitae purus. Quisque et dui arcu. Nam semper, mauris id molestie imperdiet, risus nunc dignissim dolor, nec cursus elit mi sit amet dui. Nulla aliquam id mauris sed posuere. Nam mollis velit luctus accumsan aliquam. In tempor, felis id finibus tincidunt, erat nulla vehicula orci, a venenatis mauris nunc et diam. Aliquam lorem sem, iaculis ut mollis in, feugiat a mauris. Nam laoreet vestibulum leo a aliquet. Nam sit amet neque erat.</p>
|
||||
<div class="box flex-column">
|
||||
<h2>Danger Zone</h2>
|
||||
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor, sem ac pretium accumsan, dui sapien placerat ligula, ut maximus lacus eros sed tortor. Vivamus finibus facilisis felis, quis dictum felis vestibulum nec. Mauris eu facilisis est, nec tempor sem. Quisque ac ultricies tortor. Morbi et ante at dolor accumsan molestie. Curabitur facilisis condimentum lorem a luctus. Quisque lectus risus, vestibulum non malesuada quis, porta sed urna. Sed elementum magna in velit sagittis, vel fringilla ipsum pulvinar. Morbi nec lectus egestas, laoreet erat fringilla, tristique quam.</p>
|
||||
<h3>Manage your identities</h3>
|
||||
<tf-identity-manager></tf-identity-manager>
|
||||
|
||||
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mattis ante. Donec venenatis pretium ornare. Nulla vel purus cursus, molestie velit a, vehicula mi. Phasellus ac eleifend sapien, in euismod mauris. Donec quis nisi sodales, accumsan mi sed, malesuada purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent venenatis enim et nisi interdum, nec sodales diam suscipit. Etiam nisl neque, dapibus id felis eget, laoreet posuere eros. Donec arcu neque, aliquam vel fringilla ut, laoreet in velit. Ut tincidunt rutrum eros vel fringilla. Sed at eleifend sem. Pellentesque ut leo in ligula accumsan dignissim quis at justo. Donec luctus felis sed lacus pharetra aliquam. Nam volutpat quis tellus eget lobortis. Proin ultrices ante vitae quam efficitur accumsan.</p>
|
||||
<h3>Change my password</h3>
|
||||
<tf-password-form></tf-password-form>
|
||||
|
||||
<p>Here is a quote from WWF's website:</p>
|
||||
|
||||
<blockquote cite="http://www.worldwildlife.org/who/index.html">
|
||||
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
|
||||
</blockquote>
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Company</th>
|
||||
<th>Contact</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alfreds Futterkiste</td>
|
||||
<td>Maria Anders</td>
|
||||
<td>Germany</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Centro comercial Moctezuma</td>
|
||||
<td>Francisco Chang</td>
|
||||
<td>Mexico</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ernst Handel</td>
|
||||
<td>Roland Mendel</td>
|
||||
<td>Austria</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Island Trading</td>
|
||||
<td>Helen Bennett</td>
|
||||
<td>UK</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laughing Bacchus Winecellars</td>
|
||||
<td>Yoshi Tannamuri</td>
|
||||
<td>Canada</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Magazzini Alimentari Riuniti</td>
|
||||
<td>Giovanni Rovelli</td>
|
||||
<td>Italy</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>An Unordered HTML List</h2>
|
||||
|
||||
<ul>
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ul>
|
||||
|
||||
<h2>An Ordered HTML List</h2>
|
||||
|
||||
<ol>
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
|
||||
<form">
|
||||
<textarea rows="5" cols="32">This is a textarea.</textarea>
|
||||
<br />
|
||||
<div class="flex-column" style="align-items: start;">
|
||||
<input type ="radio" />
|
||||
<input type ="radio" />
|
||||
<input type ="checkbox" />
|
||||
<input type ="checkbox" />
|
||||
<h3>Delete your account</h3>
|
||||
<tf-delete-account-btn></tf-delete-account-btn>
|
||||
</div>
|
||||
<br />
|
||||
<input class="green" type="submit" value="Button">
|
||||
</form>
|
||||
120
apps/user_settings/lit-all.min.js
vendored
Normal file
120
apps/user_settings/lit-all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
apps/user_settings/lit-all.min.js.map
Normal file
1
apps/user_settings/lit-all.min.js.map
Normal file
File diff suppressed because one or more lines are too long
@ -1,3 +1 @@
|
||||
function hello() {
|
||||
alert("Hello !");
|
||||
}
|
||||
/* */
|
||||
36
apps/user_settings/tf-delete-account-btn.js
Normal file
36
apps/user_settings/tf-delete-account-btn.js
Normal file
@ -0,0 +1,36 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
class TfDeleteAccountButtonElement extends LitElement {
|
||||
static get properties() {
|
||||
return {};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
deleteAccount() {
|
||||
const res = confirm(
|
||||
'Are you really sure you want to delete your account ?'
|
||||
);
|
||||
|
||||
if (!res) return;
|
||||
|
||||
console.warn('TODO');
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
|
||||
|
||||
<span>This action is irreversible !</span>
|
||||
|
||||
<button class="red" @click=${this.deleteAccount}>
|
||||
[Not implemented] Delete my Tilde Friends account
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-delete-account-btn', TfDeleteAccountButtonElement);
|
||||
71
apps/user_settings/tf-identity-manager.js
Normal file
71
apps/user_settings/tf-identity-manager.js
Normal file
@ -0,0 +1,71 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
class TfIdentityManagerElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
ids: {type: Array},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.ids = [];
|
||||
this.load();
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.ids = await tfrpc.rpc.getIdentities();
|
||||
}
|
||||
|
||||
async createIdentity() {
|
||||
try {
|
||||
let id = await tfrpc.rpc.createID();
|
||||
alert('Successfully created: ' + id);
|
||||
await tfrpc.rpc.reload();
|
||||
} catch (err) {
|
||||
alert('Error creating identity: ' + err);
|
||||
}
|
||||
}
|
||||
|
||||
async exportIdentity(id) {
|
||||
alert('Your private key is:\n' + (await tfrpc.rpc.getPrivateKey(id)));
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
|
||||
<style>
|
||||
.id-span {
|
||||
font-family: monospace;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h4>Create a new identity</h4>
|
||||
<button id="create-id" class="green" @click=${this.createIdentity}>Create Identity</button>
|
||||
|
||||
<h4>Import an SSB Identity from 12 BIP39 English Words</h4>
|
||||
<textarea id="add-id" style="width: 100%" rows="4"></textarea>
|
||||
<button class="green">[Not implemented] Import Identity</button>
|
||||
|
||||
<h4>Warning !</h4>
|
||||
<strong>Anybody that has access to your private key can gain total access over your account.</strong>
|
||||
<br><br>
|
||||
Tilde Friends' contributors will never ask you for your private key !
|
||||
|
||||
<ul>
|
||||
${this.ids.map(
|
||||
(id) =>
|
||||
html`
|
||||
<li>
|
||||
<button class="blue" @click=${() => this.exportIdentity(id)}>Export Identity</button>
|
||||
<button class="red">[Not implemented] Delete Identity</button>
|
||||
<span class="id-span">${id}</span>
|
||||
</li>`
|
||||
)}
|
||||
</ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-identity-manager', TfIdentityManagerElement);
|
||||
68
apps/user_settings/tf-password-form.js
Normal file
68
apps/user_settings/tf-password-form.js
Normal file
@ -0,0 +1,68 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
class TfPasswordFormElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
//selected: {type: String},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks a password against different requirements
|
||||
* @param {string} password the password to validate
|
||||
* @returns
|
||||
*/
|
||||
validatePassword(password) {
|
||||
// TODO(tasiaiso)
|
||||
return true;
|
||||
}
|
||||
|
||||
submitPassword() {
|
||||
const currentPwd = this.shadowRoot.getElementById('current').value;
|
||||
const newPwd = this.shadowRoot.getElementById('new').value;
|
||||
const repeatPwd = this.shadowRoot.getElementById('Repeat').value;
|
||||
|
||||
if (!(newPwd === repeatPwd)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO
|
||||
// tfrpc.changePassword()
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="grid">
|
||||
<label for="current">Current password:</label>
|
||||
<input type="password" id="current" name="current" autocomplete="current-password" />
|
||||
|
||||
<label for="new">Enter new password:</label>
|
||||
<input type="password" id="new" name="new" autocomplete="new-password" />
|
||||
|
||||
<label for="repeat">Repeat new password:</label>
|
||||
<input type="password" id="repeat" name="repeat" autocomplete="new-password" />
|
||||
</div>
|
||||
|
||||
<button @click=${this.submitPassword} class="red">
|
||||
[Not implemented] Change my password
|
||||
</button>
|
||||
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-password-form', TfPasswordFormElement);
|
||||
40
apps/user_settings/tf-theme-picker.js
Normal file
40
apps/user_settings/tf-theme-picker.js
Normal file
@ -0,0 +1,40 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
class TfThemePickerElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
selected: {type: String},
|
||||
themes: {type: Array},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.load();
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.themes = await tfrpc.rpc.getThemes();
|
||||
}
|
||||
|
||||
changed(event) {
|
||||
this.selected = event.srcElement.value;
|
||||
console.log('selected theme', this.selected);
|
||||
// TODO
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
|
||||
|
||||
<label for="theme">[Not implemented] Choose your theme:</label>
|
||||
|
||||
<select name="theme" ?hidden=${!this.themes?.length} @change=${this.changed}>
|
||||
${(this.themes ?? []).map((id) => html`<option value=${id}>${id}</option>`)}
|
||||
</select>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-theme-picker', TfThemePickerElement);
|
||||
@ -1,15 +1,14 @@
|
||||
/*
|
||||
* Tilde Friends core stylesheet
|
||||
* This is a prototype; things may change based on feedback.
|
||||
*
|
||||
* This Software is an external library that is part of
|
||||
* Tilde Friends and is shared under the MIT license.
|
||||
*
|
||||
* Inject this file in your app at tildefriends.css
|
||||
* and use this tag to import it:
|
||||
* <link rel="stylesheet" href="tildefriends.css"/>
|
||||
* <link rel="stylesheet" href="/static/tildefriends-v1.css"/>
|
||||
*
|
||||
* Revision 0 / 2024 M02 19
|
||||
* v1.0.0 / 2024 M03 21
|
||||
*/
|
||||
|
||||
body {
|
||||
@ -21,7 +20,7 @@ button,
|
||||
.button,
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=dropdown] {
|
||||
select {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
@ -644,6 +644,7 @@ static void _httpd_endpoint_static(tf_http_request_t* request)
|
||||
"style.css",
|
||||
"tfrpc.js",
|
||||
"w3.css",
|
||||
"tildefriends-v1.css"
|
||||
};
|
||||
|
||||
const char* k_map[][2] = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user