From 5aa34e500730793415b2803143f5b68a9e9cc5d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20M=C3=A4del?= <t.maedel@alfeld.de>
Date: Sat, 27 Mar 2021 20:36:05 +0100
Subject: [PATCH] Refactoring, move to twig, webroot seperation

---
 apply_config.php                              | 130 +++++++
 bootstrap.php                                 |  14 +
 cgi-bin/applyConfig.php                       | 117 ------
 cgi-bin/config.php                            |  22 --
 cgi-bin/ottercast                             | 362 ------------------
 config.php                                    |  71 ++++
 example_config.ini                            |  17 +
 example_config.sh                             |  10 -
 .../assets}/bootstrap.bundle.min.js           |   0
 .../assets}/bootstrap.bundle.min.js.map       |   0
 {assets => public/assets}/bootstrap.min.css   |   0
 .../assets}/bootstrap.min.css.map             |   0
 .../assets}/emoji_u1f9a6_headphone2.svg       |   0
 {assets => public/assets}/form-validation.css |   0
 {assets => public/assets}/form-validation.js  |   0
 {assets => public/assets}/jquery-3.5.1.min.js |   0
 {assets => public/assets}/logo.svg            |   0
 public/assets/ottercast.css                   |  63 +++
 public/cgi-bin/ottercast                      |  80 ++++
 index.html => public/index.html               |   0
 templates/layout.twig                         |  56 +++
 templates/setup.twig                          | 160 ++++++++
 22 files changed, 591 insertions(+), 511 deletions(-)
 create mode 100644 apply_config.php
 create mode 100644 bootstrap.php
 delete mode 100755 cgi-bin/applyConfig.php
 delete mode 100644 cgi-bin/config.php
 delete mode 100755 cgi-bin/ottercast
 create mode 100644 config.php
 create mode 100644 example_config.ini
 delete mode 100644 example_config.sh
 rename {assets => public/assets}/bootstrap.bundle.min.js (100%)
 rename {assets => public/assets}/bootstrap.bundle.min.js.map (100%)
 rename {assets => public/assets}/bootstrap.min.css (100%)
 rename {assets => public/assets}/bootstrap.min.css.map (100%)
 rename {assets => public/assets}/emoji_u1f9a6_headphone2.svg (100%)
 rename {assets => public/assets}/form-validation.css (100%)
 rename {assets => public/assets}/form-validation.js (100%)
 rename {assets => public/assets}/jquery-3.5.1.min.js (100%)
 rename {assets => public/assets}/logo.svg (100%)
 create mode 100644 public/assets/ottercast.css
 create mode 100644 public/cgi-bin/ottercast
 rename index.html => public/index.html (100%)
 create mode 100644 templates/layout.twig
 create mode 100644 templates/setup.twig

diff --git a/apply_config.php b/apply_config.php
new file mode 100644
index 0000000..86f0fde
--- /dev/null
+++ b/apply_config.php
@@ -0,0 +1,130 @@
+<?php
+require(__DIR__ . "/config.php");
+
+`mount -o remount,rw /`;
+
+$snapclient_config_path = "/etc/default/snapclient";
+$wpaconf_path = "/etc/wpa_supplicant/wpa_supplicant-wlan0.conf";
+$ssh_system_authorized_keys = "/root/.ssh/authorized_keys";
+
+// 23 == 0dB capture gain
+`amixer cset name='Capture Volume' 23`;
+
+if (file_exists($ssh_key_file))
+{
+	if (file_get_contents($ssh_system_authorized_keys) != file_get_contents($ssh_key_file))
+	{
+		@mkdir(dirname($ssh_system_authorized_keys));
+		file_put_contents($ssh_system_authorized_keys, file_get_contents($ssh_key_file));
+		chmod($ssh_system_authorized_keys, 0700);
+	}
+}
+
+if ($config['software']["airplay_active"])
+{
+	`systemctl start shairport-sync`;
+}
+else
+{
+	`systemctl stop shairport-sync`;
+}
+
+if ($config['software']["pulseaudio_active"])
+{
+	`systemctl start pulseaudio`;
+}
+else
+{
+	`systemctl stop pulseaudio`;
+}
+
+if ($config['software']["librespot_active"])
+{
+	`systemctl start librespot`;
+}
+else
+{
+	`systemctl stop librespot`;
+}
+
+if ($config['software']["linein_stream_active"])
+{
+	`systemctl start snapserver`;
+}
+else
+{
+	`systemctl stop snapserver`;
+}
+
+if ($config['software']["snapcast_client_active"])
+{
+	$snapclient_config = 'START_SNAPCLIENT=true' . "\n" .
+			     'SNAPCLIENT_OPTS="-h ' . escapeshellarg($config['software']["snapcast_client_hostname"]) . '"' . "\n";
+	if (file_get_contents($snapclient_config_path) != $snapclient_config)
+	{
+		file_put_contents($snapclient_config_path, $snapclient_config);
+		`systemctl restart snapclient`;
+	}
+	else
+	{
+		`systemctl start snapclient`;
+	}
+}
+else
+{
+	`systemctl stop snapclient`;
+}
+
+$wpaconf = 'ctrl_interface=/var/run/wpa_supplicant
+#ap_scan=1
+
+network={
+		ssid="'. addslashes($config['network']["wifi_ssid"]) .'"
+		scan_ssid=1
+		key_mgmt=WPA-PSK
+		psk="'. addslashes($config['network']["wifi_passphrase"]) .'"
+}
+';
+
+if (file_get_contents($wpaconf_path) != $wpaconf)
+{
+	file_put_contents($wpaconf_path, $wpaconf);
+	`ifdown --force wlan0`;
+	`systemctl restart network`;
+	`ifup wlan0`;
+}
+else
+{
+	`ifup wlan0`;
+}
+
+if (trim(file_get_contents("/etc/hostname")) != trim($config['general']["hostname"]))
+{
+	$cmd = 'hostnamectl set-hostname ' . escapeshellarg($config['general']["hostname"]);
+	`$cmd`;
+
+	`systemctl restart avahi-daemon`;
+
+	if ($config['software']["pulseaudio_active"])
+	{
+		`systemctl restart pulseaudio`;
+	}
+	if ($config['software']["airplay_active"])
+	{
+		`systemctl restart shairport-sync`;
+	}
+	if ($config['software']["librespot_active"])
+	{
+		`systemctl restart librespot`;
+	}
+	if ($config['software']["snapcast_client_active"])
+	{
+		`systemctl restart snapclient`;
+	}
+	if ($config['software']["linein_stream_active"])
+	{
+		`systemctl restart snapserver`;
+	}
+}
+
+`mount -o remount,ro /`;
\ No newline at end of file
diff --git a/bootstrap.php b/bootstrap.php
new file mode 100644
index 0000000..8268264
--- /dev/null
+++ b/bootstrap.php
@@ -0,0 +1,14 @@
+<?php 
+error_reporting(E_ALL);
+ini_set("display_errors", 1);
+
+define("SERVER_PATH", __DIR__); 
+
+require_once(SERVER_PATH . '/vendor/autoload.php');
+require_once(SERVER_PATH . '/config.php');
+
+$loader = new \Twig\Loader\FilesystemLoader(SERVER_PATH.'/templates');
+$twig = new \Twig\Environment($loader, [
+    'cache' => '/tmp/twig_cache',
+]);
+
diff --git a/cgi-bin/applyConfig.php b/cgi-bin/applyConfig.php
deleted file mode 100755
index 9e18f61..0000000
--- a/cgi-bin/applyConfig.php
+++ /dev/null
@@ -1,117 +0,0 @@
-<?php
-require(__DIR__ . "/config.php");
-
-// 23 == 0dB capture gain
-`amixer cset name='Capture Volume' 23`;
-
-if ($config['CONFIG_AIRPLAY_ACTIVE'])
-{
-	`systemctl start shairport-sync`;
-}
-else
-{
-	`systemctl stop shairport-sync`;
-}
-
-if ($config['CONFIG_PULSEAUDIO_ACTIVE'])
-{
-	`systemctl start pulseaudio`;
-}
-else
-{
-	`systemctl stop pulseaudio`;
-}
-
-if ($config['CONFIG_LIBRESPOT_ACTIVE'])
-{
-	`systemctl start librespot`;
-}
-else
-{
-	`systemctl stop librespot`;
-}
-
-if ($config['CONFIG_LINEIN_STREAM_ACTIVE'])
-{
-	`systemctl start snapserver`;
-}
-else
-{
-	`systemctl stop snapserver`;
-}
-
-if ($config['CONFIG_SNAPCAST_CLIENT_ACTIVE'])
-{
-	$snapclient_config = 'START_SNAPCLIENT=true' . "\n" .
-			     'SNAPCLIENT_OPTS="-h ' . escapeshellarg($config['CONFIG_SNAPCAST_CLIENT_HOST']) . '"' . "\n";
-	$snapclient_config_path = "/etc/default/snapclient";
-	if (file_get_contents($snapclient_config_path) != $snapclient_config)
-	{
-		file_put_contents($snapclient_config_path, $snapclient_config);
-		`systemctl restart snapclient`;
-	}
-	else
-	{
-		`systemctl start snapclient`;
-	}
-}
-else
-{
-	`systemctl stop snapclient`;
-}
-
-$wpaconf = 'ctrl_interface=/var/run/wpa_supplicant
-#ap_scan=1
-
-network={
-		ssid="'. $config['CONFIG_WIFI_SSID'] .'"
-		scan_ssid=1
-		key_mgmt=WPA-PSK
-		psk="'. $config['CONFIG_WIFI_PSK'] .'"
-}
-';
-
-$wpaconfPath = "/etc/wpa_supplicant/wpa_supplicant-wlan0.conf";
-if (file_get_contents($wpaconfPath) != $wpaconf)
-{
-	file_put_contents($wpaconfPath, $wpaconf);
-	`ifdown --force wlan0`;
-	`systemctl restart network`;
-	`ifup wlan0`;
-}
-else
-{
-	`ifup wlan0`;
-}
-
-if (trim(file_get_contents("/etc/hostname")) != trim($config['CONFIG_DISPLAY_NAME']))
-{
-	$cmd = 'hostnamectl set-hostname ' . escapeshellarg($config['CONFIG_DISPLAY_NAME']);
-	`$cmd`;
-
-	`systemctl restart avahi-daemon`;
-
-	if ($config['CONFIG_PULSEAUDIO_ACTIVE'])
-	{
-		`systemctl restart pulseaudio`;
-	}
-	if ($config['CONFIG_AIRPLAY_ACTIVE'])
-	{
-		`systemctl restart shairport-sync`;
-	}
-	if ($config['CONFIG_LIBRESPOT_ACTIVE'])
-	{
-		`systemctl restart librespot`;
-	}
-	if ($config['CONFIG_SNAPCAST_CLIENT_ACTIVE'])
-	{
-		`systemctl restart snapclient`;
-	}
-	if ($config['CONFIG_LINEIN_STREAM_ACTIVE'])
-	{
-		`systemctl restart snapserver`;
-	}
-
-	$restarted_services = true;
-
-}
diff --git a/cgi-bin/config.php b/cgi-bin/config.php
deleted file mode 100644
index 0d90f3b..0000000
--- a/cgi-bin/config.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-$config_file = "/mnt/config.sh";
-
-// evil hack
-if (!file_exists($config_file))
-{
-	`mount -o rw /dev/mmcblk0p1 /mnt`;
-}
-
-// Config parser
-$cmd = 'bash -c "source ' . escapeshellarg($config_file) . ' && declare"';
-$configraw = explode("\n", `$cmd`);
-$config = []; 
-foreach ($configraw as $configline)
-{
-	if (strpos($configline, "CONFIG_") === 0)
-	{
-		$configitem = explode("=", $configline, 2);
-		$config[$configitem[0]] = trim(trim($configitem[1], "'"));
-	}
-}
diff --git a/cgi-bin/ottercast b/cgi-bin/ottercast
deleted file mode 100755
index 2b67b3b..0000000
--- a/cgi-bin/ottercast
+++ /dev/null
@@ -1,362 +0,0 @@
-#!/usr/bin/env php-cgi
-<?php 
-require(__DIR__ . "/config.php");
-
-if (isset($_POST['ssid']))
-{
-	$hostname = preg_replace('/[^A-Za-z0-9\-]/', '', $_POST['hostname']);
-
-	$new_config = ""; 
-	$new_config .= "CONFIG_DISPLAY_NAME=" . escapeshellarg($hostname) . "\n";
-	$new_config .= "CONFIG_WIFI_SSID=" . escapeshellarg($_POST['ssid']) . "\n";
-
-	if (trim($_POST['psk']) !== "****")
-	{
-		$new_config .= "CONFIG_WIFI_PSK=" . escapeshellarg($_POST['psk']) . "\n";
-	}
-	else
-	{
-		$new_config .= "CONFIG_WIFI_PSK=" . escapeshellarg($config['CONFIG_WIFI_PSK']) . "\n";
-	}
-
-	$new_config .= "CONFIG_AIRPLAY_ACTIVE=" . escapeshellarg($_POST['airplay'] == 'active' ? '1' : '0') . "\n";
-	$new_config .= "CONFIG_PULSEAUDIO_ACTIVE=" . escapeshellarg($_POST['pulseaudio'] == 'active' ? '1' : '0') . "\n";
-	$new_config .= "CONFIG_PULSEAUDIO_LATENCY=" . escapeshellarg($config['CONFIG_PULSEAUDIO_LATENCY']) . "\n";
-	$new_config .= "CONFIG_LIBRESPOT_ACTIVE=" . escapeshellarg($_POST['librespot'] == 'active' ? '1' : '0') . "\n";
-	$new_config .= "CONFIG_SNAPCAST_CLIENT_ACTIVE=" . escapeshellarg($_POST['snapclient'] == 'active' ? '1' : '0') . "\n";
-	$new_config .= "CONFIG_SNAPCAST_CLIENT_HOST=" . escapeshellarg($_POST['snapclienthost']) . "\n";
-
-	$new_config .= "CONFIG_LINEIN_STREAM_ACTIVE=" . escapeshellarg($_POST['linein'] == 'active' ? '1' : '0') . "\n";
-
-
-	file_put_contents("/mnt/config.sh", $new_config);
-
-	// parse new config again
-	require(__DIR__ . "/config.php");
-
-	require(__DIR__ . "/applyConfig.php");
-}
-
-// WiFi status
-$wifi_info = `iw wlan0 station dump`;
-preg_match_all( '/signal:.*?(\-[0-9]*)\s/m', $wifi_info, $matches, PREG_SET_ORDER, 0);
-
-$wifi_connected = false;
-if (count($matches))
-{
-	$wifi_connected = true; 
-
-	$wifi_rssi = $matches[0][1]; 
-
-	$wifi_data = json_decode(`ip -j address show dev wlan0`, true);
-	$wifi_ipv4 = "";
-	foreach ($wifi_data[0]["addr_info"] as $ipaddr)
-	{
-		if ($ipaddr['family'] == "inet")
-		{
-			$wifi_ipv4 .= $ipaddr["local"] . ", ";
-		}
-	}
-	$wifi_ipv4 = rtrim(trim($wifi_ipv4), ",");
-}
-
-// Ethernet status
-
-$ethernet = json_decode(`ip -j addr show dev eth0`, true);
-$ethernet_connected = ($ethernet[0]["operstate"] !== "DOWN");
-$ethernet_ipv4 = "";
-foreach ($ethernet[0]["addr_info"] as $ipaddr)
-{
-	if ($ipaddr['family'] == "inet")
-	{
-		$ethernet_ipv4 .= $ipaddr["local"] . ", ";
-	}
-}
-$ethernet_ipv4 = rtrim(trim($ethernet_ipv4), ",");
-
-// Load average
-
-$loadavg = explode(" ", file_get_contents("/proc/loadavg"));
-$loadavg = $loadavg[0] . ", " . $loadavg[1] . ", " . $loadavg[2];
-
-?>
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<meta name="description" content="">
-		<base href="/">
-
-		<title>OtterCastAudio</title>
-
-		<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
-
-		<!-- Bootstrap core CSS -->
-		<link href="assets/bootstrap.min.css" rel="stylesheet">
-
-		<style>
-			.bd-placeholder-img {
-				font-size: 1.125rem;
-				text-anchor: middle;
-				-webkit-user-select: none;
-				-moz-user-select: none;
-				user-select: none;
-			}
-
-			@media (min-width: 768px) {
-				.bd-placeholder-img-lg {
-					font-size: 3.5rem;
-				}
-			}
-
-			.logo {
-				user-drag: none; 
-				user-select: none;
-				-moz-user-select: none;
-				-webkit-user-drag: none;
-				-webkit-user-select: none;
-				-ms-user-select: none;
-				margin-right: 20px;
-			}
-
-			label.form-check-label {
-				user-drag: none;
-				user-select: none;
-				-moz-user-select: none;
-				-webkit-user-drag: none;
-				-webkit-user-select: none;
-				-ms-user-select: none;
-			}
-
-			.bd-callout {
-				padding: 1.25rem;
-				/* margin-top: 1.25rem; */
-				margin-bottom: 1.25rem;
-				border: 1px solid #e9ecef;
-				border-left-width: .25rem;
-				border-radius: .25rem;
-				background-color: #ffffff;
-			}
-			.bd-callout-info {
-				border-left-color: #5bc0de !important;
-			}
-
-			.bd-callout-warning {
-				border-left-color: #f0ad4e
-			}
-
-			.bd-callout-danger {
-				border-left-color: #d9534f
-			}
-
-		</style>
-
-		
-		<!-- Custom styles for this template -->
-		<link href="assets/form-validation.css" rel="stylesheet">
-	</head>
-	<body class="bg-light">
-			
-		<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
-			<div class="mx-auto">
-				<a href="/cgi-bin/ottercast" class="text-decoration-none text-reset">
-					<img class="logo" src="assets/logo.svg" alt="miau!" title="miau!" height="100">
-					<span class="h1">OtterCastAudio</span>
-				</a>
-			</div>
-		</header>
-
-
-		<div class="container">
-			<main>
-				<div class="text-center">
-					<p class="lead"></p>
-				</div>
-				<?php 
-				if (isset($_POST['ssid']))
-				{ 
-				?> 
-					<div class="alert alert-success" role="alert">
-					Configuration saved successfully!
-					</div>
-				<?php 
-				}
-				if (isset($restarted_services))
-				{ 
-				?> 
-					<div class="alert alert-success" role="alert">
-					Restarted services to apply hostname change!
-					</div>
-				<?php 
-				}
-
-
-				?>
-				<div class="row g-3">
-					<div class="col-md-5 col-lg-4 order-md-last">
-						<h4 class="d-flex justify-content-between align-items-center mb-3">
-							<span class="text-muted">Status</span>
-						</h4>
-						<ul class="list-group mb-3">
-							<li class="list-group-item d-flex justify-content-between lh-sm">
-								<div>
-									<h6 class="my-0">WiFi</h6>
-									<?php 
-									if ($wifi_connected) 
-									{ 
-										?><small>connected, <?php echo $wifi_rssi; ?>dBm, <?php echo $wifi_ipv4; ?></small><?php
-									} 
-									else
-									{
-										?><small>not connected</small><?php
-									}?>
-								</div>
-							</li>
-							<li class="list-group-item d-flex justify-content-between lh-sm">
-								<div>
-									<h6 class="my-0">Ethernet</h6>
-									<?php 
-									if ($ethernet_connected) 
-									{ 
-										?><small>connected, <?php echo $ethernet_ipv4; ?></small><?php
-									} 
-									else
-									{
-										?><small>not connected</small><?php
-									}?>
-								</div>
-							</li>
-							<li class="list-group-item d-flex justify-content-between lh-sm">
-								<div>
-									<h6 class="my-0">System load</h6>
-									<small><?php echo $loadavg; ?></small>
-								</div>
-							</li>
-						</ul>
-					</div>
-					<div class="col-md-7 col-lg-8">
-						<form class="needs-validation" novalidate action="/cgi-bin/ottercast" method="POST" id="settingsform">
-							<div class="col-12">
-								<label for="hostname" class="form-label">Display name</label>
-								<input type="text" class="form-control" name="hostname" id="hostname" placeholder="OtterCast Bathroom"  value="<?php echo htmlspecialchars($config["CONFIG_DISPLAY_NAME"]); ?>" pattern="[A-Za-z0-9\-]{3,50}" required>
-								<div class="invalid-feedback">
-									Please enter a valid hostname.
-								</div>
-							</div>
-
-
-							<hr class="my-4">
-
-							<h4 class="mb-3">WiFi details</h4>
-
-							<div class="row g-3">
-								<div class="col-12">
-									<label for="ssid" class="form-label">Network name (SSID)</label>
-									<input type="text" class="form-control" name="ssid" id="ssid" placeholder="Pretty Fly for a Wi-Fi" value="<?php echo htmlspecialchars($config["CONFIG_WIFI_SSID"]); ?>" required>
-									<div class="invalid-feedback">
-										Please enter a valid network name (SSID).
-									</div>
-								</div>
-
-								<div class="col-12">
-									<label for="psk" class="form-label">Passphrase (PSK)</label>
-									<input type="password" class="form-control" name="psk" id="psk" placeholder="NeverGonnaGiveYouUp" value="****" required>
-									<div class="invalid-feedback">
-										Please enter your passphase (PSK).
-									</div>
-								</div>
-							</div>
-
-							<hr class="my-4">
-
-							<h4 class="mb-3">Protocols</h4>
-
-							<div class="form-check">
-								<input type="checkbox" class="form-check-input" name="airplay" id="airplay" value="active" <?php if ($config["CONFIG_AIRPLAY_ACTIVE"]) echo "checked"; ?>>
-								<label class="form-check-label" for="airplay">AirPlay (Shairport Sync)</label>
-							</div>
-
-							<div class="form-check">
-								<input type="checkbox" class="form-check-input" name="pulseaudio" id="pulseaudio" value="active" <?php if ($config["CONFIG_PULSEAUDIO_ACTIVE"]) echo "checked"; ?>>
-								<label class="form-check-label" for="pulseaudio">PulseAudio Sink</label>
-							</div>
-
-							<div class="form-check">
-								<input type="checkbox" class="form-check-input" name="librespot" id="librespot" value="active" <?php if ($config["CONFIG_LIBRESPOT_ACTIVE"]) echo "checked"; ?>>
-								<label class="form-check-label" for="librespot">Spotify Connect (librespot)</label>
-							</div>
-
-							<div class="form-check">
-								<input type="checkbox" class="form-check-input" name="snapclient" id="snapclient" value="active" <?php if ($config["CONFIG_SNAPCAST_CLIENT_ACTIVE"]) echo "checked"; ?>>
-								<label class="form-check-label" for="snapclient">Snapcast Client</label>
-							</div>
-							<div class="col-12 bd-callout bd-callout-info" id="snapclienthostdiv">
-								<label for="snapclienthost" class="form-label">Snapcast Server (IP/hostname)</label>
-								<input type="text" class="form-control" name="snapclienthost" id="snapclienthost" placeholder="ottercast2.local" value="<?php echo htmlspecialchars($config["CONFIG_SNAPCAST_CLIENT_HOST"]); ?>">
-								<div class="invalid-feedback">
-									Please enter a valid hostname or IP address.
-								</div>
-							</div>
-
-							<hr class="my-4">
-
-							<h4 class="mb-3">Line-In Streaming (Snapcast Server)</h4>
-							<div class="mb-2 small bd-callout bd-callout-info">OtterCast is able to stream the Line-In port directly to another OtterCast or <a href="https://github.com/badaix/snapcast/" target="_blank">Snapcast Client</a>.<br>
-							Make sure "Snapcast Client" protocol is active on the receiver. <br>Avahi/mDNS can be used with the ".local" suffix.</div>
-							<div class="form-check">
-								<input type="checkbox" class="form-check-input mb-3" name="linein" id="linein" value="active" <?php if ($config["CONFIG_LINEIN_STREAM_ACTIVE"]) echo "checked"; ?>>
-								<label class="form-check-label" for="linein">Streaming server active</label>
-							</div>
-							
-
-							<hr class="my-4">
-
-							<button class="w-100 btn btn-success btn-lg" type="submit">Save settings</button>
-						</form>
-					</div>
-				</div>
-			</main>
-
-			<footer class="my-5 pt-5 text-muted text-center text-small">
-				<p class="mb-1">&copy; 2020-2021 by<br>Jan Henrik Hemsig, Niklas Fauth,<br> Tobias Schramm, Tobias Mädel</p>
-				<br>
-				<ul class="list-inline">
-					<li class="list-inline-item"><a href="https://github.com/TobleMiner/buildroot-ottercast-audio">Firmware</a></li>
-					<li class="list-inline-item"><a href="https://github.com/Jan--Henrik/OtterCastAudioV2">PCB</a></li>
-				</ul>
-			</footer>
-		</div>
-
-		<script
-			src="assets/jquery-3.5.1.min.js"
-			integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
-		></script>
-		<script src="assets/bootstrap.bundle.min.js"></script>
-		<script src="assets/form-validation.js"></script>
-
-		<script type="text/javascript">
-			function eval_snapclient_checkbox()
-			{
-				var snapclienthostdiv = $('#snapclienthostdiv');
-				if($('#snapclient').is(':checked'))
-				{
-					snapclienthostdiv.show();
-					snapclienthostdiv.find('input').attr('required', true);
-				} else {
-					snapclienthostdiv.hide();
-					snapclienthostdiv.find('input').attr('required', false);
-				}
-			}
-
-			$(function()
-			{
-				var snapclienthostdiv = $('#snapclienthostdiv');
-				snapclienthostdiv.hide();
-
-				$('#snapclient').on('change', eval_snapclient_checkbox);
-				eval_snapclient_checkbox(); 
-			});
-		</script>
-	</body>
-</html>
\ No newline at end of file
diff --git a/config.php b/config.php
new file mode 100644
index 0000000..5930883
--- /dev/null
+++ b/config.php
@@ -0,0 +1,71 @@
+<?php
+$config_file = "/mnt/config.ini";
+$default_config_file = __DIR__ . "/example_config.ini";
+$ssh_key_file = "/mnt/ssh_authorized_keys";
+
+$config = load_config($config_file, $default_config_file);
+
+function load_config(string $config_file, string $default_config_file): array
+{
+	// evil hack
+	if (!file_exists($config_file))
+	{
+		`mount -o ro /dev/mmcblk0p1 /mnt`;
+	}
+
+	$config = parse_ini_file ( $config_file , true , INI_SCANNER_TYPED );
+	if ($config === false)
+	{
+		$config = parse_ini_file ( $default_config_file , true , INI_SCANNER_TYPED );
+	}
+	return $config; 
+}
+
+function save_config(string $config_file, array $config): bool
+{
+	$config_string = create_ini_string($config);
+
+	if (file_get_contents($config_file) != $config_string)
+	{
+		// configuration has changed
+
+		// even more evil hack
+		`mount -o rw /dev/mmcblk0p1 /mnt`;
+		`mount -o remount,rw /dev/mmcblk0p1`;
+
+		file_put_contents($config_file, $config_string);
+
+		`mount -o remount,ro /mnt`;
+		return true; 
+	}
+
+	return false;
+}
+
+function create_ini_string ( array $config ): string
+{
+	$result = "; OtterCast Configuration file\n".
+			  "; Make sure to quote special characters, e.g. key = \"value\"\n\n";
+
+	foreach ($config as $section => $elements)
+	{
+		$result .= "[" . $section . "]\n"; 
+		foreach ($elements as $key => $value)
+		{
+			if (is_string($value))
+			{
+				$result .= $key . " = \"" . $value . "\"\n";
+			}
+			elseif (is_bool($value))
+			{
+				$result .= $key . " = " . ($value ? 'true' : 'false') . "\n";
+			}
+			else
+			{
+				$result .= $key . " = " . $value . "\n";
+			}
+		}
+		$result .= "\n";
+	}
+	return $result;
+}
\ No newline at end of file
diff --git a/example_config.ini b/example_config.ini
new file mode 100644
index 0000000..9561cdd
--- /dev/null
+++ b/example_config.ini
@@ -0,0 +1,17 @@
+; OtterCast Configuration file
+; Make sure to quote special characters, e.g. key = "value"
+
+[general]
+hostname = "OtterCastAudio"
+
+[network]
+wifi_ssid = ""
+wifi_passphrase = ""
+
+[software]
+airplay_active = true
+pulseaudio_active = true
+librespot_active = true
+snapcast_client_active = false
+snapcast_client_hostname = ""
+linein_stream_active = false
\ No newline at end of file
diff --git a/example_config.sh b/example_config.sh
deleted file mode 100644
index e2b83e9..0000000
--- a/example_config.sh
+++ /dev/null
@@ -1,10 +0,0 @@
-CONFIG_DISPLAY_NAME='OtterCastAudio'
-CONFIG_WIFI_SSID=''
-CONFIG_WIFI_PSK=''
-CONFIG_AIRPLAY_ACTIVE='1'
-CONFIG_PULSEAUDIO_ACTIVE='1'
-CONFIG_PULSEAUDIO_LATENCY='8'
-CONFIG_LIBRESPOT_ACTIVE='1'
-CONFIG_SNAPCAST_CLIENT_ACTIVE='0'
-CONFIG_SNAPCAST_CLIENT_HOST=''
-CONFIG_LINEIN_STREAM_ACTIVE='0'
diff --git a/assets/bootstrap.bundle.min.js b/public/assets/bootstrap.bundle.min.js
similarity index 100%
rename from assets/bootstrap.bundle.min.js
rename to public/assets/bootstrap.bundle.min.js
diff --git a/assets/bootstrap.bundle.min.js.map b/public/assets/bootstrap.bundle.min.js.map
similarity index 100%
rename from assets/bootstrap.bundle.min.js.map
rename to public/assets/bootstrap.bundle.min.js.map
diff --git a/assets/bootstrap.min.css b/public/assets/bootstrap.min.css
similarity index 100%
rename from assets/bootstrap.min.css
rename to public/assets/bootstrap.min.css
diff --git a/assets/bootstrap.min.css.map b/public/assets/bootstrap.min.css.map
similarity index 100%
rename from assets/bootstrap.min.css.map
rename to public/assets/bootstrap.min.css.map
diff --git a/assets/emoji_u1f9a6_headphone2.svg b/public/assets/emoji_u1f9a6_headphone2.svg
similarity index 100%
rename from assets/emoji_u1f9a6_headphone2.svg
rename to public/assets/emoji_u1f9a6_headphone2.svg
diff --git a/assets/form-validation.css b/public/assets/form-validation.css
similarity index 100%
rename from assets/form-validation.css
rename to public/assets/form-validation.css
diff --git a/assets/form-validation.js b/public/assets/form-validation.js
similarity index 100%
rename from assets/form-validation.js
rename to public/assets/form-validation.js
diff --git a/assets/jquery-3.5.1.min.js b/public/assets/jquery-3.5.1.min.js
similarity index 100%
rename from assets/jquery-3.5.1.min.js
rename to public/assets/jquery-3.5.1.min.js
diff --git a/assets/logo.svg b/public/assets/logo.svg
similarity index 100%
rename from assets/logo.svg
rename to public/assets/logo.svg
diff --git a/public/assets/ottercast.css b/public/assets/ottercast.css
new file mode 100644
index 0000000..8aff0d6
--- /dev/null
+++ b/public/assets/ottercast.css
@@ -0,0 +1,63 @@
+.bd-placeholder-img {
+	font-size: 1.125rem;
+	text-anchor: middle;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+@media (min-width: 768px) {
+	.bd-placeholder-img-lg {
+		font-size: 3.5rem;
+	}
+}
+
+.logo {
+	user-drag: none; 
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	margin-right: 20px;
+}
+
+.logo-text {
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror HTML */
+	-moz-user-select: none; /* Old versions of Firefox */
+	-ms-user-select: none; /* Internet Explorer/Edge */
+	user-select: none; 	/* Non-prefixed version, currently
+							supported by Chrome, Edge, Opera and Firefox */
+}
+
+label.form-check-label {
+	user-drag: none;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+.bd-callout {
+	padding: 1.25rem;
+	/* margin-top: 1.25rem; */
+	margin-bottom: 1.25rem;
+	border: 1px solid #e9ecef;
+	border-left-width: .25rem;
+	border-radius: .25rem;
+	background-color: #ffffff;
+}
+.bd-callout-info {
+	border-left-color: #5bc0de !important;
+}
+
+.bd-callout-warning {
+	border-left-color: #f0ad4e
+}
+
+.bd-callout-danger {
+	border-left-color: #d9534f
+}
\ No newline at end of file
diff --git a/public/cgi-bin/ottercast b/public/cgi-bin/ottercast
new file mode 100644
index 0000000..cf57bba
--- /dev/null
+++ b/public/cgi-bin/ottercast
@@ -0,0 +1,80 @@
+#!/usr/bin/env php-cgi
+<?php 
+require_once(__DIR__ . "/../../bootstrap.php");
+
+if (isset($_POST['ssid']))
+{
+	$hostname = preg_replace('/[^A-Za-z0-9\-]/', '', $_POST['hostname']);
+	$config['general']['hostname'] = $hostname;
+	$config['network']['wifi_ssid'] = $_POST['ssid'];
+	if (trim($_POST['psk']) !== "****")
+	{
+		$config['network']['wifi_passphrase'] = $_POST['psk'];
+	}
+
+	$config['software']['airplay_active'] = (bool)($_POST['airplay'] ?? false);
+	$config['software']['pulseaudio_active'] = (bool)($_POST['pulseaudio'] ?? false);
+	$config['software']['librespot_active'] = (bool)($_POST['librespot'] ?? false);
+	$config['software']['snapcast_client_active'] = (bool)($_POST['snapclient'] ?? false);
+	$config['software']['snapcast_client_hostname'] = $_POST['snapclienthost'] ?? '';
+	$config['software']['linein_stream_active'] = (bool)($_POST['linein'] ?? false);
+
+	save_config($config_file, $config);
+	`systemctl restart ottercast-config`;
+}
+
+// WiFi status
+$wifi_info = `iw wlan0 station dump`;
+preg_match_all( '/signal:.*?(\-[0-9]*)\s/m', $wifi_info, $matches, PREG_SET_ORDER, 0);
+
+$wifi_connected = false;
+if (count($matches))
+{
+	$wifi_connected = true; 
+
+	$wifi_rssi = $matches[0][1]; 
+
+	$wifi_data = json_decode(`ip -j address show dev wlan0`, true);
+	$wifi_ipv4 = "";
+	foreach ($wifi_data[0]["addr_info"] as $ipaddr)
+	{
+		if ($ipaddr['family'] == "inet")
+		{
+			$wifi_ipv4 .= $ipaddr["local"] . ", ";
+		}
+	}
+	$wifi_ipv4 = rtrim(trim($wifi_ipv4), ",");
+}
+
+// Ethernet status
+$ethernet = json_decode(`ip -j addr show dev eth0`, true);
+$ethernet_connected = ($ethernet[0]["operstate"] !== "DOWN");
+$ethernet_ipv4 = "";
+foreach ($ethernet[0]["addr_info"] as $ipaddr)
+{
+	if ($ipaddr['family'] == "inet")
+	{
+		$ethernet_ipv4 .= $ipaddr["local"] . ", ";
+	}
+}
+$ethernet_ipv4 = rtrim(trim($ethernet_ipv4), ",");
+
+// Load average
+$loadavg = explode(" ", file_get_contents("/proc/loadavg"));
+$loadavg = $loadavg[0] . ", " . $loadavg[1] . ", " . $loadavg[2];
+
+echo $twig->render('setup.twig', [
+	'restarted_services' => ($restarted_services ?? false),
+	'config' => $config,
+	'post' => $_POST,
+	'status' => [
+		"wifi_connected" => $wifi_connected,
+		"wifi_rssi" => $wifi_rssi,
+		"wifi_ipv4" => $wifi_ipv4,
+
+		"ethernet_connected" => $ethernet_connected,
+		"ethernet_ipv4" => $ethernet_ipv4,
+
+		"loadavg" => $loadavg
+	]
+]);
\ No newline at end of file
diff --git a/index.html b/public/index.html
similarity index 100%
rename from index.html
rename to public/index.html
diff --git a/templates/layout.twig b/templates/layout.twig
new file mode 100644
index 0000000..da883cc
--- /dev/null
+++ b/templates/layout.twig
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="">
+		<base href="/">
+
+		<title>OtterCastAudio</title>
+
+		<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
+
+		<!-- Bootstrap core CSS -->
+		<link href="assets/bootstrap.min.css" rel="stylesheet">
+
+		<!-- Ottercast GUI styles -->
+		<link href="assets/ottercast.css" rel="stylesheet">
+
+		<!-- Custom styles for this template -->
+		<link href="assets/form-validation.css" rel="stylesheet">
+	</head>
+	<body class="bg-light">
+		<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
+			<div class="mx-auto">
+				<a href="/cgi-bin/ottercast" class="text-decoration-none text-reset">
+					<img class="logo" src="assets/logo.svg" alt="meow :3" title="meow :3" height="100">
+					<span class="h1 logo-text">OtterCastAudio</span>
+				</a>
+			</div>
+		</header>
+			
+		<div class="container">
+			<main>
+				{% block content %}{% endblock %}
+			</main>
+
+			<footer class="my-5 pt-5 text-muted text-center text-small">
+				<p class="mb-1">&copy; 2020-2021 by<br>Jan Henrik Hemsig, Niklas Fauth,<br> Tobias Schramm, Tobias Mädel</p>
+				<br>
+				<ul class="list-inline">
+					<li class="list-inline-item"><a href="https://cast.otter.jetzt/" target="_blank">Homepage</a></li>
+					<li class="list-inline-item"><a href="https://github.com/Ottercast" target="_blank">GitHub</a></li>
+					<li class="list-inline-item"><a href="https://twitter.com/ottercastaudio" target="_blank">Twitter</a></li>
+				</ul>
+			</footer>
+		</div>
+		<script
+			src="assets/jquery-3.5.1.min.js"
+			integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+		></script>
+		<script src="assets/bootstrap.bundle.min.js"></script>
+		<script src="assets/form-validation.js"></script>
+
+		{% block script %}{% endblock %}
+	</body>
+</html>
\ No newline at end of file
diff --git a/templates/setup.twig b/templates/setup.twig
new file mode 100644
index 0000000..599d78c
--- /dev/null
+++ b/templates/setup.twig
@@ -0,0 +1,160 @@
+{% extends "layout.twig" %}
+
+{% block content %}
+	<div class="text-center">
+		<p class="lead"></p>
+	</div>
+
+	{% if post.ssid %}
+		<div class="alert alert-success" role="alert">
+		Configuration saved successfully!
+		</div>
+	{% endif %}
+
+	{% if restarted_services %}
+		<div class="alert alert-success" role="alert">
+		Restarted services to apply hostname change!
+		</div>
+	{% endif %}
+	
+	<div class="row g-3">
+		<div class="col-md-5 col-lg-4 order-md-last">
+			<h4 class="d-flex justify-content-between align-items-center mb-3">
+				<span class="text-muted">Status</span>
+			</h4>
+			<ul class="list-group mb-3">
+				<li class="list-group-item d-flex justify-content-between lh-sm">
+					<div>
+						<h6 class="my-0">WiFi</h6>
+						{% if status.wifi_connected %}
+							<small>connected, {{ status.wifi_rssi }}dBm, {{ status.wifi_ipv4 }}</small>
+						{% else %}
+							<small>not connected</small>
+						{% endif %}
+					</div>
+				</li>
+				<li class="list-group-item d-flex justify-content-between lh-sm">
+					<div>
+						<h6 class="my-0">Ethernet</h6>
+						{% if status.ethernet_connected %}
+							<small>connected, {{ status.ethernet_ipv4 }}</small>
+						{% else %}
+							<small>not connected</small>
+						{% endif %}
+					</div>
+				</li>
+				<li class="list-group-item d-flex justify-content-between lh-sm">
+					<div>
+						<h6 class="my-0">System load</h6>
+						<small>{{ status.loadavg }}</small>
+					</div>
+				</li>
+			</ul>
+		</div>
+		<div class="col-md-7 col-lg-8">
+			<form class="needs-validation" novalidate action="/cgi-bin/ottercast" method="POST" id="settingsform">
+				<div class="col-12">
+					<label for="hostname" class="form-label">Display name</label>
+					<input type="text" class="form-control" name="hostname" id="hostname" placeholder="OtterCast Bathroom"  value="{{ config.general.hostname }}" pattern="[A-Za-z0-9\-]{3,50}" required>
+					<div class="invalid-feedback">
+						Please enter a valid hostname.
+					</div>
+				</div>
+
+
+				<hr class="my-4">
+
+				<h4 class="mb-3">WiFi details</h4>
+
+				<div class="row g-3">
+					<div class="col-12">
+						<label for="ssid" class="form-label">Network name (SSID)</label>
+						<input type="text" class="form-control" name="ssid" id="ssid" placeholder="Pretty Fly for a Wi-Fi" value="{{ config.network.wifi_ssid }}" required>
+						<div class="invalid-feedback">
+							Please enter a valid network name (SSID).
+						</div>
+					</div>
+
+					<div class="col-12">
+						<label for="psk" class="form-label">Passphrase (PSK)</label>
+						<input type="password" class="form-control" name="psk" id="psk" placeholder="NeverGonnaGiveYouUp" value="****" required>
+						<div class="invalid-feedback">
+							Please enter your passphase (PSK).
+						</div>
+					</div>
+				</div>
+
+				<hr class="my-4">
+
+				<h4 class="mb-3">Protocols</h4>
+
+				<div class="form-check">
+					<input type="checkbox" class="form-check-input" name="airplay" id="airplay" value="active" {{ config.software.airplay_active ? 'checked' }}>
+					<label class="form-check-label" for="airplay">AirPlay (Shairport Sync)</label>
+				</div>
+
+				<div class="form-check">
+					<input type="checkbox" class="form-check-input" name="pulseaudio" id="pulseaudio" value="active" {{ config.software.pulseaudio_active ? 'checked' }}>
+					<label class="form-check-label" for="pulseaudio">PulseAudio Sink</label>
+				</div>
+
+				<div class="form-check">
+					<input type="checkbox" class="form-check-input" name="librespot" id="librespot" value="active" {{ config.software.librespot_active ? 'checked' }}>
+					<label class="form-check-label" for="librespot">Spotify Connect (librespot)</label>
+				</div>
+
+				<div class="form-check">
+					<input type="checkbox" class="form-check-input" name="snapclient" id="snapclient" value="active" {{ config.software.snapcast_client_active ? 'checked' }}>
+					<label class="form-check-label" for="snapclient">Snapcast Client</label>
+				</div>
+				<div class="col-12 bd-callout bd-callout-info" id="snapclienthostdiv">
+					<label for="snapclienthost" class="form-label">Snapcast Server (IP/hostname)</label>
+					<input type="text" class="form-control" name="snapclienthost" id="snapclienthost" placeholder="ottercast2.local" value="{{ config.software.snapcast_client_hostname}}">
+					<div class="invalid-feedback">
+						Please enter a valid hostname or IP address.
+					</div>
+				</div>
+
+				<hr class="my-4">
+
+				<h4 class="mb-3">Line-In Streaming (Snapcast Server)</h4>
+				<div class="mb-2 small bd-callout bd-callout-info">OtterCast is able to stream the Line-In port directly to another OtterCast or <a href="https://github.com/badaix/snapcast/" target="_blank">Snapcast Client</a>.<br>
+				Make sure "Snapcast Client" protocol is active on the receiver. <br>Avahi/mDNS can be used with the ".local" suffix.</div>
+				<div class="form-check">
+					<input type="checkbox" class="form-check-input mb-3" name="linein" id="linein" value="active" {{ config.software.linein_stream_active ? 'checked' }}>
+					<label class="form-check-label" for="linein">Streaming server active</label>
+				</div>
+				
+				<hr class="my-4">
+
+				<button class="w-100 btn btn-success btn-lg" type="submit">Save settings</button>
+			</form>
+		</div>
+	</div>
+{% endblock %}
+
+{% block script %}
+	<script type="text/javascript">
+		function eval_snapclient_checkbox()
+		{
+			var snapclienthostdiv = $('#snapclienthostdiv');
+			if($('#snapclient').is(':checked'))
+			{
+				snapclienthostdiv.show();
+				snapclienthostdiv.find('input').attr('required', true);
+			} else {
+				snapclienthostdiv.hide();
+				snapclienthostdiv.find('input').attr('required', false);
+			}
+		}
+
+		$(function()
+		{
+			var snapclienthostdiv = $('#snapclienthostdiv');
+			snapclienthostdiv.hide();
+
+			$('#snapclient').on('change', eval_snapclient_checkbox);
+			eval_snapclient_checkbox(); 
+		});
+	</script>
+{% endblock %}