Kene-s-Cribs-Website/src/login-page/Login.js
2021-04-08 19:38:59 -04:00

85 lines
2.6 KiB
JavaScript

import React, { Component } from "react";
import Logo from "../images/logo1.png";
import "./Login.css";
import { Link, Redirect, withRouter } from "react-router-dom";
// import { useTranslation } from "react-i18next";
import { withTranslation } from "react-i18next";
class Login extends Component {
state = {
Account: {
firstName: "Kevon",
lastName: "Green",
email: "kevon.green@kcribs.com",
password: "Kcribs123",
},
};
handleLogin = (e) => {
e.preventDefault();
var loginEmail = document.getElementById("login-email");
if (loginEmail.value === this.state.Account.email) {
// alert("validated!!!");
return this.props.history.push("/account");
} else {
// alert("Errors!!")
return this.props.history.push("/login");
}
};
render() {
const { t } = this.props;
return (
<div className="login-page">
<form action="" className="signin-Form" onSubmit={this.handleLogin}>
<img className="app-logo" src={Logo} alt="app-logo" />
<h1 className="form-title">{t("Login_header")} </h1>
<p>{t("Login_message")}</p>
<hr className="hr" />
<div className="login-box">
<div class="form-group">
<label for="email">{t("Login_email")}</label>
<input
type="email"
class="form-control"
id="login-email"
// value={email}
aria-describedby="emailHelp"
placeholder="Enter your email"
required
/>
</div>
<div class="form-group">
<label for="password">{t("Login_password")}</label>
<input
type="password"
class="form-control"
id="login-password"
// value={password}
placeholder="Enter your password"
required
/>
</div>
<div class="form-group form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
/>
<label class="form-check-label" for="exampleCheck1">
{t("Login_remember_me")}
</label>
</div>
<div className="login-btn">
<Link to="/account"></Link>
<button type="submit" class="btn btn-lg btn-secondary">
{t("Login_submit_button")}
</button>
</div>
</div>
</form>
</div>
);
}
}
export default withTranslation()(withRouter(Login));