error notice modify
This commit is contained in:
parent
63a68d51e7
commit
80db290d4d
|
|
@ -1,35 +1,53 @@
|
|||
import React from "react";
|
||||
import styled from 'styled-components';
|
||||
import Footer from "./Footer";
|
||||
|
||||
|
||||
export default function ErrorNotice(props) {
|
||||
const ErrorNotice = styled.div`
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #e07c7c;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f8d6d6;
|
||||
padding: 10px;
|
||||
`;
|
||||
const ErrorMessage = styled.div`
|
||||
color: #000000;
|
||||
`;
|
||||
|
||||
const ErrorButton = styled.button
|
||||
const ErrorButton = styled.a
|
||||
`
|
||||
width: 17px;
|
||||
height: 28px;
|
||||
display:flex;
|
||||
background-color: #df4343;
|
||||
color: #ffffff;
|
||||
color: red;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
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 (
|
||||
<ErrorNotice>
|
||||
<ErrorMessage>{props.message}</ErrorMessage>
|
||||
<ErrorButton onClick={props.clearError}>x</ErrorButton>
|
||||
<ErrorButton onClick={props.clearError}></ErrorButton>
|
||||
</ErrorNotice>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@ import Login from './Login';
|
|||
import Footer from './Footer';
|
||||
import styled, {css} from 'styled-components';
|
||||
|
||||
import '../login_reg.css';
|
||||
const BaseApp = styled.div`
|
||||
display: flex;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, {useContext,useEffect } from 'react';
|
||||
import React, { useState,useContext,useEffect } from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
import UserContext from "../context/UserContext";
|
||||
import styled,{ css } from 'styled-components';
|
||||
|
|
@ -92,7 +92,7 @@ const Linker = styled(Link)`
|
|||
|
||||
export default function NavBar() {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
|
||||
const [scrolled, setScrolled] = useState();
|
||||
const logout = () => {
|
||||
setUserData({
|
||||
token: undefined,
|
||||
|
|
@ -102,7 +102,6 @@ export default function NavBar() {
|
|||
};
|
||||
|
||||
|
||||
const [scrolled,setScrolled]=React.useState(false);
|
||||
const handleScroll=() => {
|
||||
const offset=window.scrollY;
|
||||
if(offset > 200 ){
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ const TermsLink = styled.a`
|
|||
const [phonenumber, setPhonenumber] = useState();
|
||||
const [username, setUsername] = useState();
|
||||
const [error, setError] = useState();
|
||||
const [contains8C, setContains8C] = useState(false);
|
||||
|
||||
const { setUserData } = useContext(UserContext);
|
||||
const history = useHistory();
|
||||
|
|
@ -44,6 +45,12 @@ const TermsLink = styled.a`
|
|||
|
||||
try {
|
||||
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);
|
||||
const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", {
|
||||
email,
|
||||
|
|
@ -59,6 +66,14 @@ const TermsLink = styled.a`
|
|||
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 (
|
||||
|
|
@ -84,6 +99,7 @@ const TermsLink = styled.a`
|
|||
className="FormField__Input"
|
||||
placeholder="Enter your password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onKeyUp={validatePassword}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField>
|
||||
|
|
@ -94,7 +110,6 @@ const TermsLink = styled.a`
|
|||
className="FormField__Input"
|
||||
placeholder="Enter your email"
|
||||
onChange= { (e) => setEmail(e.target.value)}
|
||||
|
||||
/>
|
||||
</FormField>
|
||||
<FormField>
|
||||
|
|
@ -110,7 +125,7 @@ const TermsLink = styled.a`
|
|||
|
||||
<FormField>
|
||||
<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>
|
||||
</FormField>
|
||||
|
||||
|
|
|
|||
116
src/homepage.css
116
src/homepage.css
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 {
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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{
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue