Skip to content

Commit 19b1210

Browse files
awolfdenAdam WolfmanAdam Wolfman
authored
Feature/sup 89 update ruby app with new style template (#5)
* Add UI template to SSO app * Update UI for Directory Sync * Update Magic Link app with new UI Co-authored-by: Adam Wolfman <[email protected]> Co-authored-by: Adam Wolfman <[email protected]>
1 parent 6ec2f01 commit 19b1210

File tree

17 files changed

+873
-150
lines changed

17 files changed

+873
-150
lines changed

‎ruby-directory-sync-example/public/styles.css

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
body {
2+
font-family: Inter, sans-serif;
3+
}
4+
5+
.container_login {
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
margin: auto;
10+
width: 30%;
11+
height: 90vh;
12+
}
13+
14+
.container_login img {
15+
height: 150px;
16+
}
17+
18+
.container_login h1 {
19+
font-size: 65px;
20+
color: #111111;
21+
position: relative;
22+
bottom: 10px;
23+
}
24+
25+
.flex {
26+
display: flex;
27+
justify-content: center;
28+
}
29+
30+
.flex_column {
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
37+
.flex_right {
38+
justify-content: flex-end;
39+
}
40+
41+
.flex_space_between {
42+
justify-content: space-between;
43+
}
44+
45+
.hidden {
46+
display: none;
47+
}
48+
49+
.margin_top {
50+
margin-top: 15px;
51+
}
52+
53+
.container_success {
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: center;
57+
margin: auto;
58+
width: 100%;
59+
}
60+
61+
.heading_div {
62+
margin: 25px 0px 25px 0px;
63+
}
64+
65+
.heading_text_div {
66+
align-self: center;
67+
}
68+
69+
.container_success {
70+
display: flex;
71+
flex-direction: column;
72+
justify-content: center;
73+
margin: auto;
74+
width: 100%;
75+
background-size: cover;
76+
}
77+
78+
.button {
79+
background-color: #6363f1;
80+
border: 2px solid #6363f1;
81+
border-radius: 26px;
82+
color: white;
83+
padding: 16px 32px;
84+
text-align: center;
85+
text-decoration: none;
86+
display: inline-block;
87+
font-size: 16px;
88+
margin: 4px 2px;
89+
transition-duration: 0.4s;
90+
cursor: pointer;
91+
}
92+
93+
.button_outline {
94+
background-color: #ffffff;
95+
color: #6363f1;
96+
border-color: #6363f1;
97+
}
98+
99+
.button:hover {
100+
background-color: #555555;
101+
border: 2px solid #555555;
102+
color: white;
103+
}
104+
105+
.login_button {
106+
width: 95%;
107+
}
108+
109+
.half_width {
110+
width: 50%;
111+
}
112+
113+
.directory_button {
114+
width: 40%;
115+
margin-top: 20px;
116+
}
117+
118+
.directory_container {
119+
width: 48vw;
120+
}
121+
122+
h2, h1 {
123+
text-align: center;
124+
color: #555555;
125+
}
126+
127+
.logged_in_div_right {
128+
width: 60%;
129+
height: 90vh;
130+
display: flex;
131+
flex-direction: column;
132+
justify-content: center;
133+
align-items: center;
134+
position: relative;
135+
bottom: 10%;
136+
137+
}
138+
.logged_in_div_left {
139+
width: 40%;
140+
height: 100vh;
141+
display: flex;
142+
flex-direction: column;
143+
justify-content: center;
144+
align-items: center;
145+
background-color: #dad8d8;
146+
}
147+
148+
.logged_in_div_left div {
149+
justify-content: left;
150+
position: relative;
151+
bottom: 20%;
152+
}
153+
154+
.logged_in_div_left h1 {
155+
color: #111111;
156+
font-size: 75px;
157+
text-align: left;
158+
margin-bottom: 0px;
159+
font-weight: normal;
160+
letter-spacing: -.05em;
161+
}
162+
163+
.logged_in_div_left h2 {
164+
color: #6363f1;
165+
font-size: 75px;
166+
text-align: left;
167+
margin-top: 0px;
168+
font-weight: normal;
169+
letter-spacing: -.05em;
170+
}
171+
172+
.logged_in_div_left button {
173+
padding: 8px 22px;
174+
}
175+
176+
div.text_box {
177+
background-color: #dad8d8;
178+
border-radius: 5px;
179+
border: 2px solid #6363f1;
180+
width: 40vw;
181+
max-height: 200px;
182+
overflow: scroll;
183+
padding: 10px;
184+
word-wrap: break-word;
185+
}
186+
187+
.logged_in_nav {
188+
display: flex;
189+
justify-content: space-between;
190+
background-color: #6363f1;
191+
height: 60px;
192+
padding: 7px 7px 7px 10px;
193+
}
194+
.logged_in_nav p {
195+
padding: 4px 0px 0px 15px;
196+
line-height: 1;
197+
color: white;
198+
}
199+
200+
.logged_in_nav img {
201+
height: 50px;
202+
border-radius: 50%;
203+
border: 2px solid #2f2e2e;
204+
}
205+
206+
.logged_in_nav img:hover {
207+
border: 2px solid #555555;
208+
}
209+
210+
.webhooks_container {
211+
width: 45vw;
212+
background-color: #dad8d8;
213+
padding: 25px;
214+
max-height: 700px;
215+
overflow-y: scroll;
216+
217+
}

‎ruby-directory-sync-example/public/workos_logo_new.png

114 KB
Loading

‎ruby-directory-sync-example/views/directory.erb

Lines changed: 61 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,61 @@
1-
<% if @users.any? %>
2-
<h2>Users</h2>
3-
4-
<ul>
5-
<% @users.each do |user| %>
6-
<li>
7-
<a href="/users/<%= user.id %>">
8-
<%= user.username %>
9-
</a>
10-
</li>
11-
<% end %>
12-
</ul>
13-
<% end %>
14-
15-
16-
<% if @groups.any? %>
17-
<h2>Groups</h2>
18-
19-
<ul>
20-
<% @groups.each do |group| %>
21-
<li>
22-
<a href="/groups/<%= group.id %>">
23-
<%= group.name %>
24-
</a>
25-
</li>
26-
<% end %>
27-
</ul>
28-
<% end %>
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type="text/css" href="<%= url("/styles.css")%>">
4+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
5+
</head>
6+
<body class="container_success">
7+
<div class="logged_in_nav">
8+
<div class="flex">
9+
<p>Directory Users and Groups</p>
10+
</div>
11+
<div>
12+
<img src="<%= url("/workos_logo_new.png")%>" alt="workos logo">
13+
</div>
14+
</div>
15+
<div class='flex'>
16+
<div class="logged_in_div_left">
17+
<div>
18+
<h1>Your app,</h1>
19+
<h2>Enterprise Ready</h2>
20+
</div>
21+
<div>
22+
<a href="https://workos.com/" target="_blank"><button class='button'>WorkOS</button></a>
23+
<a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
24+
<a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API Reference</button></a>
25+
<a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
26+
<a href="javascript:history.back()"><button class='button'>Home</button></a>
27+
28+
</div>
29+
</div>
30+
<div class="logged_in_div_right">
31+
<div class="flex_column">
32+
<h2>Users</h2>
33+
<div class="text_box">
34+
<ul>
35+
<% @users.each do |user| %>
36+
<li>
37+
<a href="/users/<%= user.id %>">
38+
<%= user.username %>
39+
</a>
40+
</li>
41+
<% end %>
42+
</ul>
43+
</div>
44+
<h2>Groups</h2>
45+
<div class="text_box">
46+
<ul>
47+
<% @groups.each do |group| %>
48+
<li>
49+
<a href="/groups/<%= group.id %>">
50+
<%= group.name %>
51+
</a>
52+
</li>
53+
<% end %>
54+
</ul>
55+
</div>
56+
</div>
57+
58+
</div>
59+
</div>
60+
</body>
61+
</html>

‎ruby-directory-sync-example/views/group.erb

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,57 @@
1-
<% if @group %>
2-
<h2>Group</h2>
3-
4-
<pre><%= JSON.pretty_generate(@group) %></pre>
5-
<% end %>
6-
7-
8-
<% if @group_users.any? %>
9-
<h2>Group Users</h2>
10-
11-
<ul>
12-
<% @group_users.each do |user| %>
13-
<li>
14-
<a href="/users/<%= user.id %>">
15-
<%= user.username %>
16-
</a>
17-
</li>
18-
<% end %>
19-
</ul>
20-
<% end %>
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type="text/css" href="<%= url("/styles.css")%>">
4+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
5+
</head>
6+
<body class="container_success">
7+
<div class="logged_in_nav">
8+
<div class="flex">
9+
<p>User Profile</p>
10+
</div>
11+
<div>
12+
<img src="<%= url("/workos_logo_new.png")%>" alt="workos logo">
13+
</div>
14+
</div>
15+
<div class='flex'>
16+
<div class="logged_in_div_left">
17+
<div>
18+
<h1>Your app,</h1>
19+
<h2>Enterprise Ready</h2>
20+
</div>
21+
<div>
22+
<a href="https://workos.com/" target="_blank"><button class='button'>WorkOS</button></a>
23+
<a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
24+
<a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API Reference</button></a>
25+
<a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
26+
<a href="javascript:history.back()"><button class='button'>Back</button></a>
27+
28+
</div>
29+
</div>
30+
<div class="logged_in_div_right">
31+
<div class="flex_column">
32+
<h2>User Profile</h2>
33+
<div class="text_box">
34+
<pre><%= JSON.pretty_generate(@group) %></pre>
35+
</div>
36+
<h2>User's Groups</h2>
37+
<div class="text_box">
38+
<ul>
39+
<ul>
40+
<ul>
41+
<% @group_users.each do |user| %>
42+
<li>
43+
<a href="/users/<%= user.id %>">
44+
<%= user.username %>
45+
</a>
46+
</li>
47+
<% end %>
48+
</ul>
49+
</ul>
50+
</ul>
51+
</div>
52+
</div>
53+
54+
</div>
55+
</div>
56+
</body>
57+
</html>

0 commit comments

Comments
 (0)