From c711fede6e376dfa3366eb4461eedd7a3063a524 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Thu, 21 Mar 2019 09:55:30 -0500
Subject: [PATCH] Closes #987

---
 view/template/acquisition/auto-verify.php | 141 ++++++++++++----------
 view/template/acquisition/verify.php      |  84 ++++++++-----
 2 files changed, 129 insertions(+), 96 deletions(-)
diff --git a/view/template/acquisition/auto-verify.php b/view/template/acquisition/auto-verify.php
index 67270a4d..717e4ac8 100644
--- a/view/template/acquisition/auto-verify.php
+++ b/view/template/acquisition/auto-verify.php
@@ -1,75 +1,90 @@
 <!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
     <title>Verify Your Identity</title>
-    <link rel="icon" href="images/favicon.ico">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+
+    <link rel="icon" href="images/favicon.ico"/>
+
     <script src='https://www.google.com/recaptcha/api.js?' async defer></script>
-    <script type="text/javascript">
 
-        const ENDPOINT = '<?php echo LBRY::getApiUrl('/user_email/confirm')?>'
+    <script>
+      const ENDPOINT = '<?php echo LBRY::getApiUrl('/user_email/confirm')?>'
 
-        var verifyUser = function(temporary_auth_token, email, verification_token, recaptcha) {
+      const verifyUser = function(temporary_auth_token, email, verification_token, recaptcha) {
+        const url = `${ENDPOINT}?auth_token=${temporary_auth_token}&email=${encodeURIComponent(email)}&verification_token=${verification_token}&recaptcha=${recaptcha}`;
 
-            const url = `${ENDPOINT}?auth_token=${temporary_auth_token}&email=${encodeURIComponent(email)}&verification_token=${verification_token}&recaptcha=${recaptcha}`;
-            fetch(url)
-                .then(response => response.json())
-                .then((response) => {
-                    if (response.error) {
-                        throw Error(response.error)
-                    }
-                    document.getElementById("title").textContent = "Done!"
-                    document.getElementById("verify").style.display = "none";
-                    document.getElementById("verify-success").style.display = "block";
-                })
-                .catch(error => {
-                    document.getElementById("title").textContent = "Uh oh"
-                    document.getElementById("verify").style.display = "none";
-                    document.getElementById("verify-error").style.display = "block";
-                    document.getElementById("verify-error-text").textContent = error.message;
-                })
-        }
+        fetch(url)
+          .then(response => response.json())
+          .then((response) => {
+            if (response.error)
+              throw Error(response.error);
 
-        var verifyCallback = function(response) {
-            const urlParams = new URLSearchParams(window.location.search);
-            const temporary_auth_token = urlParams.get('auth_token');
-            const email = urlParams.get('email')
-            const verification_token = urlParams.get('verification_token');
-            // In the future we will have an `origin` query, to smartly redirect (or tell users they are verified)
-            // eg. if origin == "android" and device == "android" open the app, else say "your android app is verified"
-            verifyUser(temporary_auth_token, email, verification_token, response);
+            document.getElementById("title").textContent = "Done!"
+            document.getElementById("verify").style.display = "none";
+            document.getElementById("verify-success").style.display = "block";
+          })
+          .catch(error => {
+            document.getElementById("title").textContent = "Uh oh"
+            document.getElementById("verify").style.display = "none";
+            document.getElementById("verify-error").style.display = "block";
+            document.getElementById("verify-error-text").textContent = error.message;
+          });
+      }
 
-            document.getElementById("captcha-block").style.display = "none";
-            document.getElementById("verify").style.display = "block";
-        }
+      const verifyCallback = function(response) {
+        const urlParams = new URLSearchParams(window.location.search);
 
-        var expiredCallback = function(error) {
-            console.log("expired", error)
-        }
+        const email = urlParams.get('email');
+        const temporary_auth_token = urlParams.get('auth_token');
+        const verification_token = urlParams.get('verification_token');
+        // In the future we will have an `origin` query, to smartly redirect (or tell users they are verified)
+        // eg. if origin == "android" and device == "android" open the app, else say "your android app is verified"
+        verifyUser(temporary_auth_token, email, verification_token, response);
+
+        document.getElementById("captcha-block").style.display = "none";
+        document.getElementById("verify").style.display = "block";
+      }
+
+      const expiredCallback = error => {
+        console.log("expired", error);
+      }
     </script>
-</head>
-<body>
-<div style="display: flex; align-items: center; flex-direction: column;" class="text-center">
-    <img src="/img/lbry-dark-1600x528.png" style="max-height: 80px; margin-top: 50px; margin-bottom: 38px" alt="LBRY"/>
-    <h1 id="title">Almost Done!</h1>
-    <div id="captcha-block">
-        <p>Click the captcha to continue...</p>
-        <br/>
-        <div class="g-recaptcha" data-sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
-    </div>
+  </head>
 
-    <div style="display: none; margin-top: 10px;" id="verify">
-        <p>Verifying...</p>
-    </div>
-    <div style="display: none; margin-top: 10px;" id="verify-error">
-        <code id="verify-error-text"></code>
-        <p style="margin-top: 10px">There was an error. Please make sure you are clicking the latest verification email and try again. Contact help@lbry.com if this keeps happening.</p>
-    </div>
-    <div style="display: none; margin-top: 10px;" id="verify-success">
-        <p class="spacer1">Success! Your email is now verified.</p>
-    </div>
-</div>
-</body>
+  <body>
+    <main class="ancillary">
+      <section class="hero hero--half-height">
+        <div class="inner-wrap inner-wrap--hero">
+          <h1>Almost Done!</h1>
+        </div>
+      </section>
+
+      <section>
+        <div class="inner-wrap">
+          <div id="captcha-block">
+            <p>Click the captcha to continue...</p>
+            <br/>
+            <div class="g-recaptcha" data-sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
+          </div>
+
+          <div style="display: none; margin-top: 10px;" id="verify">
+            <p>Verifying...</p>
+          </div>
+
+          <div style="display: none; margin-top: 10px;" id="verify-error">
+            <code id="verify-error-text"></code>
+            <p style="margin-top: 10px">There was an error. Please make sure you are clicking the latest verification email and try again. Contact help@lbry.com if this keeps happening.</p>
+          </div>
+
+          <div style="display: none; margin-top: 10px;" id="verify-success">
+            <p class="spacer1">Success! Your email is now verified.</p>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
 </html>
diff --git a/view/template/acquisition/verify.php b/view/template/acquisition/verify.php
index b51893e0..839a83eb 100644
--- a/view/template/acquisition/verify.php
+++ b/view/template/acquisition/verify.php
@@ -1,46 +1,64 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-  <title>Verify Your Identity</title>
-  <link rel="icon" href="images/favicon.ico">
-  <script src='https://www.google.com/recaptcha/api.js'></script>
-  <script type="text/javascript">
-      var magicLink = "#";
-      var verifyCallback = function(response) {
-        let payload = btoa(JSON.stringify({
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Verify Your Identity</title>
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
+
+    <link rel="icon" href="images/favicon.ico"/>
+
+    <script src='https://www.google.com/recaptcha/api.js'></script>
+
+    <script>
+      let magicLink = "#";
+
+      const verifyCallback = response => {
+        const payload = btoa(JSON.stringify({
           recaptcha: response,
           token: "<?php echo $token ?>"
         }));
+
         magicLink = "lbry://?verify=" + payload;
+
         document.getElementById("magic-link-text").textContent = payload;
         document.getElementById("success").style.display = "block";
         document.getElementById("captcha-block").style.display = "none";
       };
-      var expiredCallback = function() {
+
+      const expiredCallback = () => {
         document.getElementById("success").style.display = "none";
         document.getElementById("captcha-block").style.display = "block";
       }
-  </script>
-</head>
-<body>
-  <div style="display: flex; align-items: center; flex-direction: column;" class="text-center">
-    <img src="/img/lbry-dark-1600x528.png" style="max-height: 80px; margin-top: 50px;" alt="LBRY"/>
-    <h1>Almost Done!</h1>
-    <div id="captcha-block">
-      <p>Click the captcha to continue...</p>
-      <br/>
-      <div class="g-recaptcha" data-sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
-    </div>
-    <div style="  display: none; margin-top: 10px;" id="success">
-      <p>Now click the magic link below to verify your identity in app...</p>
-      <br/>
-      <a class="btn-primary btn-large spacer1" onclick="location.href=magicLink">Magic Link</a>
-      <p><i>When prompted, open the link with LBRY Browser on Android or LBRY on Desktop. Does the magic link not work? Not on the same device as the app? Paste this (very long) piece of text into the verification screen of the app to confirm your identity.</i></p>
-      <code class="multiline-code" id="magic-link-text"></code>
-    </div>
-  </div>
-</body>
+    </script>
+  </head>
+
+  <body>
+    <main class="ancillary">
+      <section class="hero hero--half-height">
+        <div class="inner-wrap inner-wrap--hero">
+          <h1>Almost Done!</h1>
+        </div>
+      </section>
+
+      <section>
+        <div class="inner-wrap">
+          <div id="captcha-block">
+            <p>Click the captcha to continue...</p>
+            <br/>
+            <div class="g-recaptcha" data-sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
+          </div>
+
+          <div style="display: none; margin-top: 10px;" id="success">
+            <p>Now click the magic link below to verify your identity in app...</p>
+            <br/>
+            <a class="btn-primary btn-large spacer1" onclick="location.href=magicLink">Magic Link</a>
+            <p><i>When prompted, open the link with LBRY Browser on Android or LBRY on Desktop. Does the magic link not work? Not on the same device as the app? Paste this (very long) piece of text into the verification screen of the app to confirm your identity.</i></p>
+            <code class="multiline-code" id="magic-link-text"></code>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
 </html>
