added login and reg page
This commit is contained in:
parent
03c6cb657f
commit
b542cf1f7c
|
@ -0,0 +1,87 @@
|
|||
import React from "react";
|
||||
import LoginStyle from "./Login.style";
|
||||
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faUser,
|
||||
faEnvelope,
|
||||
faLock,
|
||||
faClose,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { UserContext } from "../../pages/user/usercontext";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useContext } from "react";
|
||||
|
||||
function Login() {
|
||||
const [userData, setUserData] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const handleInput = (event) => {
|
||||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
setUserData({ ...userData, [name]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<LoginStyle>
|
||||
<form className="form-wrapper">
|
||||
<div className="reg-wide-container">
|
||||
<FontAwesomeIcon icon={faClose} />
|
||||
</div>
|
||||
|
||||
<p className="reg-title">Sign in</p>
|
||||
|
||||
<img
|
||||
src="/images/user.png"
|
||||
width={100}
|
||||
height={100}
|
||||
style={{ "margin-bottom": 20 }}
|
||||
></img>
|
||||
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="email"
|
||||
autoComplete="off"
|
||||
onChange={handleInput}
|
||||
type="text"
|
||||
value={userData.email}
|
||||
placeholder="Email Address"
|
||||
/>
|
||||
</div>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faLock} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="password"
|
||||
autoComplete="off"
|
||||
onChange={handleInput}
|
||||
type="password"
|
||||
value={userData.password}
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<Link href="/">
|
||||
<button type="submit" className="submit-button">
|
||||
Submit
|
||||
</button>
|
||||
</Link>
|
||||
<p className="foot-text">
|
||||
New here?
|
||||
<Link href="/signup" exact className="foot-text underline">
|
||||
Create an account
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</LoginStyle>
|
||||
);
|
||||
}
|
||||
export default Login;
|
|
@ -0,0 +1,13 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
export default styled.section`
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
`
|
|
@ -1,136 +1,191 @@
|
|||
import React from 'react';
|
||||
import {Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography,alpha} from "@mui/material";
|
||||
import GitHubIcon from '@mui/icons-material/GitHub';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import React, { useContext } from "react";
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Toolbar,
|
||||
Tooltip,
|
||||
Typography,
|
||||
alpha,
|
||||
} from "@mui/material";
|
||||
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import NavbarStyle from "./Navbar.style";
|
||||
import Logo from './Logo';
|
||||
|
||||
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
||||
import Logo from "./Logo";
|
||||
import UserAuth, { UserContext } from "pages/user/usercontext";
|
||||
import Link from "next/link";
|
||||
const settings = ["Profile", "Account", "Dashboard", "Logout"];
|
||||
|
||||
function Index(props) {
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<NavbarStyle position="relative" sx={{bgcolor:alpha('#000000',0.50),m:'0px'}}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters="false">
|
||||
<Typography variant='h4' sx={{fontWeight:'bold'}}>
|
||||
URL MINIFY
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse', display: { xs: 'flex', md: 'none' } }}>
|
||||
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
|
||||
<Typography textAlign="center" sx={{display:'flex'}} >
|
||||
<GitHubIcon fontSize='small'/>
|
||||
GitHub
|
||||
</Typography>
|
||||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center" sx={{display:'flex'}} >
|
||||
CRIDITS
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse',gap:'10px',px:'20px', display: { xs: 'none', md: 'flex' } }}>
|
||||
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ color: 'white', display: 'flex',gap:'10px',fontSize:'h5.fontSize',fontFamily:'sans-serif',fontStyle:'bold', textTransform: 'capitalize',fontWeight:'bold'}}
|
||||
>
|
||||
<GitHubIcon fontSize='large'/>
|
||||
GitHub
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ color: 'white', display: 'block',fontSize:'h5.fontSize'}}
|
||||
>
|
||||
CREDITS
|
||||
</Button>
|
||||
|
||||
</Box>
|
||||
const { user, login, logout } = useContext(UserAuth);
|
||||
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Open settings">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" sx={{ width: 50, height: 50 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: '45px' }}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
{settings.map((setting) => (
|
||||
<MenuItem key={setting} onClick={handleCloseUserMenu}>
|
||||
<Typography textAlign="center">{setting}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</NavbarStyle>
|
||||
);
|
||||
return (
|
||||
<NavbarStyle
|
||||
position="relative"
|
||||
sx={{ bgcolor: alpha("#000000", 0.5), m: "0px" }}
|
||||
>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters="false">
|
||||
<Typography variant="h4" sx={{ fontWeight: "bold" }}>
|
||||
URL MINIFY
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
flexDirection: "row-reverse",
|
||||
display: { xs: "flex", md: "none" },
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "left",
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: "block", md: "none" },
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<a
|
||||
href="https://github.com/BRAVO68WEB/url-minify"
|
||||
target={"_blank"}
|
||||
>
|
||||
<Typography textAlign="center" sx={{ display: "flex" }}>
|
||||
<GitHubIcon fontSize="small" />
|
||||
GitHub
|
||||
</Typography>
|
||||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center" sx={{ display: "flex" }}>
|
||||
CREDITS
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
flexDirection: "row-reverse",
|
||||
gap: "10px",
|
||||
px: "20px",
|
||||
display: { xs: "none", md: "flex" },
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href="https://github.com/BRAVO68WEB/url-minify"
|
||||
target={"_blank"}
|
||||
>
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
color: "white",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
fontSize: "h5.fontSize",
|
||||
fontFamily: "sans-serif",
|
||||
fontStyle: "bold",
|
||||
textTransform: "capitalize",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<GitHubIcon fontSize="large" />
|
||||
GitHub
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ color: "white", display: "block", fontSize: "h5.fontSize" }}
|
||||
>
|
||||
CREDITS
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{user ? (
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Open settings">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/static/images/avatar/2.jpg"
|
||||
sx={{ width: 50, height: 50 }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: "45px" }}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
{settings.map((setting) => (
|
||||
<MenuItem key={setting} onClick={handleCloseUserMenu}>
|
||||
<Typography textAlign="center">{setting}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography onClick={login}>
|
||||
<Link href="./login">LOGIN</Link>
|
||||
</Typography>
|
||||
)}
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</NavbarStyle>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
export default Index;
|
||||
|
|
|
@ -1,67 +1,105 @@
|
|||
import React from 'react';
|
||||
import React from "react";
|
||||
import RegStyle from "./Reg.style";
|
||||
import Image from 'next/image'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faUser, faEnvelope, faLock, faClose } from '@fortawesome/free-solid-svg-icons'
|
||||
import { useState } from 'react';
|
||||
import { Link } from '@mui/material';
|
||||
import Image from "next/image";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faUser,
|
||||
faEnvelope,
|
||||
faLock,
|
||||
faClose,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { useState } from "react";
|
||||
import { Link } from "@mui/material";
|
||||
|
||||
function Reg(){
|
||||
function Reg() {
|
||||
const [userData, setUserData] = useState({
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
repassword: "",
|
||||
});
|
||||
|
||||
const [userData, setUserData] = useState({
|
||||
username: "",
|
||||
email: "",
|
||||
password:"",
|
||||
repassword:""
|
||||
})
|
||||
const handleInput = (event) => {
|
||||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
setUserData({ ...userData, [name]: value });
|
||||
};
|
||||
|
||||
const handleInput = (event) => {
|
||||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
setUserData({ ...userData, [name]: value})
|
||||
}
|
||||
return (
|
||||
<RegStyle>
|
||||
<form className="form-wrapper">
|
||||
<div className="reg-wide-container">
|
||||
<FontAwesomeIcon icon={faClose} />
|
||||
</div>
|
||||
|
||||
return(
|
||||
<RegStyle>
|
||||
<form className='form-wrapper'>
|
||||
<div className='reg-wide-container'>
|
||||
<FontAwesomeIcon icon={faClose}/>
|
||||
</div>
|
||||
|
||||
<p className='reg-title'>Sign Up</p>
|
||||
<div className='reg-field'>
|
||||
<div className='reg-label'>
|
||||
<FontAwesomeIcon icon={faUser}/>
|
||||
</div>
|
||||
<input className='reg-input' name='username' autoComplete='off' type="text" value={userData.username} onChange={handleInput} placeholder='Full Name' />
|
||||
</div>
|
||||
<div className='reg-field'>
|
||||
<div className='reg-label'>
|
||||
<FontAwesomeIcon icon={faEnvelope}/>
|
||||
</div>
|
||||
<input className='reg-input' name='email' autoComplete='off' onChange={handleInput} type="text" value={userData.email} placeholder='Email Address'/>
|
||||
</div>
|
||||
<div className='reg-field'>
|
||||
<div className='reg-label'>
|
||||
<FontAwesomeIcon icon={faLock}/>
|
||||
</div>
|
||||
<input className='reg-input' name='password' autoComplete='off' onChange={handleInput} type="password" value={userData.password} placeholder='Password'/>
|
||||
</div>
|
||||
<div className='reg-field'>
|
||||
<div className='reg-label'>
|
||||
<FontAwesomeIcon icon={faLock}/>
|
||||
</div>
|
||||
<input className='reg-input' name='repassword' autoComplete='off' onChange={handleInput} type="password" value={userData.repassword} placeholder='Confirm Password' />
|
||||
</div>
|
||||
<button type='submit' className='submit-button'>Submit</button>
|
||||
<p className="foot-text">Already registered? Login
|
||||
<Link href="/" exact className='foot-text underline'>here</Link>
|
||||
</p>
|
||||
|
||||
|
||||
</form>
|
||||
</RegStyle>
|
||||
|
||||
)
|
||||
<p className="reg-title">Sign Up</p>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faUser} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="username"
|
||||
autoComplete="off"
|
||||
type="text"
|
||||
value={userData.username}
|
||||
onChange={handleInput}
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="email"
|
||||
autoComplete="off"
|
||||
onChange={handleInput}
|
||||
type="text"
|
||||
value={userData.email}
|
||||
placeholder="Email Address"
|
||||
/>
|
||||
</div>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faLock} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="password"
|
||||
autoComplete="off"
|
||||
onChange={handleInput}
|
||||
type="password"
|
||||
value={userData.password}
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faLock} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="repassword"
|
||||
autoComplete="off"
|
||||
onChange={handleInput}
|
||||
type="password"
|
||||
value={userData.repassword}
|
||||
placeholder="Confirm Password"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="submit-button">
|
||||
Submit
|
||||
</button>
|
||||
<p className="foot-text">
|
||||
Already registered? Login
|
||||
<Link href="/login" exact className="foot-text underline">
|
||||
here
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</RegStyle>
|
||||
);
|
||||
}
|
||||
export default Reg;
|
||||
export default Reg;
|
||||
|
|
|
@ -1,106 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
|
||||
|
||||
.reg-label{
|
||||
font-size: 24px;
|
||||
width: 30px;
|
||||
color: #9134bd;
|
||||
position: relative;
|
||||
}
|
||||
.reg-title{
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color:#9134bd;
|
||||
}
|
||||
.reg-wide-container{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #9134bd;
|
||||
font-size: 24px;
|
||||
}
|
||||
.reg-input{
|
||||
margin-left: 10px;
|
||||
height: 35px;
|
||||
width: 340px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
justify-content: flex-end;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-input:active, .reg-input:focus{
|
||||
outline: none;
|
||||
}
|
||||
.reg-input::placeholder{
|
||||
color: #6babc7;
|
||||
}
|
||||
.reg-field{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.form-wrapper{
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
padding: 20px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(6px);
|
||||
border-style: solid;
|
||||
border-color: #f1faff;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.submit-button{
|
||||
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
margin-top: 20px ;
|
||||
background-image: linear-gradient(135deg ,#cc5fff, #7E3EE4, #0087ca, #2db9ff);
|
||||
background-size: 200%;
|
||||
background-position: left;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.submit-button:hover{
|
||||
background-position: right;
|
||||
}
|
||||
.submit-button:active{
|
||||
transform: scale(0.95);
|
||||
transition: 0.1s
|
||||
}
|
||||
|
||||
.icon{
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.foot-text{
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.underline{
|
||||
text-decoration: underline;
|
||||
color: #9134bd;
|
||||
}
|
||||
.underline:hover{
|
||||
color: #008ed4;
|
||||
transition: 0.5s;
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
"baseUrl": ".",
|
||||
"paths": { "@pages/*": ["pages/*"] }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -738,6 +738,19 @@
|
|||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
|
||||
},
|
||||
"history": {
|
||||
"version": "4.10.1",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"loose-envify": "^1.2.0",
|
||||
"resolve-pathname": "^3.0.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0",
|
||||
"value-equal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
|
@ -775,6 +788,11 @@
|
|||
"has": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
@ -808,6 +826,15 @@
|
|||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"mini-create-react-context": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
|
||||
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
|
@ -870,6 +897,14 @@
|
|||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
},
|
||||
"path-type": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||
|
@ -942,6 +977,44 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
|
||||
"integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.13",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"mini-create-react-context": "^0.4.0",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
|
||||
"integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.13",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.2.1",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
||||
|
@ -973,6 +1046,11 @@
|
|||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
|
||||
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
|
@ -1042,6 +1120,16 @@
|
|||
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
|
||||
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
|
||||
"integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
|
@ -1055,6 +1143,11 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
|
||||
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
|
||||
},
|
||||
"yaml": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
|
||||
|
|
|
@ -19,8 +19,9 @@
|
|||
"@mui/material": "^5.4.0",
|
||||
"@mui/styled-engine-sc": "^5.3.0",
|
||||
"next": "12.0.9",
|
||||
"react": "17.0.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"styled-components": "^5.3.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
|
|
|
@ -1,9 +1,14 @@
|
|||
import '../styles/globals.css'
|
||||
import '../styles/logostyles.css'
|
||||
import '../components/Reg/styles.css'
|
||||
import "../styles/globals.css";
|
||||
import "../styles/logostyles.css";
|
||||
import "../styles/styles.css";
|
||||
import { UserAuthProvider } from "./user/usercontext";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
return (
|
||||
<UserAuthProvider>
|
||||
<Component {...pageProps} />
|
||||
</UserAuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
export default MyApp;
|
||||
|
|
|
@ -1,25 +1,29 @@
|
|||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import HomeSection from "components/HomeSection/homeSection"
|
||||
import { useState, useMemo } from "react";
|
||||
import Head from "next/head";
|
||||
import HomeSection from "components/HomeSection/homeSection";
|
||||
import NavBar from "components/NavBar";
|
||||
import Features from 'components/Features'
|
||||
|
||||
import Features from "components/Features";
|
||||
import Reg from "components/Reg/Reg";
|
||||
import Login from "components/Login/Login";
|
||||
import { UserAuthProvider, UserContext } from "./user/usercontext";
|
||||
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
||||
|
||||
export default function Home() {
|
||||
const [shortUrl, setShortUrl] = useState(null)
|
||||
const [longURL, setLongURL] = useState('')
|
||||
return (
|
||||
<div className={""}>
|
||||
<Head>
|
||||
<title>URL MiniFy</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
const [shortUrl, setShortUrl] = useState(null);
|
||||
const [longURL, setLongURL] = useState("");
|
||||
|
||||
<main className={"main-bg"}>
|
||||
<NavBar />
|
||||
<HomeSection />
|
||||
<Features/>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>URL MiniFy</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main className={"main-bg"}>
|
||||
<NavBar />
|
||||
<HomeSection />
|
||||
<Features />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
import { useState } from "react";
|
||||
import Head from "next/head";
|
||||
import NavBar from "components/NavBar";
|
||||
import Features from "components/Features";
|
||||
import Login from "components/Login/Login";
|
||||
|
||||
export default function signup() {
|
||||
return (
|
||||
<div className="flex-column">
|
||||
<NavBar />
|
||||
<Login />
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
import { createContext } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
const UserAuth = createContext({
|
||||
user: null,
|
||||
login: () => {},
|
||||
logout: () => {},
|
||||
});
|
||||
|
||||
export const UserAuthProvider = ({ children }) => {
|
||||
const [user, setUser] = useState(null);
|
||||
const login = () => {
|
||||
setUser("default");
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
setUser(null);
|
||||
};
|
||||
const context = { user, login, logout };
|
||||
|
||||
return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>;
|
||||
};
|
||||
|
||||
export default UserAuth;
|
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
|
@ -0,0 +1,107 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap");
|
||||
|
||||
.reg-label {
|
||||
font-size: 24px;
|
||||
width: 30px;
|
||||
color: #9134bd;
|
||||
position: relative;
|
||||
}
|
||||
.reg-title {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-wide-container {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #9134bd;
|
||||
font-size: 24px;
|
||||
}
|
||||
.reg-input {
|
||||
margin-left: 10px;
|
||||
height: 35px;
|
||||
width: 340px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
justify-content: flex-end;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-input:active,
|
||||
.reg-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.reg-input::placeholder {
|
||||
color: #6babc7;
|
||||
}
|
||||
.reg-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.form-wrapper {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 20px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(6px);
|
||||
border-style: solid;
|
||||
border-color: #f1faff;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.submit-button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
background-image: linear-gradient(135deg, #cc5fff, #7e3ee4, #0087ca, #2db9ff);
|
||||
background-size: 200%;
|
||||
background-position: left;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-position: right;
|
||||
}
|
||||
.submit-button:active {
|
||||
transform: scale(0.95);
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.foot-text {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
color: #9134bd;
|
||||
}
|
||||
|
||||
.underline:hover {
|
||||
color: #008ed4;
|
||||
transition: 0.5s;
|
||||
}
|
Loading…
Reference in New Issue