German translation.

15 files changed, 540 insertions, 67 deletions

diff --git a/handler.go b/handler.go
index c99138e..f84dda0 100644
--- a/handler.go
+++ b/handler.go
@@ -16,18 +16,7 @@ func IndexHandler(w http.ResponseWriter, r *http.Request) {
 	flash.Success = session.Flashes("success")
 	session.Save(r, w)
 
-	/*
-		index := mainTempl.Lookup("index.html")
-
-		err = index.ExecuteTemplate(w, "index.html", flash)
-		if err != nil {
-			log.Println(err)
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
-	*/
-
-	err = ExecTemplate("index.html", w, flash)
+	err = ExecTemplate("index", w, r, flash)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -47,7 +36,7 @@ func RegisterHandler(w http.ResponseWriter, r *http.Request) {
 	flash.Success = session.Flashes("success")
 	session.Save(r, w)
 
-	err = ExecTemplate("register.html", w, flash)
+	err = ExecTemplate("register", w, r, flash)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -115,7 +104,7 @@ func AboutHandler(w http.ResponseWriter, r *http.Request) {
 	flash.Success = session.Flashes("success")
 	session.Save(r, w)
 
-	err = ExecTemplate("about.html", w, flash)
+	err = ExecTemplate("about", w, r, flash)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -135,7 +124,7 @@ func ServerHandler(w http.ResponseWriter, r *http.Request) {
 	flash.Success = session.Flashes("success")
 	session.Save(r, w)
 
-	err = ExecTemplate("server.html", w, flash)
+	err = ExecTemplate("server", w, r, flash)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -155,7 +144,7 @@ func HowtoHandler(w http.ResponseWriter, r *http.Request) {
 	flash.Success = session.Flashes("success")
 	session.Save(r, w)
 
-	err = ExecTemplate("howto.html", w, flash)
+	err = ExecTemplate("howto", w, r, flash)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -175,7 +164,7 @@ func UserHandler(w http.ResponseWriter, r *http.Request) {
 	flash.Success = session.Flashes("success")
 	session.Save(r, w)
 
-	err = ExecTemplate("user.html", w, flash)
+	err = ExecTemplate("user", w, r, flash)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -195,7 +184,7 @@ func PasswordHandler(w http.ResponseWriter, r *http.Request) {
 	flash.Success = session.Flashes("success")
 	session.Save(r, w)
 
-	err = ExecTemplate("password.html", w, flash)
+	err = ExecTemplate("password", w, r, flash)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -246,3 +235,22 @@ func ChangePasswordHandler(w http.ResponseWriter, r *http.Request) {
 	session.Save(r, w)
 	http.Redirect(w, r, "/user", 302)
 }
+
+func ChangeLocaleHandler(w http.ResponseWriter, r *http.Request) {
+	err := r.ParseForm()
+	if err != nil {
+		log.Panic(err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	locale := r.URL.Query().Get("to")
+
+	if len(locale) == 0 {
+		http.Redirect(w, r, "/", 302)
+		return
+	}
+	cookie := http.Cookie{Name: "lang", Value: locale}
+	http.SetCookie(w, &cookie)
+	http.Redirect(w, r, "/", 302)
+}
diff --git a/main.go b/main.go
index c3222c6..5104d6e 100644
--- a/main.go
+++ b/main.go
@@ -42,6 +42,7 @@ func main() {
 	r.HandleFunc("/password", PasswordHandler)
 	r.HandleFunc("/changePassword", ChangePasswordHandler).Methods("POST")
 	r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("./static"))))
+	r.HandleFunc("/locale", ChangeLocaleHandler)
 
 	http.Handle("/", r)
 
diff --git a/server.go b/server.go
index dc95c51..5b29e50 100644
--- a/server.go
+++ b/server.go
@@ -47,7 +47,9 @@ func CreateNewEntry(email, password string) error {
 	return nil
 }
 
-func ExecTemplate(template string, w http.ResponseWriter, flash Flash) error {
+func ExecTemplate(template string, w http.ResponseWriter, r *http.Request, flash Flash) error {
+	l := GetLanguage(r)
+	template = template + l + ".html"
 	index := mainTempl.Lookup(template)
 
 	err := index.ExecuteTemplate(w, template, flash)
diff --git a/utilities.go b/utilities.go
index 60423dc..4bf0b92 100644
--- a/utilities.go
+++ b/utilities.go
@@ -4,6 +4,9 @@ import (
 	"crypto/md5"
 	"fmt"
 	"io"
+	"log"
+	"net/http"
+	"strings"
 )
 
 // Hashs and returns a string (md5)
@@ -26,3 +29,27 @@ func CompareStrings(strs ...string) bool {
 	}
 	return true
 }
+
+func GetLanguage(r *http.Request) string {
+	c, err := r.Cookie("lang")
+	if err != nil {
+		log.Println("Cookie: lang", err)
+	} else {
+		if c.Value != "" {
+			if c.Value == "de" {
+				return "_" + c.Value
+			} else {
+				return ""
+			}
+		}
+	}
+	if len(r.Header["Accept-Language"]) == 0 {
+		return ""
+	}
+	lang := r.Header["Accept-Language"][0]
+	l := strings.TrimSpace(strings.Split(lang, ",")[0])
+	if l == "de" {
+		return "_" + l
+	}
+	return ""
+}
diff --git a/views/about_de.html b/views/about_de.html
new file mode 100644
index 0000000..bc7e970
--- /dev/null
+++ b/views/about_de.html
@@ -0,0 +1,54 @@
+{{template "header.html"}}
+{{template "navbar_de.html"}}
+{{template "alert.html" .}}
+
+<!--div class="jumbotron">
+	<div class="container">
+		<h1>About</h1>
+		<p>Everything about Libremail</p>
+	</div>
+</div-->
+
+<div class="container">
+	<div class="row">
+	<div class="col-md-12">
+	<h1>Über Libremail</h1>
+	<br>
+		<div class="well well-lg">
+			<h2 id="what_are_we_doing">Was tun wir?</h2>
+			<p>Wir hosten Ihre E-Mails, so wie GMail oder Yahoo mail. Aber ohne Werbung und ohne Ihre Daten zu verkaufen.</p>
+			<br>
+			<h2 id="why_libremail">Wieso Libremail?</h2>
+			<p>Libremail ist jung, frei (ohne kommerzielle Absicht) und Open Source. Wenn Sie uns nicht vertrauen, setzen Sie sich es selber auf!
+			<br>
+			Außerdem legen wir Wert auf Sicherheit. Lesen Sie <a href="#secure">hier</a> mehr.</p>
+			<br>
+			<h2 id="by_whom">Von wem?</h2>
+			<p>Libremail liegt auf einem sicherem Server und wird von <a href="https://www.iamfabulous.de/" title="iamfabulous.de" target="_blank">Maximilian Möhring <span class="fa fa-external-link"></span></a> betrieben.
+			</p>
+			<br>
+			<h2 id="secure">Wie sicher ist es?</h2>
+			<p>Unser IMAP Login Server erzwingt TLS 1.0, 1.1 oder 1.2 mit Perfect Forward Secrecy.
+			<br>Falls Sie interessiert sind, nur diese SSL ciphers sind zugelassen: <code>ECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:ECDH+3DES:DH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!MD5:!DSS</code>
+			<br>In Bezug auf eingehende E-Mails, das erzwingen von absoluter Sicherheit könnte unter Umständen einen entfernen Klienten daran hindern E-Mails zuzustellen. Deswegen überlauben wir für unseren SMTP Server immer noch das SSLv3 Protokoll. Auf der anderen Seite, SMTP war sowieso nie durch POODLE betroffen. 
+			<br>
+			<br>
+			<strong>Beachtung:</strong> Weil Libremail auf unserem Server liegt können wir keine wahre Ende-zu-Ende Verschlüsselung erzwingen. Wir empfehlen aber trotzdem den Gebrauch von GnuPG.
+			</p>
+			<br>
+			<h2 id="why">Warum? Wie verdient Ihr Geld?</h2>
+			<p>Weil es Spaß macht und es nützlich ist. Libremail ist nicht dafür gebaut worden um Geld zu machen.
+			</p>
+			<br>
+			<h2 id="sign_up">Wie erstelle ich eine neue Adresse?</h2>
+			<p>Schauen Sie <a href="/howto#create_new" title="How to sign up">hier</a> nach.</p>
+			<br>
+			<h2 id="warranty">Garantie</h2>
+			<p>
+				ES WIRD KEINERLEI GARANTIE IN IRGENDEINER ART UND WEISE GEWÄHRLEISTET, SEI ES ERREICHBARKEIT, BACKUPS ODER MISSBRAUCH. JEDER NUTZER IST FÜR SEIN EIGENES VERHALTEN VERANTWORTLICH.
+			</p>
+		</div>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/header.html b/views/header.html
index b41727d..c461e82 100644
--- a/views/header.html
+++ b/views/header.html
@@ -14,8 +14,5 @@
     <link rel='stylesheet' type='text/css' href='/static/css/style.css'>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <link rel='shortcut icon' type='image/png' href='/static/img/favicon.ico'>
-    <noscript>
-	<style>.navbar{margin-bottom:0;}</style>
-     </noscript>
   </head>
   <body>
diff --git a/views/howto_de.html b/views/howto_de.html
new file mode 100644
index 0000000..3f1ae53
--- /dev/null
+++ b/views/howto_de.html
@@ -0,0 +1,43 @@
+{{template "header.html"}}
+{{template "navbar_de.html"}}
+{{template "alert.html" .}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>How to</h1>
+			<div class="well well-lg">
+				<h2 id="create_new">Neue Adresse</h2>
+				<p>Um eine neue E-Mail Adresse auszufüllen folgen Sie <a href="/register" title="Sign up">diesem</a> link.
+				<br>
+				Sie können <strong>email.iamfabulous.de</strong> oder <strong>user.iamfabulous.de</strong> als Basis nehmen, zum Beispiel 'post@email.iamfabulous.de' oder 'tidyupmyroom@user.iamfabulous.de' sind gültige Einträge. 
+				<br>
+				Probieren Sie es aus. Wenn die Adresse schon vergeben ist, wird Ihnen eine Fehlermeldung mit mehr Informationen gezeigt.
+				</p>
+				<br>
+				<h2 id="own_domain">Eigene Domain</h2>
+				<p>Es ist möglich Libremail auch mit anderen Domains zu verwenden. Wenn Sie eine besitzen, dann können wir das E-Mail hosting für sie übernehmen.
+				<br>
+				Verlangt wird ein gültiger MX Eintrag in Ihrem DNS. MX bedeutet 'mail exchange' und ist ein spezieller Eintrag welcher auf den verantwortlichen Mail Server zeigt. Der korrekte Eintrag lautet <strong>mx.iamfabulous.de</strong>.
+				</p>
+				<br>
+				<h2 id="login">Login</h2>
+				<p>Am einfachsten ist es, wenn Sie unser Webmail benutzen. Sie finden es <a href="https://webmail.iamfabulous.de/" title="Webmail" target="_blank">hier <span class="fa fa-external-link"></span></a>.
+				<br>
+				Benutzen Sie ihre volle E-Mail Adresse und ihr Passwort als Login.
+				<br>
+				<br>
+				Wenn Sie Ihren eigenen Klienten (Smartphone oder Thunderbird etc.) benutzen wollen, können Sie <a href="/server" title="Server">hier</a> für Details zur Verbindung sehen.
+				</p>
+				<br>
+				<h2 id="change_password">Passwort ändern</h2>
+				<p>
+				Sie können einfach und bequem Ihr Passwort durch diese Webseite ändern. Sie benötigen dafür noch ihr altes Passwort.
+				<br>
+				Folgen Sie dafür einfach <a href="/password" title="Change Password">diesem <span class="fa fa-lock"></span></a> Link.
+				</p>
+			</div>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/index_de.html b/views/index_de.html
new file mode 100644
index 0000000..810bae4
--- /dev/null
+++ b/views/index_de.html
@@ -0,0 +1,51 @@
+{{template "header.html"}}
+{{template "navbar_de.html"}}
+{{template "alert.html" .}}
+
+<div class="jumbotron">
+	<div class="container">
+		<h1>Libremail</h1>
+		<p>Genervt from Spam? Sie brauchen nur ein E-Mail Adresse? Oder Sie besitzen eine eigene Domain und möchten darüber E-Mails versenden?
+			<strong>Sie sind genau richtig!</strong>
+			<br>Komplett kostenlos und werbefrei!</p>
+		<p><a class="btn btn-primary btn-lg btn-raised" href="/about" role="button">Lese mehr &raquo;</a></p>
+	</div>
+</div>
+<div class="container">
+	<div class="row">
+		<div class="col-md-4">
+			<h2>Schnell & Einfach</h2>
+			<p>Nur 2 Klicke nötig<br>
+				Wähle Sie eine freie Adresse und registrieren Sie sich.</p>
+			<p><a class="btn btn-primary btn-raised" href="/register" role="button">Registrieren &raquo;</a></p>
+		</div>
+		<div class="col-md-4">
+			<h2>Sicher</h2>
+			<p>Wir nutzen moderne Verschlüsselungsalgorithmen und erzwingen eine sichere Kommunikation.</p>
+			<p><a class="btn btn-primary btn-raised" href="/about" role="button">Über uns &raquo;</a></p>
+		</div>
+		<div class="col-md-4">
+			<h2>Features</h2>
+			<p>Alles was man braucht, IMAP, POP3 und Webmail inklusive.</p>
+			<p><a class="btn btn-primary btn-raised" href="/server" role="button">Features &raquo;</a></p>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-4">
+			<h2>Eigene Domain</h2>
+			<p>Sie besitzen eine Domain? Wir kümmerns uns gerne um Ihre E-Mail setup. Setzen Sie ihr DNS und bekommen Sie alles auf einmal.</p>
+			<p><a class="btn btn-primary btn-raised" href="/howto#own_domain" role="button">Lese wie es geht &raquo;</a></p>
+		</div>
+		<div class="col-md-4">
+			<h2>Open Source</h2>
+			<p>Wir nutzen nur freie und Open Source software. Sie können auch alles selber hosten.</p>
+			<p><a class="btn btn-primary btn-raised" href="/about" role="button">Lies über uns &raquo;</a></p>
+		</div>
+		<div class="col-md-4">
+			<h2>Lese mehr...</h2>
+			<p>Folgen Sie meinem Blog und finden Sie mehr Projekte, an denen ich arbeite.</p>
+			<p><a class="btn btn-primary btn-raised" href="https://www.iamfabulous.de" role="button">Folge mir &raquo;</a></p>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/login.html b/views/login.html
deleted file mode 100644
index ee22eca..0000000
--- a/views/login.html
+++ /dev/null
@@ -1,45 +0,0 @@
-{{template "header.html"}}
-{{template "navbar.html"}}
-{{template "alert.html" .}}
-
-
-<div class="container">
-	<div class="row">
-<form class="form-horizontal" method='post' action='/login'>
-	<fieldset>
-
-		<!-- Form Name -->
-		<div class="text-center">
-		<legend>Login!</legend>
-		</div>
-
-		<!-- Text input-->
-		<div class="form-group">
-			<label class="col-md-4 control-label" for="Name">Name:</label>  
-			<div class="col-md-4">
-				<input id="Name" name="Name" placeholder="Your Name" class="form-control input-md" required="" type="text">
-			</div>
-		</div>
-
-		<!-- Text input-->
-		<div class="form-group">
-			<label class="col-md-4 control-label" for="Password">Password:</label>  
-			<div class="col-md-4">
-				<input id="Password" name="Password" placeholder="Your Password" class="form-control input-md" required="" type="password">
-			</div>
-		</div>
-
-		<!-- Button -->
-		<div class="form-group">
-			<label class="col-md-4 control-label" for="submit"></label>
-			<div class="col-md-4">
-				<button class="btn btn-primary btn-raised">Submit</button>
-			</div>
-		</div>
-
-	</fieldset>
-</form>
-
-	</div>
-</div>
-{{template "footer.html"}}
diff --git a/views/navbar.html b/views/navbar.html
index a4a595d..78658d4 100644
--- a/views/navbar.html
+++ b/views/navbar.html
@@ -26,6 +26,9 @@
 			</ul>
 			<ul class="nav navbar-nav navbar-right">
 				<li>
+					<a class="" href="/locale?to=de" title="English"><span class="fa fa-language"></span> en</a>
+				</li>
+				<li>
 					<a class="" href="https://webmail.iamfabulous.de/" title="Webmail"><span class="glyphicon glyphicon-envelope"></span> Webmail</a>
 				</li>
 				<li class="dropdown">
diff --git a/views/navbar_de.html b/views/navbar_de.html
new file mode 100644
index 0000000..da8f815
--- /dev/null
+++ b/views/navbar_de.html
@@ -0,0 +1,45 @@
+<nav class='navbar navbar-default navbar-custom shadow-z-2' role='navigation'>
+	<div class='container'>
+		<div class='navbar-header'>
+			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false" aria-controls="navbar">
+				<span class="sr-only">Toggle navigation</span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</button>
+			<a class='navbar-brand' href='/'><span class='glyphicon glyphicon-home'></span> Home</a>
+		</div>
+		<div class="collapse navbar-collapse" id="navbarCollapse">
+			<ul class="nav navbar-nav navbar-left">
+				<li>
+					<a class="" href="/about" title="Über uns"><span class="glyphicon glyphicon-file"></span> Über uns</a>
+				</li>
+				<li>
+					<a class="" href="/howto" title="How to"><span class="glyphicon glyphicon-star"></span> How to</a>
+				</li>
+				<li>
+					<a class="" href="/server" title="Server"><span class="glyphicon glyphicon-cog"></span> Server</a>
+				</li>
+				<li>
+					<a class="" href="https://www.iamfabulous.de/contact/" title="Contact" target="_blank"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a>
+				</li>
+			</ul>
+			<ul class="nav navbar-nav navbar-right">
+				<li>
+					<a class="" href="/locale?to=en" title="German"><span class="fa fa-language"></span> de</a>
+				</li>
+				<li>
+					<a class="" href="https://webmail.iamfabulous.de/" title="Webmail"><span class="glyphicon glyphicon-envelope"></span> Webmail</a>
+				</li>
+				<li class="dropdown">
+					<a class="" href="/register" title="Nutzer" data-target="#" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Nutzer<span class="caret"></span></a>
+					<ul class="dropdown-menu" role="menu">
+						<li><a class="" href="/register" title="Sign Up"><span class="fa fa-user-plus"></span> Neu erstellen</a></li>
+						<li><a class="" href="/password" title="Change Password"><span class="fa fa-lock"></span> Passwort ändern</a></li>
+						<li></li>
+					</ul>
+				</li>
+			</ul>
+		</div>
+	</div>
+</nav>
diff --git a/views/password_de.html b/views/password_de.html
new file mode 100644
index 0000000..49457a0
--- /dev/null
+++ b/views/password_de.html
@@ -0,0 +1,76 @@
+{{template "header.html"}}
+{{template "navbar_de.html"}}
+{{template "alert.html" .}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<div class="text-center">
+				<h1>Ändern Sie ihr Passwort!</h1>
+			</div>
+		</div>
+	</div>
+</div>
+<br>
+ <div class="jumbotron">
+<div class="container">
+	<div class="row">
+<form class="form-horizontal" method='post' action='/changePassword'>
+	<fieldset>
+
+		<!-- Form Name -->
+		<!--div class="text-center">
+			<legend>
+		<h1 class="form-signin-heading">Sign up</h1>
+				</legend>
+		</div-->
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="Email">Email:</label>  
+			<div class="col-md-4">
+				<input id="Email" name="Email" placeholder="Ihre E-Mail Adresse." class="form-control input-md" required="" type="text">
+			</div>
+		</div>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="NewPassword">Neues Password:</label>  
+			<div class="col-md-4">
+				<input id="NewPassword" name="NewPassword" placeholder="Ihr neues Passwort." class="form-control input-md" required="" type="password">
+			</div>
+		</div>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="ConfirmPassword">Bestätige Password:</label>  
+			<div class="col-md-4">
+				<input id="ConfirmPassword" name="ConfirmPassword" placeholder="Wiederholen Sie ihr neues Passwort." class="form-control input-md" required="" type="password">
+			</div>
+		</div>
+
+		<br>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="Password">Aktuelles Password:</label>  
+			<div class="col-md-4">
+				<input id="Password" name="Password" placeholder="Authentifizieren Sie sich." class="form-control input-md" required="" type="password">
+			</div>
+		</div>
+
+		<!-- Button -->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="submit"></label>
+			<div class="col-md-4">
+				<button class="btn btn-primary btn-raised btn-lg btn-block">Abschicken &raquo;</button>
+			</div>
+		</div>
+
+	</fieldset>
+</form>
+
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/register_de.html b/views/register_de.html
new file mode 100644
index 0000000..d621067
--- /dev/null
+++ b/views/register_de.html
@@ -0,0 +1,88 @@
+{{template "header.html"}}
+{{template "navbar_de.html"}}
+{{template "alert.html" .}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<div class="text-center">
+				<h1>Sie müssen sich nur registrieren!</h1>
+			</div>
+		</div>
+	</div>
+</div>
+<br>
+ <div class="jumbotron">
+<div class="container">
+	<div class="row">
+<form class="form-horizontal" method='post' action='/create'>
+	<fieldset>
+
+		<!-- Form Name -->
+		<!--div class="text-center">
+			<legend>
+		<h1 class="form-signin-heading">Sign up</h1>
+				</legend>
+		</div-->
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="Email">Email:</label>  
+			<div class="col-md-4">
+				<input id="Email" name="Email" placeholder="Ihre neue E-Mail Adresse." class="form-control input-md" required="" type="text">
+			</div>
+		</div>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="ConfirmEmail">Bestätige Email:</label>  
+			<div class="col-md-4">
+				<input id="ConfirmEmail" name="ConfirmEmail" placeholder="Bitte wiederholen Sie ihre E-Mail Adresse." class="form-control input-md" required="" type="text">
+			</div>
+		</div>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="Password">Passwort:</label>  
+			<div class="col-md-4">
+				<input id="Password" name="Password" placeholder="Ihr Passwort." class="form-control input-md" required="" type="password">
+			</div>
+		</div>
+
+		<!-- Text input-->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="ConfirmPassword">Bestätige Password:</label>  
+			<div class="col-md-4">
+				<input id="ConfirmPassword" name="ConfirmPassword" placeholder="Bitte wiederholen Sie ihr Passwort." class="form-control input-md" required="" type="password">
+			</div>
+		</div>
+
+		<!-- Button -->
+		<div class="form-group">
+			<label class="col-md-4 control-label" for="submit"></label>
+			<div class="col-md-4">
+				<button class="btn btn-primary btn-raised btn-lg btn-block">Abschicken &raquo;</button>
+			</div>
+		</div>
+
+	</fieldset>
+</form>
+
+		</div>
+	</div>
+</div>
+<br>
+<div class="container">
+	<div class="row">
+		<div class="col-md-6">
+			<h2>Ihr Passwort</h2>
+			<p>Wir speichern Ihr Passwort nicht im Klartext.
+			<br>Es ist nötig um Ihre E-Mails abzurufen. Bitte wählen Sie ein möglichst starkes Passwort aus.</p>
+		</div>
+		<div class="col-md-6">
+			<h2>Nach dem Erstellen</h2>
+			<p>Sie könne sich mit unserem Webmail Interface einloggen oder Ihr Telephon verbinden.</p>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/server_de.html b/views/server_de.html
new file mode 100644
index 0000000..f57a5ef
--- /dev/null
+++ b/views/server_de.html
@@ -0,0 +1,80 @@
+{{template "header.html"}}
+{{template "navbar_de.html"}}
+{{template "alert.html" .}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>Server Details</h1>
+			<div class="well well-lg">
+				<p>Alles was Sie wissen müssen um Libremail zu benutzen.</p>
+				<ul class="list-unstyled">
+					<li>
+						<h2>Webmail</h2>
+						<p>Nutzen Sie ihren Browser um ihre E-Mails zu lesen. Unser Webmail finden sie unter <a href="https://webmail.iamfabulous.de/" title="Webmail">diesem Link <span class="fa fa-external-link-square"></a>. 
+						<br>
+						<strong>Loggen Sie sich mit Ihrer kompletten E-Mail Adresse und ihrem Passwort ein.</strong>
+						<br>
+						Das TLS Zertifikat ist auf 'webmail.iamfabulous.de' signiert.
+						<br>
+						<br>
+						<strong>Bitte beachten Sie:</strong> Leider unterstützt Roundcube noch keine GPG Verschlüsselung.</p>
+					</li>
+					<li>
+						<h2>SMTP</h2>
+						<p>Wir benutzen Postfix als unseren SMTP Server um E-Mails zu versenden oder zu empfangen.
+						<br>
+						Das TLS Zertifikat ist auf 'mx.iamfabulous.de' signiert.
+						</p>
+						<p><strong>Ports:</strong></p>
+						<ul>
+							<li>
+								25 <strong>STARTTLS</strong>
+							</li>
+							<li>
+								465 <strong>SMTPS</strong>
+							</li>
+							<li>
+								587 <strong>STARTTLS</strong>
+							</li>
+						</ul>
+					</li>
+					<li>
+						<h2>IMAP</h2>
+						<p>IMAP wird benutzt um Ihre E-Mails auf dem Server zu verwalten. So gut wie alle Klienten (zum Beispiel Ihr Smartphone oder Thunderbird) sprechen IMAP. Bei uns ist Dovecot dafür verantwortlich das alles reibungslos klappt.
+						<br>
+						Das TLS Zertifikat ist auf 'mx.iamfabulous.de' signiert.
+						</p>
+						<p><strong>Ports:</strong></p>
+						<ul>
+							<li>
+								143 <strong>TLS</strong>
+							</li>
+							<li>
+								993 <strong>TLS</strong>
+							</li>
+						</ul>
+					</li>
+					<li>
+						<h2>POP3</h2>
+						<p>Mit POP3 werden die E-Mails von dem Server auf Ihren Computer geladen. POP3 stellt eine (veraltete) Alternative zu IMAP dar. Auch dafür ist Dovecot verantwortlich.
+						<br>
+						Das TLS Zertifikat ist auf 'mx.iamfabulous.de' signiert.
+						</p>
+						<p><strong>Ports:</strong></p>
+						<ul>
+							<li>
+								110 <strong>TLS</strong>
+							</li>
+							<li>
+								995 <strong>TLS</strong>
+							</li>
+						</ul>
+					</li>
+				</ul>
+
+			</div>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/user_de.html b/views/user_de.html
new file mode 100644
index 0000000..fb4382f
--- /dev/null
+++ b/views/user_de.html
@@ -0,0 +1,43 @@
+{{template "header.html"}}
+{{template "navbar_de.html"}}
+{{template "alert.html" .}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>User</h1>
+			<div class="well well-lg">
+				<h2 id="change_password">Change Password</h2>
+				<p>
+					You can change your password here.
+					<br>
+					<a class="btn btn-primary btn-raised" href="/password" role="button">Change Password &raquo;</a>
+				</p>
+				<br>
+				<h2 id="sign_up">Create new adress</h2>
+				<p>
+					Looking for a new adress? Click here.
+					<br>
+					<a class="btn btn-primary btn-raised" href="/register" role="button">Create New Account&raquo;</a>
+				</p>
+				<br>
+				<h2 id="login">Login</h2>
+				<p>The easiest way is to use our webmail interface. You can find it <a href="https://webmail.iamfabulous.de/" title="Webmail" target="_blank">here <span class="fa fa-external-link"></span></a>.
+				<br>
+				Log in with your full mail adress and your password.
+				<br>
+				<a class="btn btn-primary btn-raised" href="https://webmail.iamfabulous.de/" role="button">Webmail &raquo;</a>
+				<br>
+				<br>
+				If you want to use your own client, see <a href="/server" title="Server">here</a> for connection details.
+				</p>
+				<!--p>
+					See <a href="/howto#login" title="How to login">here</a> for more details.
+					<br>
+					<a class="btn btn-primary btn-raised" href="/howto#login" role="button">Login &raquo;</a>
+				</p-->
+			</div>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}