Skip to content

Commit 9b82880

Browse files
sylvinusjbpenrath
sylvinus
authored and
jbpenrath
committed
✨(admin) add prototype Admin frontend, WIP
1 parent 0c97177 commit 9b82880

File tree

16 files changed

+1958
-4
lines changed

16 files changed

+1958
-4
lines changed

‎Makefile

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ bootstrap: \
9292
build: ## build the project containers
9393
@$(MAKE) build-backend
9494
@$(MAKE) build-frontend-dev
95+
@$(COMPOSE) build mta-in
9596
.PHONY: build
9697

9798
build-backend: ## build the backend-dev container
@@ -216,6 +217,7 @@ showmigrations: ## show all migrations for the messages project.
216217
superuser: ## Create an admin superuser with password "admin"
217218
@echo "$(BOLD)Creating a Django superuser$(RESET)"
218219
@$(MANAGE) createsuperuser --email [email protected] --password admin
220+
@$(MANAGE) createsuperuser --email [email protected] --password admin
219221
.PHONY: superuser
220222

221223
back-i18n-compile: ## compile the gettext files

‎src/backend/core/admin.py

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,17 @@ class UserAdmin(auth_admin.UserAdmin):
141141
)
142142
search_fields = ("id", "sub", "admin_email", "email", "full_name")
143143

144+
class MailDomainAccessInline(admin.TabularInline):
145+
"""Inline class for the MailDomainAccess model"""
146+
147+
model = models.MailDomainAccess
148+
144149

145150
@admin.register(models.MailDomain)
146151
class MailDomainAdmin(admin.ModelAdmin):
147152
"""Admin class for the MailDomain model"""
148153

154+
inlines = [MailDomainAccessInline]
149155
list_display = (
150156
"name",
151157
"identity_sync",

‎src/frontend/src/features/controlled-modals/create-address/_index.scss

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
.modal-create-address {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--c--theme--spacings--base);
5+
padding: var(--c--theme--spacings--base);
6+
min-height: 400px;
7+
8+
.modal-tabs {
9+
display: flex;
10+
gap: var(--c--theme--spacings--s);
11+
margin-bottom: var(--c--theme--spacings--base);
12+
13+
.modal-tab {
14+
flex: 1;
15+
padding: var(--c--theme--spacings--base) var(--c--theme--spacings--s);
16+
border: 2px solid var(--c--theme--colors--greyscale-300);
17+
border-radius: var(--c--theme--border-radius--base);
18+
background: var(--c--theme--colors--greyscale-000);
19+
font-size: var(--c--theme--font-sizes--s);
20+
font-weight: 500;
21+
text-align: center;
22+
cursor: pointer;
23+
transition: all 0.2s ease;
24+
min-height: 60px;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
29+
&:hover {
30+
border-color: var(--c--theme--colors--primary-400);
31+
background: var(--c--theme--colors--primary-50);
32+
}
33+
34+
&.active {
35+
border-color: var(--c--theme--colors--primary-600);
36+
background: var(--c--theme--colors--primary-100);
37+
color: var(--c--theme--colors--primary-800);
38+
font-weight: 600;
39+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
40+
}
41+
}
42+
}
43+
44+
.form-field-row {
45+
display: flex;
46+
flex-direction: column;
47+
width: 100%;
48+
margin-bottom: var(--c--theme--spacings--s);
49+
50+
&.name-row {
51+
flex-direction: row;
52+
gap: var(--c--theme--spacings--s);
53+
54+
.name-input {
55+
flex: 1;
56+
}
57+
}
58+
59+
&.address-row {
60+
position: relative;
61+
62+
.address-input {
63+
padding-right: 40%;
64+
}
65+
66+
.domain-suffix {
67+
position: absolute;
68+
top: 50%;
69+
left: 60%;
70+
transform: translateY(-50%);
71+
color: var(--c--theme--colors--greyscale-600);
72+
font-weight: 500;
73+
font-size: var(--c--theme--font-sizes--m);
74+
padding: var(--c--theme--spacings--xs) var(--c--theme--spacings--s);
75+
pointer-events: none;
76+
z-index: 2;
77+
}
78+
}
79+
}
80+
81+
.confirmation-section {
82+
margin: var(--c--theme--spacings--base) 0;
83+
84+
.confirmation-text {
85+
background-color: var(--c--theme--colors--info-100);
86+
border: 1px solid var(--c--theme--colors--info-300);
87+
border-radius: var(--c--theme--border-radius--base);
88+
padding: var(--c--theme--spacings--base);
89+
margin-bottom: var(--c--theme--spacings--s);
90+
91+
p {
92+
margin: 0;
93+
color: var(--c--theme--colors--info-800);
94+
font-size: var(--c--theme--font-sizes--s);
95+
line-height: 1.5;
96+
}
97+
}
98+
}
99+
100+
.password-info {
101+
background-color: var(--c--theme--colors--warning-100);
102+
border: 1px solid var(--c--theme--colors--warning-300);
103+
border-radius: var(--c--theme--border-radius--base);
104+
padding: var(--c--theme--spacings--s);
105+
margin: var(--c--theme--spacings--s) 0;
106+
107+
p {
108+
margin: 0;
109+
color: var(--c--theme--colors--warning-800);
110+
font-size: var(--c--theme--font-sizes--s);
111+
font-weight: 500;
112+
line-height: 1.4;
113+
}
114+
}
115+
116+
form {
117+
display: flex;
118+
flex-direction: column;
119+
gap: 0;
120+
width: 100%;
121+
}
122+
123+
// Enhance checkbox styling
124+
.form-field-row:has(input[type="checkbox"]) {
125+
margin: var(--c--theme--spacings--xs) 0;
126+
127+
label {
128+
display: flex;
129+
align-items: flex-start;
130+
gap: var(--c--theme--spacings--s);
131+
font-weight: 400;
132+
cursor: pointer;
133+
line-height: 1.3;
134+
font-size: var(--c--theme--font-sizes--s);
135+
}
136+
}
137+
138+
// Improve button styling
139+
button[type="submit"] {
140+
margin-top: var(--c--theme--spacings--base);
141+
padding: var(--c--theme--spacings--base) var(--c--theme--spacings--xl);
142+
font-weight: 600;
143+
font-size: var(--c--theme--font-sizes--m);
144+
}
145+
}

0 commit comments

Comments
 (0)