old: Add photo profile support

Initial photo profile support. The backend has already provided the API.
Implement the feature on the frontend as well.

Signed-off-by: Ammar Faizi <[email protected]>

Author: ammarfaizi2

old/assets/default_profile.png

@@ -146,7 +146,12 @@ function gwm_fn_change_password(cb, cur_pass, new_pass, retype_new_pass)
 
 function gwm_fn_set_user_info(cb, data)
 {
-	gwm_api_set_user_info(cb, data);
+	let callback = function (j) {
+		alert(j.res);
+		if (cb)
+			cb(j);
+	};
+	gwm_api_set_user_info(callback, data);
 }
 
 function gwm_fn_logout()
@@ -214,3 +219,21 @@ function gwm_auth_redirect_if_not_authorized()
 	gwm_auth_renew_session();
 	return false;
 }
+
+function gwm_api_delete_user_photo(cb)
+{
+	gwm_exec_api({
+		method: "GET",
+		url: GWM_API_URL + "delete_user_photo",
+		token: LS.getItem("gwm_token"),
+		callback: cb
+	});
+}
+
+function gwm_fn_delete_user_photo(cb)
+{
+	if (!confirm("Are you sure you want to delete your photo?"))
+		return;
+
+	gwm_api_delete_user_photo(cb);
+}

old/assets/js/api.js

@@ -17,11 +17,14 @@
 		<tbody>
 			<tr>
 				<td align="center" colspan="3">
-					<div id="photo_box"></div>
+					<div id="del_photo" style="margin-bottom: 20px;"><a href="javascript:void();">Delete Photo</a></div>
+					<div id="photo_box">
+						<img src="assets/default_profile.png" id="photo_obj">
+					</div>
 				</td>
 			</tr>
 			<tr>
-				<td>Upload Photo</td>
+				<td>Upload New Photo</td>
 				<td>:</td>
 				<td><input type="file" name="photo" id="uform_photo"/></td>
 			</tr>
@@ -95,6 +98,13 @@
 	width: 200px;
 	height: 200px;
 	border: 1px solid #000;
+	border-radius: 100%;
+	margin-bottom: 50px;
+}
+#photo_obj {
+	width: 100%;
+	height: 100%;
+	border-radius: 100%;
 }
 #frcg {
 	margin: 0 auto;
@@ -114,6 +124,20 @@
 }
 </style>
 <script>
+function delete_photo_click_callback()
+{
+	gwm_fn_delete_user_photo(function (j) {
+		gwm_auth_renew_session(function () {
+			form_uinfo_set_inputs(gwm_auth_get_user());
+		});
+
+		if (j.code === 200) {
+			gid("photo_obj").src = "assets/default_profile.png";
+			dp.style.display = "none";
+		}
+	});
+}
+
 function form_uinfo_set_inputs(u)
 {
 	gid("uform_full_name").value = u.full_name;
@@ -124,6 +148,19 @@
 	gid("uform_telegram_username").value = u.socials.telegram_username;
 	gid("uform_twitter_username").value = u.socials.twitter_username;
 	gid("uform_discord_username").value = u.socials.discord_username;
+
+	if (u.photo)
+		gid("photo_obj").src = u.photo;
+
+	let dp = gid("del_photo");
+	if (u.photo) {
+		dp.style.display = "block";
+		dp.onclick = function() {
+			delete_photo_click_callback();
+		};
+	} else {
+		dp.style.display = "none";
+	}
 }
 
 function main()
@@ -144,11 +181,12 @@
 		e.preventDefault();
 		let fd = new FormData(uform);
 		gwm_fn_set_user_info(function (j) {
+			toggle_disable_inputs(uform, false);
 			gwm_auth_renew_session(function () {
-				toggle_disable_inputs(uform, false);
-				let u = gwm_auth_get_user();
-				form_uinfo_set_inputs(u);
+				form_uinfo_set_inputs(gwm_auth_get_user());
 			});
+			if (j.code === 200)
+				photo.value = "";
 		}, fd);
 		toggle_disable_inputs(uform, true);
 	});