95 lines
5.8 KiB
HTML
95 lines
5.8 KiB
HTML
<form method="post" role="form" ng-submit="onSubmit(node)" ng-disabled="hasAnyError()" novalidate>
|
|
<div class="main-error" ng-if="error">{{error}}</div>
|
|
<fieldset>
|
|
<div class="node-data">
|
|
<h3>Knotendaten</h3>
|
|
<div class="hostname">
|
|
<label for="hostname">Knotenname</label>
|
|
<f-help text="Das ist der Name, der auch auf der Karte auftaucht."></f-help>
|
|
<input type="text" id="hostname" placeholder="z. B. Lisas-Freifunk" ng-model="node.hostname" />
|
|
<span class="feedback" ng-if="hasError('hostname')">
|
|
Knotennamen dürfen maximal 32 Zeichen lang sein und nur Klein- und Großbuchstaben, sowie Ziffern, - und _ enthalten.
|
|
</span>
|
|
</div>
|
|
<div class="key">
|
|
<label for="key">VPN-Schlüssel (bitte nur weglassen, wenn Du weisst, was Du tust)</label>
|
|
<f-help text="Dieser Schlüssel wird verwendet, um die Verbindung Deines Routers zu den Gateway-Servern abzusichern."></f-help>
|
|
<input type="text" id="key" placeholder="Dein 64-stelliger VPN-Schlüssel" ng-model="node.key" />
|
|
<span class="feedback" ng-if="hasError('key')">
|
|
Der angegebene VPN-Schlüssel ist ungültig.
|
|
</span>
|
|
</div>
|
|
<div class="mac">
|
|
<label for="mac">MAC-Adresse</label>
|
|
<f-help text="
|
|
Die MAC-Adresse (kurz "MAC") steht üblicherweise auf dem Aufkleber auf der Unterseite deines Routers.
|
|
Sie wird verwendet, um die Daten Deines Routers auf der Karte korrekt zuzuordnen.
|
|
"></f-help>
|
|
<input type="text" id="mac" placeholder="z. B. 12:34:56:78:9a:bc oder 123456789abc" ng-model="node.mac" />
|
|
<span class="feedback" ng-if="hasError('mac')">
|
|
Die angegebene MAC-Adresse ist ungültig.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="node-position">
|
|
<h3>Wo soll Dein Router stehen?</h3>
|
|
<div class="row">
|
|
<div class="coords col-md-4">
|
|
<p class="help-block">
|
|
Wenn Du möchtest, dass Dein Knoten an der richtigen Stelle auf der
|
|
<a href="{{ config.map.mapUrl }}" target="_blank">Knotenkarte</a> angezeigt wird,
|
|
kannst Du seine Koordinaten hier eintragen. Klicke einfach in der auf dieser Seite angezeigten Karte
|
|
an die Stelle, wo Dein Knoten erscheinen soll. Durch erneutes Klicken kannst Du die Position jederzeit
|
|
anpassen.
|
|
</p>
|
|
<input type="text" id="coords" class="{{node.coords ? 'has-coords' : ''}}" placeholder="z. B. {{config.coordsSelector.lat}} {{config.coordsSelector.lng}}" ng-model="node.coords" ng-blur="updateMap" />
|
|
<i class="reset-coords" ng-if="node.coords" ng-click="resetCoords()"></i>
|
|
<span class="feedback" ng-if="hasError('coords')">
|
|
Bitte gib die Koordinaten wie folgt an, Beispiel: {{config.coordsSelector.lat}} {{config.coordsSelector.lng}}
|
|
</span>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<leaflet class="map" center="center" layers="layers" markers="markers"></leaflet>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contact-data">
|
|
<h3>Wie können wir Dich erreichen?</h3>
|
|
<p class="help-block">
|
|
Deinen Namen und Deine E-Mail-Adresse verwenden wir ausschließlich, um bei Problemen mit Deinem Router oder
|
|
bei wichtigen Änderungen Kontakt zu Dir aufzunehmen. Bitte trage eine gültige E-Mail-Adresse ein, damit wir
|
|
Dich im Zweifel erreichen können. Deine persönlichen Daten sind selbstverständlich nicht öffentlich
|
|
einsehbar und werden von uns nicht weitergegeben oder anderweitig verwendet. Versprochen!
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="nickname">
|
|
<label for="nickname">Nickname / Name</label>
|
|
<input type="text" id="nickname" placeholder="z. B. Lisa" ng-model="node.nickname" />
|
|
<span class="feedback" ng-if="hasError('nickname')">
|
|
Nicknames dürfen maximal 64 Zeichen lang sein und nur Klein- und Großbuchstaben, sowie Ziffern, - und _ enthalten. Umlaute sind erlaubt.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="email">
|
|
<label for="email">E-Mail-Adresse</label>
|
|
<input type="email" id="email" placeholder="z. B. lisa@{{config.community.domain}}" ng-model="node.email" />
|
|
<span class="feedback" ng-if="hasError('email')">
|
|
Die angegebene E-Mail-Adresse ist ungültig.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<button class="save {{action}}" type="submit" ng-disabled="hasAnyError()" popover="I appeared on mouse enter!" popover-trigger="mouseenter" ng-switch="action">
|
|
<span ng-switch-when="create"><i class="fa fa-dot-circle-o"></i> Knoten anmelden</span>
|
|
<span ng-switch-when="update"><i class="fa fa-pencil"></i> Daten ändern</span>
|
|
</button>
|
|
<button class="cancel" type="reset" ng-click="cancel()">
|
|
<i class="fa fa-times"></i> Abbrechen
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|