send mail service

Makefile

@@ -1,7 +1,7 @@
 BUILDDIR = ./build
 projs = grs info
 copyfiles =  index.ls
-main: copy
+main: clean copy
 	for f in $(projs); do  make -C  "$${f}" ; done
 
 copy:

grs/Makefile

@@ -1,10 +1,10 @@
 BUILDDIR = ../build/grs
 
-copyfiles =  font-awesome.css fonts images showdown.min.js ubuntu-regular.css mainsite.css hermit-light.css
+copyfiles =  font-awesome.css fonts images showdown.min.js ubuntu-regular.css mainsite.css sendto.html
 
 main:
 	- mkdir $(BUILDDIR)
 	cp -rf $(copyfiles) $(BUILDDIR)
-	- cd $(BUILDDIR) && ln -s ../os/resources/themes/antos/fonts/ ./gfonts && ln -s ../os/scripts/ ./gscripts
+	- cd $(BUILDDIR) && ln -s ../os/resources ./resources && ln -s ../os/scripts/ ./gscripts 
 clean:
 	rm -rf $(BUILDDIR)/*  

grs/font-awesome.css

@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('gfonts/fontawesome-webfont.eot?v=4.7.0');
+  src: url('resources/themes/antos/fonts//fontawesome-webfont.eot?v=4.7.0');
-  src: url('gfonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('gfonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('gfonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('gfonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('gfonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+  src: url('resources/themes/antos/fonts//fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('resources/themes/antos/fonts//fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('resources/themes/antos/fonts//fontawesome-webfont.woff?v=4.7.0') format('woff'), url('resources/themes/antos/fonts//fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('resources/themes/antos/fonts//fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }

grs/hermit-light.css

@@ -1,12 +0,0 @@
-/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 6, 2017 */
-
-
-
-@font-face {
-    font-family: 'HermitLight';
-    src: url('gfonts/hermit-light-webfont.woff2') format('woff2'),
-         url('gfonts/hermit-light-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-
-}

grs/mainsite.css

@@ -1,7 +1,16 @@
-#layout{
+html,body{
-    width:100%;
+    margin: 0;
+    padding: 0;
     font-family: "Ubuntu";
     font-size: 14px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+#desktop{
+    width:100%;
+    min-height:100%; 
+    overflow:hidden;
     /*margin:0 auto;
     display: flex;
     flex-direction: row-reverse;
@@ -82,3 +91,115 @@
     max-width: 500px;
     
 }
+
+afx-app-window div.afx-window-wrapper{
+    border:1px solid #a6a6a6;
+    /*box-shadow: 1px 1px 1px #cbcbcb;*/
+    box-shadow: 1px 1px 1px #9f9F9F;
+    border-radius: 5px;
+    background-color:#dfdfdf;
+    padding:0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+afx-app-window.unactive > div.afx-window-wrapper{
+    background-color: #f6f6f6;
+}
+
+afx-app-window ul.afx-window-top{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    padding:0;
+    height: 20px;
+    border-bottom: 1px solid #a6a6a6;
+}
+afx-app-window ul.afx-window-top li{
+    list-style: none;
+    margin-left: 3px;
+    margin-top:4px;
+    
+}
+afx-app-window ul.afx-window-top .afx-window-close,.afx-window-minimize,.afx-window-maximize{
+    width: 11px;
+    height: 11px;
+    border-radius: 10px;
+}
+afx-app-window ul li.afx-window-close{
+    background-color: #Fc605b;
+     float:left;
+}
+afx-app-window ul li.afx-window-minimize{
+    background-color: #fec041;
+     float:left;
+}
+afx-app-window ul li.afx-window-maximize{
+    background-color: #35cc4b;
+     float:left;
+}
+
+afx-app-window ul li.afx-window-title{
+    margin-top:1px;
+    float:none;
+    overflow: hidden;
+    padding-left: 5px;
+    padding-right: 5px;
+    text-align: center;
+}
+
+afx-app-window div.afx-window-content
+{
+    overflow: hidden;
+    width: 100%;
+    background-color: white;
+    flex-grow: 1;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+afx-app-window div.afx-window-grip{
+    height: 10px;
+    width: 10px;
+    background-color: transparent;
+}
+afx-hbox.inputbox{
+    margin-left: 10px;
+    margin-right: 10px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+textarea{
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 0;
+    font-family: "Ubuntu";
+    font-size: 14px;
+    padding: 3px;
+}
+input {
+    outline: none;
+    border: 0;
+    padding: 0;
+    height: 17px;
+}
+div.label{
+    color: #899aae;
+}
+button{
+    outline: none;
+    background-color: #5fa6cf;
+    font-weight: bold;
+    color: white;
+    border: 0;
+    border-radius: 5px;
+    padding:3px;
+    margin-right: 10px;
+    box-shadow: 1px 1px 1px #9f9F9F;
+}
+#status{
+    padding-left: 10px;
+    padding-top:5px;
+    color:#724841;
+}

grs/sendto.html

@@ -0,0 +1,27 @@
+<afx-app-window apptitle="Send me an email" minimizable="false" resizable = "false" width="450" height="350">
+    <afx-vbox >
+        <div data-height="5"></div>
+        <afx-hbox data-height="20" class = "inputbox">
+            <div data-width = "47" class = "label">Name:</div>
+            <input data-class = "data" type = "text" name = "name" />
+        </afx-hbox>
+        <div data-height="5"></div>
+        <afx-hbox data-height="20" class = "inputbox">
+            <div data-width = "45" class = "label">From:</div>
+            <input data-class = "data" type = "text" name = "email" />
+        </afx-hbox>
+        <div data-height="5"></div>
+        <afx-hbox data-height="20" class = "inputbox">
+            <div data-width = "60" class = "label">Subject:</div>
+            <input data-class = "data" type = "text" name = "subject" />
+        </afx-hbox>
+        <div data-height="5"></div>
+        <textarea data-class = "data"  name = "content"></textarea>
+        <div data-height="5"></div> 
+        <afx-hbox data-height="30">
+            <div id="status"></div>
+            <button id = "send" data-width = "60" >Send</button>
+        </afx-hbox>
+        <div data-height="5"></div>
+    </afx-vbox>
+</afx-app-window>

grs/ubuntu-regular.css

@@ -4,8 +4,8 @@
 
 @font-face {
     font-family: 'Ubuntu';
-    src: url('gfonts/ubuntu-regular-webfont.woff2') format('woff2'),
+    src: url('resources/themes/antos/fonts//ubuntu-regular-webfont.woff2') format('woff2'),
-         url('gfonts/ubuntu-regular-webfont.woff') format('woff');
+         url('resources/themes/antos/fonts//ubuntu-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 
@@ -13,8 +13,8 @@
 
 @font-face {
     font-family: 'Ubuntu';
-    src: url('gfonts/ubuntu-bold-webfont.woff2') format('woff2'),
+    src: url('resources/themes/antos/fonts//ubuntu-bold-webfont.woff2') format('woff2'),
-         url('gfonts/ubuntu-bold-webfont.woff') format('woff');
+         url('resources/themes/antos/fonts//ubuntu-bold-webfont.woff') format('woff');
     font-weight: bold;
     font-style: normal;
 
@@ -22,8 +22,8 @@
 
 @font-face {
     font-family: 'Ubuntu';
-    src: url('gfonts/ubuntu-bolditalic-webfont.woff2') format('woff2'),
+    src: url('resources/themes/antos/fonts//ubuntu-bolditalic-webfont.woff2') format('woff2'),
-         url('gfonts/ubuntu-bolditalic-webfont.woff') format('woff');
+         url('resources/themes/antos/fonts//ubuntu-bolditalic-webfont.woff') format('woff');
     font-weight: bold;
     font-style: italic;
 
@@ -31,8 +31,8 @@
 
 @font-face {
     font-family: 'Ubuntu';
-    src: url('gfonts/ubuntu-italic-webfont.woff2') format('woff2'),
+    src: url('resources/themes/antos/fonts//ubuntu-italic-webfont.woff2') format('woff2'),
-         url('gfonts/ubuntu-italic-webfont.woff') format('woff');
+         url('resources/themes/antos/fonts//ubuntu-italic-webfont.woff') format('woff');
     font-weight: normal;
     font-style: italic;
 

index.ls

@@ -22,14 +22,70 @@
         <link rel="stylesheet" type="text/css" href="grs/ubuntu-regular.css" />
         <link rel="stylesheet" type="text/css" href="grs/font-awesome.css" />
         <link rel="stylesheet" type="text/css" href="grs/mainsite.css" />
+        <script src="grs/gscripts/jquery-3.2.1.min.js"> </script>
+        <script src="grs/resources/antos_tags.js" type="riot/tag"></script>
+        <script src="grs/gscripts/riot.compiler.min.js"> </script>
+        <script>
+            var scheme = undefined;
+            function mailtoMe()
+            {
+                if(scheme) return;
+                // get scheme
+                $.get( "grs/sendto.html")
+                .done(function(d) {
+                    scheme = $.parseHTML(d)
+                    var observable = riot.observable()
+                    $("#desktop").append(scheme)
+                    riot.mount($(scheme), {observable:observable})
+                    observable.on("exit", function(){
+                        $(scheme).remove()
+                        scheme = undefined
+                    })
+                    observable.on("rendered", function(){
+                        $("#send").click(function(){
+                            $("#status").html("");
+                            var els = $("[data-class='data']")
+                            var data = {}
+                            
+                            for(var i = 0; i < els.length; i++)
+                                data[els[i].name] = $(els[i]).val()
+                            if(data.email == "" || data.subject == "" || data.content == "" || data.name == "")
+                                return $("#status").html("Please enter all the fields");
+                            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+                            if(!re.test(String(data.email).toLowerCase()))
+                                return $("#status").html("Email is not correct");
+                            
+                            $.ajax({
+                                type: 'POST',
+                                url: "info/sendmail.lua",
+                                contentType: 'application/json',
+                                data: JSON.stringify(data),
+                                dataType: 'json',
+                                success: null
+                            }).done(function(r){
+                                if(r.error)
+                                    alert(r.error)
+                                else
+                                    alert("Thank")
+                            }).fail(function(){
+                                alert("Service unavailable at the moment")
+                            })
+                        })
+                    })
+                })
+                .fail(function() {
+                    alert( "Cannot get the form" );
+                })
+            }
+        </script>
     </head>
     <body>
-        <div id = "layout">
+        <div id = "desktop">
             <div id = "top">
                 <ul>
                     <li ><i class = "fa fa-address-card"></i><a href="https://info.lxsang.me" target="_blank">Porfolio</a></li>
                     <li><i class = "fa fa-newspaper-o"></i><a href="https://blog.lxsang.me" target="_blank">Blog</a></li>
-                    <li><i class = "fa fa-paper-plane"></i>Contact</li>
+                    <li><i class = "fa fa-paper-plane"></i><a href="#" onclick="mailtoMe()" >Contact</a></li>
                     <li > <i class = "fa fa-globe"></i><a href = "https://os.lxsang.me" target="_blank">Web OS</a></li>
                 </ul>
             </div>
@@ -49,7 +105,7 @@
                 </div>
             </div>
             <div id = "bottom">
-                Powered by antd, (c) 2017 - 2018 Xuan Sang LE
+                Powered by antd server, (c) 2017 - 2018 Xuan Sang LE
             </div>
         </div>
     </body>

info/Makefile

@@ -1,6 +1,6 @@
 BUILDDIR = ../build/info
 
-copyfiles =  index.ls style.css
+copyfiles =  index.ls style.css sendmail.lua
 
 main:
 	- mkdir $(BUILDDIR)

info/sendmail.lua

@@ -0,0 +1,20 @@
+
+if not REQUEST.query.json then
+    fail("unknown request")
+end
+local rq = (JSON.decodeString(REQUEST.query.json))
+local  to = "xsang.le@gmail.com"
+local from = "From: "..rq.email.."\n"
+local suject = "Subject: "..rq.subject.."\n"
+local content = "Contact request from:"..rq.name.."\n Email:"..rq.email.."\n"..rq.content.."\n"
+
+local cmd = 'echo "'..utils.escape(from..suject..content)..'"| sendmail '..to
+
+print(cmd)
+local r = os.execute(cmd)
+
+if r then
+    result(r)
+else
+    fail("Cannot send email at the moment, the service may be down")
+end