css modules

This commit is contained in:
Priyatham-sai-chand 2020-12-06 22:29:40 +05:30
parent 35cc2f6cdb
commit f5542b610e
18 changed files with 142 additions and 147 deletions

17
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,17 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

View File

@ -5,6 +5,14 @@ const auth = require("../middleware/auth");
const User = require("../schemas/User"); const User = require("../schemas/User");
const config = require("config"); const config = require("config");
router.get("/", async(req,res) => {
console.log(config.get('jwtSecret'));
return "<h1>asdf<h1/>";
});
router.post("/register", async (req, res) => { router.post("/register", async (req, res) => {
try { try {
let { username,email,phonenumber,password} = req.body; let { username,email,phonenumber,password} = req.body;
@ -60,6 +68,7 @@ router.post("/login", async (req, res) => {
if (!isMatch) return res.status(400).json({ msg: "Invalid credentials." }); if (!isMatch) return res.status(400).json({ msg: "Invalid credentials." });
const token = jwt.sign({ id: user._id },config.get('jwtSecret')); const token = jwt.sign({ id: user._id },config.get('jwtSecret'));
if(token) return res.json
res.json({ res.json({
token, token,
user: { user: {
@ -84,13 +93,14 @@ router.delete("/delete", auth, async (req, res) => {
router.post("/tokenIsValid", async (req, res) => { router.post("/tokenIsValid", async (req, res) => {
try { try {
const token = req.header("x-auth-token"); const token = req.header("x-auth-token");
if (!token) return res.json(false); if (!token) return res.json({error: qwer});
const verified = jwt.verify(token, process.env.JWT_SECRET); const verified = jwt.verify(token, config.get("jwtSecret"));
if (!verified) return res.json(false);
if (!verified) return res.json({error: asdf});
const user = await User.findById(verified.id); const user = await User.findById(verified.id);
if (!user) return res.json(false); if (!user) return res.json({error: zxcv});
return res.json(true); return res.json(true);
} catch (err) { } catch (err) {

1
debug.log Normal file
View File

@ -0,0 +1 @@
[1206/101249.288:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

5
package-lock.json generated
View File

@ -7781,6 +7781,11 @@
} }
} }
}, },
"install": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
"integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="
},
"internal-ip": { "internal-ip": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz", "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",

View File

@ -9,6 +9,8 @@
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0", "axios": "^0.21.0",
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
"classnames": "^2.2.6",
"install": "^0.13.0",
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.4.0", "react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",

View File

@ -5,7 +5,6 @@ import PricingPlan from "./components/PricingPlan";
import LogInContainer from "./components/LogInContainer"; import LogInContainer from "./components/LogInContainer";
import { Router,BrowserRouter, Route, Switch } from 'react-router-dom'; import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
import UserContext from "./context/UserContext"; import UserContext from "./context/UserContext";
import Tracking from "./components/Tracking";
import Options from "./components/Options"; import Options from "./components/Options";
import Stepper from './components/Stepper'; import Stepper from './components/Stepper';

View File

@ -7,57 +7,53 @@ import NavBar from './NavBar';
class HomePage extends Component { class HomePage extends Component {
render(){ render(){
return ( return (
<div className="HomePage"> <div className="HomePage">
< NavBar /> < NavBar />
<section class="colored-section" id="title"> <section className="colored-section" id="title">
<div class="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-lg-6"> <div className="col-lg-6">
<h1 class="big-heading">Adapt to a new place easy peasy.</h1> <h1 className="big-heading">Adapt to a new place easy peasy.</h1>
<button type="button" class = "btn btn-info login mr-1">Log In</button> <button type="button" className = "btn btn-info login mr-1">Log In</button>
<button type="button" class="btn btn-info loginb" >Sign Up</button> <button type="button" className="btn btn-info loginb" >Sign Up</button>
</div> </div>
<div class="col-lg-6"> <div className="col-lg-6">
<img class="title-image" src="/locaft.png" alt="locaft-mockup" /> <img className="title-image" src="/locaft.png" alt="locaft-mockup" />
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="white-section" id="features"> <section className="white-section" id="features">
<div class="container-fluid"> <div className="container-fluid">
<div class="row"> <div className="row">
<div class="feature-box col-lg-4"> <div className="feature-box col-lg-4">
<i class="icon fas fa-check-circle fa-4x"></i> <i className="icon fas fa-check-circle fa-4x"></i>
<h3 class="feature-title">Easy to use.</h3> <h3 className="feature-title">Easy to use.</h3>
<p>Get relocated.We'll take care of everything.</p> <p>Get relocated.We'll take care of everything.</p>
</div> </div>
<div class="feature-box col-lg-4"> <div className="feature-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i> <i className="icon fas fa-bullseye fa-4x"></i>
<h3 class="feature-title">Efficient</h3> <h3 className="feature-title">Efficient</h3>
<p>Get highest number of services for lowest cost possible.</p> <p>Get highest number of services for lowest cost possible.</p>
</div> </div>
<div class="feature-box col-lg-4"> <div className="feature-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i> <i className="icon fas fa-heart fa-4x"></i>
<h3 class="feature-title">Relax</h3> <h3 className="feature-title">Relax</h3>
<p>Sit back , we'll do the dirty work.</p> <p>Sit back , we'll do the dirty work.</p>
</div> </div>
</div> </div>
@ -65,57 +61,57 @@ class HomePage extends Component {
</div> </div>
</section> </section>
<section class="colored-section" id="testimonials"> <section className="colored-section" id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="false"> <div id="testimonial-carousel" className="carousel slide" data-ride="false">
<div class="carousel-inner"> <div className="carousel-inner">
<div class="carousel-item active container-fluid"> <div className="carousel-item active container-fluid">
<h2 class="testimonial-text">I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place.</h2> <h2 className="testimonial-text">I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place.</h2>
<img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.53 PM.jpeg" alt="mc-profile" /> <img className="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.53 PM.jpeg" alt="mc-profile" />
<em>Mani , Hyderabad</em> <em>Mani , Hyderabad</em>
</div> </div>
<div class="carousel-item container-fluid"> <div className="carousel-item container-fluid">
<h2 class="testimonial-text">Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h2> <h2 className="testimonial-text">Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h2>
<img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.39 PM.jpeg" alt="nishi-profile" /> <img className="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.39 PM.jpeg" alt="nishi-profile" />
<em>Nishanth , Bangalore</em> <em>Nishanth , Bangalore</em>
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev"> <a className="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span> <span className="carousel-control-prev-icon"></span>
</a> </a>
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next"> <a className="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span> <span className="carousel-control-next-icon"></span>
</a> </a>
</div> </div>
</section> </section>
<section class="colored-section" id="press"> <section className="colored-section" id="press">
<img class="press-logo" src="/indigo.png" alt="indigo-logo" /> <img className="press-logo" src="/indigo.png" alt="indigo-logo" />
<img class="press-logo" src="/avasa.jpg" alt="avasa-logo" /> <img className="press-logo" src="/avasa.jpg" alt="avasa-logo" />
<img class="press-logo" src="/vrl.jpg" alt="vrl-logo" /> <img className="press-logo" src="/vrl.jpg" alt="vrl-logo" />
<img class="press-logo" src="/nobroker.png" alt="nobroker-logo" /> <img className="press-logo" src="/nobroker.png" alt="nobroker-logo" />
</section> </section>
<section class="white-section" id="about-us"> <section className="white-section" id="about-us">
<div class="container-fluid"> <div className="container-fluid">
<div class="row"> <div className="row">
<div class="feature-box col-lg-4"> <div className="feature-box col-lg-4">
<i class="icon fas fa-address-card fa-4x"></i> <i className="icon fas fa-address-card fa-4x"></i>
<h2 class="feature-title">About Us</h2> <h2 className="feature-title">About Us</h2>
<p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p> <p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
</div> </div>
<div class="feature-box col-lg-4"> <div className="feature-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i> <i className="icon fas fa-bullseye fa-4x"></i>
<h2 class="feature-title">Vision</h2> <h2 className="feature-title">Vision</h2>
<p>Bringing all the basic amenities to the new place before your arrival.</p> <p>Bringing all the basic amenities to the new place before your arrival.</p>
</div> </div>
<div class="feature-box col-lg-4"> <div className="feature-box col-lg-4">
<i class="icon fas fa-chart-line fa-4x"></i> <i className="icon fas fa-chart-line fa-4x"></i>
<h2 class="feature-title">Mission</h2> <h2 className="feature-title">Mission</h2>
<p>Getting adapted and familiar to the new place made easy.</p> <p>Getting adapted and familiar to the new place made easy.</p>
</div> </div>
</div> </div>
@ -124,16 +120,16 @@ class HomePage extends Component {
<section class="colored-section" id="cta"> <section className="colored-section" id="cta">
<div class="container-fluid"> <div className="container-fluid">
<h3 class="big-heading">Recommend us to your friends !</h3> <h3 className="big-heading">Recommend us to your friends !</h3>
<button class="download-button btn btn-lg btn-dark" type="button"><i class="fab fa-apple"></i> Download</button> <button className="download-button btn btn-lg btn-dark" type="button"><i className="fab fa-apple"></i> Download</button>
<button class="download-button btn btn-lg brn-light" type="button"><i class="fab fa-google-play"></i> Download</button> <button className="download-button btn btn-lg brn-light" type="button"><i className="fab fa-google-play"></i> Download</button>
</div> </div>
<div class="container-fluid"> <div className="container-fluid">
<h2>Any comments ?</h2> <h2>Any comments ?</h2>
<p>Your comments are what help us improve.</p> <p>Your comments are what help us improve.</p>
@ -141,12 +137,12 @@ class HomePage extends Component {
</section> </section>
<footer class="white-section" id="footer"> <footer className="white-section" id="footer">
<div class="container-fluid"> <div className="container-fluid">
<i class="social-icon fab fa-facebook-f"></i> <i className="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i> <i className="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i> <i className="social-icon fab fa-instagram"></i>
<i class="social-icon fas fa-envelope"></i> <i className="social-icon fas fa-envelope"></i>
<p>© Copyright 2020 Locaft</p> <p>© Copyright 2020 Locaft</p>
<p><a href="/tc">Terms and Conditions</a></p> <p><a href="/tc">Terms and Conditions</a></p>
<p><a href="/pp">Privacy Policy</a></p> <p><a href="/pp">Privacy Policy</a></p>

View File

@ -8,11 +8,12 @@ import ErrorNotice from "./ErrorNotice";
const Login = () => { const Login = () => {
const [email, setEmail] = useState(); const [email, setEmail] = useState();
const [password, setPassword] = useState(); const [password, setPassword] = useState();
const [error, setError] = useState(); const [error, setError] = useState();
const { setUserData } = useContext(UserContext); const { setUserData } = useContext(UserContext);
const history = useHistory(); const history = useHistory();
const submit = async (e) => { const submit = async (e) => {
@ -23,12 +24,13 @@ const Login = () => {
"http://localhost:5000/users/login", "http://localhost:5000/users/login",
loginUser loginUser
); );
console.log(loginRes);
setUserData({ setUserData({
token: loginRes.data.token, token: loginRes.data.token,
user: loginRes.data.user, user: loginRes.data.user,
}); });
localStorage.setItem("auth-token", loginRes.data.token); localStorage.setItem("auth-token", loginRes.data.token);
history.push("/"); history.push("/register");
} catch (err) { } catch (err) {
err.response.data.msg && setError(err.response.data.msg); err.response.data.msg && setError(err.response.data.msg);
} }

View File

@ -23,28 +23,28 @@ export default function NavBar() {
header.classList.toggle("sticky", window.scrollY > 0); header.classList.toggle("sticky", window.scrollY > 0);
}) })
console.log(userData);
return ( return (
<div class="navbar"> <div className="navbar">
<header> <header>
<input type="checkbox" id="check" /> <input type="checkbox" id="check" />
<label for="check" class="checkbtn"> <label htmlFor="check" className="checkbtn">
<i class="fas fa-bars" id="btn"></i> <i className="fas fa-bars" id="btn"></i>
</label> </label>
<a href="/home" class="logo">locaft</a> <a href="/home" className="logo">locaft</a>
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">About</a></li> <li><a href="#">About</a></li>
<li><a href="#">Services</a></li> <li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li> <li><a href="#">Contact us</a></li>
<li><a href="#" onClick={logout}>Log Out</a></li>
{userData.user ? ( {userData.user ? (
<li><a href="#" onClick={logout}>Log Out</a></li> <li><a href="#" onClick={logout}>Log Out</a></li>
) : ( ) : (
<React.Fragment> <React.Fragment>
<li><a href="#" onclick={register}>Register</a></li> <li><a href="#" onClick={register}>Register</a></li>
<li><a href="#" onclick={login}>login</a></li> <li><a href="#" onClick={login}>login</a></li>
</React.Fragment> </React.Fragment>
)} )}
</ul> </ul>

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import './options.css'; import '../options.css';
export default function Options() { export default function Options() {

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import './pricing-plan.css'; import '../pricing-plan.css';
import NavBar from './NavBar'; import NavBar from './NavBar';
class PricingPlan extends Component { class PricingPlan extends Component {

View File

@ -1,17 +1,22 @@
import React from 'react'; import React, {useState} from 'react';
import './stepper.css'; import styles from '../stepper.module.css';
import classNames from 'classnames';
export default function Stepper() { export default function Stepper() {
const[next,setNext] = useState(false);
const[clear,setClear] = useState(false);
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
var list = document.getElementById('progress'), var list = document.getElementById('progress'),
next = document.getElementById('next'), next = document.getElementById('next'),
clear = document.getElementById('clear'), clear = document.getElementById('clear'),
children = list.children, children = [...document.querySelectorAll('ele')],
completed = 0; completed = 0;
console.log(children);
// simulate activating a node // simulate activating a node
next.addEventListener('click', function () { if(next === true){
// count the number of completed nodes. // count the number of completed nodes.
completed = (completed === 0) ? 1 : completed + 2; completed = (completed === 0) ? 1 : completed + 2;
@ -20,46 +25,46 @@ export default function Stepper() {
// for each node that is completed, reflect the status // for each node that is completed, reflect the status
// and show a green color! // and show a green color!
for (var i = 0; i < completed; i++) { for (var i = 0; i < completed; i++) {
children[i].children[0].classList.remove('grey'); children[i].children[0].classNameList.remove(styles['grey']);
children[i].children[0].classList.add('green'); children[i].children[0].classNameList.add(styles['green']);
// if this child is a node and not divider, // if this child is a node and not divider,
// make it shine a little more // make it shine a little more
if (i % 2 === 0) { if (i % 2 === 0) {
children[i].children[0].classList.add('activated'); children[i].children[0].classNameList.add('activated');
} }
} }
}, false); }
// clear the activated state of the markers // clear the activated state of the markers
clear.addEventListener('click', function () { if(clear === true){
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
children[i].children[0].classList.remove('green'); children[i].children[0].classNameList.remove('green');
children[i].children[0].classList.remove('activated'); children[i].children[0].classNameList.remove('activated');
children[i].children[0].classList.add('grey'); children[i].children[0].classNameList.add('grey');
} }
completed = 0; completed = 0;
}, false); }
}); });
return ( return (
<div class="container"> <div className="container">
<h1>Relocation Status</h1> <h1>Relocation Status</h1>
<br /> <br />
<br /> <br />
<br /> <br />
<ul id="progress"> <ul id="progress">
<li><div class="node green"></div><p>Transport tickets confirmed</p></li> <li className="ele"><div className={classNames({'node':true,'grey': true })}></div><p>Transport tickets confirmed</p></li>
<li><div class="divider grey"></div></li> <li className="ele" ><div className={classNames({'divider':true, 'grey':true})}></div></li>
<li><div class="node grey"></div><p>Packers & movers due to come in a day</p></li> <li className="ele" ><div className="node grey"></div><p>Packers & movers due to come in a day</p></li>
<li><div class="divider grey"></div></li> <li className="ele"><div className="divider grey"></div></li>
<li><div class="node grey"></div><p>school admission being confirmed</p></li> <li className="ele"><div className="node grey"></div><p>school admission being confirmed</p></li>
<li><div class="divider grey"></div></li> <li className = "ele"><div className="divider grey"></div></li>
<li><div class="node grey"></div><p>House is empty</p></li> <li className = "ele"><div className="node grey"></div><p>House is empty</p></li>
</ul> </ul>
<input type="button" value="Next" id="next" /> <input type="button" onClick={() => setNext(true)} value="Next" id="next" />
<input type="button" value="Clear" id="clear" /> <input type="button" onClick={ () => setNext(true)} value="Clear" id="clear" />
</div> </div>
) )

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import './tracking.css'; import '../tracking.css';
export default function Tracking() { export default function Tracking() {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {

View File

@ -98,46 +98,4 @@ header.sticky ul li a{
display: none; display: none;
} }
@media (max-width: 1118px){
header .logo{
left: 8%;
}
}
@media (max-width: 944px){
header .logo{
left: 6%;
top: 20px;
width: 1030px;
}
}
@media (max-width: 860px){
label #btn{
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #66bfbf;
text-align: center;
}
header ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
label #check:checked ~ ul{
}
}