76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
import { useConfig } from "@/hooks/useConfig";
|
|
import LoadingIcon from "@/components/util/LoadingIcon";
|
|
import { DataProvider } from "@/context/DataContext";
|
|
import { useDataContext } from "@/hooks/useDataContext";
|
|
import { errorParser } from "@/util/parsers/errorParser";
|
|
import PropTypes from "prop-types";
|
|
import ContentWrapper from "@/components/layout/ContentWrapper";
|
|
import CustomContainer from "@/components/layout/CustomContainer";
|
|
import ReactSkinview3d from "react-skinview3d";
|
|
import { IdleAnimation } from "skinview3d"
|
|
|
|
const Profile = () => {
|
|
const { config, configLoading } = useConfig();
|
|
if (configLoading) return <LoadingIcon />;
|
|
|
|
const reqConfig = {
|
|
baseUrl: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.players.playerInfo}`,
|
|
changePassword: `${config.apiConfig.baseUrl}${config.apiConfig.endpoints.auth.changePassword}`,
|
|
params: {}
|
|
};
|
|
|
|
return (
|
|
<DataProvider config={reqConfig}>
|
|
<ProfileContent reqConfig={reqConfig} />
|
|
</DataProvider>
|
|
);
|
|
};
|
|
|
|
const ProfileContent = ({ reqConfig }) => {
|
|
const { data, dataLoading, dataError } = useDataContext();
|
|
if (dataLoading) return <LoadingIcon />;
|
|
if (dataError) return <div className="alert alert-danger">{errorParser(dataError)}</div>;
|
|
|
|
const handleChangePassword = async (e) => {
|
|
|
|
}
|
|
|
|
return (
|
|
<CustomContainer>
|
|
<ContentWrapper>
|
|
<div className="minecraft-card not-animated row">
|
|
<h1 className="header col-12 mb-4">{data.user_name}</h1>
|
|
<ReactSkinview3d
|
|
className="col-4"
|
|
skinUrl={`https://mineskin.eu/skin/${data.user_name}`}
|
|
width={250}
|
|
height={500}
|
|
onReady={({viewer}) => {
|
|
viewer.animation = new IdleAnimation();
|
|
viewer.autoRotate = true;
|
|
}}
|
|
/>
|
|
<div className="col-8">
|
|
<form onSubmit={handleChangePassword}>
|
|
<label>Antigua contraseña:</label>
|
|
<input disabled name="latestPass" type="text" className="minecraft-input mb-4" />
|
|
<label>Nueva contraseña:</label>
|
|
<input disabled name="newPass" type="text" className="minecraft-input mb-4" />
|
|
<label>Confirmar contraseña:</label>
|
|
<input disabled name="newPassConfirm" type="text" className="minecraft-input mb-4" />
|
|
<button disabled type="submit" className="minecraft-btn">Cambiar</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</ContentWrapper>
|
|
</CustomContainer>
|
|
);
|
|
};
|
|
|
|
|
|
ProfileContent.propTypes = {
|
|
reqConfig: PropTypes.object
|
|
};
|
|
|
|
export default Profile;
|