Skip to content

Commit b44f5c4

Browse files
awolfdenAdam Wolfman
awolfden
and
Adam Wolfman
authored
Update magic link app (#36)
Co-authored-by: Adam Wolfman <adamwolfman@Adams-MBP-3.domain>
1 parent ee8fcd3 commit b44f5c4

8 files changed

Lines changed: 234 additions & 120 deletions

File tree

‎python-django-magic-link-example/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# python-django-magic-link-example
2-
A basic Django app that uses the [WorkOS Python SDK](https://github.com/workos-inc/workos-python) to support Magic Link.
2+
A basic Django app that uses the [WorkOS Python SDK](https://github.com/workos/workos-python) to support Magic Link.
33

44
## Prerequisites
55
- Python 3.6+
@@ -10,14 +10,14 @@ A basic Django app that uses the [WorkOS Python SDK](https://github.com/workos-i
1010
1. Clone the main git repo for these Python example apps using your preferred secure method (HTTPS or SSH).
1111
```bash
1212
# HTTPS
13-
$ git clone https://github.com/workos-inc/python-django-example-applications.git
13+
$ git clone https://github.com/workos/python-django-example-applications.git
1414
```
1515

1616
or
1717

1818
```bash
1919
# SSH
20-
$ git clone git@github.com:workos-inc/python-django-example-applications.git
20+
$ git clone git@github.com:workos/python-django-example-applications.git
2121
```
2222

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

‎python-django-magic-link-example/magic_link_example/magic_link/static/css/login.css‎

Lines changed: 106 additions & 29 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,16 +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: 260px;
32-
text-align: center;
33-
}
34-
3527
.flex {
3628
display: flex;
3729
justify-content: center;
@@ -44,6 +36,18 @@ body {
4436
align-items: center;
4537
}
4638

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+
}
50+
4751
.container_success {
4852
display: flex;
4953
flex-direction: column;
@@ -82,19 +86,33 @@ body {
8286
margin: 4px 2px;
8387
transition-duration: 0.4s;
8488
cursor: pointer;
85-
}
86-
87-
.button:hover {
89+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
90+
}
91+
92+
.button-outline {
93+
background-color: #f9f9fb;
94+
color: #6363f1;
95+
padding: 8px 16px;
96+
}
97+
98+
.button:hover,
99+
.button-outline:hover {
88100
background-color: #555555;
89101
border: 2px solid #555555;
90102
color: white;
91103
}
92104

105+
.sales-button {
106+
margin-left: 10px;
107+
}
108+
93109
.login_button {
94110
width: 95%;
111+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
95112
}
96113

97-
h2, h1 {
114+
h2,
115+
h1 {
98116
text-align: center;
99117
color: #555555;
100118
}
@@ -108,16 +126,18 @@ h2, h1 {
108126
align-items: center;
109127
position: relative;
110128
bottom: 10%;
111-
129+
/* background-color: #f9f9fb; */
112130
}
131+
113132
.logged_in_div_left {
114133
width: 40%;
115134
height: 100vh;
116135
display: flex;
117136
flex-direction: column;
118137
justify-content: center;
119-
align-items: center;
120-
background-color: #dad8d8;
138+
align-items: left;
139+
background-color: #f9f9fb;
140+
margin-left: 4vw;
121141
}
122142

123143
.logged_in_div_left div {
@@ -135,39 +155,67 @@ h2, h1 {
135155
letter-spacing: -.05em;
136156
}
137157

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

147187
.logged_in_div_left button {
148188
padding: 8px 22px;
189+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
149190
}
150191

151192
div.text_box {
152-
background-color: #dad8d8;
153-
border-radius: 5px;
154-
border: 2px solid #6363f1;
155-
width: 75%;
193+
background-color: #f9f9fb;
194+
width: 40vw;
195+
max-height: 30vh;
156196
padding: 10px;
157197
word-wrap: break-word;
198+
overflow: scroll;
199+
border-width: 3px;
200+
border-style: solid;
201+
border-image:
202+
linear-gradient(#a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0)) 0 100%;
158203
}
159204

160205
.logged_in_nav {
161206
display: flex;
162207
justify-content: space-between;
163-
background-color: #6363f1;
208+
background-color: #f9f9fb;
164209
height: 60px;
165-
padding: 7px 7px 7px 10px;
210+
padding: 15px 30px 15px 30px;
211+
212+
z-index: 1000;
166213
}
214+
167215
.logged_in_nav p {
168216
padding: 4px 0px 0px 15px;
169217
line-height: 1;
170-
color: white;
218+
color: #29363d;
171219
}
172220

173221
.logged_in_nav img {
@@ -180,6 +228,30 @@ div.text_box {
180228
border: 2px solid #555555;
181229
}
182230

231+
.nav-item {
232+
color: black;
233+
border: 2px solid #f9f9fb;
234+
background-color: #f9f9fb;
235+
box-shadow: none;
236+
border-radius: 5px;
237+
}
238+
239+
.blog-nav-button {
240+
margin-right: 20px;
241+
background-color: #f9f9fb;
242+
border: 2px solid #f9f9fb;
243+
}
244+
245+
.nav-item:hover {
246+
background-color: #f9f9fb;
247+
border: 2px solid #f9f9fb;
248+
color: #a6a4a4;
249+
}
250+
251+
pre.prettyprint {
252+
border: none !important;
253+
}
254+
183255
#note_div {
184256
border-left: 1px solid #6363f1b6;
185257
border-right: 1px solid #6363f1b6;
@@ -190,4 +262,9 @@ div.text_box {
190262
text-align: center;
191263
font-size: smaller;
192264
width: 75%;
265+
}
266+
267+
.workos-logo img {
268+
width: 450px;
269+
object-fit: scale-down;
193270
}

‎python-django-magic-link-example/magic_link_example/magic_link/static/images/workos_logo.png‎

32.9 KB
Loading

‎python-django-magic-link-example/magic_link_example/magic_link/templates/magic_link/login.html‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
<html>
2-
<head>
3-
<link rel="stylesheet" href="../../static/css/login.css">
4-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
5-
</head>
6-
<body class="container_login">
7-
<div class='flex_column'>
8-
<div class="flex heading_div">
9-
<img src="../static/images/workos_logo_new.png" alt="workos logo">
10-
<div class="heading_text_div">
11-
<h1>WorkOS</h1>
2+
3+
<head>
4+
<link rel="stylesheet" href="../../static/css/login.css">
5+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
6+
</head>
7+
8+
<body class="container_login">
9+
<div class='flex_column'>
10+
<div class="flex heading_div">
11+
<div class="flex">
12+
<div class="workos-logo">
13+
<img src="../static/images/workos_logo.png" alt="workos logo">
1214
</div>
1315
</div>
14-
15-
<h2>Python Django Magic Link Example App</h2>
16-
<form method="POST" action="{% url 'passwordless_auth' %}">
17-
{% csrf_token %}
18-
<div class='flex_column'>
19-
<div>
20-
<input type="text" id="email" name="email" class="text_input">
21-
</div>
22-
<div>
23-
<button type="submit" class="button">Submit Email for Magic Link</button>
24-
</div>
25-
</div>
26-
</form>
2716
</div>
28-
</body>
29-
</html>
17+
<h2>Python Django Magic Link Example App</h2>
18+
<form method="POST" action="{% url 'passwordless_auth' %}">
19+
{% csrf_token %}
20+
<div class='flex_column'>
21+
<div>
22+
<input type="text" id="email" name="email" class="text_input">
23+
</div>
24+
<div>
25+
<button type="submit" class="button">Submit Email for Magic Link</button>
26+
</div>
27+
</div>
28+
</form>
29+
</div>
30+
</body>
31+
32+
</html>

0 commit comments

Comments
 (0)