placekey-googlesheets-addon/setKey.html at main · Placekey/placekey-googlesheets-addon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html lang="en">
  <head>
    <base target="_top" />
    <?!= include('Stylesheet'); ?>

    <script>
      function submitApiKey() {
        const key = document.getElementById("key").value;
        google.script.run.withFailureHandler(failHandler).withSuccessHandler(google.script.host.close).setApiKey(key);
      }
    </script>
  </head>

  <body>
    <div id="theBlock" style="display: none">
      <h2 class="type-h2">Enter your API Key</h2>

      <div class="form__group mt-25">
        <label for="key" class="form__label">API Key</label>
        <input id="key" type="password" class="form__control" placeholder="Enter your API key" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" onkeydown="if (event.key === 'Enter') submitApiKey();" />
      </div>

      <div class="footer mt-25">
        <a class="text-black" href="https://www.placekey.io/faq" target="_blank" rel="noopener">FAQ</a>
        <a id="getApi" class="btn ml-15" href="https://dev.placekey.io/" target="_blank" rel="noopener">Get a Free API Key</a>
        <button id="finishSetup" class="btn-solid ml-15" onclick="submitApiKey()">Finish Setup</button>
      </div>
    </div>

    <div id="error" style="display: none">
      <p class="text-red">There was an error with authorization. Please use the addon with your browser default account.</p>

      <div class="text-center mt-15">
        <button id="closeError" class="btn-solid" onclick="google.script.host.close()">Close</button>
      </div>
    </div>

    <script>
      google.script.run.withFailureHandler(failHandler).withSuccessHandler(successHandler).pingAuth();

      document.addEventListener("DOMContentLoaded", () => {
        google.script.run
          .withSuccessHandler((apiKey) => {
            if (apiKey) {
              document.getElementById("key").value = apiKey;
            }
          })
          .getApiKey();
      });

      function failHandler() {
        document.getElementById("error").style.display = "block";
      }
      function successHandler() {
        document.getElementById("theBlock").style.display = "block";
      }
    </script>
  </body>
</html>