Add html documentation. Change password handler.

10 files changed, 414 insertions, 69 deletions

diff --git a/views/about.html b/views/about.html
new file mode 100644
index 0000000..b3d77e3
--- /dev/null
+++ b/views/about.html
@@ -0,0 +1,71 @@
+{{template "header.html"}}
+{{template "navbar.html"}}
+
+{{if .Error}}
+<div class="container">
+	<div class="row">
+	{{range .Error}}
+		<p id="dd-alert-danger" class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible shadow-z-2" role="alert">
+			<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+{{if .Success}}
+<div class="container">
+	<div class="row">
+	{{range .Success}}
+		<p id="dd-alert-success" class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible shadow-z-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+
+<!--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>About Libremail</h1>
+	<br>
+		<div class="well well-lg">
+			<h2 id="what_are_we_doing">What are we doing?</h2>
+			<p>We host youre E-Mail, like GMail or Yahoo mail. But without ads or selling your data.</p>
+			<br>
+			<h2 id="why_libremail">Why Libremail?</h2>
+			<p>Because Libremail is young, free (without commercial aim) and open source. If you don't want it hosted, grab the source and run it on your own server.
+			<br>
+			Also we run a secure setup. Read <a href="#secure">here</a> more.</p>
+			<br>
+			<h2 id="by_whom">By whom?</h2>
+			<p>Libremail is hosted on a dedicated server and managed by <a href="https://www.iamfabulous.de/" title="iamfabulous.de" target="_blank">Maximilian Möhring <span class="fa fa-external-link"></span></a>.
+			</p>
+			<br>
+			<h2 id="secure">How secure is it?</h2>
+			<p>Our IMAP login server enforces TLS 1.0, 1.1 or 1.2 with Perfect Forward Secrecy.
+			<br>If you are interested, those SSL ciphers are allowed: <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>Since enforcing strict security may prevent a client from connecting we have to allow incomming mails with the SSLv3 protocoll. On the other hand, SMTP is not vulnerable to POODLE either way.
+			<br><strong>Please note:</strong> Since Libremail is hosted we can't provide end-to-end encryption, but we strongly suggest to use GPG.
+			</p>
+			<br>
+			<h2 id="why">Why? How do you make money?</h2>
+			<p>Because it's fun and useful. There is no plan to make money with Libremail.
+			</p>
+			<br>
+			<h2 id="sign_up">How sign up?</h2>
+			<p>Please look <a href="/howto#create_new" title="How to sign up">here</a>.
+			</p>
+		</div>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/admin.html b/views/admin.html
deleted file mode 100644
index 2dc9b20..0000000
--- a/views/admin.html
+++ /dev/null
@@ -1,61 +0,0 @@
-{{template "header.html"}}
-{{template "navbar.html"}}
-{{template "jobs_modal.html"}}
-
-<div class="container">
-	<div class="row">
-		<div class="pull-left">
-		<button id="btn-reload" class="btn btn-primary btn-raised"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
-		<button class="btn btn-primary btn-raised" data-toggle="modal" data-target="#jobs-modal"><span class="glyphicon glyphicon-plus-sign"></span> Add new host</button>
-		</div>
-		<div class="pull-right">
-			<form action="/logout" method="POST">
-			<button class="btn btn-danger btn-raised"><span class="glyphicon glyphicon-minus-sign"></span> Logout</button>
-			</form>
-		</div>
-		<table class="table table-striped table-hover table-responsive">
-			<thead>
-				<th>#</th>
-				<th>Host</th>
-				<th>Description</th>
-				<th>Status</th>
-				<th>Public</th>
-				<!--th>Status Code</th-->
-				<th>Last Update</th>
-				<th class="hide">Failure Reason</th>
-				<th>Delete</th>
-			</thead>
-			<tbody>
-{{range $index, $results := .Hosts}}
-		<tr class="{{.Class}}">
-				<td>{{add $index 1}}</td>
-				<td>{{.Host}} <a href="{{.Url}}" title="{{.Url}}" title="_blank"> <span class="fa fa-external-link-square"></span></a></td>
-				<td>{{.Description}}</td>
-				<td>{{.Status}}</td>
-				<td><span class="glyphicon glyphicon-{{if .Private}}remove{{else}}ok{{end}}"></span>
-				<!--td>{{.StatusCode}}</td-->
-				<td>{{.UpdatedAt}}</td>
-				<td class="hide">{{.Reason}}</td>
-				<!--td><span class="glyphicon glyphicon-pencil"></span></td-->
-				<td class="text-center"><a value="{{.Id}}" href="#" class="delete">&nbsp;<span class="fa fa-close"></span></a></td>
-			</tr>
-{{end}}
-			</tbody>
-		</table>
-		<p>Next run: <strong>{{.NextRun}}</strong></p>
-		<div class="spull-left">
-			<form action="/refresh" method="POST">
-			<button class="btn btn-primary btn-raised"><span class="glyphicon glyphicon-refresh"></span> Update all</button>
-			</form>
-		</div>
-		<hr>
-		<form class="form-horizontal" method="POST" action="/sticky/new">
-			<legend><h4>Information post</h4></legend>
-			<textarea class="form-control shadow-z-4" id="Sticky" name="Sticky" row="3" placeholder="Sticky post.">{{.Sticky}}</textarea>
-			<br>
-			<button class="btn btn-primary btn-raised" name="Action" value="add">Submit</button>
-			<button class="btn btn-danger btn-raised" name="Action" value="delete">Delete</button>
-		</form>
-	</div>
-</div>
-{{template "footer.html"}}
diff --git a/views/footer.html b/views/footer.html
index 0584450..4698b37 100644
--- a/views/footer.html
+++ b/views/footer.html
@@ -6,5 +6,12 @@
 
 <script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
 <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
+<!--script src='/static/js/jquery-1.11.2.min.js'></script>
+<script src='/static/js/bootstrap.min.js'></script-->
+<script src='/static/js/material.min.js'></script>
+<script src='/static/js/ripples.min.js'></script>
+<script>
+	$('.dropdown-toggle').dropdown()
+</script>
   </body>
 </html>
diff --git a/views/header.html b/views/header.html
index 8ff6885..b41727d 100644
--- a/views/header.html
+++ b/views/header.html
@@ -7,7 +7,11 @@
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>Libremail @ mail.iamfabulous.de</title>
     <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
-    <link rel='stylesheet' type='text/css' href='/static/css/main.css'>
+    <link rel='stylesheet' type='text/css' href='/static/css/bootstrap.min.css'>
+    <link rel='stylesheet' type='text/css' href='/static/css/material-wfont.min.css'>
+    <link rel='stylesheet' type='text/css' href='/static/css/material.min.css'>
+    <link rel='stylesheet' type='text/css' href='/static/css/ripples.min.css'>
+    <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>
diff --git a/views/howto.html b/views/howto.html
new file mode 100644
index 0000000..88a74b6
--- /dev/null
+++ b/views/howto.html
@@ -0,0 +1,59 @@
+{{template "header.html"}}
+{{template "navbar.html"}}
+
+{{if .Error}}
+<div class="container">
+	<div class="row">
+	{{range .Error}}
+		<p id="dd-alert-danger" class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible shadow-z-2" role="alert">
+			<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+{{if .Success}}
+<div class="container">
+	<div class="row">
+	{{range .Success}}
+		<p id="dd-alert-success" class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible shadow-z-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>How to</h1>
+			<div class="well well-lg">
+				<h2 id="create_new">Create new adress</h2>
+				<p>To create a new mail adress follow and fill out <a href="/register" title="Sign up">this</a> link.
+				<br>
+				You can use <strong>email.iamfabulous.de</strong> or <strong>user.iamfabulous.de</strong> as a base domain, so e.g. 'post@email.iamfabulous.de' or 'tidyupmyroom@user.iamfabulous.de' are valid entries.
+				<br>
+				Try it out, if the mail is already taken it will prompt you with more details.
+				</p>
+				<br>
+				<h2 id="own_domain">Use other domains</h2>
+				<p>It is possible to use other domains as well. If you own one, we can do the mail hosting for you.
+				<br>
+				The requirements are a valid MX entry in your DNS. MX means 'mail exchange' and is a special resource record which points the responsible mail server. The correct entry is <strong>mx.iamfabulous.de</strong>.
+				</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>
+				<br>
+				If you want to use your own client, see <a href="/server" title="Server">here</a> for connection details.
+				</p>
+			</div>
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/index.html b/views/index.html
index 4f070ac..ce34e05 100644
--- a/views/index.html
+++ b/views/index.html
@@ -48,19 +48,24 @@
 			<p><a class="btn btn-primary btn-raised" href="/about" role="button">About us &raquo;</a></p>
 		</div>
 		<div class="col-md-4">
-			<h2>Customizable</h2>
-			<p>Point your own domain to this server. Get everything out of the box.</p>
-			<p><a class="btn btn-primary btn-raised" href="/features" role="button">Features &raquo;</a></p>
+			<h2>Features</h2>
+			<p>Everything you need, IMAP, POP3 and Webmail (thanks to Roundcube) included.</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>Own Domain</h2>
+			<p>You own a domain? We will gladly do the mail hosting for you. Set up your DNS and get everything out of the box.</p>
+			<p><a class="btn btn-primary btn-raised" href="/howto#own_domain" role="button">Read how to &raquo;</a></p>
+		</div>
+		<div class="col-md-4">
 			<h2>Open Source</h2>
 			<p>We only use free and open source software. You can use it to host your own solution.</p>
 			<p><a class="btn btn-primary btn-raised" href="/about" role="button">Read the source &raquo;</a></p>
 		</div>
 		<div class="col-md-4">
-			<h2>Read more</h2>
+			<h2>Read more...</h2>
 			<p>Follow my blog to read more and find more projects I am working on.</p>
 			<p><a class="btn btn-primary btn-raised" href="https://www.iamfabulous.de" role="button">Follow me &raquo;</a></p>
 		</div>
diff --git a/views/navbar.html b/views/navbar.html
index 6f2cf8e..14dee80 100644
--- a/views/navbar.html
+++ b/views/navbar.html
@@ -15,7 +15,7 @@
 					<a class="" href="/about" title="About us"><span class="glyphicon glyphicon-file"></span> About</a>
 				</li>
 				<li>
-					<a class="" href="/features" title="Features"><span class="glyphicon glyphicon-star"></span> Features</a>
+					<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>
@@ -28,8 +28,13 @@
 				<li>
 					<a class="" href="https://webmail.iamfabulous.de/" title="Webmail"><span class="glyphicon glyphicon-envelope"></span> Webmail</a>
 				</li>
-				<li>
-					<a class="" href="/register" title="Sign up"><span class="glyphicon glyphicon-user"></span> Sign up</a>
+				<li class="dropdown">
+					<a class="" href="/register" title="Sign Up" data-target="#" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>
+					<ul class="dropdown-menu" role="menu">
+						<li><a class="" href="/register" title="Sign Up"><span class="glyphicon glyphicon-user"></span> Create New</a></li>
+						<li><a class="" href="/password" title="Change Password"><span class="glyphicon glyphicon-user"></span> Change Password</a></li>
+						<li></li>
+					</ul>
 				</li>
 			</ul>
 		</div>
diff --git a/views/password.html b/views/password.html
new file mode 100644
index 0000000..b57cf07
--- /dev/null
+++ b/views/password.html
@@ -0,0 +1,99 @@
+{{template "header.html"}}
+{{template "navbar.html"}}
+
+{{if .Error}}
+<div class="container">
+	<div class="row">
+	{{range .Error}}
+		<p id="dd-alert-danger" class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible shadow-z-2" role="alert">
+			<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+{{if .Success}}
+<div class="container">
+	<div class="row">
+	{{range .Success}}
+		<p id="dd-alert-success" class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible shadow-z-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<div class="text-center">
+				<h1>Change your password!</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="Your mail adress." 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">New Password:</label>  
+			<div class="col-md-4">
+				<input id="NewPassword" name="NewPassword" placeholder="Your new password." 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">Confirm Password:</label>  
+			<div class="col-md-4">
+				<input id="ConfirmPassword" name="ConfirmPassword" placeholder="Confirm your new password." 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">Current Password:</label>  
+			<div class="col-md-4">
+				<input id="Password" name="Password" placeholder="Your current 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 btn-lg btn-block">Submit &raquo;</button>
+			</div>
+		</div>
+
+	</fieldset>
+</form>
+
+		</div>
+	</div>
+</div>
+{{template "footer.html"}}
diff --git a/views/server.html b/views/server.html
new file mode 100644
index 0000000..c44f162
--- /dev/null
+++ b/views/server.html
@@ -0,0 +1,100 @@
+{{template "header.html"}}
+{{template "navbar.html"}}
+
+{{if .Error}}
+<div class="container">
+	<div class="row">
+	{{range .Error}}
+		<p id="dd-alert-danger" class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible shadow-z-2" role="alert">
+			<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+{{if .Success}}
+<div class="container">
+	<div class="row">
+	{{range .Success}}
+		<p id="dd-alert-success" class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible shadow-z-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>Server details</h1>
+			<div class="well well-lg">
+				<p>Everything you need to know to use Libremail.</p>
+				<ul class="list-unstyled">
+					<li>
+						<h2>Webmail</h2>
+						<p>You can use the webmail interface to browse your emails with your webbrowser of choice. Use <a href="https://webmail.iamfabulous.de/" title="Webmail">this link <span class="fa fa-external-link-square"></a> to open roundcube now.
+						<br>
+						<strong>Use your mail adress and the passwort as credentials to log in.</strong>
+						<br>
+						<br>
+						The TLS certificate is signed to 'webmail.iamfabulous.de'
+						<br>
+						Please note: Unfortunalety roundcube does not support GPG encryption yet.</p>
+					</li>
+					<li>
+						<h2>SMTP</h2>
+						<p>We use Postfix as our SMTP server. It's responsible to send and recieve mails.
+						<br>
+						The TLS certificate is signed to 'mx.iamfabulous.de'</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 is used to manage the mails on the server. Nearly all of the clients (e.g. your phone or thunderbird) use IMAP. Dovecot is responsible for this task.
+						<br>
+						The TLS certificate is signed to 'mx.iamfabulous.de'</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>POP3 is used to pull the mails from the server to the cliente.g. your phone or thunderbird. Dovecot also handles your POP3 connections.
+						<br>
+						The TLS certificate is signed to 'mx.iamfabulous.de'</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.html b/views/user.html
new file mode 100644
index 0000000..f7562be
--- /dev/null
+++ b/views/user.html
@@ -0,0 +1,56 @@
+{{template "header.html"}}
+{{template "navbar.html"}}
+{{if .Error}}
+<div class="container">
+	<div class="row">
+	{{range .Error}}
+		<p id="dd-alert-danger" class="col-md-4 col-md-offset-4 alert alert-danger alert-dismissible shadow-z-2" role="alert">
+			<button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+{{if .Success}}
+<div class="container">
+	<div class="row">
+	{{range .Success}}
+		<p id="dd-alert-success" class="col-md-4 col-md-offset-4 alert alert-success alert-dismissible shadow-z-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
+	{{.}}
+		</p>
+	{{end}}
+	</div>
+</div>
+{{end}}
+
+<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>
+					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"}}