Skip to content

Commit e3d9ff2

Browse files
miastubbmiastubb
authored
Merge pull request #66 from NoroffFEU/login-and-signup-alerts-24
Login and signup alerts 24
2 parents 943b225 + 6148b41 commit e3d9ff2

8 files changed

Lines changed: 210 additions & 18 deletions

File tree

‎Data/Schools.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,4 @@
2222
"principal": "Dr. Nonso Adekunle"
2323
}
2424
]
25-
}
25+
}

‎components/alert.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function Alert(type, title, message) {
2+
return /* HTML */ `
3+
<div class="alert alert--${type}" role="alert" aria-live="assertive">
4+
<div class="alert-text">
5+
<h2>${title}</h2>
6+
<p>${message}</p>
7+
</div>
8+
<button class="alert-close" type="button" aria-label="Close alert">
9+
<img src="/public/icons/x-${type}.png" alt="" />
10+
</button>
11+
</div>
12+
`;
13+
}

‎css/alert.css‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
.signup-page {
2+
position: relative;
3+
}
4+
5+
.signup-card {
6+
padding-top: 120px;
7+
}
8+
9+
/* Shared styling for alert*/
10+
.alert {
11+
position: absolute;
12+
top: 16px;
13+
right: 0;
14+
width: 337px;
15+
height: 114px;
16+
padding: var(--padding-8px);
17+
box-shadow: -2px 4px 4px 2px rgba(0, 0, 0, 0.25);
18+
z-index: 10;
19+
}
20+
21+
.alert p {
22+
font-weight: 400;
23+
}
24+
25+
.alert-close {
26+
position: absolute;
27+
top: 16px;
28+
right: 16px;
29+
background: none;
30+
border: none;
31+
}
32+
.alert h2 {
33+
position: relative;
34+
padding-left: 40px;
35+
}
36+
37+
.alert h2::before {
38+
content: "";
39+
display: block;
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
width: 32px;
44+
height: 32px;
45+
background-size: contain;
46+
}
47+
48+
/* Styling for success alert */
49+
.alert--success {
50+
background-color: #e8f5e9;
51+
}
52+
53+
.alert--success h2,
54+
.alert--success p {
55+
color: #388e3c;
56+
}
57+
58+
.alert--success p {
59+
font-size: var(--small-txt);
60+
}
61+
62+
.alert--success h2 {
63+
margin-bottom: 8px;
64+
}
65+
66+
.alert--success p {
67+
margin: 0;
68+
}
69+
.alert--success h2::before {
70+
background-image: url(/public/icons/success.png);
71+
}
72+
73+
/* Styling for failed alert*/
74+
.alert--failed {
75+
background-color: #ffebee;
76+
}
77+
78+
.alert--failed h2,
79+
.alert--failed p {
80+
color: #c62828;
81+
}
82+
83+
.alert--failed h2 {
84+
margin-bottom: 2px;
85+
}
86+
87+
.alert--failed p {
88+
font-size: var(--paragraph);
89+
}
90+
91+
.alert--failed h2::before {
92+
background-image: url(/public/icons/fail.png);
93+
}
94+
95+
/* alert media queries for desktop */
96+
@media (min-width: 1024px) {
97+
/* Shared styling for alert desktop*/
98+
.alert {
99+
top: -50px;
100+
width: 450px;
101+
height: 167px;
102+
}
103+
104+
.alert h2 {
105+
font-size: var(--heading-1);
106+
position: relative;
107+
padding-left: 80px;
108+
}
109+
110+
.alert p {
111+
padding-left: 80px;
112+
font-size: var(--paragraph);
113+
}
114+
115+
.alert-text {
116+
width: 380px;
117+
}
118+
119+
.signup-card {
120+
padding-top: 0;
121+
}
122+
123+
/* Styling for success alert desktop*/
124+
.alert--success h2::before {
125+
top: 10px;
126+
left: 5px;
127+
width: 100px;
128+
height: 100px;
129+
}
130+
131+
.alert h2,
132+
.alert p {
133+
padding-left: 120px;
134+
}
135+
136+
.alert-text {
137+
width: 420px;
138+
}
139+
140+
.alert--success h2 {
141+
margin-bottom: 2px;
142+
}
143+
144+
/* Styling for failed alert desktop*/
145+
.alert--failed h2::before {
146+
top: 10px;
147+
left: 20px;
148+
width: 80px;
149+
height: 80px;
150+
}
151+
152+
.alert--failed p {
153+
margin-top: 6px;
154+
}
155+
156+
.alert-text {
157+
padding-top: 8px;
158+
}
159+
}

‎pages/home.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ export default function Home() {
1616
<a href="#" class="btn btn--secondary">Log In</a>
1717
</div>
1818
</section>
19-
19+
</div>
2020
`;
2121
}

‎pages/signup.js‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1+
import Alert from "../components/alert.js";
12

23
export default function Signup() {
3-
4-
const existing = document.querySelector('link[data-signup-style]');
4+
const existing = document.querySelector("link[data-signup-style]");
55
if (!existing) {
6-
const link = document.createElement("link");
7-
link.rel = "stylesheet";
8-
link.href = "/css/signup.css";
9-
link.setAttribute("data-signup-style", "true");
10-
document.head.appendChild(link);
6+
const link = document.createElement("link");
7+
link.rel = "stylesheet";
8+
link.href = "/css/signup.css";
9+
link.setAttribute("data-signup-style", "true");
10+
document.head.appendChild(link);
1111
}
1212

1313
return /*HTML*/ `
@@ -50,29 +50,48 @@ export default function Signup() {
5050
5151
<button type="submit" class="btn">Submit</button>
5252
</form>
53-
53+
54+
<div id="alert-container">
5455
<!-- Alert-boks LATER -->
56+
</div>
5557
</div>
5658
`;
57-
5859
}
5960

6061
export function initSignupForm() {
6162
const form = document.querySelector("#signup-form");
6263
if (!form) return;
6364

64-
form.addEventListener("submit", e => {
65+
form.addEventListener("submit", (e) => {
6566
e.preventDefault();
6667

67-
const password = document.querySelector("#password").value;
68-
const confirm = document.querySelector("#confirm-password").value;
68+
const passwordInput = form.querySelector("#password");
69+
const confirmInput = form.querySelector("#confirm-password");
70+
if (!passwordInput || !confirmInput) return;
71+
72+
const password = passwordInput.value;
73+
const confirm = confirmInput.value;
74+
75+
const alertContainer = document.querySelector("#alert-container");
76+
if (!alertContainer) return;
77+
78+
alertContainer.innerHTML = "";
6979

70-
/* -------- Extra function -----------
7180
if (password !== confirm) {
72-
alert("Passwords do not match");
81+
alertContainer.innerHTML = Alert(
82+
"failed",
83+
"Failed Sign Up!",
84+
"Passwords do not match!"
85+
);
86+
87+
const closeButton = alertContainer.querySelector(".alert-close");
88+
if (closeButton) {
89+
closeButton.addEventListener("click", () => {
90+
alertContainer.innerHTML = "";
91+
});
92+
}
93+
7394
return;
7495
}
75-
76-
alert("Form passed validation ✅");*/
7796
});
7897
}

public/icons/x-red.png renamed to public/icons/x-failed.png

File renamed without changes.

public/icons/green-x.png renamed to public/icons/x-success.png

File renamed without changes.

‎style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
@import url("css/home.css");
44
@import url("css/registration.css");
55
@import url("css/admin-edit.css");
6+
@import url("css/alert.css");

0 commit comments

Comments
 (0)