-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
208 lines (205 loc) · 10.9 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>REST API by danvitoriano</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-4/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-4/css/bootstrap-reboot.min.css" media="screen">
</head>
<body>
<div class="container">
<!-- header -->
<div class="row">
<div class="col-xs-10 offset-xs-1">
<div class="jumbotron mt-2 text-xs-center">
<h1 class="display-4">REST API</h1>
<p class="lead">Examples</p>
<hr class="my-2">
<p>Test and Prototype with <a href="https://jsonplaceholder.typicode.com">JSONPlaceholder</a> Fake Online REST API</p>
<p>
<small>OAuth 2 Examples: <a href="danvitoriano/auth0-javascript-spa">danvitoriano/auth0-javascript-spa</a> forked from <a href="auth0-samples/auth0-javascript-spa">auth0-samples/auth0-javascript-spa</a><br>
Built with <a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a>
</small>
</p>
</div>
</div>
</div>
<!-- content -->
<div class="row">
<div class="offset-xs-1 col-xs-10">
<div class="card-columns">
<!-- post add jquery -->
<div class="card card-block">
<h4 class="card-title">POST <small class="text-muted">jQuery</small></h4>
<h6 class="card-subtitle">Add Content</h6>
<form id="form-1" class="mt-2">
<div class="form-group">
<label for="title-1">Title</label>
<input type="text" class="form-control" id="title-1" placeholder="My Awesome Title" tabindex="1">
</div>
<div class="form-group">
<label for="body-1">Body</label>
<input type="text" class="form-control" id="body-1" placeholder="This is a sample body text post." tabindex="2">
</div>
<button id="btn-submit-1" type="button" class="btn btn-primary" tabindex="3">Send</button>
</form>
<div id="res-1"></div>
</div>
<!-- post add js -->
<div class="card card-block">
<h4 class="card-title">POST <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Add Content</h6>
<form id="form-2" class="mt-2">
<div class="form-group">
<label for="title-2">Title</label>
<input type="text" class="form-control" id="title-2" placeholder="My Awesome Title" tabindex="4">
</div>
<div class="form-group">
<label for="body-2">Body</label>
<input type="text" class="form-control" id="body-2" placeholder="This is a sample body text post." tabindex="5">
</div>
<button id="btn-submit-2" type="button" class="btn btn-primary" tabindex="6">Send</button>
</form>
<div id="res-2"></div>
</div>
<!-- put update js -->
<div class="card card-block">
<h4 class="card-title">PUT <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Add Content</h6>
<form id="form-3" class="mt-2">
<div class="form-group">
<label for="id-3">ID</label>
<input type="text" class="form-control" id="id-3" placeholder="1" tabindex="7">
</div>
<div class="form-group">
<label for="title-3">Title</label>
<input type="text" class="form-control" id="title-3" placeholder="My Awesome Title" tabindex="8">
</div>
<div class="form-group">
<label for="body-3">Body</label>
<input type="text" class="form-control" id="body-3" placeholder="This is a sample body text post." tabindex="9">
</div>
<button id="btn-submit-3" type="button" class="btn btn-primary" tabindex="10">Send</button>
</form>
<div id="res-3"></div>
</div>
<!-- patch update js -->
<div class="card card-block">
<h4 class="card-title">PATCH <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Add Content</h6>
<form id="form-4" class="mt-2">
<div class="form-group">
<label for="id-4">ID</label>
<input type="text" class="form-control" id="id-4" placeholder="1" tabindex="11">
</div>
<div class="form-group">
<label for="title-4">Title</label>
<input type="text" class="form-control" id="title-4" placeholder="My Awesome Title" tabindex="12">
</div>
<button id="btn-submit-4" type="button" class="btn btn-primary" tabindex="13">Send</button>
</form>
<div id="res-4"></div>
</div>
<!-- get one item js -->
<div class="card card-block">
<h4 class="card-title">GET <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Load one Content</h6>
<form id="form-5" class="mt-2">
<div class="form-group">
<label for="id-5">ID</label>
<input type="text" class="form-control" id="id-5" placeholder="1" tabindex="14">
</div>
<button id="btn-submit-5" type="button" class="btn btn-primary" tabindex="15">Send</button>
</form>
<div id="res-5"></div>
</div>
<!-- get all itens and filter js -->
<div class="card card-block">
<h4 class="card-title">GET <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Load All Users</h6>
<form id="form-5" class="mt-2">
<div class="form-group">
<label for="filter-6">Filter by</label>
<select name="filter-6" id="filter-6" class="form-control" tabindex="16">
<option value="name">name</option>
<option value="username">username</option>
<option value="email">email</option>
<option value="website">website</option>
</select>
</div>
<button id="btn-submit-6" type="button" class="btn btn-primary" tabindex="17">Send</button>
</form>
<div id="res-6"></div>
</div>
<!-- oauth 2 simples login -->
<div class="card card-block">
<h4 class="card-title">OAuth 2 <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Simple Login</h6>
<a id="btn-login-7" class="btn btn-primary mt-1" tabindex="18">Login</a>
<a id="btn-logout-7" class="btn btn-secondary mt-1" tabindex="19" style="display:none">Logout</a>
</div>
<!-- oauth 2 login get profile -->
<div class="card card-block">
<h4 class="card-title">OAuth 2 <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Get Profile</h6>
<img alt="avatar" id="avatar" style="max-width:100%; display:none;" class="mt-1">
<p id="nickname" style="display:none"></p>
<a id="btn-login-8" class="btn btn-primary mt-1" tabindex="20">Login</a>
<a id="btn-logout-8" class="btn btn-secondary mt-1" tabindex="21" style="display:none">Logout</a>
</div>
<!-- oauth 2 custom login -->
<div class="card card-block">
<h4 class="card-title">OAuth 2 <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Custom Login</h6>
<form id="form-9" class="mt-2 form-signin">
<div class="form-group">
<label for="title-9">E-mail</label>
<input type="email" class="form-control" id="title-9" placeholder="My Awesome Title" tabindex="22" required>
</div>
<div class="form-group">
<label for="body-9">Password</label>
<input type="password" class="form-control" id="body-9" placeholder="This is a sample body text post." tabindex="23" required>
</div>
<a id="btn-login-9" class="btn btn-primary mt-1" tabindex="24">Login</a>
<button class="btn mt-1 btn-danger" type="button" id="btn-google">Google</button>
<button class="btn btn-success mt-1" type="button" id="btn-register">Sign Up</button>
</form>
<div class="form-signin logged-in" style="display:none">
<a id="btn-logout-9" class="btn btn-secondary mt-1" tabindex="25">Logout</a>
</div>
<div id="res-9"></div>
</div>
<!-- oauth 2 implicit token -->
<div class="card card-block">
<h4 class="card-title">OAuth 2 <small class="text-muted">JavaScript</small></h4>
<h6 class="card-subtitle">Implicit Grant</h6>
<a href="https://danvitoriano.auth0.com/authorize?scope=name&response_type=id_token%20token&client_id=NhfvAEwAkCzlIzi2iH1NMcSylPTWTxPA&redirect_uri=https://danvitoriano.github.io/rest-api-examples/token.html" class="btn btn-primary mt-1">
Request Access Token
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row mt-2">
<div class="offset-xs-1 col-xs-10">
<hr>
<footer class="footer text-xs-center">
<p>
<span class="text-muted"><a href="https://github.com/danvitoriano/rest-api-examples">REST API Examples</a> is maintained by <a href="https://github.com/danvitoriano">danvitoriano</a> and it uses <a href="https://jsonplaceholder.typicode.com">JSONPlaceholder</a> and <a href="auth0-samples/auth0-javascript-spa">OAuth 2 Samples</a>.</span>
</p>
<p class="text-muted">
<small>Fork me on <a href="https://github.com/danvitoriano/rest-api-examples">GitHub</a>, open an issue or send a Pull Request to support this project.</small>
</p>
</footer>
</div>
</div>
</div>
<a href="https://github.com/danvitoriano/rest-api-examples"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap-4/js/bootstrap.min.js"></script>
<script src="//cdn.auth0.com/js/lock/10.2/lock.min.js"></script>
<script src="js/login.js" type="text/javascript"></script>
</body>
</html>