mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-03-14 14:11:51 +01:00
Initial dummy implementation
This commit is contained in:
konarfil
89
src/css/style.css
Normal file
89
src/css/style.css
Normal file
@@ -0,0 +1,89 @@
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
/* Primary Color */
|
||||
.btn,
|
||||
.nav-wrapper {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
/* Secondary Color */
|
||||
.btn-secondary {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
/* Text color for the white button */
|
||||
}
|
||||
|
||||
/* Accent Colors */
|
||||
.btn-accent-1 {
|
||||
background-color: #666666;
|
||||
}
|
||||
|
||||
.btn-accent-2 {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
/* Background Color */
|
||||
body {
|
||||
background-color: #FAFAFA;
|
||||
}
|
||||
|
||||
/* Error Color */
|
||||
.btn-error {
|
||||
background-color: #FF3333;
|
||||
}
|
||||
|
||||
/* Success Color */
|
||||
.btn-success {
|
||||
background-color: #33FF66;
|
||||
}
|
||||
|
||||
/* Text Color for Primary buttons */
|
||||
.btn,
|
||||
.nav-wrapper {
|
||||
color: #FAFAFA;
|
||||
}
|
||||
|
||||
/* Footer Colors */
|
||||
.page-footer {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.page-footer .container,
|
||||
.page-footer .container .text-lighten-4 {
|
||||
color: #FAFAFA;
|
||||
}
|
||||
|
||||
.page-footer a {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.page-footer .container .text-lighten-4 a {
|
||||
color: #999999;
|
||||
/* A slightly lighter gray */
|
||||
}
|
||||
|
||||
.page-footer .footer-copyright {
|
||||
background-color: #2E2E2E;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn-large:hover,
|
||||
.btn-small:hover {
|
||||
background-color: #FF6600;
|
||||
}
|
||||
|
||||
/* For raised buttons */
|
||||
.btn:not(.disabled):hover,
|
||||
.btn-large:not(.disabled):hover,
|
||||
.btn-small:not(.disabled):hover {
|
||||
background-color: #FF6600;
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
143
src/index.html
Normal file
143
src/index.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OAuth Playground</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-wrapper">
|
||||
<a href="#" class="brand-logo center">
|
||||
OAuth 2.0 Playground
|
||||
<span style="font-size: 15px; color:#FF6600; font-weight:bold;">by Y Soft</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<h3 class="header" style="text-align: center;">Lorem Ipsum</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3 class="header" style="text-align: center;">Flows</h3>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s4">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
<h5>Authorization Code Flow</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="#">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
<h5>Device Authorization Grant</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="#">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
<h5>WebAuthN</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="#">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<footer class="page-footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col l6 s12">
|
||||
<h5 class="white-text">OAuth Playground</h5>
|
||||
<p class="grey-text text-lighten-4">This playground serves as an interactive platform designed to familiarize developers and students with the
|
||||
intricacies of OAuth authentication processes. Beyond just theoretical knowledge, this playground provides practical insights into the OAuth token exchange,
|
||||
callback handling, and potential pitfalls or challenges one might face during real-world integrations. The ultimate aim is to bolster
|
||||
understanding and confidence in implementing OAuth, ensuring secure and efficient user authentication and authorization
|
||||
in modern web applications.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col l4 offset-l2 s12">
|
||||
<h5 class="white-text">Links</h5>
|
||||
<ul>
|
||||
<li><a class="grey-text text-lighten-3" href="https://www.oauth.com/" target="_blank">OAuth 2.0 Simplified</a></li>
|
||||
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
|
||||
<li><a class="grey-text text-lighten-3" href="https://en.wikipedia.org/wiki/OAuth" target="_blank">OAuth Wikipedia</a></li>
|
||||
<li><a class="grey-text text-lighten-3" href="https://www.ietf.org/rfc/rfc6749.txt" target="_blank">OAuth 2.0 RFC</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-copyright">
|
||||
<div class="container">
|
||||
© 2023 Y Soft Corporation
|
||||
<a class="grey-text text-lighten-4 right" style="color:#FF6600 !important; font-weight:bold;" href="https://www.daretothinkbyg.com" target="_blank">Join us today!</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
0
src/pages/user-registration.html
Normal file
0
src/pages/user-registration.html
Normal file
Reference in New Issue
Block a user