diff --git a/package.json b/package.json index 7a25dc3..19d8900 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "@material-ui/core": "^4.11.2", "@material-ui/icons": "^4.11.2", + "@material-ui/lab": "^4.0.0-alpha.57", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/src/containers/landing/index.jsx b/src/containers/landing/index.jsx index bee25d0..bdba9bd 100644 --- a/src/containers/landing/index.jsx +++ b/src/containers/landing/index.jsx @@ -11,16 +11,28 @@ import Particles from "react-particles-js"; import { TweenMax } from "gsap"; import { LandingLoader, LandingHeader } from "../../components"; import { useHistory } from "react-router-dom"; +import {Snackbar} from '@material-ui/core'; +import MuiAlert from '@material-ui/lab/Alert'; + export default function LandingPage() { const [username, setUsername] = useState(""); + const [inValidUsername, setInValidUsername] = useState(false); const octocatRef = useRef(); const landingRef = useRef(); const loaderRef = useRef(); const history = useHistory(); + const verifyUsername = (test_username) => { + let github_username_regex = new RegExp("^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$"); + return github_username_regex.test(test_username); + } + const handleUsernameSubmit = (e) => { - if (e.key === "Enter" && username !== "") { + if (e.key === "Enter" && username !== "" && verifyUsername(username)) { + + setInValidUsername(false); + // GSAP ANIMATIONS TweenMax.to(octocatRef.current, 0.5, { opacity: 0, @@ -36,6 +48,9 @@ export default function LandingPage() { setTimeout(() => history.push(`/${username}`), 2000); } + else if(e.key === "Enter"){ + setInValidUsername(true); + } }; // Fade-In Transitions @@ -66,6 +81,11 @@ export default function LandingPage() {
+ + + Please enter a valid github Username. + + ); } diff --git a/yarn.lock b/yarn.lock index 68d4ba3..12a6c9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1639,6 +1639,17 @@ dependencies: "@babel/runtime" "^7.4.4" +"@material-ui/lab@^4.0.0-alpha.57": + version "4.0.0-alpha.57" + resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a" + integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.11.2" + clsx "^1.0.4" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + "@material-ui/styles@^4.11.2": version "4.11.2" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"