Skip to content

Commit b5105d5

Browse files
awolfdenAdam Wolfman
awolfden
and
Adam Wolfman
authored
Update mfa application (#37)
Co-authored-by: Adam Wolfman <[email protected]>
1 parent b44f5c4 commit b5105d5

File tree

9 files changed

+298
-148
lines changed

9 files changed

+298
-148
lines changed

‎python-django-mfa-example/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# python-django-sso-example
2-
An example Django application demonstrating how to use the [WorkOS MFA API](https://workos.com/docs/mfa/guide) using the [Python SDK](https://github.com/workos-inc/workos-python) to authenticate users.
2+
An example Django application demonstrating how to use the [WorkOS MFA API](https://workos.com/docs/mfa/guide) using the [Python SDK](https://github.com/workos/workos-python) to authenticate users.
33

44
## Prerequisites
55
- Python 3.6+

‎python-django-mfa-example/mfa/static/css/login.css‎

Lines changed: 130 additions & 52 deletions
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,14 +24,6 @@ body {
2224
bottom: 10px;
2325
}
2426

25-
.card {
26-
border: 1px solid #555555;
27-
border-radius: 10px;
28-
margin: 0px 15px 0px 15px;
29-
padding: 25px 50px;
30-
margin-bottom: 20px;
31-
}
32-
3327
.flex {
3428
display: flex;
3529
justify-content: center;
@@ -42,24 +36,12 @@ body {
4236
align-items: center;
4337
}
4438

45-
.space_evenly {
46-
justify-content: space-evenly;
47-
}
48-
49-
.space_between {
39+
.space-between {
5040
justify-content: space-between;
5141
}
5242

53-
.width_40vw {
54-
width: 40vw;
55-
}
56-
57-
.width_10vw {
58-
width: 10vw;
59-
}
60-
61-
.mt-20 {
62-
margin-top: 20px !important;
43+
.space-evenly {
44+
justify-content: space-evenly;
6345
}
6446

6547
.container_success {
@@ -92,37 +74,41 @@ body {
9274
border: 2px solid #6363f1;
9375
border-radius: 26px;
9476
color: white;
95-
padding: 16px 32px;
77+
padding: 8px 16px;
9678
text-align: center;
9779
text-decoration: none;
9880
display: inline-block;
9981
font-size: 16px;
10082
margin: 4px 2px;
10183
transition-duration: 0.4s;
10284
cursor: pointer;
103-
}
104-
105-
.button-outline {
106-
background-color: white;
107-
color: rgb(46, 46, 46);
85+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
10886
}
10987

110-
.button-sm {
88+
.button-outline {
89+
background-color: #f9f9fb;
90+
color: #6363f1;
11191
padding: 8px 16px;
112-
margin-top:14px
11392
}
114-
115-
.button:hover {
93+
94+
.button:hover,
95+
.button-outline:hover {
11696
background-color: #555555;
11797
border: 2px solid #555555;
11898
color: white;
11999
}
120100

101+
.sales-button {
102+
margin-left: 10px;
103+
}
104+
121105
.login_button {
122-
width: 40vw;
106+
width: 95%;
107+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
123108
}
124109

125-
h2, h1 {
110+
h2,
111+
h1 {
126112
text-align: center;
127113
color: #555555;
128114
}
@@ -136,16 +122,18 @@ h2, h1 {
136122
align-items: center;
137123
position: relative;
138124
bottom: 10%;
139-
125+
/* background-color: #f9f9fb; */
140126
}
127+
141128
.logged_in_div_left {
142129
width: 40%;
143130
height: 100vh;
144131
display: flex;
145132
flex-direction: column;
146133
justify-content: center;
147-
align-items: center;
148-
background-color: #dad8d8;
134+
align-items: left;
135+
background-color: #f9f9fb;
136+
margin-left: 4vw;
149137
}
150138

151139
.logged_in_div_left div {
@@ -163,39 +151,67 @@ h2, h1 {
163151
letter-spacing: -.05em;
164152
}
165153

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

175183
.logged_in_div_left button {
176184
padding: 8px 22px;
185+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
177186
}
178187

179188
div.text_box {
180-
background-color: #dad8d8;
181-
border-radius: 5px;
182-
border: 2px solid #6363f1;
183-
width: 75%;
189+
background-color: #f9f9fb;
190+
width: 40vw;
191+
max-height: 30vh;
184192
padding: 10px;
185193
word-wrap: break-word;
194+
overflow: scroll;
195+
border-width: 3px;
196+
border-style: solid;
197+
border-image:
198+
linear-gradient(#a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0)) 0 100%;
186199
}
187200

188201
.logged_in_nav {
189202
display: flex;
190203
justify-content: space-between;
191-
background-color: #6363f1;
204+
background-color: #f9f9fb;
192205
height: 60px;
193-
padding: 7px 7px 7px 10px;
206+
padding: 15px 30px 15px 30px;
207+
208+
z-index: 1000;
194209
}
210+
195211
.logged_in_nav p {
196212
padding: 4px 0px 0px 15px;
197213
line-height: 1;
198-
color: white;
214+
color: #29363d;
199215
}
200216

201217
.logged_in_nav img {
@@ -208,10 +224,34 @@ div.text_box {
208224
border: 2px solid #555555;
209225
}
210226

227+
.nav-item {
228+
color: black;
229+
border: 2px solid #f9f9fb;
230+
background-color: #f9f9fb;
231+
box-shadow: none;
232+
border-radius: 5px;
233+
}
234+
235+
.blog-nav-button {
236+
margin-right: 20px;
237+
background-color: #f9f9fb;
238+
border: 2px solid #f9f9fb;
239+
}
240+
241+
.nav-item:hover {
242+
background-color: #f9f9fb;
243+
border: 2px solid #f9f9fb;
244+
color: #a6a4a4;
245+
}
246+
247+
pre.prettyprint {
248+
border: none !important;
249+
}
250+
251+
211252
.text_input {
212253
border: 1px solid #555555;
213254
border-radius: 10px;
214-
margin: 20px 0px 7px 0px;
215255
padding: 5px;
216256
height: 35px;
217257
width: 18vw;
@@ -240,6 +280,44 @@ div.text_box {
240280
}
241281

242282
.qr_code {
243-
width: 7vw;
283+
width: 7vw;
244284
max-width: 100px;
285+
}
286+
287+
ul {
288+
list-style-type: none;
289+
margin-right: 35px;
290+
text-decoration: none;
291+
}
292+
293+
li {
294+
padding: 6px;
295+
}
296+
297+
li.even {
298+
background-color: rgb(228, 228, 228);
299+
}
300+
301+
.width-75 {
302+
width: 75%;
303+
}
304+
305+
.width-40vw {
306+
width: 40vw;
307+
}
308+
309+
.width-20vw {
310+
width: 20vw;
311+
}
312+
313+
.mt-5 {
314+
margin-top: 5px;
315+
}
316+
317+
.mt-10 {
318+
margin-top: 10px;
319+
}
320+
321+
.mt-20 {
322+
margin-top: 20px;
245323
}

‎python-django-mfa-example/mfa/templates/mfa/challenge_factor.html‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,37 @@
99
<body class="container_success">
1010
<div class="logged_in_nav">
1111
<div class="flex">
12-
<p>MFA Example Application</p>
12+
<div>
13+
<img src="../static/images/workos_logo_new.png" alt="workos logo">
14+
</div>
15+
<div class="flex">
16+
<p>WorkOS</p>
17+
</div>
1318
</div>
1419
<div>
15-
<img src="../../static/images/workos_logo_new.png" alt="workos logo">
20+
<a href="https://workos.com/docs" target="_blank"><button class='button nav-item'>Documentation</button></a>
21+
<a href="https://workos.com/docs/reference" target="_blank"><button class='button nav-item'>API
22+
Reference</button></a>
23+
<a href="https://workos.com/blog" target="_blank"><button
24+
class='button nav-item blog-nav-button'>Blog</button></a>
25+
<a href="https://workos.com/" target="_blank"><button class='button button-outline'>WorkOS</button></a>
1626
</div>
1727
</div>
1828
<div class='flex'>
1929
<div class="logged_in_div_left">
20-
<div>
30+
<div class="title-text">
2131
<h1>Your app,</h1>
22-
<h2>Enterprise Ready</h2>
32+
<h2 class="home-hero-gradient">Enterprise Ready</h2>
2333
</div>
24-
<div>
25-
<a href="https://workos.com/" target="_blank"><button class='button'>WorkOS</button></a>
26-
<a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
27-
<a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API
28-
Reference</button></a>
29-
<a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
30-
34+
<div class="title-subtext">
35+
<p>Start selling to enterprise customers with just a few lines of code.</p>
36+
<p>Implement features like single sign-on in minutes instead of months.</p>
37+
</div>
38+
<div class="flex success-buttons">
39+
<a href="https://workos.com/signup" target="_blank"><button class='button'>Get Started</button></a>
40+
<a href="mailto:[email protected]?subject=WorkOS Sales Inquiry" target="_blank"><button
41+
class='button button-outline sales-button'>Contact
42+
Sales</button></a>
3143
</div>
3244
</div>
3345
<div class="logged_in_div_right">
@@ -42,7 +54,7 @@ <h2>Enterprise Ready</h2>
4254
placeholder="Input Auth Code">
4355
</div>
4456
<div>
45-
<button type="submit" class="button">Verify Factor</button>
57+
<button type="submit" class="button button-sm mt-20">Verify Factor</button>
4658
</div>
4759
</div>
4860
</form>

0 commit comments

Comments
 (0)