1
0
mirror of https://github.com/spacebarchat/server.git synced 2024-11-22 02:12:40 +01:00

add email verification page

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -18,15 +18,15 @@
import {
Config,
Email,
initDatabase,
initEvent,
JSONReplacer,
registerRoutes,
Sentry,
WebAuthn,
ConnectionConfig,
ConnectionLoader,
Email,
JSONReplacer,
Sentry,
WebAuthn,
initDatabase,
initEvent,
registerRoutes,
} from "@spacebar/util";
import { Request, Response, Router } from "express";
import { Server, ServerOptions } from "lambert-server";
@ -141,6 +141,10 @@ export class SpacebarServer extends Server {
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);
Sentry.errorHandler(this.app);

View File

@ -141,8 +141,9 @@ export const Email: {
*/
generateLink: async function (type, id, email) {
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 =
Config.get().general.frontPage || "http://localhost:3001";
Config.get().api.endpointPublic || "http://localhost:3001";
const link = `${instanceUrl}/${type}#token=${token}`;
return link;
},