isometrik-chat 0.1.0

package/src/components/Registration/Login.js

@@ -0,0 +1,265 @@
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+import PageWrapper from "../common/styled/PageWrapper";
+import InputText from "../formcontrol/InputText";
+import CustomButton from "../formcontrol/CustomButton";
+import { ARROW_LOGO, HIDE_EYE_ICON, LOGIN_BACKGROUND, SHOW_EYE_ICON } from "../../utils/global";
+import ImageComponent from "../ImageComponent";
+import client from "../../utils/chatSdk";
+import { setCookie } from "../../lib/session";
+import { mobile } from "../../utils/media";
+import {
+  digitsRegExp,
+  minLengthRegExp,
+  specialCharRegExp,
+  uppercaseRegExp,
+} from "../../lib/validation";
+import SnackBar from "../SnackBar";
+import Toaster from "../../view/component/Toaster/Toaster";
+
+const SectionTag = styled.section`
+  height: 100vh;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background:url(${LOGIN_BACKGROUND});
+  object-fit: contain;
+  background-size: cover !important;
+  ${mobile(css`
+  padding: 1rem;
+`)}
+`;
+
+const CardShadowLG = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  box-shadow: 0px 3px 6px #161148;
+  background:#fff;
+  border-radius: 20px;
+  max-width: 28rem;
+  margin: auto;
+
+  ${mobile(css`
+    border-radius: 10px;
+  `)}
+`;
+
+const CardBody = styled.div`
+  padding: 2rem;
+  flex: 1 1 auto;
+
+  ${mobile(css`
+    padding: 1rem;
+  `)}
+`;
+
+const LogoText = styled.div`
+  text-align: center;
+  font-size: 24px;
+  letter-spacing: 0px;
+  color: var(--black);
+  text-transform: capitalize;
+  opacity: 1;
+`;
+const ErrorText = styled.div`
+  text-align: center;
+  font-size: 26px;
+  letter-spacing: 0px;
+  color: red;
+  text-transform: capitalize;
+  opacity: 1;
+`;
+
+
+const Visibility = styled.div`
+  position: relative;
+`;
+
+const ShowHide = styled.span`
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  color: #8b8b8b;
+  cursor: pointer;
+`;
+
+const SignUpRout = styled.div`
+  text-align: center;
+  letter-spacing: -0.22px;
+  color: #F53872;
+  padding: 10px 0 0 0;
+  cursor: pointer;
+`;
+const ShowErrorText = styled.p`
+    text-align: center;
+    color: var(--danger);
+    `;
+
+const ArrowLOGO = styled.div`
+text-align: center;
+`;
+
+const Login = (props) => {
+  const { setLoginPage, theme } = props;
+  const [passVisible, setPassVisible] = useState(false);
+  const [error, setError] = useState();
+  const [input, setInput] = useState({
+    email: "",
+    password: "",
+  });
+  const [toastStatus, setToastStatus] = useState({open: false, message: '', variant: ''});
+
+  // Error handlers for signup form
+  const [errors, setErrors] = useState({
+    email: "",
+    password: "",
+  });
+
+  const validate = (name, value) => {
+    switch (name) {
+      case "email":
+        if (!value) {
+          return "email is required";
+        } else if (
+          !value.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/)
+        ) {
+          return "Enter a valid email address";
+        } else {
+          return "";
+        }
+      case "password":
+        if (!value) {
+          return "Please enter your password";
+        } else if (!uppercaseRegExp.test(value)) {
+          return "Password should contain atleast one uppercase";
+        } else if (!digitsRegExp.test(value)) {
+          return "Password should contain atleast one digit";
+        } else if (!specialCharRegExp.test(value)) {
+          return "Password should contain one special character";
+        } else if (!minLengthRegExp.test(value)) {
+          return "Password length should be more than 8 characters";
+        } else {
+          return "";
+        }
+
+      default:
+        return "";
+    }
+  };
+
+  const handelLogin = (e) => {
+    e.preventDefault();
+
+    const validationErrors = {};
+
+    Object.keys(input).forEach((name) => {
+      const error = validate(name, input[name]);
+      if (error && error.length > 0) {
+        validationErrors[name] = error;
+      }
+    });
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    const body = {
+      userIdentifier: input?.email,
+      password: input?.password,
+    };
+
+    client.user
+      .postUserAuthenticate(body)
+      .then((res) => {
+        setToastStatus({open: true, variant:"success", message: res.msg });
+        setCookie("userToken", res?.userToken);
+        setCookie("userId", res?.userId);
+        window.location.href = "/";
+      })
+      // .catch(console.log("err"));
+      .catch((error) => {
+        console.log({ error });
+        setToastStatus({open: true, variant:"error", message: error?.message });
+        setError({ error }?.error?.errorMsg || { error }?.error?.message);
+      });
+  };
+
+  const handleChange = (e) => {
+    setInput({ ...input, [e.target.name]: e.target.value });
+    setErrors({
+      ...errors,
+      [e.target.name]: validate(e.target.name, e.target.value),
+    });
+    setError();
+  };
+
+  const snackbarClose = () => {
+    setError();
+  };
+
+  return (
+    <>
+      {/* {error && <SnackBar errorMessage={error} snackbarClose={snackbarClose} />} */}
+      <SectionTag>
+        <PageWrapper>
+          <CardShadowLG>
+            <CardBody>
+            <ArrowLOGO>
+              <ImageComponent
+               src={ARROW_LOGO}
+                    />
+              </ArrowLOGO>
+              <LogoText>ISOMETRIK CHAT</LogoText>
+              <ShowErrorText>{error}</ShowErrorText>
+              <InputText
+                name="email"
+                type="email"
+                placeholder="Enter your email"
+                value={input.email}
+                error={errors?.email}
+                onChange={handleChange}
+              />
+
+              <Visibility>
+                <InputText
+                  name="password"
+                  type={!passVisible ? "password" : "text"}
+                  placeholder="Enter your password"
+                  value={input?.password}
+                  error={errors?.password}
+                  onChange={handleChange}
+                />
+                <div onClick={() => setPassVisible(!passVisible)}>
+                  <ShowHide>
+                    <ImageComponent
+                      src={!passVisible ? HIDE_EYE_ICON : SHOW_EYE_ICON}
+                      height="22px"
+                      width="22px"
+                    />
+                  </ShowHide>
+                </div>
+              </Visibility>
+
+              <div onClick={handelLogin}>
+                <CustomButton title={"Log In"} />
+              </div>
+
+              <SignUpRout onClick={() => setLoginPage(false)}>
+                Sign Up
+              </SignUpRout>
+            </CardBody>
+          </CardShadowLG>
+        </PageWrapper>
+      </SectionTag>
+      {
+          <Toaster message={toastStatus.message} variant={toastStatus.variant} open={toastStatus.open} onClose={() => setToastStatus({open: false})} theme={theme} />
+      }
+    </>
+  );
+};
+
+export default Login;

package/src/components/Registration/SignUp.js

@@ -0,0 +1,322 @@
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+import PageWrapper from "../common/styled/PageWrapper";
+import InputText from "../formcontrol/InputText";
+import CustomButton from "../formcontrol/CustomButton";
+import ImageComponent from "../ImageComponent";
+import { ARROW_LOGO, HIDE_EYE_ICON, LOGIN_BACKGROUND, SHOW_EYE_ICON } from "../../utils/global";
+import client from "../../utils/chatSdk";
+import { setCookie } from "../../lib/session";
+import {
+  digitsRegExp,
+  minLengthRegExp,
+  specialCharRegExp,
+  uppercaseRegExp,
+} from "../../lib/validation";
+import { mobile } from "../../utils/media";
+import SnackBar from "../SnackBar";
+import { checkLetterUppercase, userProfilePicturePlaceholder } from "../../lib/helpers";
+import Toaster from "../../view/component/Toaster/Toaster";
+
+const SectionTag = styled.form`
+  height: 100vh;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background:url(${LOGIN_BACKGROUND});
+  object-fit: contain;
+  background-size: cover !important;
+  ${mobile(css`
+  padding:1rem;
+`)}
+`;
+
+const CardShadowLG = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background:#fff;
+  word-wrap: break-word;
+  box-shadow: 0px 3px 6px #161148;
+  border-radius: 20px;
+  max-width: 28rem;
+  margin: auto;
+
+  ${mobile(css`
+    border-radius: 20px;
+  `)}
+`;
+
+const CardBody = styled.div`
+  padding: 2rem;
+  flex: 1 1 auto;
+
+  ${mobile(css`
+    padding: 1rem;
+  `)}
+`;
+
+const LogoText = styled.div`
+  text-align: center;
+  font-size: 24px;
+  letter-spacing: 0px;
+  color:var(--black);
+  font-family: LogoText;
+  text-transform: capitalize;
+  opacity: 1;
+`;
+
+const Visibility = styled.div`
+  position: relative;
+`;
+
+const ShowHide = styled.span`
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  color: #8b8b8b;
+  cursor: pointer;
+`;
+
+const SignUpRout = styled.div`
+  text-align: center;
+  letter-spacing: -0.22px;
+  color: #F53872;
+  padding: 10px 0 0 0;
+  cursor: pointer;
+`;
+
+const ErrorText = styled.div`
+  text-align: center;
+  letter-spacing: -0.22px;
+  color:red;
+  padding: 10px 0 0 0;
+`;
+const ShowErrorText = styled.p`
+    text-align: center;
+    color: var(--danger);
+`;
+const ArrowLOGO = styled.div`
+text-align: center;
+`;
+
+const SignUp = (props) => {
+  const { setLoginPage, theme } = props;
+  const [passVisible, setPassVisible] = useState(false);
+  const [secondPassVisible, setSecondPassVisible] = useState(false);
+  const [error, setError] = useState();
+  const [input, setInput] = useState({
+    fname: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+  const [toastStatus, setToastStatus] = useState({open: false, message: '', variant: ''});
+
+  // Error handlers for signup form
+  const [errors, setErrors] = useState({
+    fname: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+
+  const validate = (name, value) => {
+    switch (name) {
+      case "fname":
+        if (!value || value.trim() === "") {
+          return "User name is required";
+        } else if (!value.match(/^[A-Z ]{3,50}$/i)) {
+          return "User name should not contain any special characters";
+        } else if (!checkLetterUppercase(value) ) {
+          return "First letter should be capital in name";
+        }
+        else {
+            return "";
+        }
+      case "email":
+        if (!value) {
+          return "Email is required";
+        } else if (
+          !value.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/)
+        ) {
+          return "Enter a valid email address";
+        } else {
+          return "";
+        }
+      case "Password":
+        if (!value) {
+          return "Please enter your password";
+        } else if (!uppercaseRegExp.test(value)) {
+          return "Password should contain atleast one uppercase";
+        } else if (!digitsRegExp.test(value)) {
+          return "Password should contain atleast one digit";
+        } else if (!specialCharRegExp.test(value)) {
+          return "Password should contain one special character";
+        } else if (!minLengthRegExp.test(value)) {
+          return "Password length should be more than 8 characters";
+        } else {
+          return "";
+        }
+      case "confirmPassword":
+        if (!value) {
+          return "Confirm password is required";
+        } else if (value !== input.password) {
+          return "Confirm password did not match";
+        } else {
+          return "";
+        }
+      default:
+        return "";
+    }
+  };
+
+  const registerNewUser = (e) => {
+    e.preventDefault();
+
+    const validationErrors = {};
+
+    Object.keys(input).forEach((name) => {
+      const error = validate(name, input[name]);
+      if (error && error.length > 0) {
+        validationErrors[name] = error;
+      }
+    });
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    const body = {
+      userProfileImageUrl: userProfilePicturePlaceholder,
+      userName: input.fname,
+      userIdentifier: input.email,
+      password: input.password,
+      confirmPassword: input.confirmPassword,
+      metaData: {
+        country: "IN",
+      },
+    };
+    client.user
+      .postUser(body)
+      .then((res) => {
+        setCookie("userToken", res?.userToken);
+        setCookie("userId", res?.userId);
+        if(res){
+          // setLoginPage(true);
+          setToastStatus({open: true, variant:"success", message: res.msg });
+          window.location.href = "/";
+        }
+      })
+      .catch((error) => {
+        console.error( 'error', { error }, error);
+        setToastStatus({open: true, variant:"error", message: error?.message });
+        setError({ error }?.error?.errorMsg || { error }?.error?.message);
+      });
+      console.error({ error }, error);
+  };
+
+  const handleChange = (e) => {
+    setInput({ ...input, [e.target.name]: e.target.value });
+    setError();
+    setErrors({
+      ...errors,
+      [e.target.name]: validate(e.target.name, e.target.value),
+    });
+  };
+
+  const snackbarClose = () => {
+    setError();
+  };
+
+  return (
+    <React.Fragment>
+      {/* {error && <SnackBar errorMessage={error} snackbarClose={snackbarClose} />} */}
+      <SectionTag>
+        <PageWrapper>
+          <CardShadowLG>
+            <CardBody>
+            <ArrowLOGO>
+              <ImageComponent
+               src={ARROW_LOGO}
+                    />
+              </ArrowLOGO>
+              <LogoText>ISOMETRIK CHAT</LogoText>
+              <ShowErrorText>{error}</ShowErrorText>
+              <InputText
+                name="fname"
+                type="text"
+                placeholder="Enter your name"
+                value={input?.fname}
+                onChange={handleChange}
+                error={errors?.fname}
+              />
+
+              <InputText
+                name="email"
+                type="email"
+                placeholder="Enter your email"
+                value={input?.email}
+                error={errors?.email}
+                onChange={handleChange}
+              />
+
+              <Visibility>
+                <InputText
+                  name="password"
+                  type={!passVisible ? "password" : "text"}
+                  placeholder="Enter your password"
+                  value={input?.password}
+                  error={errors?.password}
+                  onChange={handleChange}
+                />
+                <div onClick={() => setPassVisible(!passVisible)}>
+                  <ShowHide>
+                    <ImageComponent
+                      src={!passVisible ? HIDE_EYE_ICON : SHOW_EYE_ICON}
+                      height="22px"
+                      width="22px"
+                    />
+                  </ShowHide>
+                </div>
+              </Visibility>
+
+              <Visibility>
+                <InputText
+                  name="confirmPassword"
+                  type={!secondPassVisible ? "password" : "text"}
+                  placeholder="Enter your confirm password"
+                  value={input?.confirmPassword}
+                  error={errors?.confirmPassword}
+                  onChange={handleChange}
+                />
+                <div onClick={() => setSecondPassVisible(!secondPassVisible)}>
+                  <ShowHide>
+                    <ImageComponent
+                      src={!secondPassVisible ? HIDE_EYE_ICON : SHOW_EYE_ICON}
+                      height="22px"
+                      width="22px"
+                    />
+                  </ShowHide>
+                </div>
+              </Visibility>
+
+              <div onClick={registerNewUser}>
+                <CustomButton title={"Sign Up"} />
+              </div>
+              <SignUpRout onClick={() => setLoginPage(true)}>Log In</SignUpRout>
+            </CardBody>
+          </CardShadowLG>
+        </PageWrapper>
+      </SectionTag>
+      
+        {
+          <Toaster message={toastStatus.message} variant={toastStatus.variant} open={toastStatus.open} onClose={() => setToastStatus({open: false})} theme={theme} />
+        }
+    </React.Fragment>
+  );
+};
+
+export default SignUp;

package/src/components/SnackBar.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { CANCEl } from '../utils/global'
+import ImageComponent from './ImageComponent'
+import styled, { css } from "styled-components";
+import { mobile } from "../utils/media";
+
+const ModalContainer = styled.div`
+  top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  border: 1px solid lightpink;
+  background: antiquewhite;
+  border-radius: 5px;
+  padding: 0px 20px;
+  display: flex;
+  transition: all 1s ease-in-out !important;
+
+  ${mobile(css`
+    width: 70%;
+    right: 20px;
+  `)}
+`;
+
+const ModalMessage = styled.div`
+  padding: 15px;
+  color: brown;
+`;
+
+export default function SnackBar(props) {
+  const { snackbarClose } = props;
+  return (
+    <ModalContainer>
+      <ModalMessage>{props?.errorMessage}</ModalMessage>
+      <div className="icon pointer">
+        <ImageComponent src={CANCEl} onClick={() => snackbarClose()} />
+      </div>
+    </ModalContainer>
+  );
+}
+

package/src/components/common/Modal/useDetectOutsideClick.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+
+export const useDetectOutsideClick = (el, initialState) => {
+  const [isActive, setIsActive] = useState(initialState);
+
+  useEffect(() => {
+    const onClick = (e) => {
+      if (el.current !== null && !el.current.contains(e.target)) {
+        setIsActive(!isActive);
+      }
+    };
+
+    if (isActive) {
+      window.addEventListener("click", onClick);
+    }
+
+    return () => {
+      window.removeEventListener("click", onClick);
+    };
+  }, [isActive, el]);
+
+  return [isActive, setIsActive];
+};

package/src/components/common/styled/PageWrapper.js

@@ -0,0 +1,25 @@
+import styled, { css } from "styled-components";
+import { mobile, tablet } from "../../../utils/media";
+
+const PageWrapper = styled.div`
+  max-width: 100%;
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+
+  @media only screen and (min-width: 75em) {
+    width: 72rem;
+  }
+
+  ${tablet(css`
+    width: 61rem;
+  `)}
+  ${mobile(css`
+    width: 70rem;
+    padding: 0.6rem;
+  `)}
+`;
+
+export default PageWrapper;

package/src/components/formcontrol/CustomButton.js

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+
+const MYButtons = styled.div`
+  margin: 10px 0;
+`;
+
+const CustomButtonLink = styled.a`
+  background: #F53872;
+  color: #fff;
+  border-radius: 10px;
+  font-size: 16px;
+  line-height: 22.4px;
+  padding: 10px 32px;
+  white-space: nowrap;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-block;
+  border: none;
+  transition: 0.125s;
+  text-align: center;
+  width: 100%;
+  cursor: pointer;
+
+  &:not(.disable):hover {
+    color: #fff;
+  }
+`;
+
+const CustomButton = (props) => {
+  return (
+    <MYButtons>
+      <CustomButtonLink href={props.url}>{props.title}</CustomButtonLink>
+    </MYButtons>
+  );
+};
+
+export default React.forwardRef(CustomButton);