From 3f577650bc5b613e1bebd29743a56015bb73fbf7 Mon Sep 17 00:00:00 2001
From: Omar Roth <omarroth@hotmail.com>
Date: Wed, 25 Jul 2018 22:25:14 -0500
Subject: [PATCH] Add numbers to clock CAPTCHA

---
 src/invidious/helpers.cr      | 27 ++++++++++++---------------
 src/invidious/views/login.ecr | 10 +++++-----
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/invidious/helpers.cr b/src/invidious/helpers.cr
index 105a1598..71b462d6 100644
--- a/src/invidious/helpers.cr
+++ b/src/invidious/helpers.cr
@@ -972,21 +972,18 @@ def generate_captcha(key)
   <svg viewBox="0 0 100 100" width="200px">
   <circle cx="50" cy="50" r="45" fill="#eee" stroke="black" stroke-width="2"></circle>
   
-  <circle id="hour1" cx="69" cy="17.091" r="2" fill="black"></circle>
-  <circle id="hour2" cx="82.909" cy="31" r="2" fill="black"></circle>
-  <circle id="hour3" cx="88" cy="50" r="2" fill="black"></circle>
-  
-  <circle id="hour4" cx="82.909" cy="69" r="2" fill="black"></circle>
-  <circle id="hour5" cx="69" cy="82.909" r="2" fill="black"></circle>
-  <circle id="hour6" cx="50" cy="88" r="2" fill="black"></circle>
-  
-  <circle id="hour7" cx="31" cy="82.909" r="2" fill="black"></circle>
-  <circle id="hour8" cx="17.091" cy="69" r="2" fill="black"></circle>
-  <circle id="hour9" cx="12" cy="50" r="2" fill="black"></circle>
-  
-  <circle id="hour10" cx="17.091" cy="31" r="2" fill="black"></circle>
-  <circle id="hour11" cx="31" cy="17.091" r="2" fill="black"></circle>
-  <circle id="hour12" cx="50" cy="12" r="2" fill="black"></circle>
+  <text x="69"     y="20.091" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 1</text>
+  <text x="82.909" y="34"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 2</text>
+  <text x="88"     y="53"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 3</text>
+  <text x="82.909" y="72"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 4</text>
+  <text x="69"     y="85.909" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 5</text>
+  <text x="50"     y="91"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 6</text>
+  <text x="31"     y="85.909" text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 7</text>
+  <text x="17.091" y="72"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 8</text>
+  <text x="12"     y="53"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px"> 9</text>
+  <text x="17.091" y="34"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px">10</text>
+  <text x="31"     y="20.091" text-anchor="middle" fill="black" font-family="Arial" font-size="10px">11</text>
+  <text x="50"     y="15"     text-anchor="middle" fill="black" font-family="Arial" font-size="10px">12</text>
   
   <circle cx="50" cy="50" r="3" fill="black"></circle>
   <line id="minute" transform="rotate(#{minute_angle}, 50, 50)" x1="50" y1="50" x2="50" y2="16" fill="black" stroke="black" stroke-width="2"></line>
diff --git a/src/invidious/views/login.ecr b/src/invidious/views/login.ecr
index 1a2d826d..00420eb8 100644
--- a/src/invidious/views/login.ecr
+++ b/src/invidious/views/login.ecr
@@ -18,14 +18,14 @@
             <% if account_type == "google" %>
             <form class="pure-form pure-form-stacked" action="/login?referer=<%= referer %>" method="post">
                 <fieldset>
-                    <label for="email">Email</label>
+                    <label for="email">Email:</label>
                     <input required class="pure-input-1" name="email" type="email" placeholder="Email">
 
-                    <label for="password">Password</label>
+                    <label for="password">Password:</label>
                     <input required class="pure-input-1" name="password" type="password" placeholder="Password">
                     
                     <% if tfa %>
-                    <label for="tfa">Google verification code</label>
+                    <label for="tfa">Google verification code:</label>
                     <input required class="pure-input-1" name="tfa" type="text" placeholder="Google verification code">
                     <% end %>
 
@@ -38,12 +38,12 @@
                     <label for="email">User ID:</label>
                     <input required class="pure-input-1" name="email" type="text" placeholder="User ID">
 
-                    <label for="password">Password</label>
+                    <label for="password">Password:</label>
                     <input required class="pure-input-1" name="password" type="password" placeholder="Password">
                 
                     <img style="width:100%" src='<%= captcha.not_nil![:challenge] %>'/>
                     <input type="hidden" name="token" value="<%= captcha.not_nil![:token] %>">
-                    <label for="challenge_response">Time (hh:mm):</label>
+                    <label for="challenge_response">Time (h:mm):</label>
                     <input required type="text" name="challenge_response" type="text>" placeholder="hh:mm">
 
                     <button type="submit" name="action" value="signin" class="pure-button pure-button-primary">Sign In</button>