feat: implement user authentication features (registration, activation, and password reset)
All checks were successful
Build and Push Docker Image / build (push) Successful in 46s
All checks were successful
Build and Push Docker Image / build (push) Successful in 46s
- Added email templates for activation and password reset (`activation_email.html`, `password_reset_email.html`, etc.) - Created forms for registration (`RegisterForm`) and login (`LoginForm`) with custom validation - Developed new pages for account activation (`activation_success.html`, `activation_invalid.html`), password reset workflow, and profile - Configured email backend and environment file handling in settings - Updated header template to conditionally display profile or login links based on authentication status - Enhanced CSS styles for authentication-related pages and forms
This commit is contained in:
@@ -1,36 +1,277 @@
|
||||
.login-form {
|
||||
padding: 25px;
|
||||
border: 1px solid rgba(94, 80, 125, 0.78);
|
||||
|
||||
& > h2 {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 44px;
|
||||
|
||||
color: #36213e;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
.auth-section {
|
||||
flex: 1;
|
||||
padding: 60px 0 100px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(184, 243, 255, 0.45) 0, rgba(184, 243, 255, 0) 26%),
|
||||
linear-gradient(180deg, rgba(99, 118, 141, 0.06) 0%, rgba(99, 118, 141, 0.12) 100%);
|
||||
}
|
||||
|
||||
.auth-layout {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
gap: 56px;
|
||||
}
|
||||
|
||||
.auth-layout--reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.auth-intro {
|
||||
flex: 1 1 480px;
|
||||
min-height: 540px;
|
||||
padding: 56px 48px;
|
||||
background: #63768d;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.auth-intro--login {
|
||||
background-image:
|
||||
linear-gradient(rgba(54, 33, 62, 0.42), rgba(54, 33, 62, 0.42)),
|
||||
url("../img/kitchen-banner.jpg");
|
||||
}
|
||||
|
||||
.auth-intro--register {
|
||||
background-image:
|
||||
linear-gradient(rgba(54, 33, 62, 0.48), rgba(54, 33, 62, 0.48)),
|
||||
url("../img/about-image.jpg");
|
||||
}
|
||||
|
||||
.auth-intro--reset {
|
||||
background-image:
|
||||
linear-gradient(rgba(54, 33, 62, 0.44), rgba(54, 33, 62, 0.44)),
|
||||
url("../img/stats-image.jpg");
|
||||
}
|
||||
|
||||
.auth-kicker {
|
||||
margin-bottom: 18px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
color: #b8f3ff;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
max-width: 430px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 50px;
|
||||
line-height: 1.08;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.auth-description {
|
||||
max-width: 450px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.auth-side-link {
|
||||
align-self: flex-start;
|
||||
margin-top: 38px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ffffff;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.auth-side-link:hover {
|
||||
background: #ffffff;
|
||||
color: #63768d;
|
||||
}
|
||||
|
||||
.auth-panel {
|
||||
flex: 0 1 520px;
|
||||
padding: 48px 40px;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(85, 73, 113, 0.22);
|
||||
box-shadow: 0 20px 40px rgba(54, 33, 62, 0.08);
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-copy-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.auth-panel-title {
|
||||
font-size: 38px;
|
||||
line-height: 1.1;
|
||||
color: #36213e;
|
||||
}
|
||||
|
||||
.auth-panel-text {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: #36213e;
|
||||
}
|
||||
|
||||
.auth-alert {
|
||||
margin-bottom: 10px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #9f4b4b;
|
||||
background: #f4dfdf;
|
||||
color: #6f2323;
|
||||
}
|
||||
|
||||
.auth-field {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.auth-field:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.auth-field label {
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
color: #554971;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
.auth-field input {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 12px 14px;
|
||||
background: #d9d9d9;
|
||||
|
||||
border: 1px solid #554971;
|
||||
font-family: 'Noah', sans-serif;
|
||||
font-size: 18px;
|
||||
color: #36213e;
|
||||
}
|
||||
|
||||
padding: 5px;
|
||||
}
|
||||
.auth-field input::placeholder {
|
||||
color: rgba(54, 33, 62, 0.58);
|
||||
}
|
||||
|
||||
.auth-field input:focus {
|
||||
outline: none;
|
||||
border-color: #36213e;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.auth-field-error {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
color: #8c2f2f;
|
||||
}
|
||||
|
||||
.auth-actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.auth-submit {
|
||||
padding: 18px 34px;
|
||||
border: 0;
|
||||
background: #63768d;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.auth-submit:hover {
|
||||
background: #554971;
|
||||
}
|
||||
|
||||
.auth-submit-link {
|
||||
display: inline-block;
|
||||
padding: 18px 34px;
|
||||
background: #63768d;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.auth-secondary-link {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
color: #63768d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.auth-switch {
|
||||
margin-top: 24px;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
color: #36213e;
|
||||
}
|
||||
|
||||
.auth-switch a {
|
||||
color: #63768d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.auth-section {
|
||||
padding: 32px 0 72px;
|
||||
}
|
||||
|
||||
.auth-layout,
|
||||
.auth-layout--reverse {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.auth-intro,
|
||||
.auth-panel {
|
||||
min-height: auto;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.auth-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.auth-side-link,
|
||||
.auth-submit,
|
||||
.auth-submit-link {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.auth-secondary-link,
|
||||
.auth-panel-text,
|
||||
.auth-field label,
|
||||
.auth-field input,
|
||||
.auth-switch {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.auth-panel-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user