Skip to content

Commit 4d2f0b2

Browse files
awolfdenAdam Wolfman
awolfden
and
Adam Wolfman
authored
Update Flask example applications (#19)
* Add top-level python flask env for Semaphore * Update sdk versions and readme files * Update sso app templates * Update workos sdk version * Update templates for mfa and magic link * Update UI for dsync * Run black to reformat project * Update README for all apps Co-authored-by: Adam Wolfman <[email protected]>
1 parent 9c9d03b commit 4d2f0b2

File tree

32 files changed

+1144
-527
lines changed

32 files changed

+1144
-527
lines changed

‎python-flask-admin-portal-example/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# python-flask-admin-portal-example
2-
An example Flask application demonstrating how to use the [WorkOS Python SDK](https://github.com/workos-inc/workos-python) so your customers can access the WorkOS Admin Portal from your application.
2+
An example Flask application demonstrating how to use the [WorkOS Python SDK](https://github.com/workos/workos-python) so your customers can access the WorkOS Admin Portal from your application.
33

44
## Prerequisites
55
- Python 3.6+
@@ -9,14 +9,14 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
99
1. Clone the main git repo for these Python example apps using your preferred secure method (HTTPS or SSH).
1010
```bash
1111
# HTTPS
12-
$ git clone https://github.com/workos-inc/python-flask-example-applications.git
12+
$ git clone https://github.com/workos/python-flask-example-applications.git
1313
```
1414

1515
or
1616

1717
```bash
1818
# SSH
19-
$ git clone [email protected]:workos-inc/python-flask-example-applications.git
19+
$ git clone [email protected]:workos/python-flask-example-applications.git
2020
```
2121

2222
2. Navigate to the Admin Portal example app within the cloned repo.

‎python-flask-admin-portal-example/requirements.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ MarkupSafe==2.0.1
99
requests==2.26.0
1010
urllib3==1.26.7
1111
Werkzeug==2.0.1
12-
workos==1.12.0
12+
workos==1.14.0
1313
python-dotenv

‎python-flask-admin-portal-example/static/css/login.css

+159-53
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
body {
22
font-family: Inter, sans-serif;
3+
background-color: #f9f9fb;
4+
35
}
46

57
.container_login {
@@ -22,26 +24,6 @@ body {
2224
bottom: 10px;
2325
}
2426

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: 375px;
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: 375px;
42-
text-align: center;
43-
}
44-
4527
.flex {
4628
display: flex;
4729
justify-content: center;
@@ -54,6 +36,24 @@ body {
5436
align-items: center;
5537
}
5638

39+
.space-between {
40+
justify-content: space-between;
41+
}
42+
43+
.width-75 {
44+
width: 75%;
45+
}
46+
47+
.width-40vw {
48+
width: 40vw;
49+
overflow: scroll;
50+
word-wrap: break-word;
51+
}
52+
53+
.width-95 {
54+
width: 95%;
55+
}
56+
5757
.container_success {
5858
display: flex;
5959
flex-direction: column;
@@ -84,31 +84,38 @@ body {
8484
border: 2px solid #6363f1;
8585
border-radius: 26px;
8686
color: white;
87-
padding: 16px 32px;
87+
padding: 8px 16px;
8888
text-align: center;
8989
text-decoration: none;
9090
display: inline-block;
9191
font-size: 16px;
9292
margin: 4px 2px;
9393
transition-duration: 0.4s;
9494
cursor: pointer;
95-
}
95+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
96+
}
97+
98+
.button-outline {
99+
background-color: #f9f9fb;
100+
color: #6363f1;
101+
padding: 8px 16px;
102+
}
96103

97-
.button:hover {
104+
.button:hover,
105+
.button-outline:hover {
98106
background-color: #555555;
99107
border: 2px solid #555555;
100108
color: white;
101109
}
102110

103-
.dsync_button {
104-
width: 400px;
111+
.sales-button {
112+
margin-left: 10px;
105113
}
106114

107-
.login_button {
108-
width: 95%;
109-
}
110115

111-
h2, h1 {
116+
117+
h2,
118+
h1 {
112119
text-align: center;
113120
color: #555555;
114121
}
@@ -122,16 +129,18 @@ h2, h1 {
122129
align-items: center;
123130
position: relative;
124131
bottom: 10%;
125-
132+
/* background-color: #f9f9fb; */
126133
}
134+
127135
.logged_in_div_left {
128136
width: 40%;
129137
height: 100vh;
130138
display: flex;
131139
flex-direction: column;
132140
justify-content: center;
133-
align-items: center;
134-
background-color: #dad8d8;
141+
align-items: left;
142+
background-color: #f9f9fb;
143+
margin-left: 4vw;
135144
}
136145

137146
.logged_in_div_left div {
@@ -149,39 +158,72 @@ h2, h1 {
149158
letter-spacing: -.05em;
150159
}
151160

152-
.logged_in_div_left h2 {
153-
color: #6363f1;
154-
font-size: 75px;
161+
.home-hero-gradient {
162+
background-image: linear-gradient(45deg, #a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0));
163+
background-size: 150% 100%;
164+
background-repeat: no-repeat;
165+
-webkit-background-clip: text;
166+
-webkit-text-fill-color: transparent;
167+
background-clip: text;
168+
animation: intro-gradient 1.2s cubic-bezier(0.85, 0.26, 0.89, 0.93);
169+
animation-iteration-count: 1;
170+
animation-fill-mode: backwards;
171+
animation-delay: 0.4s;
155172
text-align: left;
156-
margin-top: 0px;
157-
font-weight: normal;
173+
font-size: 75px;
158174
letter-spacing: -.05em;
175+
font-weight: normal;
176+
margin-top: 0px;
177+
}
178+
179+
.title-text {
180+
margin-bottom: -50px;
181+
}
182+
183+
.title-subtext {
184+
color: gray;
185+
line-height: 10px;
186+
margin-bottom: 15px;
187+
font-weight: 200;
159188
}
160189

161190
.logged_in_div_left button {
162191
padding: 8px 22px;
192+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
193+
}
194+
195+
.logged_in_div_right button {
196+
padding: 8px 22px;
197+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
163198
}
164199

165200
div.text_box {
166-
background-color: #dad8d8;
167-
border-radius: 5px;
168-
border: 2px solid #6363f1;
169-
width: 75%;
201+
background-color: #f9f9fb;
202+
width: 40vw;
203+
max-height: 30vh;
170204
padding: 10px;
171205
word-wrap: break-word;
206+
overflow: scroll;
207+
border-width: 3px;
208+
border-style: solid;
209+
border-image:
210+
linear-gradient(#a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0)) 0 100%;
172211
}
173212

174213
.logged_in_nav {
175214
display: flex;
176215
justify-content: space-between;
177-
background-color: #6363f1;
216+
background-color: #f9f9fb;
178217
height: 60px;
179-
padding: 7px 7px 7px 10px;
218+
padding: 15px 30px 15px 30px;
219+
220+
z-index: 1000;
180221
}
222+
181223
.logged_in_nav p {
182224
padding: 4px 0px 0px 15px;
183225
line-height: 1;
184-
color: white;
226+
color: #29363d;
185227
}
186228

187229
.logged_in_nav img {
@@ -194,14 +236,78 @@ div.text_box {
194236
border: 2px solid #555555;
195237
}
196238

197-
#note_div {
198-
border-left: 1px solid #6363f1b6;
199-
border-right: 1px solid #6363f1b6;
200-
background-color: #6363f122;
201-
color: #2f2e2e;
202-
margin-top: 20px;
203-
padding: 0px 5px 0px 5px;
239+
.nav-item {
240+
color: black;
241+
border: 2px solid #f9f9fb;
242+
background-color: #f9f9fb;
243+
box-shadow: none;
244+
border-radius: 5px;
245+
}
246+
247+
.blog-nav-button {
248+
margin-right: 20px;
249+
background-color: #f9f9fb;
250+
border: 2px solid #f9f9fb;
251+
}
252+
253+
.directory-buttons {
254+
justify-content: space-between;
255+
width: 40vw;
256+
}
257+
258+
.nav-item:hover {
259+
background-color: #f9f9fb;
260+
border: 2px solid #f9f9fb;
261+
color: #a6a4a4;
262+
}
263+
264+
pre.prettyprint {
265+
border: none !important;
266+
}
267+
268+
ul {
269+
list-style-type: none;
270+
margin-right: 35px;
271+
text-decoration: none;
272+
}
273+
274+
li {
275+
padding: 6px;
276+
}
277+
278+
a:link {
279+
text-decoration: none;
280+
}
281+
282+
a:visited {
283+
text-decoration: none;
284+
}
285+
286+
li.even {
287+
background-color: rgb(228, 228, 228);
288+
}
289+
290+
.card {
291+
border: 1px solid #555555;
292+
border-radius: 10px;
293+
margin: 0px 15px 0px 15px;
294+
padding: 25px 50px;
295+
margin-bottom: 20px;
204296
text-align: center;
205-
font-size: smaller;
206-
width: 75%;
207297
}
298+
299+
.webhooks-container {
300+
width: 45vw;
301+
padding: 25px;
302+
max-height: 450px;
303+
overflow-y: scroll;
304+
}
305+
306+
#clear_button_div {
307+
308+
margin-bottom: 50px;
309+
}
310+
311+
.hidden {
312+
display: none;
313+
}

0 commit comments

Comments
 (0)