Skip to content

A
Aqbits Trace Code
Commit b38ec7d8 authored by Mai Thanh Cong's avatar Mai Thanh Cong
Browse files
Options

Merge branch 'develop/NamAnh/Login' of... 

Merge branch 'develop/NamAnh/Login' of https://gitlab.kis-v.com/congmt_kis/aqbits-trace-code into develop/change-ui
parents e809be7f 0cb0e999
Show whitespace changes
Inline Side-by-side
Showing with 1256 additions and 139 deletions
.env 0 → 100644
View file @ b38ec7d8
#config
REACT_APP_AWS_USER_POOL_ID = us-east-1_c1uad9xyt
REACT_APP_AWS_CLIENT_ID = 339mutkibblh97ojfjgti8gei7
REACT_APP_BASE_URL_AQBITS_TRACE_CODE = https://f26svz60d8.execute-api.us-east-1.amazonaws.com/api
\ No newline at end of file
.vscode/settings.json 0 → 100644
View file @ b38ec7d8
{
"git.ignoreLimitWarning": true
}
\ No newline at end of file
package-lock.json
View file @ b38ec7d8
......@@ -2304,6 +2304,18 @@
"resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
},
"amazon-cognito-identity-js": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/amazon-cognito-identity-js/-/amazon-cognito-identity-js-5.0.3.tgz",
"integrity": "sha512-0qIL6brMF6Q/GeGlovcg+fNtmABGocy9uTJBCjcJ+LFxwyIzZhELbf0koBH9clXADMK6kp+U5TfcM/5S7DCDoQ==",
"requires": {
"buffer": "4.9.2",
"crypto-js": "^4.0.0",
"fast-base64-decode": "^1.0.0",
"isomorphic-unfetch": "^3.0.0",
"js-cookie": "^2.2.1"
}
},
"amdefine": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
......@@ -4319,6 +4331,11 @@
"randomfill": "^1.0.3"
}
},
"crypto-js": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
"integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
},
"css": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
......@@ -6012,6 +6029,11 @@
"time-stamp": "^1.0.0"
}
},
"fast-base64-decode": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz",
"integrity": "sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q=="
},
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
......@@ -7777,6 +7799,15 @@
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
},
"isomorphic-unfetch": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz",
"integrity": "sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==",
"requires": {
"node-fetch": "^2.6.1",
"unfetch": "^4.2.0"
}
},
"isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
......@@ -9016,6 +9047,11 @@
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
},
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
......@@ -10093,6 +10129,11 @@
"tslib": "^2.0.3"
}
},
"node-fetch": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
},
"node-forge": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
......@@ -15275,6 +15316,11 @@
"integrity": "sha1-XkvaMI5KiirlhPm5pDWaSZglzFA=",
"dev": true
},
"unfetch": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
"integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA=="
},
"unicode-canonical-property-names-ecmascript": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
......
package.json
View file @ b38ec7d8
......@@ -48,6 +48,7 @@
"not op_mini all"
],
"dependencies": {
"amazon-cognito-identity-js": "^5.0.3",
"bootstrap": "4.3.1",
"classnames": "2.2.6",
"headroom.js": "0.11.0",
......
src/HomePage.js 0 → 100644
View file @ b38ec7d8
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, HashRouter, Route, Switch, Redirect, useHistory } from "react-router-dom";
import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/font-awesome/css/font-awesome.min.css";
import "assets/scss/argon-design-system-react.scss?v1.1.0";
import AddProfile from "./components/Profile/AddProfile";
import Index from "views/Index.js";
import Landing from "views/examples/Landing.js";
import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js";
import NotFound from "views/examples/NotFound.js"
import DetailProfile from "./components/Profile/DetailProfile.js"
import SearchProfile from "./components/Profile/SearchProfile.js";
import Tracecode from "./components/Profile/Tracecode.js"
import AddProduct from "components/Profile/AddProduct";
import Signin from "./services/Signin";
import Signup from "services/Signup";
import { authServices } from "./services/AuthServices";
import { Routes } from "reoutes";
// import { Routes } from "./reoutes";
const RouteWithLoader = ({ component: Component, ...rest }) => {
return (
<Route {...rest} render={props => authServices.isAuthenticated() === true ? <Component {...props} /> : <Redirect to={{ pathname: '/login-page' }} />} />
);
};
export default () => (
<Switch>
<Route exact path="/login-page" component={Signin} />
<RouteWithLoader exact path="/" component={SearchProfile} />
<RouteWithLoader exact path="/profile/add" component={AddProfile} />
<RouteWithLoader exact path="/profile/add-product" component={AddProduct} />
<RouteWithLoader exact path="/profile/:code" component={DetailProfile} />
<RouteWithLoader exact path="/trace-code/:trace" component={Tracecode} />
<RouteWithLoader exact path="/not-found" component={NotFound} />
{/* <Route path="/profile" exact render={props => <SearchProfile {...props} />} />
<Route
path="/profile/add"
exact
render={props => <AddProfile {...props} />}
/>
<Route
path="/profile/add-product"
exact
render={props => <AddProduct {...props} />}
/>
<Route
path="/trace-code/:trace"
exact
render={props => <Tracecode {...props} />}
/>
<Route
path="/profile/:code"
exact
render={props => <DetailProfile {...props} />}
/>
<Route
path="/not-found"
exact
render={props => <NotFound {...props} />}
/>
<Route
path="/landing-page"
exact
render={props => <Landing {...props} />}
/>
<Route
path="/signin"
exact
render={props => <Signin {...props} />} />
<Route
path="/profile-page"
exact
render={props => <Profile {...props} />}
/>
<Route
path="/signup"
exact
render={props => <Signup {...props} />}
/>
<Redirect to="/" /> */}
</Switch>
);
src/components/Navbars/DemoNavbar.js
View file @ b38ec7d8
......@@ -38,6 +38,7 @@ import {
Col,
UncontrolledTooltip
} from "reactstrap";
import { authServices } from "../../services/AuthServices";
const DemoNavbar = () => {
// componentDidMount() {
......@@ -77,6 +78,11 @@ const DemoNavbar = () => {
// render() {
const onHandleLogout = () => {
authServices.logout();
history.push("/login-page");
}
return (
<>
<header className="header-global">
......@@ -197,12 +203,16 @@ const DemoNavbar = () => {
<DropdownItem to="/login-page" tag={Link}>
Đăng nhập
</DropdownItem>
<DropdownItem to="/register-page" tag={Link}>
{/* <DropdownItem to="/register-page" tag={Link}>
Đăng kí
</DropdownItem>
</DropdownItem> */}
<DropdownItem to="/" tag={Link}>
Tra cứu thông tin
</DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={onHandleLogout}>
Đăng xuất
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
......
src/constans/index.js
View file @ b38ec7d8
......@@ -18,3 +18,8 @@ export const validatePhoneNumber = (phoneNumber) => {
return false;
}
}
export const validateEmail = (email) => {
const string = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return string.test(String(email).toLowerCase());
};
\ No newline at end of file
src/index.js
View file @ b38ec7d8
/*!
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from "react-router-dom";
import { Provider } from "react-redux";
=========================================================
* Argon Design System React - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-design-system-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/font-awesome/css/font-awesome.min.css";
import "assets/scss/argon-design-system-react.scss?v1.1.0";
import AddProfile from "./components/Profile/AddProfile";
import Index from "views/Index.js";
import Landing from "views/examples/Landing.js";
import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js";
import NotFound from "views/examples/NotFound.js"
import DetailProfile from "./components/Profile/DetailProfile.js"
import SearchProfile from "./components/Profile/SearchProfile.js";
import Tracecode from "./components/Profile/Tracecode.js"
import AddProduct from "components/Profile/AddProduct";
// import { Routes } from "./reoutes";
// import store from "./store";
import HomePage from "./HomePage";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" exact render={props => <SearchProfile {...props} />} />
<Route
path="/profile/add"
exact
render={props => <AddProfile {...props} />}
/>
<Route
path="/profile/add-product"
exact
render={props => <AddProduct {...props} />}
/>
<Route
path="/trace-code/:trace"
exact
render={props => <Tracecode {...props} />}
/>
<Route
path="/profile/:code"
exact
render={props => <DetailProfile {...props} />}
/>
<Route
path="/not-found"
exact
render={props => <NotFound {...props} />}
/>
<Route
path="/landing-page"
exact
render={props => <Landing {...props} />}
/>
<Route path="/login-page" exact render={props => <Login {...props} />} />
<Route
path="/profile-page"
exact
render={props => <Profile {...props} />}
/>
<Route
path="/register-page"
exact
render={props => <Register {...props} />}
/>
<Redirect to="/" />
</Switch>
</BrowserRouter>,
<HashRouter>
<HomePage />
</HashRouter>,
document.getElementById("root")
);
src/reoutes.js
View file @ b38ec7d8
export const Routes = {
SearchDetail: { path: "./profile"},
TraceCode: { path: "./trace-code"}
SearchDetail: { path: "./profile" },
TraceCode: { path: "./trace-code" },
Signin: { path: "./signin" },
Signup: { path: "./signup" },
Home: { path: "" }
}
\ No newline at end of file
src/services/AuthServices.js 0 → 100644
View file @ b38ec7d8
import {
CognitoUser,
CognitoUserPool,
CognitoUserAttribute,
AuthenticationDetails,
} from "amazon-cognito-identity-js";
const poolData = {
UserPoolId: process.env.REACT_APP_AWS_USER_POOL_ID,
ClientId: process.env.REACT_APP_AWS_CLIENT_ID,
};
const userPool = new CognitoUserPool(poolData);
export const authServices = {
signUp: (email, password) => {
return new Promise((resolve, reject) => {
const userName = email.split("@")[0];
const attributeList = [];
const dataEmail = {
Name: "email",
Value: email,
};
const dataPhoneNumber = {
Name: "phone_number",
Value: "+0358853172",
};
const dataName = {
Name: "name",
Value: userName,
};
const dataRole = {
Name: "custom:role",
Value: "USER",
};
const attributeEmail = new CognitoUserAttribute(dataEmail);
const attributePhoneNumber = new CognitoUserAttribute(dataPhoneNumber);
const atrributeName = new CognitoUserAttribute(dataName);
const atrributeRole = new CognitoUserAttribute(dataRole);
attributeList.push(attributeEmail);
attributeList.push(attributePhoneNumber);
attributeList.push(atrributeName);
attributeList.push(atrributeRole);
userPool.signUp(
userName,
password,
attributeList,
null,
function (err, result) {
if (err) {
return reject(err);
}
var cognitoUser = result.user;
localStorage.setItem("signup_user_name", cognitoUser.getUsername());
return resolve(cognitoUser.getUsername());
}
);
});
},
verifyCode: (verifyCode) => {
return new Promise((resolve, reject) => {
const signUpUserName = localStorage.getItem("signup_user_name");
var userData = {
Username: signUpUserName,
Pool: userPool,
};
var cognitoUser = new CognitoUser(userData);
cognitoUser.confirmRegistration(verifyCode, true, function (err, result) {
if (err) {
return reject(err);
}
return resolve(result);
});
});
},
login: (email, password) => {
return new Promise((resolve, reject) => {
const userName = email.split("@")[0];
var authenticationData = {
email,
Password: password,
};
var authenticationDetails = new AuthenticationDetails(authenticationData);
var userData = {
Username: userName,
Pool: userPool,
};
var cognitoUser = new CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
var accessToken = result.getAccessToken().getJwtToken();
console.log("accessToken", accessToken);
localStorage.setItem("access_token", accessToken);
var idToken = result.getIdToken().getJwtToken();
console.log("idToken", idToken);
localStorage.setItem("id_token", idToken);
localStorage.setItem("signin_user_name", userName);
resolve(result);
},
onFailure: function (err) {
reject(err);
},
});
});
},
forgotPassword: (email) => {
return new Promise((resolve, reject) => {
var userData = {
Username: email,
Pool: userPool,
};
var cognitoUser = new CognitoUser(userData);
cognitoUser.forgotPassword({
onSuccess: function(data) {
localStorage.setItem("forgot_password", email);
resolve(data);
},
onFailure: function(err) {
reject(err);
}
});
});
},
resetPassword: (code, newPassword) => {
return new Promise((resolve, reject) => {
const email = localStorage.getItem("forgot_password");
var userData = {
Username: email,
Pool: userPool,
};
var cognitoUser = new CognitoUser(userData);
cognitoUser.confirmPassword(code, newPassword, {
onSuccess() {
resolve(code, newPassword);
},
onFailure(err) {
reject(err);
},
});
});
},
isAuthenticated: () => {
if(localStorage.getItem("access_token") && localStorage.getItem("id_token")){
return true;
}else {
return false;
}
},
logout: () => {
localStorage.removeItem("access_token");
localStorage.removeItem("id_token");
},
checkUserRole: () => {
const cognitoUser = userPool.getCurrentUser();
const session = cognitoUser.getSession((err, session) => {
return session.idToken.payload['custom:role'];
});
return session;
}
};
src/services/ForgotPassword.js 0 → 100644
View file @ b38ec7d8
import React, { useState } from "react";
import {
Col,
Row,
Form,
Card,
Button,
Container,
InputGroup,
Alert,
Spinner
} from "@themesberg/react-bootstrap";
import { Link, useHistory } from "react-router-dom";
import { Routes } from "../routes";
import BgImage from "../assets/img/illustrations/signin.svg";
import { authServices, validateEmail } from "./AuthServices";
export default () => {
const [loading, setLoading] = useState(false);
const [email, setEmail] = useState("");
const [validEmail, setValidEmail] = useState(false);
const [showMessage, setShowMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const history = useHistory();
const onHandleForgotPassword = () => {
if (validateEmail(email)) {
setLoading(true);
setShowMessage(false);
setValidEmail(false);
authServices
.forgotPassword(email)
.then((rs) => {
history.push(Routes.ResetPassword.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
} else {
setShowMessage(false);
setValidEmail(true);
}
}
return (
<main>
<section className="vh-lg-100 mt-4 mt-lg-0 bg-soft d-flex align-items-center">
<Container>
{loading ? (
<div className="text-center mb-2">
<Spinner animation="border" variant="secondary" role="status" />
</div>
) : (
false
)}
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
<Col
xs={12}
className="d-flex align-items-center justify-content-center"
>
<div className="signin-inner my-3 my-lg-0 bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
<h3>Forgot your password?</h3>
<Form onSubmit={onHandleForgotPassword}>
<div className="mb-4">
<Form.Label htmlFor="email">Your Email</Form.Label>
<InputGroup id="email">
<Form.Control
required
autoFocus
type="email"
placeholder="example@company.com"
value={email} onChange={(e) => setEmail(e.target.value)}
/>
</InputGroup>
<Form.Control.Feedback
type="invalid"
className="invalid-feedback"
>
{validEmail ? "Please input validate email" : false}
</Form.Control.Feedback>
</div>
<Button variant="primary" type="submit" className="w-100">
Recover password
</Button>
</Form>
<div className="d-flex justify-content-center align-items-center mt-4">
<span className="fw-normal">
No forgot password?
<Card.Link as={Link} to={Routes.Signin.path} className="fw-bold">
{` Back to sign in `}
</Card.Link>
</span>
</div>
</div>
</Col>
</Row>
</Container>
</section>
</main>
);
};
src/services/Lock.js 0 → 100644
View file @ b38ec7d8
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faAngleLeft,
faEye,
faUnlockAlt,
} from "@fortawesome/free-solid-svg-icons";
import {
Col,
Row,
Form,
Card,
Image,
Button,
Container,
InputGroup,
} from "@themesberg/react-bootstrap";
import { Link } from "react-router-dom";
import { Routes } from "../routes";
import BgImage from "../assets/img/illustrations/signin.svg";
import Profile3 from "../assets/img/team/profile-picture-3.jpg";
export default () => {
const [showPassword, setShowPassword] = useState(false);
const passwordInputType = showPassword ? "text" : "password";
const passwordIconColor = showPassword ? "#262B40" : "";
const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
};
return (
<main>
<section className="vh-lg-100 bg-soft d-flex align-items-center my-4">
<Container>
<p className="text-center">
<Card.Link
as={Link}
to={Routes.Home.path}
className="text-gray-700"
>
<FontAwesomeIcon icon={faAngleLeft} className="me-2" /> Back to
homepage
</Card.Link>
</p>
<Row
className="justify-content-center form-bg-image"
style={{ backgroundImage: `url(${BgImage})` }}
>
<Col
xs={12}
className="d-flex align-items-center justify-content-center"
>
<div className="bg-white shadow-soft border border-light rounded p-4 p-lg-5 w-100 fmxw-500">
<div className="text-center text-md-center mb-4 mt-md-0">
<div className="user-avatar large-avatar mx-auto mb-3 border-dark p-2">
<Image src={Profile3} className="rounded-circle" />
</div>
<h3 className="mb-3">Bonnie Green</h3>
<p className="text-gray">Better to be safe than sorry.</p>
</div>
<Form className="mt-5">
<Form.Group id="password" className="mb-4">
<Form.Label>Your Password</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faUnlockAlt} />
</InputGroup.Text>
<Form.Control
required
type={passwordInputType}
placeholder="Password"
/>
<InputGroup.Text onClick={togglePasswordVisibility}>
<FontAwesomeIcon
color={passwordIconColor}
icon={faEye}
/>
</InputGroup.Text>
</InputGroup>
</Form.Group>
<Button variant="primary" type="submit" className="w-100">
Unlock
</Button>
</Form>
</div>
</Col>
</Row>
</Container>
</section>
</main>
);
};
src/services/NodeServices/Home.js 0 → 100644
View file @ b38ec7d8
import axiosClient from "../NodeServices/index";
import { GET_NODE, GET_HISTORY_NODE } from "../../constans/Home";
const homeAPI = {
getNodesServices: () => {
return axiosClient.get(GET_NODE);
},
getNodeHistoryServices: (param) => {
return axiosClient.get(GET_HISTORY_NODE, { params: { node_id: param }});
}
};
export default homeAPI;
src/services/NodeServices/index.js 0 → 100644
View file @ b38ec7d8
import axios from "axios";
import queryString from "query-string";
const axiosClient = axios.create({
baseURL: process.env.REACT_APP_BASE_URL_AQBITS,
headers: {
"content-text": "application/json",
},
paramsSerializer: (params) => queryString.stringify(params),
});
axiosClient.interceptors.request.use(
async (config) => {
const idToken = localStorage.getItem("id_token");
const accessToken = localStorage.getItem("access_token");
if (idToken) {
config.headers = {
Authorization: `${idToken}`,
AccessToken: `${accessToken}`
};
}
return config;
},
(error) => {
Promise.reject(error);
}
);
export default axiosClient;
src/services/NotFound.js 0 → 100644
View file @ b38ec7d8
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import {
Col,
Row,
Card,
Image,
Button,
Container,
} from "@themesberg/react-bootstrap";
import { Link } from "react-router-dom";
import { Routes } from "../routes";
import NotFoundImage from "../assets/img/illustrations/404.svg";
export default () => {
return (
<main>
<section className="vh-100 d-flex align-items-center justify-content-center">
<Container>
<Row>
<Col
xs={12}
className="text-center d-flex align-items-center justify-content-center"
>
<div>
<Card.Link as={Link} to={Routes.Home.path}>
<Image src={NotFoundImage} className="img-fluid w-75" />
</Card.Link>
<h1 className="text-primary mt-5">
Page not <span className="fw-bolder">found</span>
</h1>
<p className="lead my-4">
Oops! Looks like you followed a bad link. If you think this is
a problem with us, please tell us.
</p>
<Button
as={Link}
variant="primary"
className="animate-hover"
to={Routes.Home.path}
>
<FontAwesomeIcon
icon={faChevronLeft}
className="animate-left-3 me-3 ms-2"
/>
Go back home
</Button>
</div>
</Col>
</Row>
</Container>
</section>
</main>
);
};
src/services/ResetPassword.js 0 → 100644
View file @ b38ec7d8
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUnlockAlt, faFilter } from "@fortawesome/free-solid-svg-icons";
import { Col, Row, Form, Card, Button, Container, InputGroup, Alert, Spinner } from '@themesberg/react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import { Routes } from "../routes";
import BgImage from "../assets/img/illustrations/signin.svg";
import { authServices } from "./AuthServices";
export default () => {
const [loading, setLoading] = useState(false);
const [code, setCode] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [checkPassword, setCheckPassword] = useState(false);
const [showMessage, setShowMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const history = useHistory();
const onHandleResetPassword = (event) => {
event.preventDefault();
if(newPassword === confirmPassword){
setLoading(true);
setShowMessage(false);
setCheckPassword(false);
authServices
.resetPassword(code, newPassword)
.then((rs) => {
history.push(Routes.Signin.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
}else{
setShowMessage(false);
setCheckPassword(true);
}
};
return (
<main>
<section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
<Container>
{loading ? (
<div className="text-center mb-2">
<Spinner animation="border" variant="secondary" role="status" />
</div>
) : (
false
)}
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
<Col xs={12} className="d-flex align-items-center justify-content-center">
<div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
<div className="text-center text-md-center mb-4 mt-md-0">
<h3 className="mb-4">Reset password</h3>
</div>
<Form onSubmit={onHandleResetPassword}>
<Form.Group id="number" className="mb-4">
<Form.Label>Verify Code</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faFilter} />
</InputGroup.Text>
<Form.Control type="number" placeholder="Verify Code" min={0} value={code} onChange={(e) => setCode(e.target.value)} />
</InputGroup>
</Form.Group>
<Form.Group id="password" className="mb-4">
<Form.Label>Your Password</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faUnlockAlt} />
</InputGroup.Text>
<Form.Control required type="password" placeholder="Password" autoComplete="on" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
</InputGroup>
<Form.Control.Feedback type="invalid" className="invalid-feedback" >{checkPassword ? "Please input match password" : false}</Form.Control.Feedback>
</Form.Group>
<Form.Group id="confirmPassword" className="mb-4">
<Form.Label>Confirm Password</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faUnlockAlt} />
</InputGroup.Text>
<Form.Control required type="password" placeholder="Confirm Password" autoComplete="on" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
</InputGroup>
<Form.Control.Feedback type="invalid" className="invalid-feedback" >{checkPassword ? "Please input match password" : false}</Form.Control.Feedback>
</Form.Group>
<Button variant="primary" type="submit" className="w-100">
Reset password
</Button>
</Form>
<div className="d-flex justify-content-center align-items-center mt-4">
<span className="fw-normal">
Not reset?
<Card.Link as={Link} to={Routes.ForgotPassword.path} className="fw-bold">
{` Back to forgot password `}
</Card.Link>
</span>
</div>
</div>
</Col>
</Row>
</Container>
</section>
</main>
);
};
src/services/ServerError.js 0 → 100644
View file @ b38ec7d8
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import {
Col,
Row,
Image,
Button,
Container,
} from "@themesberg/react-bootstrap";
import { Link } from "react-router-dom";
import { Routes } from "../routes";
import ErrorImage from "../assets/img/illustrations/500.svg";
export default () => {
return (
<main>
<section className="vh-100 d-flex align-items-center justify-content-center">
<Container>
<Row className="align-items-center">
<Col
xs={12}
lg={5}
className="order-2 order-lg-1 text-center text-lg-left"
>
<h1 className="text-primary mt-5">
Something has gone <span className="fw-bolder">seriously</span>{" "}
wrong
</h1>
<p className="lead my-4">
It's always time for a coffee break. We should be back by the
time you finish your coffee.
</p>
<Button
as={Link}
variant="primary"
className="animate-hover"
to={Routes.Home.path}
>
<FontAwesomeIcon
icon={faChevronLeft}
className="animate-left-3 me-3 ms-2"
/>
Go back home
</Button>
</Col>
<Col
xs={12}
lg={7}
className="order-1 order-lg-2 text-center d-flex align-items-center justify-content-center"
>
<Image src={ErrorImage} className="img-fluid w-75" />
</Col>
</Row>
</Container>
</section>
</main>
);
};
src/services/Signin.js 0 → 100644
View file @ b38ec7d8
import React, { useState } from "react";
import { Link, useHistory } from 'react-router-dom';
import { Routes } from "../reoutes";
import { authServices } from "./AuthServices";
import { validateEmail } from "../constans/index";
import {
Alert,
Button,
Card,
CardBody,
FormGroup,
Form,
FormFeedback,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Container,
Row,
Col,
Spinner
} from "reactstrap";
// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import MainBanner from "components/Generals/MainBanner";
export default () => {
const [loading, setLoading] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errorMessage, setErrorMessage] = useState("");
const [checkUser, setCheckUser] = useState(false);
const [validEmail, setValidEmail] = useState(false);
const history = useHistory();
const onHandleLogin = (event) => {
event.preventDefault();
let checkEmail = email.includes("@");
if (checkEmail) {
if (validateEmail(email)) {
setLoading(true);
setCheckUser(false);
setValidEmail(false);
authServices
.login(email, password)
.then((rs) => {
history.push("/profile");
setCheckUser(false);
setLoading(false);
})
.catch((err) => {
setCheckUser(true);
setLoading(false);
setErrorMessage(err.message);
});
} else {
setCheckUser(false);
setValidEmail(true);
}
} else {
setLoading(true);
setCheckUser(false);
setValidEmail(false);
authServices
.login(email, password)
.then((rs) => {
history.push("/profile");
setCheckUser(false);
setLoading(false);
})
.catch((err) => {
setCheckUser(true);
setLoading(false);
setErrorMessage(err.message);
});
}
};
return (
<>
{/* <DemoNavbar /> */}
<main>
{/* <MainBanner /> */}
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-7">
{checkUser ? (
<div className="text-center"><Alert color="danger">{errorMessage}</Alert></div>
) : (
false
)}
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardBody className="px-lg-5 py-lg-5">
<Form role="form" onSubmit={onHandleLogin}>
<FormGroup id="email" className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Email" type="text"
value={email} onChange={(e) => setEmail(e.target.value)} {...validEmail ? "invalid" : ""} />
<FormFeedback valid>{validEmail}</FormFeedback>
</InputGroup>
{/* <Form.Control.Feedback
type="invalid"
className="invalid-feedback"
>
{validEmail ? "Please input validate email" : false}
</Form.Control.Feedback> */}
</FormGroup>
<FormGroup id="password">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="submit"
>
Sign in
</Button>
</div>
{loading ? (
<div className="text-center">
<Spinner color="primary" />
</div>
) : (
false
)}
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col xs="6">
<Link
to={Routes.Signup.path}
className="text-light">
<small>Forgot password?</small>
</Link>
</Col>
<Col className="text-right" xs="6">
<Link
to={Routes.Signup.path}
className="text-light">
<small>Create new account</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
{/* <SimpleFooter /> */}
</>
);
};
src/services/Signup.js 0 → 100644
View file @ b38ec7d8
import React, { useState } from "react";
import { Link, useHistory } from 'react-router-dom';
import { Routes } from "../reoutes";
import { authServices } from "./AuthServices";
import { validateEmail } from "../constans/index";
import {
Button,
Card,
CardBody,
FormGroup,
Form,
FormFeedback,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Container,
Row,
Col
} from "reactstrap";
// core components
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
export default () => {
const [loading, setLoading] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [validEmail, setValidEmail] = useState(false);
const [checkPassword, setCheckPassword] = useState(false);
const [showMessage, setShowMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const history = useHistory();
const onHandleSignUp = (event) => {
event.preventDefault();
if (validateEmail(email)) {
setValidEmail(false);
} else {
setShowMessage(false);
setValidEmail(true);
}
if (password === confirmPassword) {
setCheckPassword(false);
} else {
setShowMessage(false);
setCheckPassword(true);
}
if (validateEmail(email) && password === confirmPassword) {
setLoading(true);
setShowMessage(false);
authServices
.signUp(email, password)
.then((rs) => {
history.push(Routes.VerifyCode.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
}
};
return (
<>
<DemoNavbar />
<main>
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-7">
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardBody className="px-lg-5 py-lg-5">
<Form role="form" onSubmit={onHandleSignUp}>
<FormGroup id="email">
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Email" type="text" {...validEmail ? "invalid" : ""} />
<FormFeedback>Invalid email</FormFeedback>
</InputGroup>
</FormGroup>
<FormGroup id="password">
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Password" type="password" autoComplete="off" />
</InputGroup>
</FormGroup>
<FormGroup id="confirmPassword">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Confirm Password"
type="password"
autoComplete="off"
/>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="submit"
>
Create account
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col className="d-flex justify-content-start align-items-center">
<small className="text-light mr-2">
Already have an account?
</small>
<Link
to={Routes.Signin.path}>
<small className="text-primary">
Login
</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
};
src/services/VerifyCode.js 0 → 100644
View file @ b38ec7d8
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFilter, faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { Col, Row, Form, Button, Container, InputGroup, Card, Alert, Spinner } from '@themesberg/react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import { Routes } from "../routes";
import BgImage from "../assets/img/illustrations/signin.svg";
import { authServices } from "./AuthServices";
export default () => {
const [loading, setLoading] = useState(false);
const [code, setCode] = useState("");
const [showMessage, setShowMessage] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const history = useHistory();
const onHandleVerifyCode = (event) => {
event.preventDefault();
setLoading(true);
setShowMessage(false);
authServices
.verifyCode(code)
.then((rs) => {
history.push(Routes.Signin.path);
setShowMessage(false);
setLoading(false);
})
.catch((err) => {
setShowMessage(true);
setLoading(false);
setErrorMessage(err.message);
});
};
return (
<main>
<section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
<Container>
{loading ? (
<div className="text-center mb-2">
<Spinner animation="border" variant="secondary" role="status" />
</div>
) : (
false
)}
<div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
<Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
<p className="text-center">
<Card.Link as={Link} to={Routes.Signup.path} className="text-gray-700">
<FontAwesomeIcon icon={faAngleLeft} className="me-2" /> Back to sign up
</Card.Link>
</p>
<Col xs={12} className="d-flex align-items-center justify-content-center">
<div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
<div className="text-center text-md-center mb-4 mt-md-0">
<h3 className="mb-0">Verify Code</h3>
</div>
<Form className="mt-4" onSubmit={onHandleVerifyCode}>
<Form.Group id="code" className="mb-4">
<Form.Label>Verify Code</Form.Label>
<InputGroup>
<InputGroup.Text>
<FontAwesomeIcon icon={faFilter} />
</InputGroup.Text>
<Form.Control autoFocus required type="number" placeholder="Verify Code" min={0} value={code} onChange={(e) => setCode(e.target.value)} />
</InputGroup>
</Form.Group>
<Button variant="primary" type="submit" className="w-100">
Verify
</Button>
</Form>
</div>
</Col>
</Row>
</Container>
</section>
</main>
);
};
src/views/examples/Login.js
View file @ b38ec7d8
......@@ -64,45 +64,7 @@ class Login extends React.Component {
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<Form role="form">
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
......@@ -128,19 +90,6 @@ class Login extends React.Component {
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment