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

format/prettier

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-13 20:07:39 -04:00
parent 8007e71e1d
commit c52331a23a
8 changed files with 242 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/ssb/tf-tab-connections.js
View File

@ -33,7 +33,9 @@ class TfTabConnectionsElement extends LitElement {
render_connection_summary(connection) { render_connection_summary(connection) {
if (connection.address && connection.port) { if (connection.address && connection.port) {
return html`<div><small>${connection.address}:${connection.port}</small></div>`; return html`<div>
<small>${connection.address}:${connection.port}</small>
</div>`;
} else if (connection.tunnel) { } else if (connection.tunnel) {
return html`<div>room peer</div>`; return html`<div>room peer</div>`;
} else { } else {
@ -137,7 +139,11 @@ class TfTabConnectionsElement extends LitElement {
<ul class="w3-ul w3-border"> <ul class="w3-ul w3-border">
${this.connections ${this.connections
.filter((x) => x.tunnel === undefined) .filter((x) => x.tunnel === undefined)
.map((x) => html` <li class="w3-bar">${this.render_connection(x)}</li> `)} .map(
(x) => html`
<li class="w3-bar">${this.render_connection(x)}</li>
`
)}
</ul> </ul>
<h2>Stored Connections</h2> <h2>Stored Connections</h2>
<ul class="w3-ul w3-border"> <ul class="w3-ul w3-border">

198
apps/welcome/index.html
View File

@ -1,23 +1,36 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="w3.css"> <link rel="stylesheet" href="w3.css" />
<link rel="stylesheet" href="fontawesome.min.css"> <link rel="stylesheet" href="fontawesome.min.css" />
<link rel="stylesheet" href="regular.min.css"> <link rel="stylesheet" href="regular.min.css" />
<link rel="stylesheet" href="solid.min.css"> <link rel="stylesheet" href="solid.min.css" />
<link rel="stylesheet" href="brands.min.css"> <link rel="stylesheet" href="brands.min.css" />
<style> <style>
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif} body,
body {font-size: 16px;} h1,
img {margin-bottom: -8px;} h2,
.mySlides {display: none;} h3,
h4,
h5 {
font-family: 'Poppins', sans-serif;
}
body {
font-size: 16px;
}
img {
margin-bottom: -8px;
}
.mySlides {
display: none;
}
</style> </style>
<base target="_top"> <base target="_top" />
</head> </head>
<body class="w3-content w3-black" style="max-width:1500px;"> <body class="w3-content w3-black" style="max-width: 1500px">
<!-- The App Section --> <!-- The App Section -->
<div class="w3-padding-64 w3-white"> <div class="w3-padding-64 w3-white">
<div class="w3-row-padding"> <div class="w3-row-padding">
@ -25,21 +38,39 @@
<h1 class="w3-jumbo"> <h1 class="w3-jumbo">
<b>😎 Tilde Friends</b> <b>😎 Tilde Friends</b>
</h1> </h1>
<h1 class="w3-xxlarge w3-text-green"><b>Make apps and friends from the comfort of your web browser.</b></h1> <h1 class="w3-xxlarge w3-text-green">
<p>Tilde Friends is a platform for building, running, and sharing web applications.</p> <b>Make apps and friends from the comfort of your web browser.</b>
<p>Available for lots of devices: </h1>
<p>
Tilde Friends is a platform for building, running, and sharing web
applications.
</p>
<p>
Available for lots of devices:
<i class="fa-brands fa-linux w3-xlarge"></i> <i class="fa-brands fa-linux w3-xlarge"></i>
<i class="fa-brands fa-android w3-xlarge"></i> <i class="fa-brands fa-android w3-xlarge"></i>
<i class="fa-brands fa-apple w3-xlarge"></i> <i class="fa-brands fa-apple w3-xlarge"></i>
<i class="fa fa-mobile-screen w3-xlarge"></i> <i class="fa fa-mobile-screen w3-xlarge"></i>
<i class="fa-brands fa-windows w3-xlarge"></i> <i class="fa-brands fa-windows w3-xlarge"></i>
</p> </p>
<a class="w3-button w3-black w3-padding-large" href="https://dev.tildefriends.net/cory/tildefriends/releases"><i class="fa fa-download"></i> Download</a> <a
<a class="w3-button w3-black w3-padding-large" href="https://www.tildefriends.net/~cory/apps/"><i class="fa fa-link"></i> Try It</a> class="w3-button w3-black w3-padding-large"
<a class="w3-button w3-black w3-padding-large" href="https://dev.tildefriends.net/"><i class="fa fa-mug-hot"></i> Code</a> href="https://dev.tildefriends.net/cory/tildefriends/releases"
><i class="fa fa-download"></i> Download</a
>
<a
class="w3-button w3-black w3-padding-large"
href="https://www.tildefriends.net/~cory/apps/"
><i class="fa fa-link"></i> Try It</a
>
<a
class="w3-button w3-black w3-padding-large"
href="https://dev.tildefriends.net/"
><i class="fa fa-mug-hot"></i> Code</a
>
</div> </div>
<div class="w3-col l4 m6"> <div class="w3-col l4 m6">
<img src="tildefriends.png" class="w3-image w3-right w3-hide-small"> <img src="tildefriends.png" class="w3-image w3-right w3-hide-small" />
</div> </div>
</div> </div>
</div> </div>
@ -47,26 +78,52 @@
<!-- Getting Starting Section --> <!-- Getting Starting Section -->
<div class="w3-indigo w3-center"> <div class="w3-indigo w3-center">
<div class="w3-row-padding w3-padding-64"> <div class="w3-row-padding w3-padding-64">
<div class="w3-jumbo"><i class="fa fa-rocket"></i> <b>Getting Started</b></div> <div class="w3-jumbo">
<i class="fa fa-rocket"></i> <b>Getting Started</b>
</div>
<div> <div>
<h2>First-time user checklist:</h2> <h2>First-time user checklist:</h2>
<ol type="1" style="text-align: left"> <ol type="1" style="text-align: left">
<li><a href="https://dev.tildefriends.net/cory/tildefriends/releases">Download</a> <li>
<a href="https://dev.tildefriends.net/cory/tildefriends/releases"
>Download</a
>
Tilde Friends and run your own instance, or use Tilde Friends and run your own instance, or use
<a href="https://www.tildefriends.net/">https://www.tildefriends.net/</a>.</li> <a href="https://www.tildefriends.net/"
<li>Create an account to identify yourself with that instance by username and password.</li> >https://www.tildefriends.net/</a
<li>Create an SSB identity in the <b>ssb</b> app. This will generate a keypair used to >.
identify yourself to other users and sign your messages so that they can be verified as from you.</li> </li>
<li>Describe yourself in your profile in the <b>ssb</b> app. Give yourself a name and an avatar if you like.</li> <li>
<li>Connect to others. You will automatically discover peers on the Create an account to identify yourself with that instance by
username and password.
</li>
<li>
Create an SSB identity in the <b>ssb</b> app. This will generate a
keypair used to identify yourself to other users and sign your
messages so that they can be verified as from you.
</li>
<li>
Describe yourself in your profile in the <b>ssb</b> app. Give
yourself a name and an avatar if you like.
</li>
<li>
Connect to others. You will automatically discover peers on the
same instance and same network if there are any. Or use same instance and same network if there are any. Or use
<a href="https://github.com/staltz/ssb-room/blob/master/FAQ.md">rooms</a> <a href="https://github.com/staltz/ssb-room/blob/master/FAQ.md"
>rooms</a
>
and pubs to reach more distant users. and pubs to reach more distant users.
<a href="https://www.tildefriends.net/~cory/room/">tildefriends.net itself</a> <a href="https://www.tildefriends.net/~cory/room/"
operates as a room, so you can connect and see who else is online and establish >tildefriends.net itself</a
a connection.</li> >
operates as a room, so you can connect and see who else is online
and establish a connection.
</li>
<li>Follow people to grow your network.</li> <li>Follow people to grow your network.</li>
<li>Use the <b>edit</b> link at the top of any page to start modifying and making apps.</li> <li>
Use the <b>edit</b> link at the top of any page to start modifying
and making apps.
</li>
</ol> </ol>
</div> </div>
</div> </div>
@ -76,19 +133,28 @@
<div class="w3-light-grey"> <div class="w3-light-grey">
<div class="w3-row-padding w3-padding-64"> <div class="w3-row-padding w3-padding-64">
<div class="w3-col l4 m6 s4"> <div class="w3-col l4 m6 s4">
<a href="https://scuttlebutt.nz/"><img class="w3-image w3-round-large" src="ssb.png" alt="Secure Scuttlebutt"></a> <a href="https://scuttlebutt.nz/"
><img
class="w3-image w3-round-large"
src="ssb.png"
alt="Secure Scuttlebutt"
/></a>
</div> </div>
<div class="w3-col l8 m6" style="height: auto"> <div class="w3-col l8 m6" style="height: auto">
<h1 class="w3-jumbo"><b>Built for Sharing</b></h1> <h1 class="w3-jumbo"><b>Built for Sharing</b></h1>
<p> <p>
Tilde Friends participates in the <a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed social network. Tilde Friends participates in the
<a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed
social network.
</p> </p>
<p> <p>
Share apps with friends. Discover new apps made by enemies. Post pictures of your coffee. Or just lurk. Share apps with friends. Discover new apps made by enemies. Post
pictures of your coffee. Or just lurk.
</p> </p>
<p> <p>
The social network integration provides tools for connecting with other people world-wide The social network integration provides tools for connecting with
while still allowing apps and everything to operate offline. other people world-wide while still allowing apps and everything to
operate offline.
</p> </p>
</div> </div>
</div> </div>
@ -99,14 +165,16 @@
<div class="w3-row-padding"> <div class="w3-row-padding">
<div class="w3-col l8 m6"> <div class="w3-col l8 m6">
<h1 class="w3-jumbo"><b>Edit Anything</b></h1> <h1 class="w3-jumbo"><b>Edit Anything</b></h1>
<i class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray" style="padding: 32px"></i> <i
class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray"
style="padding: 32px"
></i>
<p> <p>
See that <code><b>edit</b></code> link near the top left corner of this page? It's there for See that <code><b>edit</b></code> link near the top left corner of
every Tilde Friends app, so you can modify and see your changes right away. this page? It's there for every Tilde Friends app, so you can modify
</p> and see your changes right away.
<p>
It's kind of like a wiki, but for code!
</p> </p>
<p>It's kind of like a wiki, but for code!</p>
</div> </div>
</div> </div>
</div> </div>
@ -115,16 +183,22 @@
<div class="w3-padding-64 w3-grey"> <div class="w3-padding-64 w3-grey">
<div class="w3-row-padding"> <div class="w3-row-padding">
<div class="w3-col"> <div class="w3-col">
<h1 class="w3-jumbo" style="text-align: right"><b>Sandbox Security</b></h1> <h1 class="w3-jumbo" style="text-align: right">
<i class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow" style="padding: 32px"></i> <b>Sandbox Security</b>
</h1>
<i
class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow"
style="padding: 32px"
></i>
<p> <p>
Tilde Friends tries to make sure apps can be trusted using similar techniques to how web Tilde Friends tries to make sure apps can be trusted using similar
browsers and operating systems do it. techniques to how web browsers and operating systems do it.
</p> </p>
<p> <p>
This is all a work in progress, and it varies by platform, so don't give it all your This is all a work in progress, and it varies by platform, so don't
innermost secrets yet, but do kick its tires and give it all your innermost secrets yet, but do kick its tires and
<a href="mailto:cory@tildefriends.net">share</a> any surprises you find. <a href="mailto:cory@tildefriends.net">share</a> any surprises you
find.
</p> </p>
</div> </div>
</div> </div>
@ -134,10 +208,16 @@
<div class="w3-container w3-padding-64 w3-light-grey w3-center"> <div class="w3-container w3-padding-64 w3-light-grey w3-center">
<h1 class="w3-jumbo"><b>Trusted Technology</b></h1> <h1 class="w3-jumbo"><b>Trusted Technology</b></h1>
<p>Tilde Friends is built using boring, trusted tech.</p> <p>Tilde Friends is built using boring, trusted tech.</p>
<p>Though of course for building Tilde Friends apps, you are free to use whatever fits.</p> <p>
Though of course for building Tilde Friends apps, you are free to use
whatever fits.
</p>
<div class="w3-row" style="margin-top: 64px"> <div class="w3-row" style="margin-top: 64px">
<a href="https://en.wikipedia.org/wiki/C_(programming_language)" class="w3-col s3"> <a
href="https://en.wikipedia.org/wiki/C_(programming_language)"
class="w3-col s3"
>
<i class="fa fa-c w3-text-blue w3-jumbo"></i> <i class="fa fa-c w3-text-blue w3-jumbo"></i>
<p>C</p> <p>C</p>
</a> </a>
@ -168,7 +248,10 @@
<i class="fa fa-shield-halved w3-text-green w3-jumbo"></i> <i class="fa fa-shield-halved w3-text-green w3-jumbo"></i>
<p>OpenSSL</p> <p>OpenSSL</p>
</a> </a>
<a href="https://github.com/ianlancetaylor/libbacktrace" class="w3-col s3"> <a
href="https://github.com/ianlancetaylor/libbacktrace"
class="w3-col s3"
>
<i class="fa fa-burst w3-text-pink w3-jumbo"></i> <i class="fa fa-burst w3-text-pink w3-jumbo"></i>
<p>libbacktrace</p> <p>libbacktrace</p>
</a> </a>
@ -196,7 +279,10 @@
<!-- Footer --> <!-- Footer -->
<footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge"> <footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge">
<p class="w3-medium">This page and Tilde Friends itself was made by Cory mostly in coffee shops and a local pizza place.</p> <p class="w3-medium">
This page and Tilde Friends itself was made by Cory mostly in coffee
shops and a local pizza place.
</p>
</footer> </footer>
</body> </body>
</html> </html>

6
core/app.js
View File

@ -145,7 +145,11 @@ function socket(request, response, client) {
action: 'session', action: 'session',
credentials: credentials, credentials: credentials,
identities: await ssb.getIdentities(credentials?.session?.name), identities: await ssb.getIdentities(credentials?.session?.name),
identity: await core.getActiveIdentity(credentials?.session?.name, packageOwner, packageName), identity: await core.getActiveIdentity(
credentials?.session?.name,
packageOwner,
packageName
),
parentApp: parentApp, parentApp: parentApp,
id: blobId, id: blobId,
}), }),

8
core/auth.html
View File

@ -81,16 +81,16 @@
<h1 ?hidden=${this.name === undefined}>Welcome, ${this.name}.</h1> <h1 ?hidden=${this.name === undefined}>Welcome, ${this.name}.</h1>
<div style="display: flex; flex-direction: row; width: 100%"> <div style="display: flex; flex-direction: row; width: 100%">
<input type="radio" name="tab" id="login" value="Login" ?checked=${this.tab == 'login'} @change=${() => self.tab = 'login'}></input> <input type="radio" name="tab" id="login" value="Login" ?checked=${this.tab == 'login'} @change=${() => (self.tab = 'login')}></input>
<label for="login" id="login_label">Login</label> <label for="login" id="login_label">Login</label>
<input type="radio" name="tab" id="register" value="Register" ?checked=${this.tab == 'register'} @change=${() => self.tab = 'register'}></input> <input type="radio" name="tab" id="register" value="Register" ?checked=${this.tab == 'register'} @change=${() => (self.tab = 'register')}></input>
<label for="register" id="register_label">Register</label> <label for="register" id="register_label">Register</label>
<input type="radio" name="tab" id="guest" value="Guest" ?checked=${this.tab == 'guest'} @change=${() => self.tab = 'guest'}></input> <input type="radio" name="tab" id="guest" value="Guest" ?checked=${this.tab == 'guest'} @change=${() => (self.tab = 'guest')}></input>
<label for="guest" id="guest_label">Guest</label> <label for="guest" id="guest_label">Guest</label>
<input type="radio" name="tab" id="change" value="Change Password" ?checked=${this.tab == 'change'} @change=${() => self.tab = 'change'}></input> <input type="radio" name="tab" id="change" value="Change Password" ?checked=${this.tab == 'change'} @change=${() => (self.tab = 'change')}></input>
<label for="change" id="change_label">Change Password</label> <label for="change" id="change_label">Change Password</label>
</div> </div>

36
core/client.js
View File

@ -121,11 +121,17 @@ class TfNavigationElement extends LitElement {
*/ */
render_login() { render_login() {
if (this?.credentials?.session?.name) { if (this?.credentials?.session?.name) {
return html`<a class="w3-bar-item w3-right" id="login" href="/login/logout?return=${url() + hash()}" return html`<a
class="w3-bar-item w3-right"
id="login"
href="/login/logout?return=${url() + hash()}"
>logout ${this.credentials.session.name}</a >logout ${this.credentials.session.name}</a
>`; >`;
} else { } else {
return html`<a class="w3-bar-item w3-right" id="login" href="/login?return=${url() + hash()}" return html`<a
class="w3-bar-item w3-right"
id="login"
href="/login?return=${url() + hash()}"
>login</a >login</a
>`; >`;
} }
@ -146,8 +152,11 @@ class TfNavigationElement extends LitElement {
<select <select
@change=${this.set_active_identity} @change=${this.set_active_identity}
class="w3-button w3-cyan w3-bar-item w3-right" class="w3-button w3-cyan w3-bar-item w3-right"
style="max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap"> style="max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
${this.identities.map(x => html`<option ?selected=${x === this.identity}>${x}</option>`)} >
${this.identities.map(
(x) => html`<option ?selected=${x === this.identity}>${x}</option>`
)}
</select> </select>
`; `;
} else { } else {
@ -155,7 +164,8 @@ class TfNavigationElement extends LitElement {
<link type="text/css" rel="stylesheet" href="/static/w3.css" /> <link type="text/css" rel="stylesheet" href="/static/w3.css" />
<button <button
@click=${this.create_identity} @click=${this.create_identity}
class="w3-button w3-blue w3-right"> class="w3-button w3-blue w3-right"
>
Create an Identity Create an Identity
</button> </button>
`; `;
@ -226,9 +236,7 @@ class TfNavigationElement extends LitElement {
display: inline-block; display: inline-block;
} }
</style> </style>
<div <div class="w3-black w3-bar">
class="w3-black w3-bar"
>
<span <span
class="w3-bar-item" class="w3-bar-item"
style="cursor: pointer" style="cursor: pointer"
@ -237,7 +245,8 @@ class TfNavigationElement extends LitElement {
> >
<span <span
class="w3-bar-item" class="w3-bar-item"
style=${'white-space: nowrap' + (this.show_version ? '' : '; display: none')} style=${'white-space: nowrap' +
(this.show_version ? '' : '; display: none')}
title=${this.version?.name + title=${this.version?.name +
' ' + ' ' +
Object.entries(this.version || {}) Object.entries(this.version || {})
@ -280,20 +289,21 @@ class TfNavigationElement extends LitElement {
@click=${() => (self.show_permissions = !self.show_permissions)} @click=${() => (self.show_permissions = !self.show_permissions)}
>🎛️</a >🎛️</a
> >
${status.message ? html` ${status.message
? html`
<span <span
class="w3-bar-item" class="w3-bar-item"
style="vertical-align: top; white-space: pre; color: ${this style="vertical-align: top; white-space: pre; color: ${this
.status.color ?? kErrorColor}" .status.color ?? kErrorColor}"
>${this.status.message}</span >${this.status.message}</span
> >
` : undefined} `
: undefined}
${this.render_permissions()} ${this.render_permissions()}
${Object.keys(this.spark_lines) ${Object.keys(this.spark_lines)
.sort() .sort()
.map((x) => this.spark_lines[x])} .map((x) => this.spark_lines[x])}
${this.render_login()} ${this.render_login()} ${this.render_identity()}
${this.render_identity()}
</div> </div>
`; `;
} }

49
core/core.js
View File

@ -272,7 +272,13 @@ function broadcast(message) {
* @param {*} argv * @param {*} argv
* @returns * @returns
*/ */
function broadcastAppEventToUser(user, packageOwner, packageName, eventName, argv) { function broadcastAppEventToUser(
user,
packageOwner,
packageName,
eventName,
argv
) {
let promises = []; let promises = [];
for (let process of Object.values(gProcesses)) { for (let process of Object.values(gProcesses)) {
if ( if (
@ -536,16 +542,35 @@ async function getProcessBlob(blobId, key, options) {
process.sendIdentities = async function () { process.sendIdentities = async function () {
process.app.send({ process.app.send({
action: 'identities', action: 'identities',
identities: await ssb.getIdentities(process?.credentials?.session?.name), identities: await ssb.getIdentities(
identity: await getActiveIdentity(process?.credentials?.session?.name, options.packageOwner, options.packageName), process?.credentials?.session?.name
),
identity: await getActiveIdentity(
process?.credentials?.session?.name,
options.packageOwner,
options.packageName
),
}); });
}; };
process.setActiveIdentity = async function (identity) { process.setActiveIdentity = async function (identity) {
if (process?.credentials?.session?.name && options.packageOwner && options.packageName) { if (
await new Database(process?.credentials?.session?.name).set(`id:${options.packageOwner}:${options.packageName}`, identity); process?.credentials?.session?.name &&
options.packageOwner &&
options.packageName
) {
await new Database(process?.credentials?.session?.name).set(
`id:${options.packageOwner}:${options.packageName}`,
identity
);
} }
process.sendIdentities(); process.sendIdentities();
broadcastAppEventToUser(process?.credentials?.session?.name, options.packageOwner, options.packageName, 'setActiveIdentity', [identity]); broadcastAppEventToUser(
process?.credentials?.session?.name,
options.packageOwner,
options.packageName,
'setActiveIdentity',
[identity]
);
}; };
process.createIdentity = async function () { process.createIdentity = async function () {
if ( if (
@ -557,7 +582,7 @@ async function getProcessBlob(blobId, key, options) {
await process.sendIdentities(); await process.sendIdentities();
return id; return id;
} }
} };
if (process.credentials?.permissions?.administration) { if (process.credentials?.permissions?.administration) {
imports.core.globalSettingsDescriptions = function () { imports.core.globalSettingsDescriptions = function () {
let settings = Object.assign({}, k_global_settings); let settings = Object.assign({}, k_global_settings);
@ -655,8 +680,13 @@ async function getProcessBlob(blobId, key, options) {
}); });
} }
}; };
imports.ssb.setActiveIdentity = id => process.setActiveIdentity(id); imports.ssb.setActiveIdentity = (id) => process.setActiveIdentity(id);
imports.ssb.getActiveIdentity = () => getActiveIdentity(process.credentials?.session?.name, options.packageOwner, options.packageName); imports.ssb.getActiveIdentity = () =>
getActiveIdentity(
process.credentials?.session?.name,
options.packageOwner,
options.packageName
);
imports.ssb.getOwnerIdentities = function () { imports.ssb.getOwnerIdentities = function () {
if (options.packageOwner) { if (options.packageOwner) {
return ssb.getIdentities(options.packageOwner); return ssb.getIdentities(options.packageOwner);
@ -1502,7 +1532,6 @@ function storePermission(user, packageOwner, packageName, permission, allow) {
} }
} }
async function getActiveIdentity(user, packageOwner, packageName) { async function getActiveIdentity(user, packageOwner, packageName) {
if (user && packageOwner && packageName) { if (user && packageOwner && packageName) {
let id = await new Database(user).get(`id:${packageOwner}:${packageName}`); let id = await new Database(user).get(`id:${packageOwner}:${packageName}`);