PrettyPaste: Add Fork and New button

Signed-off-by: Gunwant Jain <mail@wantguns.dev>

src/routes/submit.rs

@@ -6,7 +6,7 @@ use crate::models::paste_id::PasteId;
 
 #[derive(FromForm)]
 pub struct PasteIdForm {
-    val: String,
+    content: String,
     ext: String,
 }
 
@@ -15,7 +15,7 @@ pub async fn submit(paste: Form<PasteIdForm>) -> Redirect {
     let id = PasteId::new(6);
 
     let filename = format!("upload/{id}", id = id);
-    let content = &paste.val;
+    let content = &paste.content;
     let ext = &paste.ext;
 
     fs::write(&filename, content).expect("Unable to write to the file");

static/css/index.css

@@ -43,7 +43,7 @@ form.highlight {
 }
 
 textarea {
-    height: 100%;
+    height: 90%;
     width: 100%;
 
     background: none;
@@ -100,6 +100,10 @@ button[type="submit"] {
     cursor: pointer;
 }
 
+button[type="submit"]:hover {
+    background-color: #be7611;
+}
+
 #upload_card {
     display: none;
 }

static/css/pretty.css

@@ -0,0 +1,34 @@
+.topRightBox {
+  position: fixed;
+  padding: 18px 10px;
+  color: #f29718;
+  background-color: #0f1419;
+  top: 0px;
+  right: 0px;
+  font-family: "Iosevka Web", monospace;
+  font-size: 20px;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.topRightBox button {
+  color: inherit;
+  background-color: inherit;
+  margin: 0px 5px;
+  border: solid 0.2px;
+  border-color: #0f1419;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+
+.topRightBox button:hover {
+  color: #be7611;
+}
+
+.rootBoot {
+  position: relative;
+}

static/js/index.js

@@ -6,6 +6,15 @@ const textarea = document.querySelector('textarea');
 const select = document.querySelector('select');
 const submitButton = document.querySelector('button[type="submit"]');
 
+window.onload = () => {
+    if (localStorage["forkText"] !== null) {
+        const textArea = document.getElementById('textarea_content');
+        textArea.textContent = localStorage["forkText"];
+        localStorage.clear();
+        onInput();
+    }
+}
+
 const onInput = () => {
     submitButton.classList.toggle('hidden', !textarea.value);
     select.classList.toggle('hidden', !textarea.value);

static/js/pretty.js

@@ -0,0 +1,15 @@
+const homePage = document.location.origin;
+
+function forkClicked () {
+    const paste = document.getElementById('pasteContent');
+    let text = paste.innerText;
+    localStorage["forkText"] = text;
+
+    console.log(text);
+
+    window.location = homePage;
+}
+
+function newPasteClicked () {
+    window.location = homePage;
+}

templates/index.html.tera

@@ -8,7 +8,7 @@
 <form action="/submit" method="post" ondrop="dropHandler(event)">
     <div class=grid_form>
         <div class="textareaBox">
-            <textarea name="val" style="resize: none" placeholder="
+            <textarea name="content" id="textarea_content" style="resize: none" placeholder="
 
 bin(3)                                BIN                               bin(3)
 
@@ -43,7 +43,7 @@ AUTHOR
         </div>
         <div class="selectBox">
             <select id="ext" name="ext" size="15">
-                <option value="txt">Plain Text</option>
+                <option selected value="txt">Plain Text</option>
                 <option value="asa">ASP</option>
                 <option value="asp">HTML (ASP)</option>
                 <option value="as">ActionScript</option>
@@ -110,7 +110,7 @@ AUTHOR
         </div>
 
         <div class="submitButtonBox">
-            <button type="submit" title="Paste">Slap it !</button>
+            <button type="submit" title="Paste">Paste</button>
         </div>
     </div>
     <div id="upload_card">

templates/pretty.html.tera

@@ -11,6 +11,7 @@
         font-family: 'Iosevka Web', monospace;
     }
 </style>
+<link rel="stylesheet" href="/static/css/pretty.css">
 {% endblock styles %}
 
 
@@ -19,5 +20,15 @@
 
 
 {% block body %}
-{{ body | safe }}
+<div class="rootBox">
+    <div id="pasteContent">
+        {{ body | safe }}
+    </div>
+    <div class="topRightBox"> 
+        <button onclick="forkClicked()">&#x2442; Fork</button>
+        <button onclick="newPasteClicked()">&#43; New</button>
+    </div>
+</div>
+
+<script src="/static/js/pretty.js"></script>
 {% endblock body %}