Added custom login page

macterra · Oct 18, 2023 · 6bac5b0 · 6bac5b0
1 parent 99d0268
commit 6bac5b0
Show file tree

Hide file tree

Showing 2 changed files with 175 additions and 0 deletions.
diff --git a/login.html b/login.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{title}}</title>
+	<style>
+		html,
+		body {
+			width: 100%;
+			height: 100%;
+			color: #fff;
+			font-family: Roboto, Helvetica, Arial, sans-serif;
+			font-weight: 400;
+			background-color: #282c34;
+			margin: 0;
+		}
+
+		a {
+			color: #fff;
+			font-weight: 400;
+			text-decoration: none;
+		}
+
+		a:hover,
+		a:active {
+			color: #6699cc;
+		}
+
+		a:hover {
+			text-decoration: underline;
+			border-bottom-style: solid;
+		}
+
+		h1 {
+			margin: 0 0 .5rem 0;
+		}
+
+		p {
+			font-weight: 100;
+			line-height: 150%;
+			margin: 0 0 1rem 0;
+		}
+
+		#content {
+			display: flex;
+			height: 100%;
+			text-align: center;
+		}
+
+		.wrap {
+			width: 80%;
+			max-width: 24rem;
+			align-self: center;
+			margin: 0 auto;
+		}
+
+		#qrcode {
+			display: block;
+			width: 16rem;
+			height: 16rem;
+			margin: 0 auto;
+		}
+
+		#qrcode img {
+			display: block;
+			width: 100%;
+		}
+
+		.button {
+			cursor: pointer;
+			color: #fff;
+			font-size: 1.1rem;
+			line-height: 1.8rem;
+			background: #6699cc;
+			border: none;
+			outline: none;
+			border-radius: .4rem;
+			opacity: .7;
+			padding: .4rem .8rem;
+		}
+
+		a.button,
+		a.button:active,
+		a.button:hover {
+			color: #fff;
+			text-decoration: none;
+			border: none;
+		}
+
+		.button:hover {
+			opacity: 1;
+		}
+
+		#buttons {
+			display: block;
+			margin-top: 1rem;
+		}
+
+		#header {
+			display: flex;
+			justify-content: space-between;
+			padding: 20px;
+			background-color: #272727;
+		}
+
+		#headerx {
+			min-height: 100vh;
+			display: flex;
+			flex-direction: row;
+			align-items: left;
+			justify-content: center;
+			font-size: calc(10px + 2vmin);
+			color: white;
+		}
+
+		#footer {
+			margin-top: 1rem;
+		}
+
+		#footer p {
+			margin: .5rem 0 0 0;
+		}
+
+		@media screen and (max-width: 540px) {
+			h1 {
+				font-size: 1.7rem;
+			}
+		}
+	</style>
+	<meta http-equiv="refresh" content="{{refreshSeconds}}">
+</head>
+
+<body>
+	<div id="header">
+		<div style="font-size: 0.875rem;">
+			<a href="#">HOME</a>
+		</div>
+		<div style="font-size: 1.25rem;">
+			ArtX Market
+		</div>
+		<div style="font-size: 0.875rem;">
+			<a href="#">HELP</a>
+		</div>
+	</div>
+	<div id="content">
+		<div class="wrap">
+			<h1>{{title}}</h1>
+			<p>{{instruction}}</p>
+			<a id="qrcode" href="{{href}}"><img src="{{dataUri}}"></a>
+			<div id="buttons">
+				{{#if cancelUrl}}
+				<a href="{{cancelUrl}}" class="button">Cancel</a>
+				{{/if}}
+			</div>
+			<div id="footer">
+				<div class="about">
+					<p>This page uses the lnurl-auth protocol.</p>
+					<p>See <a href="https://github.com/fiatjaf/awesome-lnurl#wallets">list of apps</a> that support it.
+					</p>
+				</div>
+				<div class="help">
+					<p><a href="https://github.com/macterra/artx-market/issues">Report a problem</a></p>
+				</div>
+			</div>
+		</div>
+	</div>
+
+</body>
+
+</html>
diff --git a/server.js b/server.js
@@ -105,6 +105,9 @@ app.get('/login',
     next();
   },
   new LnurlAuth.Middleware({
+    title: 'Login with ⚡Lightning⚡',
+    instruction: 'Click or scan the QR code to login',
+    loginTemplateFilePath: path.join(config.data, 'login.html'),
     callbackUrl: config.url + '/login',
     cancelUrl: config.url
   })