From d9cb38ac13e8390942495f41d5bb8394564971c6 Mon Sep 17 00:00:00 2001
From: realaravinth <realaravinth@batsense.net>
Date: Sat, 29 May 2021 19:45:56 +0530
Subject: [PATCH] widget: messages for various stages

---
 templates/widget/index.html |  7 +++++--
 templates/widget/index.ts   |  3 +++
 templates/widget/main.scss  | 30 ++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/templates/widget/index.html b/templates/widget/index.html
index e7b4f0b7..bbee2b0f 100644
--- a/templates/widget/index.html
+++ b/templates/widget/index.html
@@ -16,7 +16,10 @@
 			id="widget__verification-checkbox"
 			class="widget__verification-checkbox"
 		type="checkbox" />
-        I'm not a robot
+		<span class="widget__verification-text--before">I'm not a robot</span>
+		<span class="widget__verification-text--during">Processing...</span>
+		<span class="widget__verification-text--after">Verified!</span>
+		<span class="widget__verification-text--error">Something wen't wrong</span>
       </label>
       <div class="widget__mcaptcha-details">
         <a href="<.= crate::PKG_HOMEPAGE .>" 
@@ -40,5 +43,5 @@
           </a>
         </div>
       </div>
-    </div>
+    </form>
 <.include!("./footer.html"); .>
diff --git a/templates/widget/index.ts b/templates/widget/index.ts
index d043c787..61832223 100644
--- a/templates/widget/index.ts
+++ b/templates/widget/index.ts
@@ -16,7 +16,10 @@
  */
 import './main.scss';
 
+const PARENT = window.parent;
 const verificationContainer = <HTMLElement>(
   document.querySelector('.widget__verification-container')
 );
 verificationContainer.style.display = 'flex';
+
+//PARENT.postMessage
diff --git a/templates/widget/main.scss b/templates/widget/main.scss
index 73d57735..8c131bd7 100644
--- a/templates/widget/main.scss
+++ b/templates/widget/main.scss
@@ -64,6 +64,36 @@
   margin: 0 10px;
 }
 
+.widget__verification-text--during {
+  display: none;
+}
+
+.widget__verification-text--after {
+  display: none;
+  color: green;
+}
+
+.widget__verification-text--error {
+  display: none;
+  color: red;
+}
+
+.widget__verification-checkbox:checked ~ .widget__verification-text--before {
+  display: none;
+}
+
+.widget__verification-checkbox:checked ~ .widget__verification-text--during {
+  display: non;
+}
+
+.widget__verification-checkbox:checked ~ .widget__verification-text--error {
+  display: none;
+}
+
+.widget__verification-checkbox:checked ~ .widget__verification-text--after {
+  display: block;
+}
+
 .widget__mcaptcha-details {
   flex: 1;
   display: flex;