freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added confirmation page for monitoring + a few tweaks.

Browse source
This commit is contained in:
baldo 2016-05-18 22:50:06 +02:00
commit 0bdce5debb
24 changed files with 431 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/index.html
View file

@ -50,8 +50,10 @@
<script src="scripts/controllers/newNodeCtrl.js"></script>
<script src="scripts/controllers/updateNodeCtrl.js"></script>
<script src="scripts/controllers/deleteNodeCtrl.js"></script>
<script src="scripts/controllers/confirmMonitoringCtrl.js"></script>
<script src="scripts/services/nodeService.js"></script>
<script src="scripts/services/monitoringService.js"></script>
<script src="scripts/directives/help.js"></script>
<script src="scripts/directives/navbar.js"></script>

5
app/scripts/app.js
View file

@ -31,6 +31,11 @@ angular.module('ffffng', [
controller: 'DeleteNodeCtrl',
title: 'Knoten löschen'
})
.when('/monitoring/confirm', {
templateUrl: 'views/confirmMonitoring.html',
controller: 'ConfirmMonitoringCtrl',
title: 'Versand von Status-E-Mails bestätigen'
})
.otherwise({
redirectTo: '/'
});

35
app/scripts/controllers/confirmMonitoringCtrl.js Normal file
View file

@ -0,0 +1,35 @@
'use strict';
angular.module('ffffng')
.controller('ConfirmMonitoringCtrl', function ($scope, Navigator, MonitoringService, $routeParams, config) {
if (!config.monitoring.enabled) {
Navigator.home();
return;
}
$scope.config = config;
$scope.monitoringInfo = {};
$scope.monitoringStatus = 'loading';
MonitoringService.confirm($routeParams['mac'], $routeParams['token'])
.then(
function (response) {
// success
$scope.monitoringInfo = response.data;
$scope.monitoringStatus = 'confirmed';
},
function () {
// error
$scope.monitoringStatus = 'error';
}
);
$scope.goHome = function () {
Navigator.home();
};
$scope.goToUpdate = function () {
Navigator.updateNode();
};
});

7
app/scripts/directives/nodeForm.js
View file

@ -123,6 +123,10 @@ angular.module('ffffng')
return $scope.nodeForm && $scope.nodeForm[field].$invalid && submitted;
};
$scope.monitoringActive = function () {
return $scope.node.monitoring && monitoringConfirmed && $scope.node.email === initialEmail;
};
$scope.monitoringInitialConfirmationRequired = function () {
return $scope.node.monitoring
&& ($scope.action === 'create' || $scope.node.email !== initialEmail || !initialMonitoring);
@ -151,7 +155,8 @@ angular.module('ffffng')
}
$scope.error = null;
$scope.save(node).error(function (response, code) {
$scope.save(node).catch(function (response, code) {
// error
switch (code) {
case 409: // conflict
$scope.error = duplicateError[response.field];

2
app/scripts/directives/tokenForm.js
View file

@ -15,7 +15,7 @@ angular.module('ffffng')
$scope.error = null;
$scope.onSubmit(token)
.error(function (response, code) {
.catch(function (response, code) {
switch (code) {
case 404: // not found
$scope.error = 'Zum Token wurde kein passender Eintrag gefunden.';

13
app/scripts/services/monitoringService.js Normal file
View file

@ -0,0 +1,13 @@
'use strict';
angular.module('ffffng')
.service('MonitoringService', function ($http, $q) {
return {
'confirm': function (mac, token) {
if (!mac || !token) {
return $q.reject({});
}
return $http.put('/api/monitoring/confirm/' + mac + '?token=' + token);
}
};
});

6
app/styles/_variables.scss
View file

@ -179,9 +179,9 @@ $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%);
$state-danger-text: darken($brand-danger, 10%);
$state-danger-bg: lighten($brand-danger, 30%);
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 3%);
$state-success-text: darken($brand-success, 10%);
$state-success-bg: lighten($brand-success, 30%);
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%);
$state-success-text: darken($brand-success, 20%);
$state-success-bg: lighten($brand-success, 35%);
$state-success-border: darken(adjust-hue($state-success-bg, -10), 7%);
$state-info-text: darken($brand-info, 20%);
$state-info-bg: lighten($brand-info, 30%);
$state-info-border: darken(adjust-hue($state-info-bg, -10), 10%);

1
app/styles/main.scss
View file

@ -11,6 +11,7 @@
@import "views/_newNodeForm";
@import "views/_updateNodeForm";
@import "views/_deleteNodeForm";
@import "views/_confirmMonitoring";
@import "views/directives/_help";
@import "views/directives/_nodeForm";
@import "views/directives/_nodeSaved";

55
app/styles/views/_confirmMonitoring.scss Normal file
View file

@ -0,0 +1,55 @@
.confirm-monitoring {
@extend .jumbotron, .container;
.actions {
text-align: center;
margin-top: 30px;
}
.back-button {
@extend .btn, .btn-lg, .btn-info;
}
.summary {
@extend .well;
display: table;
margin: {
left: auto;
right: auto;
top: 30px;
bottom: 30px;
};
border: 3px dashed $gray;
.icon {
@extend .fa, .fa-heartbeat;
display: table-cell;
color: $brand-primary;
font-size: 64px;
}
.node {
@extend .dl-horizontal;
display: table-cell;
overflow: hidden;
font-family: monospace;
font-size: 24px;
dt {
width: 100px;
}
dd {
text-overflow: ellipsis;
margin-left: 120px;
}
}
}
}

28
app/styles/views/_deleteNodeForm.scss
View file

@ -10,7 +10,7 @@
}
.actions {
margin-bottom: 10px;
margin-top: 30px;
}
.token-hint {
@ -24,18 +24,32 @@
}
.summary {
.node {
@extend .well;
@extend .well;
border: 3px dashed $gray;
font-family: monospace;
font-size: 32px;
}
display: table;
margin: {
left: auto;
right: auto;
top: 30px;
bottom: 30px;
}
border: 3px dashed $gray;
font-family: monospace;
font-size: 32px;
.icon {
@extend .fa, .fa-trash;
display: table-cell;
padding-right: 18px;
}
.node {
display: table-cell;
}
}
.back-button {

33
app/styles/views/directives/_nodeForm.scss
View file

@ -55,26 +55,47 @@ f-node-form {
color: $brand-primary;
}
.monitoring-active-info {
@extend .alert-success;
}
.monitoring-confirmation-info {
@extend .alert, .alert-info;
@extend .alert-info;
}
.monitoring-confirmation-pending-info {
@extend .alert, .alert-warning;
@extend .alert-warning;
}
.monitoring-confirmation-info, .monitoring-confirmation-pending-info {
.monitoring-active-info,
.monitoring-confirmation-info,
.monitoring-confirmation-pending-info {
@extend .alert;
display: table;
.icon, .message {
display: table-cell;
}
.icon {
@extend .fa, .fa-exclamation-triangle;
@extend .fa;
font-size: 24px;
padding-right: 15px;
}
}
.icon, .message {
display: table-cell;
.monitoring-active-info {
.icon {
@extend .fa-heartbeat;
}
}
.monitoring-confirmation-info,
.monitoring-confirmation-pending-info {
.icon {
@extend .fa-exclamation-triangle;
}
}

82
app/views/confirmMonitoring.html Normal file
View file

@ -0,0 +1,82 @@
<div class="confirm-monitoring" ng-switch="monitoringStatus">
<h2 ng-switch-when="loading">Einen Moment bitte...</h2>
<div ng-switch-when="confirmed">
<h2>Der Versand von Status-E-Mails ist nun aktiv!</h2>
<p>
Deine E-Mail-Adresse konnte erfolgreich bestätigt werden. Sollte Dein Knoten nun längere Zeit offline sein,
so wirst Du ab sofort per E-Mail darüber benachrichtigt.
</p>
<div class="summary">
<i class="icon"></i>
<dl class="node">
<dt>Name</dt>
<dd>{{monitoringInfo.hostname}}</dd>
<dt>MAC</dt>
<dd>{{monitoringInfo.mac}}</dd>
<dt><i class="fa fa-envelope"></i></dt>
<dd>{{monitoringInfo.email}}</dd>
</dl>
</div>
<p>
<em>
Möchtest Du keine Status-E-Mails zu Deinem Knoten mehr erhalten, so kannst Du den Versand
jederzeit unter <a href="javascript:" ng-click="goToUpdate()">„Knotendaten ändern“</a> abschalten.
Gib dazu dort Dein Token ein und scrolle dann ganz nach unten. Bitte habe Verständnis dafür, dass
das An- und Abschalten des Versands für jeden Deiner Knoten einzeln erfolgt.
</em>
</p>
<p>
Bei Fragen wende Dich gerne an
<a href="mailto:{{ config.community.contactEmail }}">{{ config.community.contactEmail }}</a>.
</p>
<div class="actions">
<button class="back-button" ng-click="goHome()"><i class="fa fa-reply"></i> Zurück zum Anfang</button>
</div>
</div>
<div ng-switch-when="error">
<h2>Die Bestätigung Deiner E-Mail-Adresse ist fehlgeschlagen</h2>
<div class="alert alert-danger" role="alert">
<p><strong>Dies kann mehrere Gründe haben:</strong></p>
<ul>
<li>Du hast zwischenzeitlich die E-Mail-Adresse für den Knoten geändert.</li>
<li>Du hast den Link nicht vollständig aus der E-Mail kopiert.</li>
<li>Es ist ein interner Fehler aufgetreten.</li>
<li>Der Versand von Status-E-Mail ist bereits aktiv.</li>
</ul>
</div>
<p>
Um zu prüfen, ob der Versand bereits aktiv ist, gehe bitte auf
<a href="javascript:" ng-click="goToUpdate()">„Knotendaten ändern“</a>, gib dort Dein Token ein
und scrolle dann ganz nach unten. Mit einem Klick auf „Daten ändern“ kannst Du dir bei Bedarf
einen neuen Link zuschicken lassen.
</p>
<p>
Solltest du Deine E-Mail-Adresse zwischenzeitlich geändert haben, prüfe bitte ob Du
über die neue E-Mail-Adresse bereits eine E-Mail mit Bestätigungs-Link erhalten hast.
</p>
<p>
<strong>
Sollte das Problem so nicht zu beheben sein, wende Dich gerne an
<a href="mailto:{{ config.community.contactEmail }}">{{ config.community.contactEmail }}</a>.
</strong>
</p>
<div class="actions">
<button class="back-button" ng-click="goHome()"><i class="fa fa-reply"></i> Zurück zum Anfang</button>
</div>
</div>
</div>

15
app/views/deleteNodeForm.html
View file

@ -35,16 +35,12 @@
</p>
<div class="summary">
<i class="icon"></i>
<span class="node">
<i class="fa fa-trash"></i>
{{hostname}}
</span>
</div>
<div class="actions">
<button class="back-button" ng-click="goHome()"><i class="fa fa-reply"></i> Zurück zum Anfang</button>
</div>
<p>
<em>
Hinweis: Nach dem Löschen kann der Knoten ggf. weiterhin in der Knotenkarte angezeigt werden. Dies
@ -53,4 +49,13 @@
(Konfigurationsoberfläche des Routers) hinterlegten.
</em>
</p>
<p>
Bei Fragen wende Dich gerne an
<a href="mailto:{{ config.community.contactEmail }}">{{ config.community.contactEmail }}</a>.
</p>
<div class="actions">
<button class="back-button" ng-click="goHome()"><i class="fa fa-reply"></i> Zurück zum Anfang</button>
</div>
</div>

18
app/views/directives/nodeForm.html
View file

@ -83,7 +83,7 @@
</div>
</div>
</div>
<div class="monitoring-data">
<div class="monitoring-data" ng-if="config.monitoring.enabled">
<h3>Möchtest Du Status-E-Mails bekommen?</h3>
<i class="monitoring-icon"></i>
<p class="help-block">
@ -98,6 +98,20 @@
</label>
</div>
</div>
<div class="col-md-12" ng-if="monitoringActive()">
<div class="monitoring-active-info" role="alert">
<i class="icon"></i>
<div class="message">
<p>
Der Versand von Status-E-Mails ist für Deinen Knoten aktiv. Möchtest Du keine Status-E-Mails
mehr erhalten, entferne einfach das Häkchen oberhalb dieser Box und klicke unten auf „Daten ändern“.
</p>
<p ng-if="node.email">
<i class="fa fa-envelope-o"></i> <strong>{{node.email}}</strong>
</p>
</div>
</div>
</div>
<div class="col-md-12" ng-if="monitoringInitialConfirmationRequired()">
<div class="monitoring-confirmation-info" role="alert">
<i class="icon"></i>
@ -128,7 +142,7 @@
<p>
Zur Bestätigung Deiner E-Mail-Adresse schicken wir Dir nach einem Klick auf „Daten ändern“ unten
nochmal eine E-Mail mit einem Bestätiguns-Link. Möchtest Du keine Status-E-Mails erhalten,
entferne einfach das Häkchen oberhalb dieser Box.
entferne einfach das Häkchen oberhalb dieser Box und klicke dann unten auf „Daten ändern“.
</p>
<p>
Die Inbetriebnahme Deines Knotens kannst Du selbstverständlich unabhängig von der Bestätigung

1
app/views/directives/nodeSaved.html
View file

@ -10,6 +10,7 @@
{{token}}
</span>
</div>
<div class="actions">
<button class="back-button" ng-click="goHome()"><i class="fa fa-reply"></i> Zurück zum Anfang</button>
</div>