155 lines
5.2 KiB
JavaScript
155 lines
5.2 KiB
JavaScript
import React, { Component } from "react";
|
|
import "./Account.css";
|
|
import Profile from "../../images/profile-picture.png";
|
|
import { withTranslation } from "react-i18next";
|
|
// import { useTranslation } from "react-i18next";
|
|
|
|
class Account extends Component {
|
|
state = {
|
|
Account: {
|
|
firstName: "Kevon",
|
|
lastName: "Green",
|
|
email: "kevon.green@kcribs.com",
|
|
password: "Kcribs123",
|
|
phoneNumber: "613-234-8796",
|
|
},
|
|
};
|
|
render() {
|
|
const { t } = this.props;
|
|
return (
|
|
<div className="account-info">
|
|
{/* // send information to my login component */}
|
|
<div className="account-header">
|
|
<h2 className="account-title">{t("Account_header")}</h2>
|
|
<p className="account-text">{t("Account_message")}</p>
|
|
</div>
|
|
|
|
<div className="row account-box">
|
|
<div className="col-4">
|
|
<img src={Profile} alt="profile-img" className="account-img" />
|
|
</div>
|
|
<div className="col-8">
|
|
<form action="" className="update-account">
|
|
<div class="row form-group info-group">
|
|
<div className="col-4">
|
|
<label class="label-text" for="email">
|
|
{t("Account_first_name")}
|
|
</label>
|
|
</div>
|
|
<div className="col-8 update-input">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="account-fname"
|
|
placeholder={this.state.Account.firstName}
|
|
required
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row form-group info-group">
|
|
<div className="col-4">
|
|
<label class="label-text" for="email">
|
|
{t("Account_last_name")}
|
|
</label>
|
|
</div>
|
|
<div className="col-8 update-input">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="account-lname"
|
|
placeholder={this.state.Account.lastName}
|
|
required
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row form-group info-group">
|
|
<div className="col-4">
|
|
<label class="label-text" for="email">
|
|
{t("Account_email")}
|
|
</label>
|
|
</div>
|
|
<div className="col-8 update-input">
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="account-email"
|
|
aria-describedby="emailHelp"
|
|
placeholder={this.state.Account.email}
|
|
required
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row form-group info-group">
|
|
<div className="col-4">
|
|
<label class="label-text" for="email">
|
|
{t("Account_phone_number")}
|
|
</label>
|
|
</div>
|
|
<div className="col-8 update-input">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="account-phoneNumber"
|
|
placeholder={this.state.Account.phoneNumber}
|
|
required
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row form-group info-group">
|
|
<div className="col-4">
|
|
<label class="label-text" for="email">
|
|
{t("Account_current_password")}
|
|
</label>
|
|
</div>
|
|
<div className="col-8 update-input">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="account-existPassword"
|
|
placeholder={"**************"}
|
|
required
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* <div class="row form-group info-group">
|
|
<div className="col-4">
|
|
<label class="label-text" for="email">
|
|
{t("Account_new_password")}
|
|
</label>
|
|
</div>
|
|
<div className="col-8 update-input">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="account-newPassword"
|
|
required
|
|
/>
|
|
</div>
|
|
</div> */}
|
|
<div className="update-btn">
|
|
<button
|
|
type="button"
|
|
class="btn btn-lg btn-danger"
|
|
disabled={true}
|
|
>
|
|
{t("Account_update_button")}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
//links
|
|
// https://www.pngitem.com/pimgs/m/146-1468479_my-profile-icon-blank-profile-picture-circle-hd.png
|
|
|
|
export default withTranslation()(Account);
|