frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2023-10-10 13:37:24 +02:00
Code Issues Releases Wiki Activity

Merging upstream to repo

Browse Source
This commit is contained in:
Lawrence 2017-10-23 00:27:33 +08:00
commit 64a7cb9d62
10 changed files with 394 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -1,6 +1,6 @@
![](http://i.imgur.com/xeKD93p.png)
# `$ raspap-webgui` [![Release 1.2.0](https://img.shields.io/badge/Release-1.2.0-green.svg)](https://github.com/billz/raspap-webgui/releases)
A simple, responsive web interface to control wifi, hostapd and related services on the Raspberry Pi.
# `$ raspap-webgui` [![Release 1.2.1](https://img.shields.io/badge/Release-1.2.1-green.svg)](https://github.com/billz/raspap-webgui/releases)
A simple, responsive web interface t:o control wifi, hostapd and related services on the Raspberry Pi.
This project was inspired by a [**blog post**](http://sirlagz.net/2013/02/06/script-web-configuration-page-for-raspberry-pi/) by SirLagz about using a web page rather than ssh to configure wifi and hostapd settings on the Raspberry Pi. I mostly just prettified the UI by wrapping it in [**SB Admin 2**](https://github.com/BlackrockDigital/startbootstrap-sb-admin-2), a Bootstrap based admin theme.

24
config/rc.local
View File

@ -1,24 +0,0 @@
#!/bin/sh -e
#
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.
# Print the IP address
_IP=$(hostname -I) || true
if [ "$_IP" ]; then
printf "My IP address is %s\n" "$_IP"
fi
# Set up IP forwarding and NAT routing
echo 1 > /proc/sys/net/ipv4/ip_forward
iptables -t nat -A POSTROUTING -j MASQUERADE
exit 0

78
dist/css/hackernews.css vendored Normal file
View File

@ -0,0 +1,78 @@
html * {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #828282;
}
.nav>li>a {
font-size: 12pt;
}
a:focus, a:hover {
color: #666;
}
h4 {
font-size: 18px;
}
.panel {
border-radius: 1px;
}
.panel-primary {
border-color: #ff6600;
}
.panel-primary>.panel-heading {
border-color: #ff6600;
background-color: #ff6600;
color: #000;
font-size: 14pt;
font-weight: bold;
}
.panel-heading {
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
.panel-primary>.panel-heading .fa {
color: #fff;
}
.page-header {
font-size: 26pt;
margin: 10px 0 20px;
}
#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default {
background-color: #f6f6ef;
}
.panel-footer {
background-color: #eee;
}
.btn-primary.btn-outline {
color: #c61931;
border-color: #c61931;
}
.btn-primary:hover {
background-color: #c61931;
border-color: #c61931;
}
.progress {
background-color: #eee;
}
.progress-bar {
color: #eee;
}
.info-item {
width: 140px;
float: left;
}

199
dist/css/terminal.css vendored Normal file
View File

@ -0,0 +1,199 @@
html * {
font-family: Courier New, Andale Mono, monospace;
font-size: 10pt;
color: #33ff00;
}
#page-wrapper {
padding: 0 20px;
border-left: 1px solid #33ff00;
}
.nav>li>a {
font-size: 10pt;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: #000;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #33ff00;
cursor: default;
background-color: #000;
border: 1px solid #33ff00;
border-bottom-color: #33ff00;
}
.nav-tabs>li>a,.nav-tabs>li>a:hover {
border: 1px solid #33ff00;
}
.nav-tabs {
border-bottom: 1px solid #33ff00;
}
.navbar-default {
border-color: #33ff00;
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
color: #33ff00;
}
.navbar-default .navbar-toggle {
border-color: #33ff00;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #33ff00;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #000;
}
.logo {
visibility: collapse;
width: 0px;
}
a:focus, a:hover {
color: #33ff00;
}
.panel-primary {
border-color: #33ff00;
}
.panel-primary>.panel-heading {
border-color: #33ff00;
background-color: #33ff00;
color: #000;
font-size: 12pt;
}
.panel-primary>.panel-heading .fa {
color: #000;
}
.panel {
margin-bottom: 20px;
border: 1px solid #33ff00;
border-radius: 0px;
}
.page-header {
font-size: 24pt;
margin: 10px 0 20px;
border-bottom: 1px solid #33ff00;
}
#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default {
background-color: #000;
}
.panel-footer {
background-color: #000;
border-top: 1px solid #33ff00;
}
.panel-primary>.panel-heading::before, .navbar-default::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.sidebar ul li a.active,.sidebar ul li a.hover {
background-color: #000;
}
.sidebar ul li {
border-bottom: 1px solid #33ff00;
}
.btn-primary.btn-outline,.btn-warning {
color: #33ff00;
border-color: #33ff00;
}
.btn-primary:hover,.btn-primary:focus,.btn-warning:hover,.btn-warning:focus,.btn-primary:active {
color: #33ff00;
background-color: #000;
border-color: #33ff00;
}
.btn-primary.btn-outline:hover,.btn-success, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover {
color: #33ff00;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
background-color: #000;
border-top: 1px solid #000;
}
.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 1px solid #33ff00;
}
.btn-info, .btn-info:hover, .btn-info[disabled], .btn-danger.disabled, .btn-danger.disabled.active, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled], .btn-danger[disabled].active, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger.active, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover, .btn-info:hover {
background-color: #000;
border-color: #33ff00;
color: #33ff00;
}
.btn {
background-color: #000;
border-radius: 0px;
}
.alert {
border-radius: 0px;
}
.alert-success,.alert-warning,.alert-ifo,.alert-dismissable {
color: #33ff00;
background-color: #000;
border-color: #33ff00;
border: 1px dashed;
}
.close {
font-size: 18px;
font-weight: normal;
text-shadow: 0 0px 0 #000;
opacity: 1;
}
.form-control, .form-control:focus {
color: #33ff00;
background-color: #000;
border: 1px solid #33ff00;
border-radius: 0px;
transition: unset;
}
.progress {
background-color: #000;
border-radius: 0px;
}
.progress-bar {
color: #000;
}
.info-item {
width: 140px;
float: left;
}

28
dist/js/sb-admin-2.js vendored
View File

@ -1,9 +1,30 @@
$(function() {
$('#side-menu').metisMenu();
$('#theme-select').change(function() {
var theme = themes[$( "#theme-select" ).val() ];
set_theme(theme);
});
});
function set_theme(theme) {
$('link[title="main"]').attr('href', 'dist/css/' + theme);
// persist selected theme in cookie
setCookie('theme',theme,90);
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
var themes = {
"default": "custom.css",
"hackernews" : "hackernews.css",
"terminal" : "terminal.css",
}
//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
@ -34,3 +55,4 @@ $(function() {
element.addClass('active');
}
});

4
includes/admin.php
View File

@ -13,6 +13,10 @@ function DisplayAuthConfig($username, $password){
} else if ($new_username == '') {
$status->addMessage('Username must not be empty', 'danger');
} else {
if (!file_exists(RASPI_ADMIN_DETAILS)) {
$tmpauth = fopen(RASPI_ADMIN_DETAILS, 'w');
fclose($tmpauth);
}
if ($auth_file = fopen(RASPI_ADMIN_DETAILS, 'w')) {
fwrite($auth_file, $new_username.PHP_EOL);
fwrite($auth_file, password_hash($_POST['newpass'], PASSWORD_BCRYPT).PHP_EOL);

2
includes/hostapd.php
View File

@ -136,7 +136,7 @@ function DisplayHostAPDConfig(){
<div class="form-group col-md-4">
<label for="code">Country Code</label>
<input type="hidden" id="selected_country" value="<?php echo $arrConfig['country_code'] ?>">
<select class="form-control" id="countries" name="country_code" style="background-color: #c0ffc0;">
<select class="form-control" id="countries" name="country_code">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>

63
includes/themes.php Normal file
View File

@ -0,0 +1,63 @@
<?php
/**
*
*
*/
function DisplayThemeConfig(){
$cselected = '';
$hselected = '';
$tselected = '';
switch( $_COOKIE['theme'] ) {
case "custom.css":
$cselected = "selected";
break;
case "hackernews.css":
$hselected = "selected";
break;
case "terminal.css":
$tselected = "selected";
break;
}
?>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-wrench fa-fw"></i> Change Theme</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<h4>Theme settings</h4>
<div class="row">
<div class="form-group col-md-6">
<label for="code">Select a theme</label>
<select class="form-control" id="theme-select">Select a Theme
<option value="default" class="theme-link" <?php echo $cselected; ?>>RaspAP (default)</option>
<option value="hackernews" class="theme-link"<?php echo $hselected; ?>>HackerNews</option>
<option value="terminal" class="theme-link" <?php echo $tselected; ?>>Terminal</option>
</select>
</div>
</div>
</div><!-- /.panel-body -->
</div><!-- /.panel-default -->
</div><!-- /.col-md-6 -->
</div><!-- /.row -->
<form action="?page=system_info" method="POST">
<input type="button" class="btn btn-outline btn-primary" value="Refresh" onclick="document.location.reload(true)" />
</form>
</div><!-- /.panel-body -->
</div><!-- /.panel-primary -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<?php
}
?>

28
index.php
View File

@ -19,11 +19,13 @@
*/
define('RASPI_CONFIG', '/etc/raspap');
if(file_exists(RASPI_CONFIG.'/raspap.auth')) {
define('RASPI_ADMIN_DETAILS', RASPI_CONFIG.'/raspap.auth');
} else {
define('RASPI_ADMIN_DETAILS','');
}
define('RASPI_ADMIN_DETAILS', RASPI_CONFIG.'/raspap.auth');
//if(file_exists(RASPI_CONFIG.'/raspap.auth')) {
// define('RASPI_ADMIN_DETAILS', RASPI_CONFIG.'/raspap.auth');
//} else {
// define('RASPI_ADMIN_DETAILS','');
//}
// Constants for configuration file paths.
// These are typical for default RPi installs. Modify if needed.
@ -51,6 +53,7 @@ include_once( 'includes/hostapd.php' );
include_once( 'includes/system.php' );
include_once( 'includes/configure_client.php' );
include_once( 'includes/networking.php' );
include_once( 'includes/themes.php' );
$output = $return = 0;
$page = $_GET['page'];
@ -64,6 +67,13 @@ if (empty($_SESSION['csrf_token'])) {
}
}
$csrf_token = $_SESSION['csrf_token'];
if(!isset($_COOKIE['theme'])) {
$theme = "custom.css";
} else {
$theme = $_COOKIE['theme'];
}
$theme_url = 'dist/css/' . $theme;
?>
<!DOCTYPE html>
@ -96,7 +106,7 @@ $csrf_token = $_SESSION['csrf_token'];
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="dist/css/custom.css" rel="stylesheet">
<link href="<?php echo $theme_url; ?>" title="main" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="../img/favicon.png">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@ -154,6 +164,9 @@ $csrf_token = $_SESSION['csrf_token'];
<li>
<a href="index.php?page=auth_conf"><i class="fa fa-lock fa-fw"></i> Configure Auth</a>
</li>
<li>
<a href="index.php?page=theme_conf"><i class="fa fa-wrench fa-fw"></i> Change Theme</a>
</li>
<li>
<a href="index.php?page=system_info"><i class="fa fa-cube fa-fw"></i> System</a>
</li>
@ -203,6 +216,9 @@ $csrf_token = $_SESSION['csrf_token'];
case "save_hostapd_conf":
SaveTORAndVPNConfig();
break;
case "theme_conf":
DisplayThemeConfig();
break;
case "system_info":
DisplaySystem();
break;

1
installers/common.sh
View File

@ -160,7 +160,6 @@ function default_configuration() {
sudo mv $webroot_dir/config/hostapd.conf /etc/hostapd/hostapd.conf || install_error "Unable to move hostapd configuration file"
sudo mv $webroot_dir/config/dnsmasq.conf /etc/dnsmasq.conf || install_error "Unable to move dnsmasq configuration file"
sudo mv $webroot_dir/config/dhcpcd.conf /etc/dhcpcd.conf || install_error "Unable to move dhcpcd configuration file"
#sudo mv $webroot_dir/config/rc.local /etc/rc.local || install_error "Unable to move rc.local file"
# Generate required lines for Rasp AP to place into rc.local file.
# #RASPAP is for removal script