mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-06-27 12:26:24 +02:00
Initial dummy implementation
This commit is contained in:
konarfil
@@ -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
@@ -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>
|
||||||
Reference in New Issue
Block a user