widget: messages for various stages

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"); .>

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

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;