codestream-trello/authorize.html at gh-pages · TeamCodeStream/codestream-trello · 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
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://p.trellocdn.com/power-up.min.css">
    <script src="https://p.trellocdn.com/power-up.min.js"></script>
  </head>
  <body>
    <h1>
      Hey there! 😀
    </h1>
    <p>
      To make full use of our Power-Up, we're going to need you to authorize us to access your Trello account!
    </p>
    <button id="auth-btn" type="submit" class="mod-primary">Authorize Access To Trello</button>

    <script>
      var Promise = TrelloPowerUp.Promise;
      var t = TrelloPowerUp.iframe();

      var apiKey = t.arg('apiKey'); // Passed in as an argument to our iframe

      var trelloAuthUrl = `https://trello.com/1/authorize?expiration=1hour&name=Example%20Trello%20Power-Up&scope=read&key=${apiKey}&callback_method=fragment&return_url=${window.location.origin}%2Fauth-success.html`;

      var tokenLooksValid = function(token) {
        // If this returns false, the Promise won't resolve.
        return /^[0-9a-f]{64}$/.test(token);
      }

      document.getElementById('auth-btn').addEventListener('click', function(){
        t.authorize(trelloAuthUrl, { height: 680, width: 580, validToken: tokenLooksValid })
        .then(function(token){
          // store the token in Trello private Power-Up storage
          return t.set('member', 'private', 'token', token)
        })
        .then(function(){
          // now that we have the token we needed lets go on to letting
          // the user do whatever they need to do.
          return t.closePopup();
        });
      });
    </script>
  </body>
</html>