Add login page

- Few look and fell improvements

templates/email.html

@@ -1,4 +0,0 @@
-<div class="btn materialLevel1" style="width: 40pt;" onclick="document.getElementById('details').style.display='none';">
-    <img src="assets/back.svg" style="width: 20pt"/>
-</div>
-test email

utils/string.go

@@ -0,0 +1,32 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020 Alexey Edelev <semlanik@gmail.com>
+ *
+ * This file is part of gostfix project https://git.semlanik.org/semlanik/gostfix
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this
+ * software and associated documentation files (the "Software"), to deal in the Software
+ * without restriction, including without limitation the rights to use, copy, modify,
+ * merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies
+ * or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+ * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+ * FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ */
+
+package utils
+
+import "strings"
+
+func StartsWith(s, key string) bool {
+	return strings.Index(s, key) == 0
+}

css/controls.css → web/css/controls.css

@@ -11,7 +11,7 @@
     box-shadow: 0 1pt 4pt rgba(0, 0, 0, .6);
 
     background-color: #41cd52;
-    color: #ecf0f1;
+    color: #ffffff;
 
     font-size: 12pt;
     font-weight: bold;
@@ -90,4 +90,116 @@
     background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%,  rgba(0, 0, 0, 0) 100%); /* IE10+ */
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,  rgba(0, 0, 0, 0) 100%); /* W3C */
+}
+  
+/*Input fields*/
+.inpt {
+    position:relative; 
+    margin-top: 20pt;
+    margin-bottom: 50px; 
+}
+
+.inpt input {
+    font-size: 16pt;
+    padding: 9pt 9pt 4pt 4pt;
+    display: block;
+    width: 200pt;
+    border: none;
+    border-bottom: 1pt solid #3ab849;
+}
+
+.inpt input:invalid {
+    outline: none;
+}
+.inpt input:focus {
+    outline: none;
+}
+
+.inpt input:required {
+    box-shadow: none;
+}
+
+.inpt label {
+    color: #000000; 
+    font-size: 18pt;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 5pt;
+    top: 10pt;
+    transition: 0.2s ease all; 
+    -moz-transition: 0.2s ease all; 
+    -webkit-transition: 0.2s ease all;
+}
+  
+.inpt input:focus ~ label {
+    top: -20pt;
+    font-size: 12pt;
+    color: #000000;
+}
+
+.inpt input:valid ~ label {
+    top: -20pt;
+    font-size: 12pt;
+    color: #000000;
+}
+.inpt .bar {
+    position: relative;
+    display: block;
+    width: 213pt;
+}
+
+.inpt .bar:before, .bar:after {
+    content: '';
+    height: 2pt;
+    width: 0;
+    bottom: 0; 
+    position: absolute;
+    background: #3ab849; 
+    transition: 0.2s ease all; 
+    -moz-transition: 0.2s ease all; 
+    -webkit-transition: 0.2s ease all;
+}
+
+.inpt .bar:before {
+    left:50%;
+}
+
+.inpt .bar:after {
+    right:50%; 
+}
+  
+.inpt input:focus ~ .bar:before, input:focus ~ .bar:after {
+    width:50%;
+}
+  
+.inpt .highlight {
+    position: absolute;
+    height:75%;
+    width: 213pt;
+    bottom: 4pt; 
+    left:0;
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.inpt input:focus ~ .highlight {
+    -webkit-animation:inputHighlighter 0.3s ease;
+    -moz-animation:inputHighlighter 0.3s ease;
+    animation:inputHighlighter 0.3s ease;
+}
+
+@-webkit-keyframes inputHighlighter {
+    from { background:#ebffee; }
+    to { width:0; background:transparent; }
+}
+
+@-moz-keyframes inputHighlighter {
+    from { background:#ebffee; }
+    to { width:0; background:transparent; }
+}
+
+@keyframes inputHighlighter {
+    from { background:#ebffee; }
+    to { width:0; background:transparent; }
 }

css/index.css → web/css/index.css

@@ -8,6 +8,15 @@ table {
     border-spacing: 0;
 }
 
+.main {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-bottom: 30pt!important;
+}
+
 .contentBox {
     position: absolute;
     top: 0;
@@ -18,8 +27,7 @@ table {
     margin-left: 150pt!important;
     margin-top: 5pt!important;
     margin-right: 5pt!important;
-    margin-bottom: 30pt!important;
-
+    
     padding: 5pt
 }
 

web/js/index.js

@@ -0,0 +1,45 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020 Alexey Edelev <semlanik@gmail.com>
+ *
+ * This file is part of gostfix project https://git.semlanik.org/semlanik/gostfix
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this
+ * software and associated documentation files (the "Software"), to deal in the Software
+ * without restriction, including without limitation the rights to use, copy, modify,
+ * merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies
+ * or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+ * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+ * FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ */
+
+$(document).ready(function(){
+    $.ajaxSetup({
+        global: false,
+        type: "POST"
+    });
+})
+
+function openEmail(id) {
+    $("#details").show();
+    $.ajax({
+        url: "/mail",
+        data: {"mail": id},
+        success: function(result) {
+            $("#details").html(result);
+        },
+        error: function(jqXHR, textStatus, errorThrown) {
+            $("#details").html(errorThrown);
+        }
+    });
+}

web/server.go

@@ -29,6 +29,7 @@ import (
 	"bufio"
 	"fmt"
 	template "html/template"
+	ioutil "io/ioutil"
 	"log"
 	"net/http"
 	"strings"
@@ -68,8 +69,8 @@ type Server struct {
 
 func NewServer(mailPath string) *Server {
 	return &Server{
-		templater:  NewTemplater("templates"),
-		fileServer: http.FileServer(http.Dir(".")),
+		templater:  NewTemplater("./data/templates"),
+		fileServer: http.FileServer(http.Dir("./data")),
 		mailPath:   mailPath,
 	}
 }
@@ -81,8 +82,13 @@ func (s *Server) Run() {
 
 func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	fmt.Println(r.URL.Path)
-	if strings.Index(r.URL.Path, "/css/") == 0 || strings.Index(r.URL.Path, "/assets/") == 0 {
+	if utils.StartsWith(r.URL.Path, "/css/") ||
+		utils.StartsWith(r.URL.Path, "/assets/") ||
+		utils.StartsWith(r.URL.Path, "/js/") {
 		s.fileServer.ServeHTTP(w, r)
+	} else if r.URL.Path == "/login.html" {
+		data, _ := ioutil.ReadFile("./data/templates/login.html")
+		w.Write(data)
 	} else {
 		user := r.URL.Query().Get("user")
 

web/templates/email.html

@@ -0,0 +1,5 @@
+<div class="btn materialLevel1" style="width: 40pt;" onclick="$('#details').hide();">
+    <img src="assets/back.svg" style="width: 20pt"/>
+</div>
+<div id="emailDetails">
+</div>

templates/index.html → web/templates/index.html

@@ -6,9 +6,11 @@
         <link type="text/css" href="css/index.css" rel="stylesheet">
         <link type="text/css" href="css/styles.css" rel="stylesheet">
         <link type="text/css" href="css/controls.css" rel="stylesheet">
+        <script src="js/jquery-3.4.1.min.js"></script>
+        <script src="js/index.js" type="text/javascript"></script>
     </head>
     <body>
-        <div>
+        <div class="main">
             <div class="foldersBox">
                 <div class="btn materialLevel1" style="width: 110pt">New email</div>
                 {{.Folders}}
@@ -18,7 +20,7 @@
             </div>
             <div id="details" class="materialLevel2 contentBox emailDetails" style="display: none;">
             </div>
-            <p class="copyrights">gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</p>
         </div>
+        <p class="copyrights">gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</p>
     </body>
 </html>

web/templates/login.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
+        <link type="text/css" href="css/index.css" rel="stylesheet">
+        <link type="text/css" href="css/styles.css" rel="stylesheet">
+        <link type="text/css" href="css/controls.css" rel="stylesheet">
+        <script src="js/jquery-3.4.1.min.js"></script>
+        <script src="js/index.js" type="text/javascript"></script>
+    </head>
+    <body>
+        <div style="width: 100%; height: 100%; display:flex; justify-content: center; align-items: center;">
+            <div>
+                <div class="inpt">      
+                    <input type="text" required>
+                    <span class="highlight"></span>
+                    <span class="bar"></span>
+                    <label>Login</label>
+                </div>
+                <div class="inpt">      
+                    <input type="password" required>
+                    <span class="highlight"></span>
+                    <span class="bar"></span>
+                    <label>Password</label>
+                </div>            
+            </div>
+        </div>
+        <p class="copyrights">gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</p>
+    </body>
+</html>

templates/maillist.html → web/templates/maillist.html

@@ -3,7 +3,7 @@
         <table class="mailList" >
             <tbody>
                 {{range .}}
-                <tr onclick="document.getElementById('details').style.display='block';">
+                <tr onclick="openEmail('someid');">
                     <td class="fromCol">{{.Header.From}}</td>
                     <td class="subjCol">{{.Header.Subject}}</td>
                     <td class="dateCol">{{.Header.Date}}</td>