WellReadClient/auth.html at master · benlogan/WellReadClient · 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
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles/bootstrap.css" type="text/css"/>
        <link rel="stylesheet" href="styles/bootstrap-social.css" type="text/css"/>
        <link rel="stylesheet" href="styles/font-awesome.css" type="text/css"/>
        <link rel="stylesheet" href="styles/style.css" type="text/css"/>
        <script type="text/javascript" src="scripts/jquery/jquery-2.1.4.js"></script>
        <script type="text/javascript" src="scripts/jquery.leanModal.min.js"></script>
        <script type="text/javascript" src="scripts/oauth.js"></script>
        <script type="text/javascript" src="scripts/auth.js"></script>
        <script type="text/javascript">
            OAuth.initialize('DONT COMMIT');

            $(document).ready(function() {
                $("#modalTrigger").leanModal();
            });

            function authEmail() {
                // surely form post instead, to auth service!?
            }

            function processUserData(data) {

                $('#lean_overlay').hide();
                $('#modalTrigger').hide();
                $('#authBox').hide();

                // do something with `data`, e.g. print data.name
                //console.log(data);
                //alert('Hello ' + data.name);

                $('#username').text('Username; ' + data.name);

                authUser(data.id, data.name, data.email);
            }
        </script>
    </head>
    <body>
        <h1 style="text-align: center;">Auth Testing</h1>

        <a id="modalTrigger" href="#authBox" class="btn" style="width: inherit;">Click here to Login or register</a>

        <div id="authBox" class="popupContainer" style="display: none">
            <a class="btn btn-block btn-social btn-twitter" onclick="authTwitter()">
                <span class="fa fa-twitter"></span> Sign in with Twitter
            </a>
            <a class="btn btn-block btn-social btn-facebook" onclick="authFacebook()">
                <span class="fa fa-facebook"></span> Sign in with Facebook
            </a>
            <a class="btn btn-block btn-social btn-google" onclick="authGoogle()">
                <span class="fa fa-google"></span> Sign in with Google
            </a>
            <!--
            we can come back to this, we don't need it for go live and we should encourage open auth
            <br><hr>
            <div>
                Email:<input type="text" name="user">
                Password:<input type="password" name="password">
                <button onclick="authEmail()">OK</button>
            </div>
            -->
        </div>

        <!-- do we really need to return the name to screen? -->
        <div id="username"></div>

    </body>
</html>