Skip to content

Commit 7f7ead6

Browse files
adamzinderadamzinder
authored
adds new styling and routes as well as an updated readme (#95)
1 parent e7b5bef commit 7f7ead6

File tree

12 files changed

+220
-105
lines changed

12 files changed

+220
-105
lines changed

‎ruby-rails-sso-example/Gemfile.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ GEM
204204
rexml (~> 3.2, >= 3.2.5)
205205
rubyzip (>= 1.2.2, < 3.0)
206206
websocket (~> 1.0)
207-
sorbet-runtime (0.5.10741)
207+
sorbet-runtime (0.5.10841)
208208
spring (2.1.1)
209209
spring-watcher-listen (2.0.1)
210210
listen (>= 2.7, < 4.0)
@@ -246,7 +246,7 @@ GEM
246246
websocket-driver (0.7.5)
247247
websocket-extensions (>= 0.1.0)
248248
websocket-extensions (0.1.5)
249-
workos (2.12.0)
249+
workos (2.13.0)
250250
sorbet-runtime (~> 0.5)
251251
xpath (3.2.0)
252252
nokogiri (~> 1.8)
@@ -280,7 +280,7 @@ DEPENDENCIES
280280
web-console (>= 3.3.0)
281281
webdrivers
282282
webpacker (~> 4.0)
283-
workos (= 2.12.0)
283+
workos (= 2.13.0)
284284

285285
RUBY VERSION
286286
ruby 2.7.2p137

‎ruby-rails-sso-example/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@ You'll need to create an [Organization](https://dashboard.workos.com/organizatio
3333

3434
Run `cp .env.example .env` and add your [API Key](https://dashboard.workos.com/api-keys) and [Client ID](https://dashboard.workos.com/configuration). The `workos` gem will read your API key from the ENV variable `WORKOS_API_KEY` and your Client ID from the ENV variable `WORKOS_CLIENT_ID`. You may also set the API key and Client ID yourself by adding `WorkOS.key = $YOUR_API_KEY` and `CLIENT_ID = $YOUR_CLIENT_ID` to `sessions_controller.rb`.
3535

36-
Additionally, you'll want to set the `CONNECTION_ID` in the `sessions_controller.rb` for the Connection you are testing.
36+
Additionally, you'll want to set the `ORGANIZATION_ID` in the `sessions_controller.rb` for the Connection you are testing.
3737

3838
## Run the application and sign in using SSO
3939

4040
Start the server:
41+
4142
```bash
4243
foreman start -f Procfile.dev
4344
```

‎ruby-rails-sso-example/app/assets/images/google-button.png‎

5.68 KB
Loading

‎ruby-rails-sso-example/app/assets/images/microsoft-button.png‎

3.24 KB
Loading

‎ruby-rails-sso-example/app/assets/images/saml-button.png‎

4.87 KB
Loading

ruby-rails-sso-example/app/assets/images/workos_full_logo.png renamed to ruby-rails-sso-example/app/assets/images/workos-logo-with-text.png

File renamed without changes.

‎ruby-rails-sso-example/app/assets/stylesheets/application.css‎

Lines changed: 151 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
22
font-family: Inter, sans-serif;
33
background-color: #f9f9fb;
4-
4+
min-width: 739px;
55
}
66

77
.container_login {
@@ -27,6 +27,7 @@ body {
2727
.flex {
2828
display: flex;
2929
justify-content: center;
30+
align-items: center;
3031
}
3132

3233
.flex_column {
@@ -36,8 +37,8 @@ body {
3637
align-items: center;
3738
}
3839

39-
.space-between {
40-
justify-content: space-between;
40+
.m-top-20 {
41+
margin-top: 20px;
4142
}
4243

4344
.width-75 {
@@ -47,6 +48,41 @@ body {
4748
.width-40vw {
4849
width: 40vw;
4950
}
51+
.width-25vw {
52+
width: 25vw;
53+
}
54+
55+
.width-18vw {
56+
width: 18vw;
57+
}
58+
59+
.width-941px {
60+
width: 941px;
61+
}
62+
63+
.width-335 {
64+
width: 335px;
65+
}
66+
67+
.height-315 {
68+
height: 315px;
69+
}
70+
71+
.height-40vh {
72+
height: 40vw;
73+
}
74+
75+
.height-80vh {
76+
height: 80vh;
77+
}
78+
79+
.height-100vh {
80+
height: 100vh;
81+
}
82+
83+
.space-between {
84+
justify-content: space-between;
85+
}
5086

5187
.container_success {
5288
display: flex;
@@ -57,7 +93,58 @@ body {
5793
}
5894

5995
.heading_div {
60-
margin: 25px 0px 25px 0px;
96+
margin: 35px 0px 0px 0px;
97+
}
98+
99+
.text_input {
100+
border: 1px solid #555555;
101+
border-radius: 10px;
102+
margin: 10px 0px 7px 0px;
103+
padding: 5px;
104+
height: 35px;
105+
width: 18vw;
106+
text-align: center;
107+
}
108+
109+
.code-input {
110+
width: 75px;
111+
height: 100px;
112+
margin: 0px 5px 30px 5px;
113+
font-size: 60px;
114+
color: darkslategray;
115+
}
116+
117+
.qr_div {
118+
align-self: center;
119+
margin-top: 45px;
120+
}
121+
122+
.qr_code {
123+
width: 7vw;
124+
max-width: 100px;
125+
}
126+
127+
.factor_card {
128+
border: 1px solid #555555;
129+
border-radius: 10px;
130+
width: 20vw;
131+
margin: 0px 15px 0px 15px;
132+
padding: 25px;
133+
}
134+
135+
.card {
136+
border: 1px solid #555555;
137+
border-radius: 10px;
138+
margin: 0px 15px 0px 15px;
139+
padding: 25px 50px;
140+
margin-bottom: 20px;
141+
}
142+
143+
.profile_card {
144+
width: 40vw;
145+
overflow: scroll;
146+
background: white;
147+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
61148
}
62149

63150
.heading_text_div {
@@ -76,7 +163,7 @@ body {
76163
.button {
77164
background-color: #6363f1;
78165
border: 2px solid #6363f1;
79-
border-radius: 26px;
166+
border-radius: 10px;
80167
color: white;
81168
padding: 8px 16px;
82169
text-align: center;
@@ -94,6 +181,9 @@ body {
94181
color: #6363f1;
95182
padding: 8px 16px;
96183
}
184+
.button-sm {
185+
padding: 8px 16px;
186+
}
97187

98188
.button:hover,
99189
.button-outline:hover {
@@ -117,6 +207,17 @@ h1 {
117207
color: #555555;
118208
}
119209

210+
.login_button {
211+
width: 100%;
212+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
213+
background-color: white;
214+
}
215+
216+
.login_button:hover {
217+
border-color: #6363f1;
218+
color: #292929;
219+
}
220+
120221
.logged_in_div_right {
121222
width: 60%;
122223
height: 90vh;
@@ -449,6 +550,7 @@ body {
449550
position: relative;
450551
width: 100%;
451552
margin-bottom: 30px;
553+
flex-direction: row;
452554
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
453555
}
454556

@@ -569,4 +671,48 @@ footer p a:hover{
569671
border-radius: 5px;
570672
}
571673

674+
.workos-logo {
675+
position: relative;
676+
top: 38px;
677+
padding-right: 25px;
678+
height: 75px !important;
679+
}
680+
.webhooks_container {
681+
width: 45vw;
682+
padding: 25px;
683+
max-height: 450px;
684+
overflow-y: scroll;
685+
}
686+
.mb-0 {
687+
margin-bottom: 0px;
688+
}
689+
.mb-20 {
690+
margin-bottom: 20px;
691+
}
692+
.google_button {
693+
background-image: url("google-button.png");
694+
background-size: cover;
695+
}
696+
.microsoft_button {
697+
background-image: url("microsoft-button.png");
698+
background-size: cover;
699+
}
700+
.saml_button {
701+
background-image: url("saml-button.png");
702+
background-size: cover;
703+
}
704+
.error_message {
705+
color: #6363f1;
706+
margin-top: 0px;
707+
font-size: 12px;
708+
}
709+
#noborder {
710+
border: none;
711+
}
712+
#noborder > :first-child {
713+
display: none;
714+
}
572715

716+
.cw-425 {
717+
width:425px;
718+
}

‎ruby-rails-sso-example/app/controllers/users/sessions_controller.rb‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,28 @@ class Users::SessionsController < Devise::SessionsController
55
WorkOS.key = ENV['WORKOS_API_KEY']
66
CLIENT_ID = ENV['WORKOS_CLIENT_ID']
77

8-
# Set the Connection ID that you want to test
9-
CONNECTION_ID = 'CHANGE TO YOUR CONNECTION'
8+
# Set the Organization ID that you want to test
9+
ORGANIZATION_ID = 'CHANGE TO YOUR ORGANIZATION'
1010

1111
# GET /sso/new path to authenticate via WorkOS
1212
# You can also use connection or provider parameters
1313
# in place of the domain parameter
1414
# https://workos.com/docs/reference/sso/authorize/get
1515
def auth
16-
authorization_url = WorkOS::SSO.authorization_url(
17-
connection: CONNECTION_ID,
16+
login_type = params[:login_method]
17+
params = {
1818
client_id: CLIENT_ID,
1919
redirect_uri: ENV['WORKOS_REDIRECT_URI'],
20-
)
21-
20+
state: ""
21+
}
22+
23+
if login_type == 'saml'
24+
params[:organization] = ORGANIZATION_ID
25+
else
26+
params[:provider] = login_type
27+
end
28+
29+
authorization_url = WorkOS::SSO.authorization_url(**params)
2230
redirect_to authorization_url
2331
end
2432

@@ -30,6 +38,7 @@ def callback
3038
)
3139
@user = User.from_sso(profile_and_token.profile)
3240
@user.save
41+
puts User.all
3342
sign_in_and_redirect @user
3443
end
3544

‎ruby-rails-sso-example/app/views/application/home.html.erb‎

Lines changed: 33 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,37 @@
11
<div class="logged_in_nav">
2-
<div class="flex">
3-
<div>
4-
<%= image_tag("workos_full_logo.png", :alt => "WorkOS Logo") %> </div>
5-
</div>
6-
<div>
7-
<a href="https://workos.com/docs" target="_blank"><button class='button nav-item'>Documentation</button></a>
8-
<a href="https://workos.com/docs/reference" target="_blank"><button class='button nav-item'>API
9-
Reference</button></a>
10-
<a href="https://workos.com/blog" target="_blank"><button
11-
class='button nav-item blog-nav-button'>Blog</button></a>
12-
<a href="https://workos.com/" target="_blank"><button class='button button-outline'>WorkOS</button></a>
13-
</div>
14-
</div>
15-
<div class='flex'>
16-
<div class="logged_in_div_left">
17-
<div class="title-text">
18-
<h1>Your app,</h1>
19-
<h2 class="home-hero-gradient">Enterprise Ready</h2>
20-
</div>
21-
<div class="title-subtext">
22-
<p>Start selling to enterprise customers with just a few lines of code.</p>
23-
<p>Implement features like single sign-on in minutes instead of months.</p>
2+
<div class="flex">
3+
<div>
4+
<%= image_tag("workos-logo-with-text.png", :alt => "WorkOS Logo") %> </div>
5+
</div>
6+
7+
</div>
8+
<div class="flex">
9+
<a href="https://workos.com/docs" target="_blank"><button class='button nav-item'>Documentation</button></a>
10+
<a href="https://workos.com/docs/reference" target="_blank"><button class='button nav-item'>API
11+
Reference</button></a>
12+
<a href="https://workos.com/blog" target="_blank"><button
13+
class='button nav-item blog-nav-button'>Blog</button></a>
14+
<a href="https://workos.com/" target="_blank"><button class='button button-outline'>WorkOS</button></a>
15+
</div>
16+
</div>
17+
<div class='flex'>
18+
<div class="logged_in_div_right">
19+
<div class="flex_column">
20+
<div class="flex width-941px space-between">
21+
<div>
22+
<p>Profile Details</p>
23+
</div>
24+
<div>
25+
<%= form_with url: sign_out_path, method: :delete, local: true do |f| %>
26+
<%= f.submit "Sign Out", class: 'button button-outline' %> </div>
27+
<% end %>
2428
</div>
25-
<div class="flex success-buttons">
26-
<a href="https://workos.com/signup" target="_blank"><button class='button'>Get Started</button></a>
27-
<a href="mailto:[email protected]?subject=WorkOS Sales Inquiry" target="_blank"><button
28-
class='button button-outline sales-button'>Contact
29-
Sales</button></a>
29+
<div>
30+
<pre id="noborder" class="prettyprint noborder">
31+
<%= JSON.pretty_generate(current_user.attributes) %>
32+
</pre>
3033
</div>
31-
</div>
32-
<div class="logged_in_div_right">
33-
<% if current_user %>
34-
<p>You're logged in <%=current_user.first_name%>, welcome!</p>
35-
<div class="flex_column">
36-
<h2>Raw Profile Response Details</h2>
37-
<div class="text_box">
38-
<pre class="prettyprint"><%= JSON.pretty_generate(current_user.attributes) %></pre>
39-
40-
</div>
4134
</div>
42-
<%= form_with url: sign_out_path, method: :delete, local: true do |f| %>
43-
<%= f.submit "Sign Out", class: 'button login_button' %>
44-
<% end %>
45-
</div>
46-
</div>
47-
</div>
48-
</div>
49-
<% end %>
35+
</div>
36+
</div>
37+
</div>

0 commit comments

Comments
 (0)