cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

feat-user_settings): add ability to import and delete an identity, formatting

Browse Source
This commit is contained in:
Tasia Iso 2024-03-21 20:10:35 +01:00
parent 5474c5a101
commit 2a928dcafc
10 changed files with 109 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/user_settings.json
View File

@ -1,4 +1 @@
{
"type": "tildefriends-app",
"emoji": "⚙️"
}
{"type": "tildefriends-app", "emoji": "⚙️"}

8
apps/user_settings/app.js
View File

@ -9,13 +9,19 @@ tfrpc.register(async function createID(id) {
tfrpc.register(async function getPrivateKey(id) {
return bip39Words(await ssb.getPrivateKey(id));
});
tfrpc.register(async function addID(id) {
return await ssb.addIdentity(bip39Bytes(id));
});
tfrpc.register(async function deleteID(id) {
return await ssb.deleteIdentity(id);
});
tfrpc.register(async function getThemes() {
// TODO
return ['solarized', 'gruvbox', 'light'];
});
tfrpc.register(async function setTheme() {
// TODO
console.warn("setTheme called - not implemented")
console.warn('setTheme called - not implemented');
return null;
});
tfrpc.register(async function reload() {

2
apps/user_settings/body.html
View File

@ -11,7 +11,7 @@
<h3>Manage your identities</h3>
<tf-identity-manager></tf-identity-manager>
<h3>Change my password</h3>
<tf-password-form></tf-password-form>

1
apps/user_settings/script.js
View File

@ -1 +0,0 @@
/* */

1
apps/user_settings/style.css
View File

@ -1 +0,0 @@
/* */

2
apps/user_settings/tf-delete-account-btn.js
View File

@ -22,7 +22,7 @@ class TfDeleteAccountButtonElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
<link rel="stylesheet" href="/static/tildefriends-v1.css" />
<span>This action is irreversible !</span>

85
apps/user_settings/tf-identity-manager.js
View File

@ -20,7 +20,7 @@ class TfIdentityManagerElement extends LitElement {
async createIdentity() {
try {
let id = await tfrpc.rpc.createID();
const id = await tfrpc.rpc.createID();
alert('Successfully created: ' + id);
await tfrpc.rpc.reload();
} catch (err) {
@ -28,13 +28,50 @@ class TfIdentityManagerElement extends LitElement {
}
}
async importIdentity() {
const words = this.renderRoot?.querySelector('#import-id-textarea').value;
if (!words) return;
try {
const newID = await tfrpc.rpc.addID(words);
if (newID) alert('Successfully imported a new identity');
else alert('This identity already exists or is invalid.');
await tfrpc.rpc.reload();
} catch (err) {
alert('Error importing identity: ' + err);
}
}
async exportIdentity(id) {
alert('Your private key is:\n' + (await tfrpc.rpc.getPrivateKey(id)));
alert(
'Your private key is:\n' +
(await tfrpc.rpc.getPrivateKey(id)) +
'\nDo not share it with anyone!'
);
}
async deleteIdentity(id) {
try {
if (
prompt(
'Are you sure you want to delete "' +
id +
'"? It cannot be recovered without the exported phrase.\\n\\nEnter the word "DELETE" to confirm you wish to delete it.'
) === 'DELETE'
) {
if (await tfrpc.rpc.deleteID(id)) {
alert('Successfully deleted ID: ' + id);
}
await tfrpc.rpc.reload();
}
} catch (e) {
alert('Error deleting ID: ' + e);
}
}
render() {
return html`
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
return html` <link rel="stylesheet" href="/static/tildefriends-v1.css" />
<style>
.id-span {
font-family: monospace;
@ -43,29 +80,39 @@ class TfIdentityManagerElement extends LitElement {
</style>
<h4>Create a new identity</h4>
<button id="create-id" class="green" @click=${this.createIdentity}>Create Identity</button>
<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>
<textarea id="import-id-textarea" style="width: 100%" rows="4"></textarea>
<button class="green" @click=${this.importIdentity}>
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>
<strong
>Anybody that knows 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>`
)}
${this.ids.map(
(id) =>
html` <li>
<button class="blue" @click=${() => this.exportIdentity(id)}>
Export Identity
</button>
<button class="red" @click=${() => this.deleteIdentity(id)}>
Delete Identity
</button>
<span class="id-span">${id}</span>
</li>`
)}
</ul>`;
}
}
customElements.define('tf-identity-manager', TfIdentityManagerElement);
customElements.define('tf-identity-manager', TfIdentityManagerElement);

26
apps/user_settings/tf-password-form.js
View File

@ -37,7 +37,7 @@ class TfPasswordFormElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
<link rel="stylesheet" href="/static/tildefriends-v1.css" />
<style>
.grid {
@ -48,21 +48,35 @@ class TfPasswordFormElement extends LitElement {
<div class="grid">
<label for="current">Current password:</label>
<input type="password" id="current" name="current" autocomplete="current-password" />
<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" />
<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" />
<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);
customElements.define('tf-password-form', TfPasswordFormElement);

12
apps/user_settings/tf-theme-picker.js
View File

@ -26,12 +26,18 @@ class TfThemePickerElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
<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
name="theme"
?hidden=${!this.themes?.length}
@change=${this.changed}
>
${(this.themes ?? []).map(
(id) => html`<option value=${id}>${id}</option>`
)}
</select>
`;
}

7
core/tildefriends-v1.css
View File

@ -18,8 +18,8 @@ body {
button,
.button,
input[type=button],
input[type=submit],
input[type='button'],
input[type='submit'],
select {
border: none;
border-radius: 8px;
@ -75,7 +75,8 @@ table {
width: 100%;
}
td, th {
td,
th {
border: 1px solid #ffffff40;
text-align: left;
padding: 8px;