Kene-s-Cribs-Website/src/login-page/account/Account.js

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);