From 67dd577a273265051bd950d0f0d6f6f7877307f4 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Wed, 11 Jul 2018 21:27:47 +0200
Subject: [PATCH] Make like and share button HTML forms

Fixes #88
---
 src/routes/likes.rs               |  4 ++--
 src/routes/reshares.rs            |  4 ++--
 static/main.css                   | 39 ++++++++++++++-----------------
 templates/posts/details.html.tera | 16 ++++++-------
 4 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/routes/likes.rs b/src/routes/likes.rs
index 3ccd0d6f..8126871b 100644
--- a/src/routes/likes.rs
+++ b/src/routes/likes.rs
@@ -10,7 +10,7 @@ use plume_models::{
     users::User
 };
 
-#[get("/~/<blog>/<slug>/like")]
+#[post("/~/<blog>/<slug>/like")]
 fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
     let b = Blog::find_by_fqn(&*conn, blog.clone()).unwrap();
     let post = Post::find_by_slug(&*conn, slug.clone(), b.id).unwrap();
@@ -34,7 +34,7 @@ fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
     Redirect::to(uri!(super::posts::details: blog = blog, slug = slug))
 }
 
-#[get("/~/<blog>/<slug>/like", rank = 2)]
+#[post("/~/<blog>/<slug>/like", rank = 2)]
 fn create_auth(blog: String, slug: String) -> Flash<Redirect>{
     utils::requires_login("You need to be logged in order to like a post", uri!(create: blog = blog, slug = slug))
 }
diff --git a/src/routes/reshares.rs b/src/routes/reshares.rs
index f83a40f3..67cf87a9 100644
--- a/src/routes/reshares.rs
+++ b/src/routes/reshares.rs
@@ -10,7 +10,7 @@ use plume_models::{
     users::User
 };
 
-#[get("/~/<blog>/<slug>/reshare")]
+#[post("/~/<blog>/<slug>/reshare")]
 fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
     let b = Blog::find_by_fqn(&*conn, blog.clone()).unwrap();
     let post = Post::find_by_slug(&*conn, slug.clone(), b.id).unwrap();
@@ -34,7 +34,7 @@ fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
     Redirect::to(uri!(super::posts::details: blog = blog, slug = slug))
 }
 
-#[get("/~/<blog>/<slug>/reshare", rank=1)]
+#[post("/~/<blog>/<slug>/reshare", rank=1)]
 fn create_auth(blog: String, slug: String) -> Flash<Redirect> {
     utils::requires_login("You need to be logged in order to reshare a post", uri!(create: blog = blog, slug = slug))
 }
diff --git a/static/main.css b/static/main.css
index 5f218a57..b3c2fa8b 100644
--- a/static/main.css
+++ b/static/main.css
@@ -118,7 +118,7 @@ article img {
 
 /* Article.Meta */
 
-main .article-meta {
+main .article-meta, main .article-meta button {
 	padding: 0;
 	font-size: 1.1em;
 	margin-top: 10%;
@@ -156,8 +156,8 @@ main .article-meta .reshares > p {
 	font-size: 1.5em;
 }
 
-main .article-meta .likes a.button,
-main .article-meta .reshares a.button {
+main .article-meta .likes button,
+main .article-meta .reshares button {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -170,12 +170,12 @@ main .article-meta .reshares a.button {
 }
 
 main .article-meta .likes > p,
-main .article-meta .likes a.button:hover { color: #E92F2F; }
+main .article-meta .likes button:hover { color: #E92F2F; }
 main .article-meta .reshares > p,
-main .article-meta .reshares a.button:hover { color: #7765E3; }
+main .article-meta .reshares button:hover { color: #7765E3; }
 
-main .article-meta .likes a.button:before,
-main .article-meta .reshares a.button:before {
+main .article-meta .likes button i,
+main .article-meta .reshares button i {
 	transition: background 0.1s ease-in;
 	display: flex;
 	align-items: center;
@@ -186,42 +186,39 @@ main .article-meta .reshares a.button:before {
 	height: 2.5em;
 
 	border-radius: 50%;
-	font-family: "Font Awesome 5 Free";
 }
 
-main .article-meta .likes a.button:before {
-	content: "";
+main .article-meta .likes button i {
 	color: #E92F2F;
 	border: solid #E92F2F thin;
 	font-weight: 400;
 }
-main .article-meta .likes a.button:hover:before {
+main .article-meta .likes button:hover i {
 	background: rgba(233, 47, 47, 0.15);
 }
 
-main .article-meta .reshares a.button:before {
-	content: "";
+main .article-meta .reshares button i {
 	color: #7765E3;
 	border: solid #7765E3 thin;
 	font-weight: 600;
 }
-main .article-meta .reshares a.button:hover:before {
+main .article-meta .reshares button:hover i {
 	background: rgba(119, 101, 227, 0.15);
 }
 
-main .article-meta .likes a.button.liked:before { background: #E92F2F; }
-main .article-meta .likes a.button.liked:hover:before {
+main .article-meta .likes button.liked i { background: #E92F2F; }
+main .article-meta .likes button.liked:hover i {
 	background: rgba(233, 47, 47, 0.25);
 	color: #E92F2F;
 }
-main .article-meta .reshares a.button.reshared:before { background: #7765E3; }
-main .article-meta .reshares a.button.reshared:hover:before {
+main .article-meta .reshares button.reshared i { background: #7765E3; }
+main .article-meta .reshares button.reshared:hover i {
 	background: rgba(119, 101, 227, 0.25);
 	color: #7765E3;
 }
 
-main .article-meta .likes a.button.liked:before,
-main .article-meta .reshares a.button.reshared:before {
+main .article-meta .likes button.liked i,
+main .article-meta .reshares button.reshared i {
 	color: #F4F4F4;
 	font-weight: 900;
 }
@@ -351,7 +348,7 @@ textarea {
 
 /* Button & Submit */
 
-.button, input[type="submit"] {
+.button, input[type="submit"], button {
 	transition: all 0.1s ease-in;
 	display: inline-block;
 
diff --git a/templates/posts/details.html.tera b/templates/posts/details.html.tera
index 4cb19562..9ec45faf 100644
--- a/templates/posts/details.html.tera
+++ b/templates/posts/details.html.tera
@@ -37,24 +37,24 @@
         <p>{{ "This article is under the {{ license }} license." | _(license=post.license) }}</p>
 
         <div class="actions">
-            <div class="likes">
+            <form class="likes" action="like" method="POST">
                 <p aria-label="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}" title="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}">{{ n_likes }}</p>
 
                 {% if has_liked %}
-                    <a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a>
+                    <button type="submit" class="liked"><i class="far fa-heart"></i>{{ "I don't like this anymore" | _ }}</button>
                 {% else %}
-                    <a class="button" href="like">{{ "Add yours" | _ }}</a>
+                    <button type="submit"><i class="fa fa-heart"></i>{{ "Add yours" | _ }}</button>
                 {% endif %}
-            </div>
-            <div class="reshares">
+            </form>
+            <form class="reshares" action="reshare" method="POST">
                 <p aria-label="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}" title="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}">{{ n_reshares }}</p>
 
                 {% if has_reshared %}
-                    <a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
+                    <button type="submit" class="reshared"><i class="far fa-retweet">{{ "I don't want to reshare this anymore" | _ }}</button>
                 {% else %}
-                    <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
+                    <button type="submit"><i class="fa fa-retweet"></i>{{ "Reshare" | _ }}</button>
                 {% endif %}
-            </div>
+            </form>
         </div>
 
         <div class="comments">