generated from lucien/api-template
134 lines
No EOL
4.5 KiB
TypeScript
134 lines
No EOL
4.5 KiB
TypeScript
import { useState, useEffect } from "react"
|
|
import { User } from "../types"
|
|
import { Link } from "react-router-dom"
|
|
import axios from "axios"
|
|
import TopBar from "../components/TopBar"
|
|
|
|
import "../styles/EditProfile.css"
|
|
|
|
export default function EditProfile() {
|
|
const [token, setToken] = useState<string>("");
|
|
const [user, setUser] = useState<User>();
|
|
|
|
useEffect(() => {
|
|
const localToken = localStorage.getItem("token");
|
|
if (localToken) {
|
|
setToken(localToken)
|
|
|
|
axios
|
|
.post("/api/auth/me", { token: localToken })
|
|
.then((res) => {
|
|
setUser(res.data);
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
function uploadPfp(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData();
|
|
const fileInput = document.getElementById("pfp") as HTMLInputElement;
|
|
if (fileInput.files) {
|
|
formData.append("pfp", fileInput.files[0]);
|
|
}
|
|
formData.append("token", token);
|
|
axios
|
|
.post("/api/auth/me/uploadpfp", formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
})
|
|
.then(() => {
|
|
window.location.reload();
|
|
})
|
|
.catch((err) => {
|
|
console.error(err.response.data);
|
|
});
|
|
}
|
|
|
|
function deletePfp(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
axios
|
|
.post("/api/auth/me/deletepfp", { token: token })
|
|
.then(() => {
|
|
window.location.reload();
|
|
})
|
|
.catch((err) => {
|
|
console.error(err.response.data);
|
|
});
|
|
}
|
|
|
|
function editUsername(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
const newUsername = (document.getElementById("username") as HTMLInputElement).value;
|
|
axios
|
|
.post("/api/auth/me/setusername", { token: token, username: newUsername })
|
|
.then(() => {
|
|
window.location.reload();
|
|
})
|
|
.catch((err) => {
|
|
console.error(err.response.data);
|
|
});
|
|
}
|
|
|
|
function editPassword(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
const oldPassword = (document.getElementById("old-password") as HTMLInputElement).value;
|
|
const newPassword = (document.getElementById("password") as HTMLInputElement).value;
|
|
const confirmPassword = (document.getElementById("confirm-password") as HTMLInputElement).value;
|
|
if (newPassword !== confirmPassword) {
|
|
alert("Passwords do not match");
|
|
return;
|
|
}
|
|
axios
|
|
.post("/api/auth/me/setpassword", { token: token, oldPassword: oldPassword, password: newPassword })
|
|
.then(() => {
|
|
window.location.reload();
|
|
})
|
|
.catch((err) => {
|
|
console.error(err.response.data);
|
|
});
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<div className="edit-profile-page">
|
|
<TopBar user={user}/>
|
|
<div className="edit-login">
|
|
<p>Please log in to edit your profile</p>
|
|
<Link to="/login">Login</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="edit-profile-page">
|
|
<TopBar user={user}/>
|
|
<div className="edit-pfp">
|
|
<h2>Edit Profile Picture</h2>
|
|
<form>
|
|
<input type="file" name="pfp" id="pfp" />
|
|
<button onClick={uploadPfp}>Save</button>
|
|
<button onClick={deletePfp}>Delete</button>
|
|
</form>
|
|
</div>
|
|
<div className="edit-username">
|
|
<h2>Edit Username</h2>
|
|
<form>
|
|
<input type="text" name="username" id="username" placeholder={user?.username} />
|
|
<button onClick={editUsername}>Save</button>
|
|
</form>
|
|
</div>
|
|
<div className="edit-password">
|
|
<h2>Edit Password</h2>
|
|
<form>
|
|
<input type="password" name="old-password" id="old-password" placeholder="Old password" />
|
|
<input type="password" name="password" id="password" placeholder="New password" />
|
|
<input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm new password" />
|
|
<button onClick={editPassword}>Save</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |