translations, listing-page and login and accout page
This commit is contained in:
soyed
parent
08a6245632
commit
c5eef94732
13 changed files with 21452 additions and 197 deletions
21110
package-lock.json
generated
21110
package-lock.json
generated
File diff suppressed because it is too large
Load diff
10
package.json
10
package.json
|
|
@ -9,8 +9,14 @@
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"bootstrap": "^4.6.0",
|
"bootstrap": "^4.6.0",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
|
"email-validator": "^2.0.4",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
|
"flag-icon-css": "^3.5.0",
|
||||||
|
"formik": "^2.2.6",
|
||||||
|
"i18next-browser-languagedetector": "^6.1.0",
|
||||||
|
"i18next-http-backend": "^1.2.1",
|
||||||
"joi-browser": "^13.4.0",
|
"joi-browser": "^13.4.0",
|
||||||
|
"js-cookie": "^2.2.1",
|
||||||
"nodemailer": "^6.5.0",
|
"nodemailer": "^6.5.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-alert": "^7.0.2",
|
"react-alert": "^7.0.2",
|
||||||
|
|
@ -23,12 +29,14 @@
|
||||||
"react-form-with-constraints-bootstrap4": "^0.16.0",
|
"react-form-with-constraints-bootstrap4": "^0.16.0",
|
||||||
"react-google-maps": "^9.4.5",
|
"react-google-maps": "^9.4.5",
|
||||||
"react-hook-form": "^7.0.0",
|
"react-hook-form": "^7.0.0",
|
||||||
|
"react-i18next": "^11.8.12",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
"react-select": "^4.3.0",
|
"react-select": "^4.3.0",
|
||||||
"reactstrap": "^8.9.0",
|
"reactstrap": "^8.9.0",
|
||||||
"spectre.css": "^0.5.9",
|
"spectre.css": "^0.5.9",
|
||||||
"web-vitals": "^1.1.1"
|
"web-vitals": "^1.1.1",
|
||||||
|
"yup": "^0.32.9"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
|
|
|
||||||
27
public/assets/locales/en/translations.json
Normal file
27
public/assets/locales/en/translations.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"Welcome_to_React": "Welcome to React and react-i18next",
|
||||||
|
"Login_header": "Kene's Cribs",
|
||||||
|
"Login_message": "Welcome please back, please sign in!",
|
||||||
|
"Login_email": "Email address",
|
||||||
|
"Login_password": "Password",
|
||||||
|
"Login_remember_me": "remember me",
|
||||||
|
"Login_submit_button": "Submit",
|
||||||
|
"Account_header": "Personal Information",
|
||||||
|
"Account_message": "You can update/edit your account information here",
|
||||||
|
"Account_first_name": "First Name",
|
||||||
|
"Account_last_name": "Last Name",
|
||||||
|
"Account_email": "Email",
|
||||||
|
"Account_phone_number": "Phone Number",
|
||||||
|
"Account_current_password": "Current Password",
|
||||||
|
"Account_new_password": "New password",
|
||||||
|
"Account_update_button": "Update",
|
||||||
|
"Footer_message": "Copyright SEG3125 - Group 3",
|
||||||
|
"Nav_brand": "Kene's Cribs",
|
||||||
|
"Nav_Home": "Home",
|
||||||
|
"Nav_Listings": "Listings",
|
||||||
|
"Nav_Agents": "Agents",
|
||||||
|
"Nav_Contact_Us": "Contact Us",
|
||||||
|
"Nav_listing_page": "listing-page",
|
||||||
|
"Nav_Login": "Login"
|
||||||
|
|
||||||
|
}
|
||||||
26
public/assets/locales/fr/translations.json
Normal file
26
public/assets/locales/fr/translations.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"Welcome_to_React": "Bienvenue a react et react-i18next",
|
||||||
|
"Login_header": "Berceaux de Kene",
|
||||||
|
"Login_message": "Bienvenue, merci de vous connecter!",
|
||||||
|
"Login_email": "Adresse e-mail",
|
||||||
|
"Login_password": "Mot de passe",
|
||||||
|
"Login_remember_me": "souviens-toi de moi",
|
||||||
|
"Login_submit_button": "Nous faire parvenir",
|
||||||
|
"Account_header": "Informations personnelles",
|
||||||
|
"Account_message": "Vous pouvez mettre à jour / modifier les informations de votre compte ici",
|
||||||
|
"Account_first_name": "Prénom",
|
||||||
|
"Account_last_name": "Nom de famille",
|
||||||
|
"Account_email": "E-mail",
|
||||||
|
"Account_phone_number": "Numéro de téléphone",
|
||||||
|
"Account_current_password": "Mot de passe actuel",
|
||||||
|
"Account_new_password": "Nouveau mot de passe",
|
||||||
|
"Account_update_button": "Mettre à jour",
|
||||||
|
"Footer_message": "Copyright SEG3125 - Groupe 3",
|
||||||
|
"Nav_brand": "Berceaux de Kene",
|
||||||
|
"Nav_Home": "Accueil",
|
||||||
|
"Nav_Listings": "Annonces",
|
||||||
|
"Nav_Agents": "Agents",
|
||||||
|
"Nav_Contact_Us": "Nous contacter",
|
||||||
|
"Nav_listing_page": "page de liste",
|
||||||
|
"Nav_Login": "Connexion"
|
||||||
|
}
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
|
|
||||||
<title>Kene's Cribs</title>
|
<title>Kene's Cribs</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body dir="ltr">
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!--
|
<!--
|
||||||
|
|
|
||||||
90
src/App.js
90
src/App.js
|
|
@ -1,33 +1,93 @@
|
||||||
import { Component } from "react";
|
import React, { useEffect } from "react";
|
||||||
import Footer from "./shared-components/footer-component/Footer";
|
import Footer from "./shared-components/footer-component/Footer";
|
||||||
import Navbar from "./shared-components/navbar-component/Navbar";
|
import Navbar from "./shared-components/navbar-component/Navbar";
|
||||||
import { BrowserRouter, Route } from "react-router-dom";
|
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||||
|
import i18next from "i18next";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
import HomePage from "./homePage/Homepage";
|
import HomePage from "./homePage/Homepage";
|
||||||
import ListingsPage from "./listings-page/ListingsPage";
|
import ListingsPage from "./listings-page/ListingsPage";
|
||||||
import AgentPage from "./agent-page/AgentPage";
|
import AgentPage from "./agent-page/AgentPage";
|
||||||
import ListingPage from "./listings-page/single-listing/listing-page";
|
import ListingPage from "./listings-page/single-listing/listing-page";
|
||||||
import Login from "./login-page/Login";
|
import Login from "./login-page/Login";
|
||||||
// import Account from "./login-page/account/Account";
|
import Account from "./login-page/account/Account";
|
||||||
// import ContactUs from "./shared-components/Contact-us/Contact-us";
|
|
||||||
import ContactUs from "./shared-components/contact-us/contact-us";
|
import ContactUs from "./shared-components/contact-us/contact-us";
|
||||||
|
|
||||||
class App extends Component {
|
const langauges = [
|
||||||
render() {
|
{
|
||||||
return (
|
code: "fr",
|
||||||
<div className="App">
|
name: "Français",
|
||||||
<BrowserRouter>
|
country_code: "fr",
|
||||||
<Navbar></Navbar>
|
},
|
||||||
|
{
|
||||||
|
code: "en",
|
||||||
|
name: "English",
|
||||||
|
country_code: "gb",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const currentLanguageCode = Cookies.get("i18next") || "en";
|
||||||
|
const currentLanguage = langauges.find(
|
||||||
|
(lang) => lang.code === currentLanguageCode
|
||||||
|
);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.body.dir = currentLanguage.dir || "ltr";
|
||||||
|
}, [currentLanguage]);
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
{/* create the translations button */}
|
||||||
|
<div className="container">
|
||||||
|
<div className="d-flex justify-content-end">
|
||||||
|
{/* <!-- Example single danger button --> */}
|
||||||
|
<div class="btn-group">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-link dropdown-toggle"
|
||||||
|
data-toggle="dropdown"
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i class="fas fa-globe"></i>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
{langauges.map(({ code, name, country_code }) => (
|
||||||
|
<button
|
||||||
|
class="dropdown-item"
|
||||||
|
key={code}
|
||||||
|
onClick={() => i18next.changeLanguage(code)}
|
||||||
|
disabled={code === currentLanguageCode}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`flag-icon flag-icon-${country_code} mx-2`}
|
||||||
|
></span>
|
||||||
|
{name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-column align-items-start">
|
||||||
|
{t("Welcome_to_React")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Navbar></Navbar>
|
||||||
|
<Switch>
|
||||||
<Route exact path="/" component={HomePage}></Route>
|
<Route exact path="/" component={HomePage}></Route>
|
||||||
<Route path="/listings" component={ListingsPage}></Route>
|
<Route path="/listings" component={ListingsPage}></Route>
|
||||||
<Route path="/agents" component={AgentPage}></Route>
|
<Route path="/agents" component={AgentPage}></Route>
|
||||||
<Route path="/listing-page" component={ListingPage}></Route>
|
<Route path="/listing-page" component={ListingPage}></Route>
|
||||||
<Route path="/login" component={Login}></Route>
|
<Route path="/login" component={Login}></Route>
|
||||||
<Route path="/contact-us" component={ContactUs}></Route>
|
<Route path="/contact-us" component={ContactUs}></Route>
|
||||||
</BrowserRouter>
|
<Route path="/account" component={Account}></Route>
|
||||||
<Footer></Footer>
|
</Switch>
|
||||||
</div>
|
</BrowserRouter>
|
||||||
);
|
<Footer></Footer>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
||||||
47
src/index.js
47
src/index.js
|
|
@ -1,14 +1,49 @@
|
||||||
import React from "react";
|
import React, { Suspense } from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
import "./index.css";
|
|
||||||
import App from "./App";
|
|
||||||
import reportWebVitals from "./reportWebVitals";
|
import reportWebVitals from "./reportWebVitals";
|
||||||
import "bootstrap/dist/css/bootstrap.min.css";
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
|
import "flag-icon-css/css/flag-icon.min.css";
|
||||||
|
import i18n from "i18next";
|
||||||
|
import { initReactI18next } from "react-i18next";
|
||||||
|
import LanguageDetector from "i18next-browser-languagedetector";
|
||||||
|
import HttpApi from "i18next-http-backend";
|
||||||
|
|
||||||
|
import "./index.css";
|
||||||
|
import App from "./App";
|
||||||
|
|
||||||
|
i18n
|
||||||
|
.use(initReactI18next) // passes i18n down to react-i18next
|
||||||
|
.use(LanguageDetector)
|
||||||
|
.use(HttpApi)
|
||||||
|
.init({
|
||||||
|
// lng: "en",
|
||||||
|
supportedLngs: ["en", "fr"],
|
||||||
|
fallbackLng: "en",
|
||||||
|
detection: {
|
||||||
|
// "querystring",
|
||||||
|
order: ["cookie", "htmlTag", "localStorage", "path", "subdomain"],
|
||||||
|
caches: ["cookie"],
|
||||||
|
},
|
||||||
|
backend: {
|
||||||
|
loadPath: "/assets/locales/{{lng}}/translations.json",
|
||||||
|
},
|
||||||
|
|
||||||
|
react: {
|
||||||
|
useSuspense: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadingMsg = (
|
||||||
|
<div className="py-4 text-center">
|
||||||
|
<h2>Loading......</h2>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<Suspense fallback={loadingMsg}>
|
||||||
<App />
|
<React.StrictMode>
|
||||||
</React.StrictMode>,
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
</Suspense>,
|
||||||
document.getElementById("root")
|
document.getElementById("root")
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import "./listing-page.css";
|
import "./listing-page.css";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
// import house images
|
// import house images
|
||||||
import house_img1 from "../../images/house1-2.jpg";
|
import house_img1 from "../../images/house1-2.jpg";
|
||||||
|
|
@ -102,9 +103,11 @@ const ListingPage = () => {
|
||||||
West facing backyard!
|
West facing backyard!
|
||||||
</p>
|
</p>
|
||||||
<div className="booking-btn">
|
<div className="booking-btn">
|
||||||
<button type="button" class="btn btn-outline-success">
|
<Link to="/contact-us">
|
||||||
Book Showing
|
<button type="button" class="btn btn-lg btn-info">
|
||||||
</button>
|
Book Showing
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,52 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Logo from "../images/logo1.png";
|
import Logo from "../images/logo1.png";
|
||||||
import "./Login.css";
|
import "./Login.css";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
// import { useTranslation } from "react-i18next";
|
||||||
|
import { withTranslation } from "react-i18next";
|
||||||
class Login extends Component {
|
class Login extends Component {
|
||||||
state = {
|
state = {
|
||||||
Accounts: [],
|
Account: {
|
||||||
|
firstName: "Kevon",
|
||||||
|
lastName: "Green",
|
||||||
|
email: "kevon.green@kcribs.com",
|
||||||
|
password: "Kcribs123",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
handleLogin = (e) => {
|
||||||
|
console.log(e);
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
|
const { t } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className="login-page">
|
<div className="login-page">
|
||||||
<form action="" className="signin-Form">
|
<form action="" className="signin-Form" onClick={this.handleLogin}>
|
||||||
<img className="app-logo" src={Logo} alt="app-logo" />
|
<img className="app-logo" src={Logo} alt="app-logo" />
|
||||||
<h1 className="form-title">Kene's Cribs</h1>
|
<h1 className="form-title">{t("Login_header")} </h1>
|
||||||
<p>Welcome please back, please sign in!</p>
|
<p>{t("Login_message")}</p>
|
||||||
<hr className="hr" />
|
<hr className="hr" />
|
||||||
<div className="login-box">
|
<div className="login-box">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="email">Email address</label>
|
<label for="email">{t("Login_email")}</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="login-email"
|
id="login-email"
|
||||||
|
// value={email}
|
||||||
aria-describedby="emailHelp"
|
aria-describedby="emailHelp"
|
||||||
|
placeholder="Enter your email"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="password">Password</label>
|
<label for="password">{t("Login_password")}</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="login-password"
|
id="login-password"
|
||||||
|
// value={password}
|
||||||
|
placeholder="Enter your password"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -40,13 +57,15 @@ class Login extends Component {
|
||||||
id="exampleCheck1"
|
id="exampleCheck1"
|
||||||
/>
|
/>
|
||||||
<label class="form-check-label" for="exampleCheck1">
|
<label class="form-check-label" for="exampleCheck1">
|
||||||
remember me
|
{t("Login_remember_me")}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="login-btn">
|
<div className="login-btn">
|
||||||
<button type="submit" class="btn btn-lg btn-primary">
|
<Link to="/account">
|
||||||
Submit
|
<button type="submit" class="btn btn-lg btn-primary">
|
||||||
</button>
|
{t("Login_submit_button")}
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -55,4 +74,4 @@ class Login extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Login;
|
export default withTranslation()(Login);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
.account-info{
|
.account-info{
|
||||||
padding: 7%;
|
padding: 7%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: #e7dec8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-header{
|
.account-header{
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,154 @@
|
||||||
import React from "react";
|
import React, { Component } from "react";
|
||||||
import "./Account.css";
|
import "./Account.css";
|
||||||
import Profile from "../../images/profile-picture.png";
|
import Profile from "../../images/profile-picture.png";
|
||||||
|
import { withTranslation } from "react-i18next";
|
||||||
|
// import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
const Account = () => {
|
class Account extends Component {
|
||||||
return (
|
state = {
|
||||||
<div className="account-info">
|
Account: {
|
||||||
<div className="account-header">
|
firstName: "Kevon",
|
||||||
<h2 className="account-title">Personal Information</h2>
|
lastName: "Green",
|
||||||
<p className="account-text">
|
email: "kevon.green@kcribs.com",
|
||||||
You can update/edit your account information here
|
password: "Kcribs123",
|
||||||
</p>
|
},
|
||||||
</div>
|
};
|
||||||
|
render() {
|
||||||
<div className="row account-box">
|
const { t } = this.props;
|
||||||
<div className="col-4">
|
return (
|
||||||
<img src={Profile} alt="profile-img" className="account-img" />
|
<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>
|
||||||
<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">
|
|
||||||
First Name
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="col-8 update-input">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="account-fname"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row form-group info-group">
|
|
||||||
<div className="col-4">
|
|
||||||
<label class="label-text" for="email">
|
|
||||||
Last Name
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="col-8 update-input">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="account-lname"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row form-group info-group">
|
<div className="row account-box">
|
||||||
<div className="col-4">
|
<div className="col-4">
|
||||||
<label class="label-text" for="email">
|
<img src={Profile} alt="profile-img" className="account-img" />
|
||||||
Email
|
</div>
|
||||||
</label>
|
<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>
|
||||||
<div className="col-8 update-input">
|
<div class="row form-group info-group">
|
||||||
<input
|
<div className="col-4">
|
||||||
type="email"
|
<label class="label-text" for="email">
|
||||||
class="form-control"
|
{t("Account_last_name")}
|
||||||
id="account-email"
|
</label>
|
||||||
aria-describedby="emailHelp"
|
</div>
|
||||||
required
|
<div className="col-8 update-input">
|
||||||
/>
|
<input
|
||||||
</div>
|
type="text"
|
||||||
</div>
|
class="form-control"
|
||||||
<div class="row form-group info-group">
|
id="account-lname"
|
||||||
<div className="col-4">
|
placeholder={this.state.Account.lastName}
|
||||||
<label class="label-text" for="email">
|
required
|
||||||
Phone Number
|
disabled={true}
|
||||||
</label>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-8 update-input">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="account-phoneNumber"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row form-group info-group">
|
|
||||||
<div className="col-4">
|
|
||||||
<label class="label-text" for="email">
|
|
||||||
Existing Password
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="col-8 update-input">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="account-existPassword"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row form-group info-group">
|
|
||||||
<div className="col-4">
|
|
||||||
<label class="label-text" for="email">
|
|
||||||
New password
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="col-8 update-input">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="account-newPassword"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row form-group info-group">
|
|
||||||
<div className="col-4">
|
|
||||||
<label class="label-text" for="email">
|
|
||||||
Confirm New Password
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="col-8 update-input">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="account-confirmPassword"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</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.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_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">
|
<div className="update-btn">
|
||||||
<button type="button" class="btn btn-lg btn-danger">
|
<button
|
||||||
Update
|
type="button"
|
||||||
|
class="btn btn-lg btn-danger"
|
||||||
|
disabled={true}
|
||||||
|
>
|
||||||
|
{t("Account_update_button")}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="account-title">Booked Appointments</h2>
|
);
|
||||||
</div>
|
}
|
||||||
);
|
}
|
||||||
};
|
|
||||||
|
|
||||||
//links
|
//links
|
||||||
// https://www.pngitem.com/pimgs/m/146-1468479_my-profile-icon-blank-profile-picture-circle-hd.png
|
// https://www.pngitem.com/pimgs/m/146-1468479_my-profile-icon-blank-profile-picture-circle-hd.png
|
||||||
|
|
||||||
export default Account;
|
export default withTranslation()(Account);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import "./Footer.css";
|
import "./Footer.css";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
<footer>
|
<footer>
|
||||||
<section id="footer">
|
<section id="footer">
|
||||||
|
|
@ -9,7 +12,7 @@ const Footer = () => {
|
||||||
<i class="fab fa-facebook social-icon"></i>
|
<i class="fab fa-facebook social-icon"></i>
|
||||||
<i class="fab fa-instagram social-icon"></i>
|
<i class="fab fa-instagram social-icon"></i>
|
||||||
<i class="fas fa-envelope social-icon"></i>
|
<i class="fas fa-envelope social-icon"></i>
|
||||||
<p class="">© Copyright SEG3125 - Group 3</p>
|
<p class="">© {t("Footer_message")}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,16 @@ import { Link, withRouter } from "react-router-dom";
|
||||||
import "./Navbar.css";
|
import "./Navbar.css";
|
||||||
import logo from "./logo2.png";
|
import logo from "./logo2.png";
|
||||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
/* Nav Bar */
|
/* Nav Bar */
|
||||||
<div className="Navbar">
|
<div className="Navbar">
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||||
<img src={logo} alt="" width="40" height="40"></img>
|
<img src={logo} alt="" width="40" height="40"></img>
|
||||||
<a href="/" class="navbar-brand">
|
<a href="/" class="navbar-brand">
|
||||||
Kene's Cribs
|
{t("Nav_brand")}
|
||||||
</a>
|
</a>
|
||||||
<button
|
<button
|
||||||
className="navbar-toggler"
|
className="navbar-toggler"
|
||||||
|
|
@ -27,36 +29,36 @@ const Navbar = () => {
|
||||||
<ul className="navbar-nav ml-auto">
|
<ul className="navbar-nav ml-auto">
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" exact to="/">
|
<Link className="nav-link" exact to="/">
|
||||||
Home
|
{t("Nav_Home")}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" to="/listings">
|
<Link className="nav-link" to="/listings">
|
||||||
Listings
|
{t("Nav_Listings")}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" to="/agents">
|
<Link className="nav-link" to="/agents">
|
||||||
Agents
|
{t("Nav_Agents")}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" to="/contact-us">
|
<Link className="nav-link" to="/contact-us">
|
||||||
Contact Us
|
{t("Nav_Contact_Us")}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" to="/listing-page">
|
<Link className="nav-link" to="/listing-page">
|
||||||
listing-page
|
{t("Nav_listing_page")}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" to="/login">
|
<Link className="nav-link" to="/login">
|
||||||
Login
|
{t("Nav_Login")}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue