<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Twitch Chat Password Generator</title>
        <link href="//twitchapps.com/bootstrap/css/cosmo.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var oauthHash = location.hash.substr(1);
                var accessToken = oauthHash.substr(oauthHash.indexOf('access_token=')).split('&')[0].split('=')[1];

                if (accessToken) {
                    $("#infoTable").hide();
                    $("#passwordTable").show();
                    //$("#tmiPassword").text('oauth:' + accessToken);
                    $("#tmiPasswordField").val('oauth:' + accessToken);
                    $("#tmiExample").html('/nick yourtwitchusername<br />/server irc.twitch.tv 6667 oauth:' + accessToken);
                }
            });
        </script>
        <style>
            #tmiPasswordField {
                cursor: default !important;
            }
            #tmiExample {
                display:block;
            }
        </style>
    </head>
    <body style="padding-top: 20px;">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <div style="width:600px;margin:auto;">
                        <table class="table table-bordered table-striped" id="passwordTable" style="display:none;">
                            <tr>
                                <th>Twitch Chat OAuth Password Generator</th>
                            </tr>
                            <tr>
                                <td>
                                    <div style="text-align:center;padding-bottom:10px;">
                                        <p>
                                            Use the following password to login to chat:
                                        </p>
                                        <!-- <code id="tmiPassword" onClick="this.select();"></code> -->
                                        <input class="span9" type="text" id="tmiPasswordField" onClick="this.select();" readonly="readonly">
                                        <br />
                                        <br />
                                        <p>Example: <br />
                                            <code id="tmiExample">/nick &lt;yourusername&gt;
                                            </code></p>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <table class="table table-bordered table-striped" id="infoTable">
                            <tr>
                                <th>Twitch Chat OAuth Password Generator</th>
                            </tr>
                            <tr>
                                <td>
                                    <div class="well">
                                        <p>
                                           As of Sept. 17, 2013, Twitch now requires that you log into IRC using an OAuth token instead of your plaintext password or hash for additional security.
                                        </p>
                                        <p>
                                        Use this tool to generate an OAuth token to authenticate with Twitch IRC. The entire presented token (including "oauth:") can be substituted for your old password in your IRC client.
                                        </p>
                                        <p>
                                        <strong>Note: Each time you use this tool it will invalidate any previous tokens. It is recommended that you save it for reference if you are using multiple clients.</strong>
                                        </p>
                                        <p><small>
                                            (Technical: This application uses the <a href="https://github.com/justintv/Twitch-API/blob/master/authentication.md#implicit-grant" target="_blank">implicit grant flow</a> for the Twitch API to retrieve your token. This means that your token is only ever visible to your browser and not our server.)
                                        </small></p>

                                    </div>
                                    <div style="text-align:center;padding-bottom:10px;">
                                        <a href="https://api.twitch.tv/kraken/oauth2/authorize?response_type=token&client_id=q6batx0epp608isickayubi39itsckt&redirect_uri=http://twitchapps.com/tmi/&scope=chat_login"><img src="//ttv-api.s3.amazonaws.com/assets/connect_dark.png" /></a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
				</div>
            </div>
        </div>
    </body>
</html>