Add App Pages

sahilph · Oct 5, 2024 · 011c592 · 011c592
1 parent a91e2b3
commit 011c592
Show file tree

Hide file tree

Showing 10 changed files with 294 additions and 69 deletions.
diff --git a/umbrel-HTTPSizer/app.js b/umbrel-HTTPSizer/app.js
@@ -5,8 +5,9 @@ const cookieParser = require('cookie-parser');
 const logger = require('morgan');
 var favicon = require('serve-favicon')
 
+const CONSTANTS = require('./utils/const.js');
+
 const indexRouter = require('./routes/index');
-const usersRouter = require('./routes/users');
 const firstRunRouter = require('./routes/firstRun');
 const httpsErrorRouter = require('./routes/httpsError');
 
@@ -25,10 +26,13 @@ app.use(express.static(path.join(__dirname, 'public')));
 app.use(favicon(path.join(__dirname, 'public', 'images', 'favicon.ico')));
 
 app.use('/', indexRouter);
-app.use('/users', usersRouter);
 app.use('/first-run', firstRunRouter);
 app.use('/https-error', httpsErrorRouter);
 
+app.get('/ssl.cert', function(req, res){
+  res.download(CONSTANTS.HTTPS_CERT_PATH); // Set disposition and send it.
+});
+
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
   next(createError(404));

diff --git a/umbrel-HTTPSizer/public/images/ssl-icon.svg → umbrel-HTTPSizer/public/images/logo.svg b/umbrel-HTTPSizer/public/images/ssl-icon.svg → umbrel-HTTPSizer/public/images/logo.svg
diff --git a/umbrel-HTTPSizer/routes/firstRun.js b/umbrel-HTTPSizer/routes/firstRun.js
@@ -6,22 +6,26 @@ const CONSTANTS = require('../utils/const.js');
 
 /* GET home page. */
 router.get('/', function (req, res, next) {
-    const firstRunPath = path.join(CONSTANTS.APP_DATA_PATH , "/first-run-done");
-    fs.stat(firstRunPath, function (err, stat) {
-        if (err == null) {
-            console.log('First Run Already Done. Redirection to Home');
-            res.redirect("/")
-        } else if (err.code === 'ENOENT') {
-            // file does not exist
-            console.log('Rendering First Run');
-            fs.closeSync(fs.openSync(firstRunPath, 'w'));
-            res.render('firstRun', {title: 'First Run'});
-        } else {
-            console.log('Error: ', err.code);
-        }
-    });
-
+    if(req.query.redirectHome === 'false'){
+       res.render('firstRun', {title: 'Umbrel HTTPSizer - First Run', hostname: req.headers.host, hostname_wo_port: req.hostname});
+    }
+    else {
+        const firstRunPath = path.join(CONSTANTS.APP_DATA_PATH, "/first-run-done");
+        fs.stat(firstRunPath, function (err, stat) {
+            if (err == null) {
+                console.log('First Run Already Done. Redirection to Home');
+                res.redirect("/")
+            } else if (err.code === 'ENOENT') {
+                // file does not exist
+                console.log('Rendering First Run');
+                fs.closeSync(fs.openSync(firstRunPath, 'w'));
+                res.render('firstRun', {title: 'Umbrel HTTPSizer - First Run', hostname: req.headers.host, hostname_wo_port: req.hostname});
+            } else {
+                console.log('Error: ', err.code);
+            }
+        });
 
+    }
 });
 
 module.exports = router;
diff --git a/umbrel-HTTPSizer/routes/httpsError.js b/umbrel-HTTPSizer/routes/httpsError.js
@@ -3,7 +3,7 @@ const router = express.Router();
 
 /* GET HTTPS Error page. */
 router.get('/', function (req, res, next) {
-    res.render('httpsError', {title: 'Umbrel HTTPSizer - HTTPS Error', hostname: req.headers.host});
+    res.render('httpsError', {title: 'Umbrel HTTPSizer - HTTPS Error', hostname: req.headers.host, hostname_wo_port: req.hostname});
 });
 
 module.exports = router;
diff --git a/umbrel-HTTPSizer/routes/index.js b/umbrel-HTTPSizer/routes/index.js
@@ -1,7 +1,7 @@
 const express = require('express');
 const router = express.Router();
 const fs = require('fs');
-var path = require('path');
+const path = require('path');
 const CONSTANTS = require('../utils/const.js');
 
 /* GET home page. */

diff --git a/umbrel-HTTPSizer/routes/users.js b/umbrel-HTTPSizer/routes/users.js
diff --git a/umbrel-HTTPSizer/utils/const.js b/umbrel-HTTPSizer/utils/const.js
@@ -21,7 +21,6 @@ module.exports = Object.freeze({
 
     APP_DATA_PATH: process.env.APP_DATA_PATH || "/app-data",
 
-    HTTPS_KEY_PATH: readFromFsOrTerminate(process.env.HTTPS_KEY_PATH || "/ssl/ssl.key"),
     HTTPS_CERT_PATH: readFromFsOrTerminate(process.env.HTTPS_CERT_PATH || "/ssl/ssl.cert"),
 
 });
diff --git a/umbrel-HTTPSizer/views/firstRun.ejs b/umbrel-HTTPSizer/views/firstRun.ejs
@@ -1,14 +1,94 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
+<!--
+	Stellar by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
 <html>
-  <head>
-    <title><%= title %></title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
-  </head>
-  <body>
-    <h1><%= title %></h1>
-    <h1>This is the first run</h1>
-    <p>Welcome to <%= title %> </p>
-
-
-  </body>
-</html>
+	<head>
+		<title><%= title %></title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<link rel="stylesheet" href="/assets/css/main.css" />
+		<noscript><link rel="stylesheet" href="/assets/css/noscript.css" /></noscript>
+	</head>
+	<body class="is-preload">
+
+		<!-- Wrapper -->
+			<div id="wrapper">
+
+				<!-- Header -->
+					<header id="header" class="alt">
+						<span class="logo"><span class="fa-solid fa-hourglass-half fa-2xl" style="color: #ecbe18;font-size: 4.5em;"></span></span>
+						<h1><%= title %></h1>
+						<p><strong>Welcome to First Run. Complete Steps below to finish Installation</strong></p>
+					</header>
+
+				<!-- Nav -->
+					<nav id="nav">
+						<ul>
+							<li><a href="#first" class="active">Steps</a></li>
+						</ul>
+					</nav>
+
+				<!-- Main -->
+					<div id="main">
+
+
+						<!-- Steps -->
+							<section id="first" class="main special">
+								<header class="major">
+									<h2>Steps</h2>
+								</header>
+
+                              <ul class="alt">
+									<li>
+                                      <h3>1. Download CA Certificate</h3>
+										<p>You now have a CA certificate which Ubmrel will use to encrypt the traffic.
+                                        Download it using the button below:
+                                        </p>
+                                        <a href="/ssl.cert" class="button"><i class="fa-solid fa-lock" style="color: #74C0FC;"></i> Download CA Cert</a>
+									</li>
+                                    <li>
+										<h3>2. Trust CA Certificate</h3>
+										<p>When you trust the CA certificate, you can verify the autheticity of the traffic coming from your Umbrel.</p>
+										<p>Follow the instructions for your OS/Browser from the link below and then come back to this page: </p>
+                                      <a href="https://github.com/sahilph/umbrel-HTTPSizer/wiki" target="_blank" class="button primary"><i class="fa-solid fa-share"></i> View Instructions</a>
+									</li>
+                                   <li>
+										<h3>3. Restart Umbrel <strong>(Important)</strong></h3>
+										<p>After you trust the CA certificate, Restart you Umbrel Device to load the new configuration. </p>
+									   	<a href="//<%= hostname_wo_port %>/settings?dialog=restart" target="_blank" class="button"><i class="fa-solid fa-arrows-rotate" style="color: #790a0a;"></i> Restart Umbrel</a>
+
+                                   </li>
+                                   <li>
+										<h3>4. Test</h3>
+										<p>Check the refresh button to test if https works. </p>
+										<p>If refreshing does not work, then you may need to close the browser and reopen it and come back to this page.</p>
+									    <a href="https://<%= hostname %>/" class="button"><i class="fa-solid fa-retweet" style="color: #035e43;"></i> Refresh</a>
+                                   </li>
+
+								</ul>
+							</section>
+
+
+					</div>
+
+				<!-- Footer -->
+					<footer id="footer">
+						<p class="copyright">&copy;Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
+					</footer>
+
+			</div>
+
+		<!-- Scripts -->
+			<script src="/assets/js/jquery.min.js"></script>
+			<script src="/assets/js/jquery.scrollex.min.js"></script>
+			<script src="/assets/js/jquery.scrolly.min.js"></script>
+			<script src="/assets/js/browser.min.js"></script>
+			<script src="/assets/js/breakpoints.min.js"></script>
+			<script src="/assets/js/util.js"></script>
+			<script src="/assets/js/main.js"></script>
+
+	</body>
+</html>
diff --git a/umbrel-HTTPSizer/views/httpsError.ejs b/umbrel-HTTPSizer/views/httpsError.ejs
@@ -1,14 +1,78 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
+<!--
+	Stellar by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
 <html>
-  <head>
-    <title><%= title %></title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
-  </head>
-  <body>
-    <h1><%= title %></h1>
-    <h1>This is the HTTPS Error Page</h1>
-    <p>Welcome to <%= title %> </p>
-
-
-  </body>
-</html>
+	<head>
+		<title><%= title %></title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<link rel="stylesheet" href="/assets/css/main.css" />
+		<noscript><link rel="stylesheet" href="/assets/css/noscript.css" /></noscript>
+	</head>
+	<body class="is-preload">
+
+		<!-- Wrapper -->
+			<div id="wrapper">
+
+				<!-- Header -->
+					<header id="header" class="alt">
+						<span class="logo"><span class="fa-solid fa-xmark-circle fa-2xl" style="color: #ff0000;font-size: 4.5em;"></span></span>
+						<h1><%= title %></h1>
+						<p><strong>Some Error Occured in loading HTTPS. More info below.</strong></p>
+					</header>
+
+				<!-- Nav -->
+					<nav id="nav">
+						<ul>
+							<li><a href="#status" class="active">Status</a></li>
+						</ul>
+					</nav>
+
+				<!-- Main -->
+					<div id="main">
+
+						<!-- Status -->
+							<section id="status" class="main">
+								<div class="spotlight">
+									<div class="content">
+										<header class="major">
+											<h2>HTTPS Status - Error!</h2>
+										</header>
+										<p>The app was installed but some Error has occurred and the site was not
+                                          loaded over HTTPS.
+                                        </p>
+                                      <p>Please <strong>Restart Umbrel</strong> and try again by Clicking the button below.
+                                        </p>
+                                        <ul class="actions">
+											<li><a href="//<%= hostname_wo_port %>/settings?dialog=restart" target="_blank" class="button"><i class="fa-solid fa-arrows-rotate" style="color: #790a0a;"></i> Restart Umbrel</a></li>
+											<li><a href="https://<%= hostname %>/" class="button"><i class="fa-solid fa-house"> </i> Go to Home Page</a></li>
+										</ul>
+
+									</div>
+									<span class="icon solid major fa-solid fa-xmark-circle" style="color: #ff0000;font-size: 4em;"></span>
+								</div>
+							</section>
+
+					</div>
+
+				<!-- Footer -->
+					<footer id="footer">
+						<p class="copyright">&copy;Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
+					</footer>
+
+			</div>
+
+		<!-- Scripts -->
+			<script src="/assets/js/jquery.min.js"></script>
+			<script src="/assets/js/jquery.scrollex.min.js"></script>
+			<script src="/assets/js/jquery.scrolly.min.js"></script>
+			<script src="/assets/js/browser.min.js"></script>
+			<script src="/assets/js/breakpoints.min.js"></script>
+			<script src="/assets/js/util.js"></script>
+			<script src="/assets/js/main.js"></script>
+
+	</body>
+</html>