121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
import { Button, Card, Col, Form, Input, notification } from "antd";
|
|
import { LockOutlined } from "@ant-design/icons";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { updateUserDetails } from "../../redux/user/user.actions";
|
|
import { selectCurrentUser } from "../../redux/user/user.selectors";
|
|
import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.utils";
|
|
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
updateUserDetails: (userDetails) => dispatch(updateUserDetails(userDetails))
|
|
});
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(function ProfileMyComponent({ currentUser, updateUserDetails }) {
|
|
const { t } = useTranslation();
|
|
|
|
const handleFinish = (values) => {
|
|
logImEXEvent("profile_update");
|
|
|
|
updateUserDetails({
|
|
displayName: values.displayName,
|
|
photoURL: values.photoURL
|
|
});
|
|
};
|
|
|
|
const handleChangePassword = async ({ password }) => {
|
|
logImEXEvent("password_update");
|
|
try {
|
|
await updateCurrentPassword(password);
|
|
notification.success({
|
|
message: t("user.successess.passwordchanged")
|
|
});
|
|
} catch (error) {
|
|
notification.error({
|
|
message: error.message
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Col span={24}>
|
|
<Form onFinish={handleFinish} autoComplete={"no"} initialValues={currentUser} layout="vertical">
|
|
<Card
|
|
title={t("user.labels.profileinfo")}
|
|
extra={
|
|
<Button type="primary" key="submit" htmlType="submit">
|
|
{t("user.actions.updateprofile")}
|
|
</Button>
|
|
}
|
|
>
|
|
<LayoutFormRow noDivider>
|
|
<Form.Item
|
|
label={t("user.fields.displayname")}
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
}
|
|
]}
|
|
name="displayName"
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label={t("user.fields.photourl")} name="photoURL">
|
|
<Input />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
</Card>
|
|
</Form>
|
|
</Col>
|
|
<Col span={24}>
|
|
<Form onFinish={handleChangePassword} autoComplete={"no"} initialValues={currentUser} layout="vertical">
|
|
<Card
|
|
title={t("user.labels.changepassword")}
|
|
extra={
|
|
<Button type="primary" key="submit" htmlType="submit">
|
|
{t("user.actions.changepassword")}
|
|
</Button>
|
|
}
|
|
>
|
|
<LayoutFormRow>
|
|
<Form.Item label={t("general.labels.newpassword")} name="password">
|
|
<Input prefix={<LockOutlined />} type="password" placeholder={t("general.labels.password")} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t("general.labels.confirmpassword")}
|
|
name="password-confirm"
|
|
dependencies={["password"]}
|
|
rules={[
|
|
{
|
|
required: true
|
|
//message: t("general.validation.required"),
|
|
},
|
|
({ getFieldValue }) => ({
|
|
validator(rule, value) {
|
|
if (!value || getFieldValue("password") === value) {
|
|
return Promise.resolve();
|
|
}
|
|
return Promise.reject(t("general.labels.passwordsdonotmatch"));
|
|
}
|
|
})
|
|
]}
|
|
>
|
|
<Input prefix={<LockOutlined />} type="password" placeholder={t("general.labels.password")} />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
</Card>
|
|
</Form>
|
|
</Col>
|
|
</>
|
|
);
|
|
});
|