-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (150 loc) · 5.48 KB
/
index.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Arlington Career Center bike share program">
<meta name="theme-color" content="aliceblue">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="icon" href="favicon.ico" sizes="32x32" type="image/ico">
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function() {
console.log('Service Worker Registered');
});
}
</script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="ACC Bike Share">
<link rel="apple-touch-icon" sizes="512x512" href="appicons/icon512.png">
<link rel="apple-touch-icon" sizes="192x192" href="appicons/icon192.png">
<link rel="apple-touch-icon" sizes="144x144" href="appicons/icon144.png">
<link rel="apple-touch-icon" sizes="96x96" href="appicons/icon96.png">
<link rel="apple-touch-icon" sizes="72x72" href="appicons/icon72.png">
<link rel="apple-touch-icon" sizes="48x48" href="appicons/icon48.png">
<link rel="apple-touch-icon" sizes="36x36" href="appicons/icon36.png">
<title>ACC Bike Share</title>
</head>
<body>
<script>
var GoogleAuth;
var SCOPE = 'https://www.googleapis.com/auth/userinfo.email';
function handleClientLoad() {
// Load the API's client and auth2 modules.
// Call the initClient function after the modules load.
gapi.load('client:auth2', initClient);
}
var id_token;
function initClient() {
// Retrieve the discovery document for version 3 of Google Drive API.
// In practice, your app can retrieve one or more discovery documents.
var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
// Initialize the gapi.client object, which app uses to make API requests.
// Get API key and client ID from API Console.
// 'scope' field specifies space-delimited list of access scopes.
gapi.client.init({
'apiKey': 'AIzaSyCdKpwBnERdfa4K0qZ5FT9ZkTMQa9ihbZM',
'discoveryDocs': [discoveryUrl],
'clientId': '304362973762-0aca95v708o5fq2vad1lq031jv6a7v3p.apps.googleusercontent.com',
hosted_domain: 'apsva.us',
'scope': SCOPE
}).then(function () {
GoogleAuth = gapi.auth2.getAuthInstance();
// Listen for sign-in state changes.
GoogleAuth.isSignedIn.listen(updateSigninStatus);
// Handle initial sign-in state. (Determine if user is already signed in.)
var user = GoogleAuth.currentUser.get();
setSigninStatus();
// Call handleAuthClick function when user clicks on
// "Sign In/Authorize" button.
$('#sign-in').click(function() {
GoogleAuth.signIn();
});
$('#revoke-access-button').click(function() {
GoogleAuth.disconnect();
});
id_token = user.getAuthResponse().id_token;
Array.from($("#myalert_choose button")).forEach((value, i) =>
value.onclick = () =>
fetch('/cgi-bin/verify', {method: 'POST', body:
JSON.stringify({"token": id_token, "bike_index": i})
})
.then(response => response.text())
.then(text => zonny_alert("myalert_number", text))
)
$('#checkout-bike').click(() => zonny_alert("myalert_choose"))
$('#bike-checked').css('display', 'inline-block');
});
}
function setSigninStatus(isSignedIn) {
var user = GoogleAuth.currentUser.get();
// My stuff here
console.log(user);
// End my stuff
var isAuthorized = user.hasGrantedScopes(SCOPE);
if (isAuthorized) {
id_token = user.getAuthResponse().id_token;
$('#sign-in').hide();
$('#revoke-access-button').show();
$('#checkout-bike').show();
} else {
$('#sign-in').show();
$('#revoke-access-button').hide();
$('#checkout-bike').hide();
}
}
function updateSigninStatus(isSignedIn) {
setSigninStatus();
}
</script>
<main>
<section class="banner">
<article>
<img src="appicons/acc.jpg" alt="logo">
<h1>Bikerary</h1>
<p class="bottom"></p>
</article>
</section>
<section class="buttons">
<button id="sign-in">Sign In</button><br>
<button style="display: none" id="revoke-access-button">Sign Out</button><br>
<button style="display: none" id="checkout-bike">Check out bike</button><br>
<div id="myalert_choose" class="alerting">
<div class="alert-content">
<span class="close">×</span>
<ul>
<li><button disabled>Bike1</button></li>
<li><button>Bike2</button></li>
<li><button>Bike3</button></li>
<li><button>Bike4</button></li>
<li><button>Bike5</button></li>
<li><button>Bike6</button></li>
<li><button>Bike7</button></li>
<li><button>Bike8</button></li>
<li><button>Bike9</button></li>
<li><button>Bike10</button></li>
<li><button>Bike11</button></li>
<li><button>Bike12</button></li>
</ul>
</div>
</div>
<div id="myalert_number" class="alerting">
<div class="alert-content">
<span class="close">×</span>
<p>test</p>
</div>
</div>
<div id="auth-status"></div><br>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</main>
<script src="js/main.js"></script>
</body>
</html>