Skip to content

Commit ead653a

Browse files
adamzinderadamzinder
authored
add flushed out admin portal app with styling (#6)
1 parent 19b1210 commit ead653a

File tree

12 files changed

+418
-0
lines changed

12 files changed

+418
-0
lines changed

‎ruby-admin-portal-example/.env.example

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
WORKOS_API_KEY=<Replace with your key>

‎ruby-admin-portal-example/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.env

‎ruby-admin-portal-example/.ruby-version

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
2.7.2

‎ruby-admin-portal-example/Gemfile

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
source 'https://rubygems.org'
2+
3+
gem 'dotenv'
4+
gem 'sinatra'
5+
gem 'workos'
6+
gem 'pry'

‎ruby-admin-portal-example/Gemfile.lock

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
coderay (1.1.3)
5+
dotenv (2.7.6)
6+
method_source (1.0.0)
7+
mustermann (1.1.1)
8+
ruby2_keywords (~> 0.0.1)
9+
pry (0.14.1)
10+
coderay (~> 1.1)
11+
method_source (~> 1.0)
12+
rack (2.2.3)
13+
rack-protection (2.1.0)
14+
rack
15+
ruby2_keywords (0.0.5)
16+
sinatra (2.1.0)
17+
mustermann (~> 1.0)
18+
rack (~> 2.2)
19+
rack-protection (= 2.1.0)
20+
tilt (~> 2.0)
21+
sorbet-runtime (0.5.9475)
22+
tilt (2.0.10)
23+
workos (2.1.0)
24+
sorbet-runtime (~> 0.5)
25+
26+
PLATFORMS
27+
ruby
28+
29+
DEPENDENCIES
30+
dotenv
31+
pry
32+
sinatra
33+
workos
34+
35+
BUNDLED WITH
36+
2.1.4

‎ruby-admin-portal-example/README.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Ruby Example App with Admin Portal powered by WorkOS
2+
3+
An example application demonstrating to use the [WorkOS Ruby SDK](https://github.com/workos-inc/workos-ruby) to access the Admin Portal for SSO and Directory Sync.
4+
5+
## Prerequisites
6+
7+
Ruby 2.7.2
8+
9+
## Ruby Project Setup
10+
11+
1. Clone the main repo and install dependencies for the app you'd like to use:
12+
```bash
13+
# HTTPS
14+
git clone https://github.com/workos-inc/ruby-example-applications.git
15+
```
16+
or
17+
18+
```bash
19+
# SSH
20+
git clone [email protected]:workos-inc/ruby-example-applications.git
21+
```
22+
23+
2. Navigate to the Admin Portal app within the cloned repo.
24+
```bash
25+
$ cd ruby-example-applications/ruby-admin-portal-example
26+
```
27+
28+
3. Install the dependencies.
29+
```bash
30+
$ bundle install
31+
```
32+
## Configure your environment
33+
34+
1. Grab your [API Key](https://dashboard.workos.com/api-keys).
35+
2. Get your [Client ID](https://dashboard.workos.com/configuration).
36+
3. Create a `.env` file at the root of the project and populate with the
37+
following environment variables (using values found above):
38+
39+
```typescript
40+
WORKOS_API_KEY=your_api_key_here
41+
WORKOS_CLIENT_ID=your_client_id_here
42+
```
43+
44+
4. Set your [Default Redirect Link](https://dashboard.workos.com/configuration).
45+
46+
## Run the server and log in using SSO
47+
48+
```sh
49+
ruby app.rb
50+
```
51+
52+
Head to `http://localhost:4567/` to begin!
53+
54+
55+
## Need help?
56+
57+
If you get stuck and aren't able to resolve the issue by reading our [WorkOS Admin Portal documentation](https://workos.com/docs/admin-portal/guide/introduction), API reference, or tutorials, you can reach out to us at [email protected] and we'll lend a hand.

‎ruby-admin-portal-example/app.rb

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
require 'dotenv/load'
2+
require 'sinatra'
3+
require 'workos'
4+
require 'json'
5+
6+
$organization
7+
8+
get '/' do
9+
10+
erb :index
11+
end
12+
13+
post '/provision-enterprise' do
14+
domains = params['domain'].split(" ")
15+
organizationName = params['org']
16+
# if an organization does exist with the domain, use that organization for connection
17+
organizations = WorkOS::Organizations.list_organizations(
18+
domains: domains
19+
)
20+
21+
if organizations.data.length == 0
22+
$organization = WorkOS::Organizations.create_organization(
23+
name: organizationName,
24+
domains: domains
25+
)
26+
27+
erb :loggedin
28+
else
29+
$organization = organizations.data[0]
30+
erb :loggedin
31+
end
32+
33+
end
34+
35+
get('/dsync-admin-portal') do
36+
organization_id = $organization.id # ... The ID of the organization to start an Admin Portal session for
37+
link = WorkOS::Portal.generate_link(
38+
organization: organization_id,
39+
intent: 'sso',
40+
)
41+
redirect link
42+
end
43+
44+
get('/sso-admin-portal') do
45+
organization_id = $organization.id # ... The ID of the organization to start an Admin Portal session for
46+
link = WorkOS::Portal.generate_link(
47+
organization: organization_id,
48+
intent: 'sso',
49+
)
50+
redirect link
51+
end

‎ruby-admin-portal-example/public/images/workos_logo_new.png

114 KB
Loading

‎ruby-admin-portal-example/public/stylesheets/styles.css

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

‎ruby-admin-portal-example/views/index.erb

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<body class="container_login">
2+
<div class='flex_column'>
3+
<div class="flex heading_div">
4+
<img src="<%= url("images/workos_logo_new.png")%>" alt="workos logo">
5+
<div class="heading_text_div">
6+
<h1>WorkOS</h1>
7+
</div>
8+
</div>
9+
10+
<h2>Node.js Admin Portal Example App</h2>
11+
<form method="POST" action="/provision-enterprise">
12+
<div class='flex_column'>
13+
<div>
14+
<input type="text" placeholder='Enter Your Organization Name to Provision' id="org" name="org" class="text_input" required>
15+
</div>
16+
<div>
17+
<input type="text" placeholder='Enter a Space Separated List of Domains Used By the Org' id="domain" name="domain" class="text_input_2" required>
18+
</div>
19+
<div>
20+
<button type="submit" class="button">Create Organization and Log In</button>
21+
</div>
22+
</div>
23+
</form>
24+
</div>
25+
</body>

0 commit comments

Comments
 (0)