first

src/utils/axios.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const axiosServices = axios.create({ baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3010/' });
+
+// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //
+
+axiosServices.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response.status === 401 && !window.location.href.includes('/login')) {
+      window.location = '/login';
+    }
+    return Promise.reject((error.response && error.response.data) || 'Wrong Services');
+  }
+);
+
+export default axiosServices;

src/utils/getColors.js

@@ -0,0 +1,20 @@
+// ==============================|| CUSTOM FUNCTION - COLORS ||============================== //
+
+const getColors = (theme, color) => {
+  switch (color) {
+    case 'secondary':
+      return theme.palette.secondary;
+    case 'error':
+      return theme.palette.error;
+    case 'warning':
+      return theme.palette.warning;
+    case 'info':
+      return theme.palette.info;
+    case 'success':
+      return theme.palette.success;
+    default:
+      return theme.palette.primary;
+  }
+};
+
+export default getColors;

src/utils/getShadow.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+
+// ==============================|| CUSTOM FUNCTION - COLOR SHADOWS ||============================== //
+
+const getShadow = (theme, shadow) => {
+  switch (shadow) {
+    case 'secondary':
+      return theme.customShadows.secondary;
+    case 'error':
+      return theme.customShadows.error;
+    case 'warning':
+      return theme.customShadows.warning;
+    case 'info':
+      return theme.customShadows.info;
+    case 'success':
+      return theme.customShadows.success;
+    case 'primaryButton':
+      return theme.customShadows.primaryButton;
+    case 'secondaryButton':
+      return theme.customShadows.secondaryButton;
+    case 'errorButton':
+      return theme.customShadows.errorButton;
+    case 'warningButton':
+      return theme.customShadows.warningButton;
+    case 'infoButton':
+      return theme.customShadows.infoButton;
+    case 'successButton':
+      return theme.customShadows.successButton;
+    default:
+      return theme.customShadows.primary;
+  }
+};
+
+getShadow.propTypes = {
+  theme: PropTypes.object,
+  shadow: PropTypes.string
+};
+
+export default getShadow;

src/utils/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "sample-page": "Sample Page",
+  "documentation": "Documentation",
+  "others": "Others",
+  "roadmap": "Roadmap"
+}

src/utils/password-strength.js

@@ -0,0 +1,33 @@
+/**
+ * Password validator for login pages
+ */
+
+// has number
+const hasNumber = (number) => new RegExp(/[0-9]/).test(number);
+
+// has mix of small and capitals
+const hasMixed = (number) => new RegExp(/[a-z]/).test(number) && new RegExp(/[A-Z]/).test(number);
+
+// has special chars
+const hasSpecial = (number) => new RegExp(/[!#@$%^&*)(+=._-]/).test(number);
+
+// set color based on password strength
+export const strengthColor = (count) => {
+  if (count < 2) return { label: 'Poor', color: 'error.main' };
+  if (count < 3) return { label: 'Weak', color: 'warning.main' };
+  if (count < 4) return { label: 'Normal', color: 'warning.dark' };
+  if (count < 5) return { label: 'Good', color: 'success.main' };
+  if (count < 6) return { label: 'Strong', color: 'success.dark' };
+  return { label: 'Poor', color: 'error.main' };
+};
+
+// password strength indicator
+export const strengthIndicator = (number) => {
+  let strengths = 0;
+  if (number.length > 5) strengths += 1;
+  if (number.length > 7) strengths += 1;
+  if (hasNumber(number)) strengths += 1;
+  if (hasSpecial(number)) strengths += 1;
+  if (hasMixed(number)) strengths += 1;
+  return strengths;
+};

src/utils/password-validation.js

@@ -0,0 +1,21 @@
+function isNumber(value) {
+  return new RegExp('^(?=.*[0-9]).+$').test(value);
+}
+
+function isLowercaseChar(value) {
+  return new RegExp('^(?=.*[a-z]).+$').test(value);
+}
+
+function isUppercaseChar(value) {
+  return new RegExp('^(?=.*[A-Z]).+$').test(value);
+}
+
+function isSpecialChar(value) {
+  return new RegExp('^(?=.*[-+_!@#$%^&*.,?]).+$').test(value);
+}
+
+function minLength(value) {
+  return value.length > 7;
+}
+
+export { isNumber, isLowercaseChar, isUppercaseChar, isSpecialChar, minLength };

src/utils/route-guard/AuthGuard.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+// project import
+import useAuth from 'hooks/useAuth';
+
+// ==============================|| AUTH GUARD ||============================== //
+
+const AuthGuard = ({ children }) => {
+  const { isLoggedIn } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      navigate('login', {
+        state: {
+          from: location.pathname
+        },
+        replace: true
+      });
+      navigate('login', { replace: true });
+    }
+  }, [isLoggedIn, navigate, location]);
+
+  return children;
+};
+
+AuthGuard.propTypes = {
+  children: PropTypes.node
+};
+
+export default AuthGuard;

src/utils/route-guard/GuestGuard.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+// project import
+import { APP_DEFAULT_PATH } from 'config';
+import useAuth from 'hooks/useAuth';
+
+// ==============================|| GUEST GUARD ||============================== //
+
+const GuestGuard = ({ children }) => {
+  const { isLoggedIn } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      navigate(location?.state?.from ? location?.state?.from : APP_DEFAULT_PATH, {
+        state: {
+          from: ''
+        },
+        replace: true
+      });
+    }
+  }, [isLoggedIn, navigate, location]);
+
+  return children;
+};
+
+GuestGuard.propTypes = {
+  children: PropTypes.node
+};
+
+export default GuestGuard;