Skip to content
This repository was archived by the owner on Jun 7, 2025. It is now read-only.

Commit e7eca75

Browse files
WhyleWhyle
committed
🐛 feat: refactor email template styles for password reset functionality
1 parent c8bb6b6 commit e7eca75

File tree

1 file changed

+81
-154
lines changed

1 file changed

+81
-154
lines changed

‎app/routes/user.py‎

Lines changed: 81 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,85 @@
2323
tags=["user"],
2424
)
2525

26+
style = """<style>
27+
body {
28+
background-color: #f8f9fa;
29+
font-family: 'Roboto', sans-serif;
30+
margin: 0;
31+
padding: 0;
32+
color: #212121;
33+
}
34+
.container {
35+
max-width: 600px;
36+
margin: 2rem auto;
37+
background: #fff;
38+
border-radius: 8px;
39+
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
40+
padding: 2rem;
41+
}
42+
.header {
43+
text-align: center;
44+
margin-bottom: 1rem;
45+
}
46+
.title {
47+
font-size: 1.5rem;
48+
font-weight: 500;
49+
}
50+
.content {
51+
margin: 1rem 0;
52+
line-height: 1.6;
53+
}
54+
.password-box {
55+
background-color: #e3f2fd;
56+
padding: 1rem;
57+
font-size: 1.25rem;
58+
font-weight: bold;
59+
border-radius: 6px;
60+
text-align: center;
61+
color: #0d47a1;
62+
letter-spacing: 0.5px;
63+
}
64+
.btn {
65+
display: inline-block;
66+
background-color: #1976d2;
67+
color: #fff !important;
68+
padding: 0.75rem 1.5rem;
69+
text-decoration: none;
70+
border-radius: 24px;
71+
font-weight: 500;
72+
transition: background 0.3s ease;
73+
}
74+
.btn:hover {
75+
background-color: #1565c0;
76+
}
77+
.footer {
78+
text-align: center;
79+
font-size: 0.875rem;
80+
margin-top: 2rem;
81+
color: #666;
82+
}
83+
.icon-links {
84+
margin-top: 1rem;
85+
text-align: center;
86+
}
87+
.icon-links a {
88+
margin: 0 0.5rem;
89+
display: inline-block;
90+
text-decoration: none;
91+
}
92+
.icon-links img {
93+
width: 24px;
94+
height: 24px;
95+
vertical-align: middle;
96+
filter: grayscale(100%);
97+
transition: filter 0.3s;
98+
}
99+
.icon-links img:hover {
100+
filter: grayscale(0%);
101+
}
102+
</style>
103+
"""
104+
26105
SECRET_KEY_JWT = os.getenv("SECRET_KEY_JWT") or "$2b$12$zqt9Rgv1PzORjG5ghJSb6OSdYrt7f7cLc38a21DgX/DMyqt80AUCi"
27106
ALGORITHM = "HS256"
28107

@@ -91,83 +170,7 @@ async def register_user(
91170
<meta charset="UTF-8" />
92171
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
93172
<title>Password Reset</title>
94-
<style>
95-
body {
96-
background-color: #f8f9fa;
97-
font-family: 'Roboto', sans-serif;
98-
margin: 0;
99-
padding: 0;
100-
color: #212121;
101-
}
102-
.container {
103-
max-width: 600px;
104-
margin: 2rem auto;
105-
background: #fff;
106-
border-radius: 8px;
107-
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
108-
padding: 2rem;
109-
}
110-
.header {
111-
text-align: center;
112-
margin-bottom: 1rem;
113-
}
114-
.title {
115-
font-size: 1.5rem;
116-
font-weight: 500;
117-
}
118-
.content {
119-
margin: 1rem 0;
120-
line-height: 1.6;
121-
}
122-
.password-box {
123-
background-color: #e3f2fd;
124-
padding: 1rem;
125-
font-size: 1.25rem;
126-
font-weight: bold;
127-
border-radius: 6px;
128-
text-align: center;
129-
color: #0d47a1;
130-
letter-spacing: 0.5px;
131-
}
132-
.btn {
133-
display: inline-block;
134-
background-color: #1976d2;
135-
color: #fff !important;
136-
padding: 0.75rem 1.5rem;
137-
text-decoration: none;
138-
border-radius: 24px;
139-
font-weight: 500;
140-
transition: background 0.3s ease;
141-
}
142-
.btn:hover {
143-
background-color: #1565c0;
144-
}
145-
.footer {
146-
text-align: center;
147-
font-size: 0.875rem;
148-
margin-top: 2rem;
149-
color: #666;
150-
}
151-
.icon-links {
152-
margin-top: 1rem;
153-
text-align: center;
154-
}
155-
.icon-links a {
156-
margin: 0 0.5rem;
157-
display: inline-block;
158-
text-decoration: none;
159-
}
160-
.icon-links img {
161-
width: 24px;
162-
height: 24px;
163-
vertical-align: middle;
164-
filter: grayscale(100%);
165-
transition: filter 0.3s;
166-
}
167-
.icon-links img:hover {
168-
filter: grayscale(0%);
169-
}
170-
</style>
173+
{style}
171174
</head>
172175
<body>
173176
<div class="container">
@@ -482,83 +485,7 @@ async def reset_password(
482485
<meta charset="UTF-8" />
483486
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
484487
<title>Password Reset</title>
485-
<style>
486-
body {
487-
background-color: #f8f9fa;
488-
font-family: 'Roboto', sans-serif;
489-
margin: 0;
490-
padding: 0;
491-
color: #212121;
492-
}
493-
.container {
494-
max-width: 600px;
495-
margin: 2rem auto;
496-
background: #fff;
497-
border-radius: 8px;
498-
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
499-
padding: 2rem;
500-
}
501-
.header {
502-
text-align: center;
503-
margin-bottom: 1rem;
504-
}
505-
.title {
506-
font-size: 1.5rem;
507-
font-weight: 500;
508-
}
509-
.content {
510-
margin: 1rem 0;
511-
line-height: 1.6;
512-
}
513-
.password-box {
514-
background-color: #e3f2fd;
515-
padding: 1rem;
516-
font-size: 1.25rem;
517-
font-weight: bold;
518-
border-radius: 6px;
519-
text-align: center;
520-
color: #0d47a1;
521-
letter-spacing: 0.5px;
522-
}
523-
.btn {
524-
display: inline-block;
525-
background-color: #1976d2;
526-
color: #fff !important;
527-
padding: 0.75rem 1.5rem;
528-
text-decoration: none;
529-
border-radius: 24px;
530-
font-weight: 500;
531-
transition: background 0.3s ease;
532-
}
533-
.btn:hover {
534-
background-color: #1565c0;
535-
}
536-
.footer {
537-
text-align: center;
538-
font-size: 0.875rem;
539-
margin-top: 2rem;
540-
color: #666;
541-
}
542-
.icon-links {
543-
margin-top: 1rem;
544-
text-align: center;
545-
}
546-
.icon-links a {
547-
margin: 0 0.5rem;
548-
display: inline-block;
549-
text-decoration: none;
550-
}
551-
.icon-links img {
552-
width: 24px;
553-
height: 24px;
554-
vertical-align: middle;
555-
filter: grayscale(100%);
556-
transition: filter 0.3s;
557-
}
558-
.icon-links img:hover {
559-
filter: grayscale(0%);
560-
}
561-
</style>
488+
{style}
562489
</head>
563490
<body>
564491
<div class="container">

0 commit comments

Comments
 (0)