From 86995cab676c0f1ff61d7dd73bfee5f2b21be370 Mon Sep 17 00:00:00 2001
From: Flummi <flummi@f0ck.space>
Date: Tue, 20 Feb 2018 07:04:36 +0100
Subject: [PATCH] user

---
 public/css/user.css           |  35 +++++++++++
 src/fpaste.mjs                |   1 +
 src/routes/index.mjs          |   4 +-
 src/routes/r/index.mjs        |   8 ++-
 src/routes/r/user.mjs         |  14 +++++
 views/layouts/main.handlebars | 111 +++++++++++++++++++++++++++++++++-
 views/login.handlebars        |   7 +++
 7 files changed, 175 insertions(+), 5 deletions(-)
 create mode 100644 public/css/user.css
 create mode 100644 src/routes/r/user.mjs
 create mode 100644 views/login.handlebars

diff --git a/public/css/user.css b/public/css/user.css
new file mode 100644
index 0000000..46e9947
--- /dev/null
+++ b/public/css/user.css
@@ -0,0 +1,35 @@
+form p.label {
+  display: inline-block;
+  width: 150px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+form p.checkbox {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 5px;
+}
+
+#settings-form input[type=submit],
+#settings-form input[type=reset] {
+  margin: 20px 20px 5px 0;
+  display: inline-block;
+}
+
+#user-activated-links a,
+#logout-links a {
+  background-color: #777;
+  color: white;
+  border: 1px solid #666;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: bold;
+  padding: 10px;
+  margin: 5px 0 5px;
+  border-radius: 3px;
+  display: inline-block;
+  box-shadow: 3px 3px 10px #666;
+  cursor: pointer;
+  margin-right: 20px;
+}
\ No newline at end of file
diff --git a/src/fpaste.mjs b/src/fpaste.mjs
index 13c58fa..65c0dfe 100644
--- a/src/fpaste.mjs
+++ b/src/fpaste.mjs
@@ -23,6 +23,7 @@ app
   .use("/", router.index)
   .use("/v", router.view)
   .use("/a", router.about)
+  .use("/u", router.user)
 
   .get("/:uuid", (req, res) => res.redirect(`/v/${req.params.uuid}/`))
 
diff --git a/src/routes/index.mjs b/src/routes/index.mjs
index d2e8e55..0e6f80c 100644
--- a/src/routes/index.mjs
+++ b/src/routes/index.mjs
@@ -1,10 +1,12 @@
 import index from "./r/index";
 import view from "./r/view";
 import about from "./r/about";
+import user from "./r/user";
 
 
 export default {
   index: index,
   view: view,
-  about: about
+  about: about,
+  user: user
 };
\ No newline at end of file
diff --git a/src/routes/r/index.mjs b/src/routes/r/index.mjs
index 3b35508..f908849 100644
--- a/src/routes/r/index.mjs
+++ b/src/routes/r/index.mjs
@@ -3,7 +3,7 @@ import express from "express";
 import db from "../../lib/sql";
 
 const queries = {
-  getlangs: "select * from `languages`",
+  getlangs: "select * from `languages` order by `name` asc",
   add:      "insert into `pastes` (`uuid`,`lang`,`desc`,`paste`,`hidden`,`reply`) "
           + "values (LEFT(UUID(), 8), ?, ?, ?, ?, ?)",
   getuuid:  "select `uuid` from `pastes` where `id` = ? limit 1"
@@ -20,7 +20,7 @@ export default express.Router()
       desc: req.body.desc || "",
       content: req.body.content || false,
       lang: languages.getKey(req.body.lang) || 1,
-      hidden: req.body.hidden || 0,
+      hidden: req.body.hidden === "on" || false,
       reply: req.body.reply || 0
     };
     if(!data.content)
@@ -38,7 +38,9 @@ export default express.Router()
   });
 
 Map.prototype.getKey = function(val) {
-  for (let [key, value] of this)
+  if(!val)
+    return 1;
+  for(let [key, value] of this)
     if(value.toLowerCase() === val.toLowerCase())
       return key;
   return false;
diff --git a/src/routes/r/user.mjs b/src/routes/r/user.mjs
new file mode 100644
index 0000000..4896385
--- /dev/null
+++ b/src/routes/r/user.mjs
@@ -0,0 +1,14 @@
+import express from "express";
+
+import db from "../../lib/sql";
+
+export default express.Router()
+  .get("/", (req, res) => {
+    res.render("login");
+  })
+  .get("/register", (req, res) => {
+    res.send("WIP");
+  })
+  .get("/lost-password", (req, res) => {
+    res.send("WIP");
+  });
\ No newline at end of file
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index c342dbe..e78a681 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -2,12 +2,14 @@
 <html>
 <head>
   <title>fpaste</title>
+  <link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css" />
   <link rel="stylesheet" type="text/css" href="/css/main.css" />
   <link rel="stylesheet" type="text/css" href="/css/notifications.css" />
   <link rel="stylesheet" type="text/css" href="/css/code.css" />
   <link rel="stylesheet" type="text/css" href="/css/view.css" />
   <link rel="stylesheet" type="text/css" href="/css/index.css" />
   <link rel="stylesheet" type="text/css" href="/css/fonts.css" />
+  <link rel="stylesheet" type="text/css" href="/css/user.css" />
 </head>
 <body>
 <header>
@@ -35,6 +37,7 @@
 
 <script type="text/javascript" src="/js/jquery-3.1.0.min.js"></script>
 <script type="text/javascript" src="/js/jquery.timeago.js"></script>
+<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="/js/main.js"></script>
 <script>
   $(document).ready(() => {
@@ -52,7 +55,113 @@
     str.year = "1 year";
     str.suffixFromNow = null;
     $("time.timeago").timeago();
+
+    $.widget("custom.combobox", {
+      _create: function() {
+        this.wrapper = $("<span>")
+          .addClass("custom-combobox")
+          .insertAfter(this.element);
+        this.element.hide();
+        this._createAutocomplete();
+        this._createShowAllButton();
+      },
+      _createAutocomplete: function() {
+        var selected = this.element.children(":selected"),
+            value = selected.val() ? selected.text() : "";
+        this.input = $("<input>")
+          .appendTo(this.wrapper)
+          .val(value)
+          .attr("title", "")
+          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
+          .autocomplete({
+            delay: 0,
+            minLength: 0,
+            source: $.proxy(this, "_source")
+          })
+          .tooltip({
+            classes: {
+              "ui-tooltip": "ui-state-highlight"
+            }
+          });
+        this._on(this.input, {
+          autocompleteselect: function(event, ui) {
+            ui.item.option.selected = true;
+            this._trigger("select", event, {
+              item: ui.item.option
+            });
+          },
+          autocompletechange: "_removeIfInvalid"
+        });
+      },
+      _createShowAllButton: function() {
+        var input = this.input,
+          wasOpen = false;
+        $("<a>")
+          .attr("tabIndex", -1)
+          .attr("title", "Show All Items")
+          .tooltip()
+          .appendTo(this.wrapper)
+          .button({
+            icons: {
+              primary: "ui-icon-triangle-1-s"
+            },
+            text: false
+          })
+          .removeClass("ui-corner-all")
+          .addClass("custom-combobox-toggle ui-corner-right")
+          .on("mousedown", function() {
+            wasOpen = input.autocomplete("widget").is(":visible");
+          })
+          .on("click", function() {
+            input.trigger("focus");
+            if (wasOpen) return;
+            input.autocomplete("search", "");
+          });
+      },
+      _source: function(request, response) {
+        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
+        response(this.element.children("option").map(function() {
+          var text = $(this).text();
+          if (this.value && (!request.term || matcher.test(text)))
+            return {
+              label: text,
+              value: text,
+              option: this
+            };
+        }));
+      },
+      _removeIfInvalid: function(event, ui) {
+        if (ui.item) return;
+        var value = this.input.val(),
+          valueLowerCase = value.toLowerCase(),
+          valid = false;
+        this.element.children("option").each(function() {
+          if ($(this).text().toLowerCase() === valueLowerCase) {
+            this.selected = valid = true;
+            return false;
+          }
+        });
+        if (valid) return;
+        this.input
+          .val("")
+          .attr("title", value + " didn't match any item")
+          .tooltip("open");
+        this.element.val("");
+        this._delay(function() {
+          this.input.tooltip("close").attr("title", "");
+        }, 2500);
+        this.input.autocomplete("instance").term = "";
+      },
+      _destroy: function() {
+        this.wrapper.remove();
+        this.element.show();
+      }
+    });
+    $("#lang").combobox();
+    $("#toggle").on("click", function() {
+      $("#lang").toggle();
+    });
   });
-</script>
+  </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/login.handlebars b/views/login.handlebars
new file mode 100644
index 0000000..67d0500
--- /dev/null
+++ b/views/login.handlebars
@@ -0,0 +1,7 @@
+<h1>User login</h1>
+<form action="/u" method="post" id="login-form">
+  <p class="label">Email:</p><input type="text" name="email" value=""><br>
+  <p class="label">Password:</p><input type="password" name="password"><br>
+  <input type="submit" value="Login">
+</form>
+<p>No user account yet? <a href="/u/register">Register</a> now for free. Forgot your password? <a href="/u/lost-password">Get a new one.</a></p>
\ No newline at end of file