Merge pull request #29 from syeikhanritzmy/develop

Develop
syeikhanritzmy · Sep 30, 2022 · 283443f · 283443f
2 parents bbeafb8 + e3b0455
commit 283443f
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 74 deletions.
diff --git a/components/carousel.jsx b/components/carousel.jsx
@@ -8,7 +8,7 @@ export default function Carousels() {
  setIndex(selectedIndex);
  };
  return (
- <Carousel activeIndex={index} onSelect={handleSelect}>
+ <Carousel fade activeIndex={index} onSelect={handleSelect}>
  <Carousel.Item>
  <img
  className="d-block w-100"

diff --git a/components/navibar.jsx b/components/navibar.jsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import { getAuth, signOut } from '../firebase/clientApp';
-import { Nav, Navbar, Container } from 'react-bootstrap';
-import Link from 'next/link';
-import Image from 'next/image';
-import { useSelector, useDispatch } from 'react-redux'
-import { login as _login, logout } from '../store/loginSlice';
-import { logout as stateLogout } from '../store/authSlice';
+import React from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { getAuth, signOut } from "../firebase/clientApp";
+import { Nav, Navbar, Container } from "react-bootstrap";
+import Link from "next/link";
+import Image from "next/image";
+import { useSelector, useDispatch } from "react-redux";
+import { login as _login, logout } from "../store/loginSlice";
+import { logout as stateLogout } from "../store/authSlice";
+
 
 export default function Navibar() {
  const [user, setUser] = useState(null);
@@ -17,7 +18,7 @@ export default function Navibar() {
  const dispatch = useDispatch();
 
  useEffect(() => {
- setIslogin(localStorage.getItem('isAuthenticated'));
+ setIslogin(localStorage.getItem("isAuthenticated"));
  auth.onAuthStateChanged((user) => {
  if (user) {
  setUser(user);
@@ -28,12 +29,12 @@ export default function Navibar() {
 
  const handleSignOut = async () => {
  try {
- console.log('signing out');
+ console.log("signing out");
  await signOut(auth);
  setUser(null);
  dispatch(logout());
  dispatch(stateLogout());
- router.push('/login');
+ router.push("/login");
  } catch (error) {
  alert(error.message);
  }
@@ -50,7 +51,7 @@ export default function Navibar() {
  width="30"
  height="30"
  className="d-inline-block align-top Image-rounded "
- />{' '}
+ />{" "}
  </Navbar.Brand>
  </Link>
  <Nav className="me-auto ">
@@ -69,7 +70,7 @@ export default function Navibar() {
  </Nav>
  {user && isLogin == "true" ? (
  <Nav className="justify-content-end">
- <Link href={"/players/" + user.uid } passHref>
+ <Link href={"/players/" + user.uid} passHref>
  <Nav.Link>Profile</Nav.Link>
  </Link>
  <Nav.Link onClick={handleSignOut}>Sign Out</Nav.Link>

diff --git a/pages/login.jsx b/pages/login.jsx
@@ -1,24 +1,28 @@
-import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { Form } from "react-bootstrap";
 import { signInWithEmailAndPassword, getAuth, ref, getDatabase, onValue } from '../firebase/clientApp';
 import { login as stateLogin } from '../store/authSlice';
 import { useDispatch } from 'react-redux';
-import Swal from 'sweetalert2';
+import Swal from "sweetalert2";
+import styles from "../styles/Login.module.css";
+
 const Toast = Swal.mixin({
  toast: true,
- position: 'top-end',
+ position: "top-end",
  showConfirmButton: false,
  timer: 2500,
  timerProgressBar: true,
  didOpen: (toast) => {
- toast.addEventListener('mouseenter', Swal.stopTimer);
- toast.addEventListener('mouseleave', Swal.resumeTimer);
+ toast.addEventListener("mouseenter", Swal.stopTimer);
+ toast.addEventListener("mouseleave", Swal.resumeTimer);
  },
 });
 
 const loginState = {
- email: '',
- password: '',
+ email: "",
+ password: "",
 };
 export default function SignIn() {
  const router = useRouter();
@@ -52,69 +56,92 @@ export default function SignIn() {
 
  const authLogin = async () => {
  try {
- if ((email, password === '')) {
+ if ((email, password === "")) {
  await Toast.fire({
- icon: 'warning',
- title: 'please fill in the column first',
+ icon: "warning",
+ title: "please fill in the column first",
  timer: 1500,
  });
  } else {
  await Toast.fire({
- icon: 'success',
- title: 'signed in successfully',
+ icon: "success",
+ title: "signed in successfully",
  });
  const user = await signInWithEmailAndPassword(auth, email, password);
  console.log(await user.user.getIdToken());
- router.push('games');
+ router.push("games");
  }
  } catch (error) {
  console.log(error);
  }
  };
 
  return (
- <div className="container ">
- <div className="row justify-content-center ">
- <div className="d-flex m-5 justify-content-center ">
- <div className="col-md-6 border border-primary pb-5 d-flex flex-column align-items-center">
- <h3 className="text-center pt-5 pb-4">Sign In</h3>
- <input
- className="col-md-6 mb-2"
+ <div className={styles.myBG + " container"}>
+ <div className="row justify-content-center align-items-end py-5 ">
+ <div className="d-flex m-5 col-md-10 justify-content-start py-5 my-9">
+ <div className="col-md-5 bg-white shadow rounded-start p-3 d-flex flex-column align-items-center">
+ <h2 className="text-center text-primary pt-5 pb-4">
+ <span className="text-dark">Sign in</span> to Account
+ </h2>
+
+ <Form.Control
+ className="col-md-auto d-flex flex-column mb-3 rounded"
  label="Email"
  type="email"
  name="email"
  placeholder="Your Email ... "
  onChange={handleOnChangeInput}
  />
- <input
- className="col-md-6"
+
+ <Form.Control
+ className="col-md-6 rounded"
  label="Password"
  type="password"
  name="password"
  placeholder="Password Here .."
  onChange={handleOnChangeInput}
  />
- <div className="col-md-6 d-flex justify-content-start pb-4">
+ <div className="col-md-12 d-flex justify-content-end pb-3">
  <button
  type="button"
- className="btn btn-link "
+ className="btn btn-link text-muted "
  onClick={() => {
- router.push('/forget');
+ router.push("/forget");
  }}
  >
- Forget Password
+ Forgot Password?
  </button>
  </div>
- <div className="col-md-7 offset-md-4 ">
+ <div className="col-md-7 offset-md-2 pb-5 ">
  <button
  type="button"
- className="btn btn-primary col-md-6 "
+ className="btn btn-outline-primary col-md-8 rounded-pill "
  onClick={authLogin}
  >
  Log In
  </button>
  </div>
  </div>
+ <div className="col-md-3 shadow bg-primary rounded-end p-3 d-flex flex-column text-light align-items-center justify-content-center">
+ <h2 className="pb-3">Join the Game</h2>
+ <div className=" border-bottom w-25 border-4 pt-4 border-light"></div>
+ <p className="text-center py-auto mt-3">
+ Fill up personal information and explore the games with us.
+ </p>
+
+ <div className="col-md-7 offset-md-2 pb-5 ">
+ <button
+ type="button"
+ className="btn btn-outline-light col-md-8 rounded-pill "
+ onClick={() => {
+ router.push("/register");
+ }}
+ >
+ Sign Up
+ </button>
+ </div>
+ </div>
  </div>
  </div>
  </div>

diff --git a/pages/register.jsx b/pages/register.jsx
@@ -5,6 +5,7 @@ import { useRouter as _useRouter } from 'next/router';
 import { login as stateLogin } from '../store/authSlice';
 import { useDispatch } from 'react-redux';
 import Swal from 'sweetalert2';
+
 import {
  createUserWithEmailAndPassword,
  getAuth,
@@ -14,21 +15,21 @@ import {
  onValue,
 } from '../firebase/clientApp';
 const registerState = {
- username: '',
- password: '',
- email: '',
+ username: "",
+ password: "",
+ email: "",
  bio: 0,
  score: 0,
 };
 const Toast = Swal.mixin({
  toast: true,
- position: 'top-end',
+ position: "top-end",
  showConfirmButton: false,
  timer: 2500,
  timerProgressBar: true,
  didOpen: (toast) => {
- toast.addEventListener('mouseenter', Swal.stopTimer);
- toast.addEventListener('mouseleave', Swal.resumeTimer);
+ toast.addEventListener("mouseenter", Swal.stopTimer);
+ toast.addEventListener("mouseleave", Swal.resumeTimer);
  },
 });
 export default function signup() {
@@ -43,15 +44,15 @@ export default function signup() {
  };
  const dispatch = useDispatch();
  const handleRegister = async () => {
- if ((username, password, email === '')) {
+ if ((username, password, email === "")) {
  await Toast.fire({
- icon: 'warning',
- title: 'please fill in the column first',
+ icon: "warning",
+ title: "please fill in the column first",
  timer: 1500,
  });
  } else {
  if (password.length < 6) {
- alert('please input password 6 character');
+ alert("please input password 6 character");
  } else {
  const uuid = uid();
  await createUserWithEmailAndPassword(auth, email, password);
@@ -73,35 +74,54 @@ export default function signup() {
  dispatch(stateLogin(data))
  });
  await Toast.fire({
- icon: 'success',
+ icon: "success",
  title:
- 'register is successful and will be redirected to the homepage',
+ "register is successful and will be redirected to the homepage",
  timer: 2400,
  });
- await router.push('/games');
+ await router.push("/games");
  }
  }
  };
  return (
  <div>
- <section className="vh-100" style={{ backgroundColor: '#eee' }}>
- <div className="container h-100">
- <div className="row d-flex justify-content-center align-items-center h-100">
- <div className="col-lg-12 col-xl-11">
- <div className="card text-black" style={{ borderRadius: '25px' }}>
- <div className="card-body p-md-5">
- <div className="row justify-content-center">
+ <section className="vh-100" style={{ backgroundColor: "#eee" }}>
+ <div className="container h-100 ">
+ <div className="row d-flex justify-content-center align-items-center h-100 ">
+ <div className="col-lg-12 col-xl-11 ">
+ <div className="card rounded-end">
+ <div className=" ">
+ <div className="row justify-content-end">
+ <div className="col-md-7 bg-primary d-flex flex-column justify-content-center align-items-center text-light rounded-start">
+ <h2 className="">Already have account ?</h2>
+ <div className=" border-bottom w-25 border-4 pt-4 border-light"></div>
+ <p className="text-center py-auto mt-3">
+ Please sign in if you already have an account
+ </p>
+ <div className="col-md-7 offset-md-2 pb-5 ">
+ <button
+ type="button"
+ className="btn btn-outline-light col-md-8 rounded-pill "
+ onClick={() => {
+ router.push("/register");
+ }}
+ >
+ Sign Up
+ </button>
+ </div>
+ </div>
  <div className="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
- <p className="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">
- Sign up
+ <p className="text-center h2 fw-bold mb-5 mx-1 mx-md-4 mt-4">
+ Sign up{" "}
+ <span className="text-primary">your Account</span>
  </p>
 
  <Form className="mx-1 mx-md-4">
  <div className="d-flex flex-row align-items-center mb-4">
  <i className="fas fa-user fa-lg me-3 fa-fw" />
  <div className="form-outline flex-fill mb-0">
- <input
- label={'Username'}
+ <Form.Control
+ label={"Username"}
  placeholder="input username ..."
  type="string"
  name="username"
@@ -112,8 +132,8 @@ export default function signup() {
  <div className="d-flex flex-row align-items-center mb-4">
  <i className="fas fa-envelope fa-lg me-3 fa-fw" />
  <div className="form-outline flex-fill mb-0">
- <input
- label={'email'}
+ <Form.Control
+ label={"email"}
  placeholder="input email ..."
  type="email"
  name="email"
@@ -124,8 +144,8 @@ export default function signup() {
  <div className="d-flex flex-row align-items-center mb-4">
  <i className="fas fa-lock fa-lg me-3 fa-fw" />
  <div className="form-outline flex-fill mb-0">
- <input
- label={'Password'}
+ <Form.Control
+ label={"Password"}
  placeholder="input password ..."
  type="password"
  name="password"
@@ -137,7 +157,7 @@ export default function signup() {
  <div className="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
  <button
  type="button"
- className="btn btn-primary btn-lg"
+ className="btn btn-outline-primary  rounded-pill w-50"
  onClick={handleRegister}
  >
  Register

diff --git a/public/assets/images/web-login.jpg b/public/assets/images/web-login.jpg
diff --git a/styles/Login.module.css b/styles/Login.module.css
@@ -0,0 +1,7 @@
+.myBG {
+ height: 100vh;
+ max-width: 100%;
+ background: url("../public/assets/images/web-login.jpg");
+ background-size: cover;
+ margin-top: -5em;
+}