Spacebar/server
1
0
Fork 0
mirror of https://github.com/spacebarchat/server.git synced 2024-11-25 03:33:33 +01:00
Code Issues Releases Activity

add email verification page

Browse Source
This commit is contained in:
Puyodead1 2024-07-08 22:30:41 -04:00
parent 629451bbfd
commit bc432a4325
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
9 changed files with 382 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
assets/email_templates/new_login_location.html
View File

@ -1,76 +1,87 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title>Verify {instanceName} Login from New Location</title>
<head> <style>
<meta charset="UTF-8" /> * {
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> font-size: 16px;
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> line-height: 24px;
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> font-family: Arial, Helvetica, sans-serif;
<title>Verify {instanceName} Login from New Location</title> }
<style> p {
* { color: white;
font-size: 16px; }
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
}
p { .ExternalClass {
color: white; width: 100%;
} }
</style>
</head>
.ExternalClass { <body>
width: 100%; <div style="background-color: #202225">
} <img
</style> src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
</head> alt="Branding"
style="
<body>
<div style="background-color: #202225;">
<img src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
alt="Branding" style="
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
padding: 20px; padding: 20px;
" /> "
<div style=" />
<div
style="
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
padding: 40px 50px; padding: 40px 50px;
background-color: #32353b; background-color: #32353b;
border-radius: 5px; border-radius: 5px;
"> "
<p style=" >
<p
style="
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
letter-spacing: 0.27px; letter-spacing: 0.27px;
line-height: 24px; line-height: 24px;
"> "
Hey {userUsername}, >
</p> Hey {userUsername},
<p> </p>
It looks like someone tried to log into your {instanceName} <p>
account from a new location. If this is you, follow the link It looks like someone tried to log into your {instanceName}
below to authorize logging in from this location on your account from a new location. If this is you, follow the link
account. If this isn't you, we suggest changing your below to authorize logging in from this location on your
password as soon as possible. account. If this isn't you, we suggest changing your
</p> password as soon as possible.
<p> </p>
<strong>IP Address:</strong> {ipAddress} <p>
<br /> <strong>IP Address:</strong> {ipAddress}
<strong>Location:</strong> {locationCity}, {locationRegion}, <br />
{locationCountryName} <strong>Location:</strong> {locationCity}, {locationRegion},
</p> {locationCountryName}
<div> </p>
<div style=" <div>
<div
style="
text-align: center; text-align: center;
justify-content: center; justify-content: center;
padding-bottom: 10px; padding-bottom: 10px;
"> "
<a href="{actionUrl}" target="_blank" style=" >
<a
href="{actionUrl}"
target="_blank"
style="
font-size: 15px; font-size: 15px;
border: none; border: none;
text-decoration: none; text-decoration: none;
@ -79,23 +90,31 @@
padding: 15px 19px; padding: 15px 19px;
background-color: #0185ff; background-color: #0185ff;
border-radius: 5px; border-radius: 5px;
">Verify Login</a> "
</div> >Verify Login</a
<hr /> >
<div style=" </div>
<hr />
<div
style="
text-align: center; text-align: center;
justify-content: center; justify-content: center;
padding-bottom: 10px; padding-bottom: 10px;
"> "
<p> >
Alternatively, you can directly paste this link into <p>
your browser: Alternatively, you can directly paste this link into
</p> your browser:
<a href="{actionUrl}" target="_blank" style="word-wrap: break-word;">{actionUrl}</a> </p>
<a
href="{actionUrl}"
target="_blank"
style="word-wrap: break-word"
>{actionUrl}</a
>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </body>
</body>
</html> </html>

4
assets/email_templates/password_changed.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -22,7 +22,7 @@
</style> </style>
</head> </head>
<body> <body>
<div style="background-color: #202225;"> <div style="background-color: #202225">
<img <img
src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg" src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
alt="Branding" alt="Branding"

125
assets/email_templates/password_reset_request.html
View File

@ -1,68 +1,79 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title>Password Reset Request for {instanceName}</title>
<head> <style>
<meta charset="UTF-8" /> * {
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> font-size: 16px;
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> line-height: 24px;
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> font-family: Arial, Helvetica, sans-serif;
<title>Password Reset Request for {instanceName}</title> }
<style> p {
* { color: white;
font-size: 16px; }
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
}
p { .ExternalClass {
color: white; width: 100%;
} }
</style>
</head>
.ExternalClass { <body>
width: 100%; <div style="background-color: #202225">
} <img
</style> src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
</head> alt="Branding"
style="
<body>
<div style="background-color: #202225;">
<img src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
alt="Branding" style="
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
padding: 20px; padding: 20px;
" /> "
<div style=" />
<div
style="
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
padding: 40px 50px; padding: 40px 50px;
background-color: #32353b; background-color: #32353b;
border-radius: 5px; border-radius: 5px;
"> "
<p style=" >
<p
style="
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
letter-spacing: 0.27px; letter-spacing: 0.27px;
line-height: 24px; line-height: 24px;
"> "
Hey {userUsername}, >
</p> Hey {userUsername},
<p> </p>
Your {instanceName} password can be reset by clicking the <p>
button below. If you did not request a new password, please Your {instanceName} password can be reset by clicking the
ignore this email. button below. If you did not request a new password, please
</p> ignore this email.
<div> </p>
<div style=" <div>
<div
style="
text-align: center; text-align: center;
justify-content: center; justify-content: center;
padding-bottom: 10px; padding-bottom: 10px;
"> "
<a href="{actionUrl}" target="_blank" style=" >
<a
href="{actionUrl}"
target="_blank"
style="
font-size: 15px; font-size: 15px;
border: none; border: none;
text-decoration: none; text-decoration: none;
@ -71,19 +82,25 @@
padding: 15px 19px; padding: 15px 19px;
background-color: #ff5f00; background-color: #ff5f00;
border-radius: 5px; border-radius: 5px;
">Reset Password</a> "
</div> >Reset Password</a
<hr /> >
<div style="text-align: center"> </div>
<p> <hr />
Alternatively, you can directly paste this link into <div style="text-align: center">
your browser: <p>
</p> Alternatively, you can directly paste this link into
<a href="{actionUrl}" target="_blank" style="word-wrap: break-word;">{actionUrl}</a> your browser:
</p>
<a
href="{actionUrl}"
target="_blank"
style="word-wrap: break-word"
>{actionUrl}</a
>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </body>
</body>
</html> </html>

4
assets/email_templates/phone_removed.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -22,7 +22,7 @@
</style> </style>
</head> </head>
<body> <body>
<div style="background-color: #202225;"> <div style="background-color: #202225">
<img <img
src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg" src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
alt="Branding" alt="Branding"

9
assets/email_templates/verify_email.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -22,7 +22,7 @@
</style> </style>
</head> </head>
<body> <body>
<div style="background-color: #202225;"> <div style="background-color: #202225">
<img <img
src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg" src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
alt="Branding" alt="Branding"
@ -90,7 +90,10 @@
Alternatively, you can directly paste this link into Alternatively, you can directly paste this link into
your browser: your browser:
</p> </p>
<a href="{actionUrl}" target="_blank" style="word-wrap: break-word;" <a
href="{actionUrl}"
target="_blank"
style="word-wrap: break-word"
>{actionUrl}</a >{actionUrl}</a
> >
</div> </div>

147
assets/public/verify.html Normal file
View File

@ -0,0 +1,147 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacebar Server</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Montserrat", sans-serif;
background-color: rgb(10, 10, 10);
color: white;
font-size: 1.1rem;
height: 100vh;
}
* {
padding: 0;
margin: 0;
}
p {
margin-top: 10px;
}
#wordmark {
width: min(200px, 50%);
margin: 20px;
position: absolute;
top: 20px;
left: 20px;
}
.title {
font-size: 1.5rem;
font-weight: 600;
}
.subtitle {
font-size: 1.1rem;
font-weight: 400;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.box {
width: 22vw;
padding: 32px;
border-radius: 8px;
background-color: rgb(32, 32, 32);
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img
alt="Spacebar Logo"
id="wordmark"
src="https://raw.githubusercontent.com/spacebarchat/spacebarchat/master/branding/svg/Spacebar__Logo-Blue.svg"
/>
<div class="box">
<p id="title" class="title">Verifying your email</p>
<p id="subtitle" class="subtitle">Please wait...</p>
</div>
</div>
<script>
window.onload = verify;
function verify() {
const title = document.getElementById("title");
const subtitle = document.getElementById("subtitle");
// if no fragment identifier in URL, error
if (!window.location.hash) {
title.innerText = "Invalid Link";
subtitle.innerText = "Please check the link and try again.";
return;
}
// convert fragment to a key-value pair
const fragment = window.location.hash.substring(1);
const pairs = fragment.split("&");
const values = {};
pairs.forEach((pair) => {
const [key, value] = pair.split("=");
values[key] = value;
});
// ensure token key is present
if (!values.token) {
title.innerText = "Invalid Link";
subtitle.innerText = "Please check the link and try again.";
return;
}
// make request to server
const token = values.token;
fetch("/api/auth/verify", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token,
}),
})
.then((response) => response.json())
.then((data) => {
// check for an error response
if ("message" in data) {
title.innerText = "Email Verification Link Expired";
subtitle.innerText =
"Please request a new verification link.";
return;
}
title.innerText = "Email Verified";
subtitle.innerText = "You can now login.";
})
.catch((error) => {
title.innerText = "Email Verification Failed";
subtitle.innerText = error;
});
}
</script>
</body>
</html>

118
flake.lock
View File

@ -1,61 +1,61 @@
{ {
"nodes": { "nodes": {
"flake-utils": { "flake-utils": {
"inputs": { "inputs": {
"systems": "systems" "systems": "systems"
}, },
"locked": { "locked": {
"lastModified": 1705309234, "lastModified": 1705309234,
"narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=", "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
"owner": "numtide", "owner": "numtide",
"repo": "flake-utils", "repo": "flake-utils",
"rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26", "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
"type": "github" "type": "github"
}, },
"original": { "original": {
"owner": "numtide", "owner": "numtide",
"repo": "flake-utils", "repo": "flake-utils",
"type": "github" "type": "github"
} }
}, },
"nixpkgs": { "nixpkgs": {
"locked": { "locked": {
"lastModified": 1708118438, "lastModified": 1708118438,
"narHash": "sha256-kk9/0nuVgA220FcqH/D2xaN6uGyHp/zoxPNUmPCMmEE=", "narHash": "sha256-kk9/0nuVgA220FcqH/D2xaN6uGyHp/zoxPNUmPCMmEE=",
"owner": "nixos", "owner": "nixos",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "5863c27340ba4de8f83e7e3c023b9599c3cb3c80", "rev": "5863c27340ba4de8f83e7e3c023b9599c3cb3c80",
"type": "github" "type": "github"
}, },
"original": { "original": {
"owner": "nixos", "owner": "nixos",
"ref": "nixos-unstable", "ref": "nixos-unstable",
"repo": "nixpkgs", "repo": "nixpkgs",
"type": "github" "type": "github"
} }
}, },
"root": { "root": {
"inputs": { "inputs": {
"flake-utils": "flake-utils", "flake-utils": "flake-utils",
"nixpkgs": "nixpkgs" "nixpkgs": "nixpkgs"
} }
}, },
"systems": { "systems": {
"locked": { "locked": {
"lastModified": 1681028828, "lastModified": 1681028828,
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=", "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
"owner": "nix-systems", "owner": "nix-systems",
"repo": "default", "repo": "default",
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e", "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
"type": "github" "type": "github"
}, },
"original": { "original": {
"owner": "nix-systems", "owner": "nix-systems",
"repo": "default", "repo": "default",
"type": "github" "type": "github"
} }
} }
}, },
"root": "root", "root": "root",
"version": 7 "version": 7
} }

18
src/api/Server.ts
View File

@ -18,15 +18,15 @@
import { import {
Config, Config,
Email,
initDatabase,
initEvent,
JSONReplacer,
registerRoutes,
Sentry,
WebAuthn,
ConnectionConfig, ConnectionConfig,
ConnectionLoader, ConnectionLoader,
Email,
JSONReplacer,
Sentry,
WebAuthn,
initDatabase,
initEvent,
registerRoutes,
} from "@spacebar/util"; } from "@spacebar/util";
import { Request, Response, Router } from "express"; import { Request, Response, Router } from "express";
import { Server, ServerOptions } from "lambert-server"; import { Server, ServerOptions } from "lambert-server";
@ -141,6 +141,10 @@ export class SpacebarServer extends Server {
res.sendFile(path.join(PUBLIC_ASSETS_FOLDER, "index.html")), res.sendFile(path.join(PUBLIC_ASSETS_FOLDER, "index.html")),
); );
app.get("/verify", (req, res) =>
res.sendFile(path.join(PUBLIC_ASSETS_FOLDER, "verify.html")),
);
this.app.use(ErrorHandler); this.app.use(ErrorHandler);
Sentry.errorHandler(this.app); Sentry.errorHandler(this.app);

3
src/util/util/email/index.ts
View File

@ -141,8 +141,9 @@ export const Email: {
*/ */
generateLink: async function (type, id, email) { generateLink: async function (type, id, email) {
const token = (await generateToken(id, email)) as string; const token = (await generateToken(id, email)) as string;
// puyodead1: this is set to api endpoint because the verification page is on the server since no clients have one, and not all 3rd party clients will have one
const instanceUrl = const instanceUrl =
Config.get().general.frontPage || "http://localhost:3001"; Config.get().api.endpointPublic || "http://localhost:3001";
const link = `${instanceUrl}/${type}#token=${token}`; const link = `${instanceUrl}/${type}#token=${token}`;
return link; return link;
}, },