priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

error notice modify

This commit is contained in:
Priyatham-sai-chand 2021-03-31 23:54:24 +05:30
parent 63a68d51e7
commit 80db290d4d
9 changed files with 132 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/ErrorNotice.js
View File

@ -1,35 +1,53 @@
import React from "react"; import React from "react";
import styled from 'styled-components'; import styled from 'styled-components';
import Footer from "./Footer";
export default function ErrorNotice(props) { export default function ErrorNotice(props) {
const ErrorNotice = styled.div` const ErrorNotice = styled.div`
margin: 1rem 0; margin: 1rem 0;
padding: 0.5rem;
border: 1px solid #e07c7c; border: 1px solid #e07c7c;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #f8d6d6; background-color: #f8d6d6;
padding: 10px;
`; `;
const ErrorMessage = styled.div` const ErrorMessage = styled.div`
color: #000000; color: #000000;
`; `;
const ErrorButton = styled.button const ErrorButton = styled.a
` `
width: 17px; color: red;
height: 28px; position: relative;
display:flex; width: 20px;
background-color: #df4343; height: 20px;
color: #ffffff; opacity: 0.3;
&:hover {
opacity: 1;
}
&:before, &:after {
position: absolute;
left: 15px;
content: ' ';
height: 19px;
width: 2px;
background-color: red;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
`; `;
return ( return (
<ErrorNotice> <ErrorNotice>
<ErrorMessage>{props.message}</ErrorMessage> <ErrorMessage>{props.message}</ErrorMessage>
<ErrorButton onClick={props.clearError}>x</ErrorButton> <ErrorButton onClick={props.clearError}></ErrorButton>
</ErrorNotice> </ErrorNotice>
); );
} }

1
src/components/LogInContainer.js
View File

@ -5,7 +5,6 @@ import Login from './Login';
import Footer from './Footer'; import Footer from './Footer';
import styled, {css} from 'styled-components'; import styled, {css} from 'styled-components';
import '../login_reg.css';
const BaseApp = styled.div` const BaseApp = styled.div`
display: flex; display: flex;
color: white; color: white;

5
src/components/NavBar.js
View File

@ -1,4 +1,4 @@
import React, {useContext,useEffect } from 'react'; import React, { useState,useContext,useEffect } from 'react';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import UserContext from "../context/UserContext"; import UserContext from "../context/UserContext";
import styled,{ css } from 'styled-components'; import styled,{ css } from 'styled-components';
@ -92,7 +92,7 @@ const Linker = styled(Link)`
export default function NavBar() { export default function NavBar() {
const { userData, setUserData } = useContext(UserContext); const { userData, setUserData } = useContext(UserContext);
const [scrolled, setScrolled] = useState();
const logout = () => { const logout = () => {
setUserData({ setUserData({
token: undefined, token: undefined,
@ -102,7 +102,6 @@ export default function NavBar() {
}; };
const [scrolled,setScrolled]=React.useState(false);
const handleScroll=() => { const handleScroll=() => {
const offset=window.scrollY; const offset=window.scrollY;
if(offset > 200 ){ if(offset > 200 ){

49
src/components/Register.js
View File

@ -35,6 +35,7 @@ const TermsLink = styled.a`
const [phonenumber, setPhonenumber] = useState(); const [phonenumber, setPhonenumber] = useState();
const [username, setUsername] = useState(); const [username, setUsername] = useState();
const [error, setError] = useState(); const [error, setError] = useState();
const [contains8C, setContains8C] = useState(false);
const { setUserData } = useContext(UserContext); const { setUserData } = useContext(UserContext);
const history = useHistory(); const history = useHistory();
@ -44,6 +45,12 @@ const TermsLink = styled.a`
try { try {
const newUser = { username,email,phonenumber,password}; const newUser = { username,email,phonenumber,password};
const isEmpty = !Object.values(newUser).some(x => (x !== null && x !== ''));
console.log("isempty: " + isEmpty )
if(isEmpty){
setError("Not all Fields are entered")
return;
}
await Axios.post("https://server-locaft.herokuapp.com/users/register", newUser); await Axios.post("https://server-locaft.herokuapp.com/users/register", newUser);
const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", { const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", {
email, email,
@ -59,6 +66,14 @@ const TermsLink = styled.a`
return err.response.data.msg && setError(err.response.data.msg); return err.response.data.msg && setError(err.response.data.msg);
} }
}; };
const validatePassword = () => {
if(password.length >= 8) {
setContains8C(true)
setError(null)
}
else { setContains8C(false); setError("The Password needs to be atleast 8 characters") };
}
return ( return (
@ -69,21 +84,22 @@ const TermsLink = styled.a`
<form className="FormFields" onSubmit={submit}> <form className="FormFields" onSubmit={submit}>
<FormField> <FormField>
<FormLabel htmlFor="name">UserName</FormLabel> <FormLabel htmlFor="name">UserName</FormLabel>
<FormInput <FormInput
type="text" type="text"
id="name" id="name"
placeholder="Enter your full name" placeholder="Enter your full name"
onChange= { (e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
/> />
</FormField> </FormField>
<FormField> <FormField>
<FormLabel htmlFor="password">Password</FormLabel> <FormLabel htmlFor="password">Password</FormLabel>
<FormInput <FormInput
type="password" type="password"
id="password" id="password"
className="FormField__Input" className="FormField__Input"
placeholder="Enter your password" placeholder="Enter your password"
onChange= { (e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
onKeyUp={validatePassword}
/> />
</FormField> </FormField>
<FormField> <FormField>
@ -94,7 +110,6 @@ const TermsLink = styled.a`
className="FormField__Input" className="FormField__Input"
placeholder="Enter your email" placeholder="Enter your email"
onChange= { (e) => setEmail(e.target.value)} onChange= { (e) => setEmail(e.target.value)}
/> />
</FormField> </FormField>
<FormField> <FormField>
@ -102,15 +117,15 @@ const TermsLink = styled.a`
<FormInput <FormInput
type="number" type="number"
id="phonenumber" id="phonenumber"
className="FormField__Input" className="FormField__Input"
placeholder="Enter your Phone no. (+91)" placeholder="Enter your Phone no. (+91)"
onChange= { (e) => setPhonenumber(parseInt( e.target.value,10))} onChange={(e) => setPhonenumber(parseInt(e.target.value, 10))}
/> />
</FormField> </FormField>
<FormField> <FormField>
<CheckBoxLabel> <CheckBoxLabel>
<CheckBox type="checkbox" name="hasAgreed" required="true" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a> <CheckBox type="checkbox" name="hasAgreed" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
</CheckBoxLabel> </CheckBoxLabel>
</FormField> </FormField>

142
src/components/miscellaneous/Styles.js
View File

@ -1,72 +1,72 @@
import styled from 'styled-components' import styled from 'styled-components'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
const FormCenter = styled.div` const FormCenter = styled.div`
margin-bottom: 100px; margin-bottom: 100px;
`; `;
const FormField = styled.div` const FormField = styled.div`
margin-bottom: 40px; margin-bottom: 40px;
`; `;
const FormLabel = styled.div` const FormLabel = styled.div`
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
font-size: 1.25em; font-size: 1.25em;
color: #4C5D72; color: #4C5D72;
text-align: start; text-align: start;
`; `;
const FormInput = styled.input` const FormInput = styled.input`
width: 85%; width: 85%;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: #4C5D72; color: #4C5D72;
outline: none; outline: none;
border-bottom: 1px solid #445366; border-bottom: 1px solid #445366;
font-size: .9em; font-size: .9em;
font-weight: 300; font-weight: 300;
padding-bottom: 10px; padding-bottom: 10px;
margin-top: 10px; margin-top: 10px;
&:placeholder { &:placeholder {
color: #616E7F; color: #616E7F;
} }
`; `;
const FormLink = styled(Link)` const FormLink = styled(Link)`
color: #66707D; color: #66707D;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
padding-bottom: 5px; padding-bottom: 5px;
margin-left: 12px; margin-left: 12px;
`; `;
const Button = styled.button` const Button = styled.button`
display: inline-block; display: inline-block;
margin: 15px auto; margin: 15px auto;
padding: 8px 20px; padding: 8px 20px;
color: ${props => props.textcolor ? props.textcolor : "black"} !important; color: ${props => props.textcolor ? props.textcolor : "black"} !important;
background: ${props => props.displaycolor ? props.displaycolor : "white"} ; background: ${props => props.displaycolor ? props.displaycolor : "white"} ;
border-radius: ${props => props.radius ? props.radius: "5"}px; border-radius: ${props => props.radius ? props.radius: "5"}px;
border: 1px solid; border: 1px solid;
border-color: ${props => props.radiuscolor ? props.radiuscolor : "black"}; border-color: ${props => props.radiuscolor ? props.radiuscolor : "black"};
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: ${props => props.hovercolor ? props.hovercolor : "white"} ; background: ${props => props.hovercolor ? props.hovercolor : "white"} ;
color: ${props => props.hovertextcolor ? props.hovertextcolor : "black"}!important; color: ${props => props.hovertextcolor ? props.hovertextcolor : "black"}!important;
} }
`; `;
export { Button, FormCenter, FormField, FormLabel, FormInput, FormLink }; export { Button, FormCenter, FormField, FormLabel, FormInput, FormLink };

116
src/homepage.css
View File

@ -1,116 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
div {
}
h1, h2, h3, h4, h5, h6 {
}
h1 {
color: white ;
}
p {
color: #8f8f8f;
}
/* Headings */
.big-heading {
font-family: "Montserrat-Black";
font-size: 3.5rem;
line-height: 1.5;
}
.section-heading {
font-size: 3rem;
line-height: 1.5;
}
*/
.container-fluid{
padding: 7% 15%;
}
.comment{
padding-bottom: 5%;
}
.submit{
margin-top: 5%;
}
.loginb {
margin: 5% 3% 5% 0;
}
/* Title Section */
#title {
background-color: #66bfbf;
color: #fff;
text-align: left;
}
#title .container-fluid {
padding: 3% 15% 7%;
}
/* Title Image */
.title-image {
width: 70%;
position: absolute;
right: 5%;
}
/* Features Section */
#features {
position: relative;
}
.icon:hover {
color: #66bfbf;
}
/* Testimonial Section */
#testimonials {
background-color: #66bfbf;
}
.testimonial-text {
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 20%;
border-radius: 100%;
margin: 20px;
}
@media (max-width: 1028px) {
#title {
text-align: center;
}
.title-image {
position: static;
transform: rotate(0);
}
}

89
src/login_reg.css
View File

@ -1,89 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
.Apper {
}
.Apper__Aside {
}
.Apper__Form {
}
.PageSwitcher {
}
.Apper_heading{
}
.Apper_logo img{
}
.Apper__Aside__text {
}
.Apper_quote{
}
.Apper__Aside_image{
}
.PageSwitcher__Item {
}
.PageSwitcher__Item--Active {
}
.PageSwitcher__Item:first-child {
}
.PageSwitcher__Item:last-child {
}
.FormCenter {
}
.FormTitle {
}
.FormTitle__Link {
}
.FormTitle__Link:first-child {
}
.FormTitle__Link--Active {
}
.FormField {
}
.FormField__Label {
}
.FormField__Input {
}
.FormField__Input::placeholder {
}
.FormField__Button {
background-color: #52C4B9;
color: white;
border: none;
outline: none;
border-radius: 25px;
padding: 15px 70px;
font-size: .8em;
font-weight: 500;
}
.FormField__Link {
}
.FormField__CheckboxLabel {
}
.FormField__Checkbox {
}
.FormField__TermsLink {
}

92
src/navbar.css
View File

@ -1,92 +0,0 @@
* {
box-sizing: border-box;
text-decoration: none;
}
header{
background: #66bfbf;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 10px 15px;
z-index: 100000;
font-family: Ubuntu;
}
header.sticky{
padding: 3px 50px;
background: #66bfbf;
opacity: 0.85;
}
header .logo{
font-family: "Ubuntu";
font-size: 2rem;
font-weight: bold;
position: relative;
color: #fff;
text-decoration: none;
text-transform: lowercase;
padding-left: 100px;
transition: 0.6s;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
}
header ul li a {
position: absolute;
content: '';
left:0;
bottom: 0;
height: 5px;
text-decoration: none;
}
header.sticky ul li a{
color: #fff;
}
.checkbtn
{
color:white;
font-size: 30px;
float:right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}

72
src/pricing-plan.css
View File

@ -1,72 +0,0 @@
.pricing-plan-container
{
}
.pricing-plan {
}
.pricing-plan:hover .pricing-plan:active {
}
.pricing-plan__header{
}
.pricing-plan__special-text {
}
.pricing-plan__title,.pricing-plan__summary{
}
.pricing-plan__title{
}
.pricing-plan__summary {
}
.pricing-plan__desc {
}
.pricing-plan__list {
}
.pricing-plan__feature {
}
.pricing-plan__feature:not(:last-child) {
}
.pricing-plan__feature::before {
}
.pricing-plan__actions {
}
.pricing-plan__button {
}
.pricing-plan__button:hover{
}
.pricing-plan__cost{
}
.pricing-plan__text {
}
.pricing-plan-container{
}