Skip to content
This repository was archived by the owner on Jan 9, 2026. It is now read-only.

Commit e8d75cd

Browse files
edignotedignot
authored
Merge pull request #20 from workos/feature/sup-1237-typescript-update-dsync-webhooks-page-ui
Update UI for directory sync app webhook page
2 parents c6e0206 + dc4726d commit e8d75cd

4 files changed

Lines changed: 24 additions & 40 deletions

File tree

‎typescript-directory-sync-example/public/stylesheets/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,12 @@ th {
354354
padding: 15px 40px;
355355
}
356356

357+
.webhooks-container,
358+
.table-container {
359+
max-height: 600px;
360+
overflow-y: scroll;
361+
}
362+
357363
.width-75 {
358364
width: 75%;
359365
}

‎typescript-directory-sync-example/views/groups.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</div>
4040
</div>
4141
<% if (groups.length > 0) { %>
42-
<div>
42+
<div class="table-container">
4343
<table class="width-507px">
4444
<tr>
4545
<th>Name</th>

‎typescript-directory-sync-example/views/users.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</div>
4040
</div>
4141
<% if (users.length > 0) { %>
42-
<div>
42+
<div class="table-container">
4343
<table class="width-507px">
4444
<tr>
4545
<th>Name</th>

‎typescript-directory-sync-example/views/webhooks.ejs‎

Lines changed: 16 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<link rel="stylesheet" href="../public/stylesheets/style.css">
44
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
55
</head>
6+
67
<body class="container_success">
78
<div class="logged_in_nav">
89
<div class="flex">
@@ -19,41 +20,21 @@
1920
<a href="https://workos.com/" target="_blank"><button class='button button-outline'>WorkOS</button></a>
2021
</div>
2122
</div>
22-
<div class='flex'>
23-
<div class="logged_in_div_left">
24-
<div class="title-text">
25-
<h1>Your app,</h1>
26-
<h2 class="home-hero-gradient">Enterprise Ready</h2>
27-
</div>
28-
<div class="title-subtext">
29-
<p>Start selling to enterprise customers with just a few lines of code.</p>
30-
<p>Implement features like single sign-on in minutes instead of months.</p>
31-
</div>
32-
<div class="flex success-buttons">
33-
<a href="https://workos.com/signup" target="_blank"><button class='button'>Get Started</button></a>
34-
<a href="mailto:sales@workos.com?subject=WorkOS Sales Inquiry" target="_blank"><button
35-
class='button button-outline sales-button'>Contact
36-
Sales</button></a>
37-
</div>
38-
</div>
3923
<div class="logged_in_div_right">
40-
<div class="flex_column">
41-
<h2>Webhooks</h2>
42-
<div id="webhooks-view" class="width-40vw webhooks-container"></div>
43-
</div>
44-
<div id='clear_button_div' class='flex directory_container'>
45-
<div id="tutorial_button" class="flex half_width">
46-
<a href="https://workos.com/blog/test-workos-webhooks-locally-ngrok" target="_blank"
47-
class="button webhooks-tutorial-button">Webhooks Tutorial</a>
48-
</div>
49-
<div id="clear_button" class="hidden">
50-
<a href="/webhooks" class="button button-outline">Clear</a>
24+
<div id="webhooks-view-div" class="flex_column">
25+
<div class="flex width-40vw space-between">
26+
<h2>Live Webhooks View</h2>
27+
<div id="tutorial_button">
28+
<a href="https://workos.com/blog/test-workos-webhooks-locally-ngrok" target="_blank"
29+
class="button mt-15">Tutorial</a>
30+
<a href="/webhooks" class="button mt-10">Clear</a>
31+
<a href="javascript:history.back()"><button class='button button-outline'>Back</button></a>
32+
</div>
5133
</div>
52-
<div>
53-
<a style="align-self:flex-end; padding:10px;" href="javascript:history.back()"><button
54-
class='button button-outline'>Back</button></a>
34+
<div id="webhooks-view" class="width-40vw webhooks-container">
35+
5536
</div>
56-
</div>
37+
</div>
5738
</div>
5839
</div>
5940
<script src="/socket.io/socket.io.js"></script>
@@ -72,13 +53,10 @@
7253
socket.on('webhook event', (data) => {
7354
webhooksView.classList.add("webhooks_container")
7455
webhooksView.insertAdjacentHTML("afterbegin",
75-
"<div class='margin_top'> Webhook received at: " + new Date().toISOString() + "</div>" +
76-
"<br/>" +
77-
"<pre>" +
78-
"<code class=`prettyprint`>" + JSON.stringify(data.webhook, null, 2) + "</code>" +
79-
"</pre>" +
56+
"<div class='margin_top width-40vw'> Webhook received at: " + new Date().toISOString() + "</div>" +
8057
"<br/>" +
81-
"<hr style='max-width: 40vw' />"
58+
"<pre>" + "<code>" + JSON.stringify(data.webhook, null, 2) + "</code>" + "</pre>" +
59+
"<br/>" + "<hr/>" + "<br/>"
8260
);
8361
if (counter < 1) {
8462
clearButtonDiv.classList.remove('login_button')

0 commit comments

Comments
 (0)