황선혁 / weather_chatbot

Go to a project
Toggle navigation Toggle navigation pinning
Eric Whale
7b482ca5 1 parent a891e3d7

Fix css

Inline Side-by-side
Showing 10 changed files with 90 additions and 129 deletions
......@@ -12,8 +12,8 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Weather Chatbot</title>
</head>
<body>
<body style="width: 100vw">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root" style="width: 100vw; margin: 0; padding: 0"></div>
</body>
</html>
......
......@@ -8,11 +8,13 @@ import Topbar from "./components/Topbar";
function App() {
const token = sessionStorage.getItem("user-token");
const [visited, setVisited] = useState(0);
const [weather, setWeather] = useState();
const [forecast, setForecast] = useState();
const [air, setAir] = useState();
const handleData = async (e) => {
setVisited(1);
setWeather(null);
setForecast(null);
setAir(null);
......@@ -36,8 +38,9 @@ function App() {
return (
<div>
<Topbar />
<div className="mainBox">
<div className="weather-buttons">
<b>Types : </b>
<b>Types {"-> "} </b>
<button id="weather" onClick={(e) => handleData(e)}>
Weather
</button>
......@@ -51,6 +54,14 @@ function App() {
<hr></hr>
{!visited && !weather && !forecast && !air ? (
<h2>Click a button for weather service!</h2>
) : (
""
)}
{visited && !weather && !forecast && !air ? <h2>Loading...</h2> : ""}
{!weather ? (
""
) : (
......@@ -115,6 +126,7 @@ function App() {
<p>pm10 : {air.airData.pm10} μg/m3</p>
</div>
)}
</div>
<Bottombar />
</div>
......
......@@ -10,6 +10,7 @@ function Topbar() {
<Link to="/" className="logo">
<FcHome />
</Link>
<div className="title">🤖 Weather Chatbot</div>
<Link to="/settings" className="settings">
<AiFillSetting />
</Link>
......
......@@ -38,14 +38,16 @@ function Login() {
};
return (
<div className="container">
<div className="mainBox">
<h1>Welcome back!</h1>
<h2>Stay connected to weather*stories*friends</h2>
<button>Login with Google</button>
<br />
<button>Login with GitHub</button>
<br />
<br />
<form className="authForm" onSubmit={(e) => handleSubmit(e)}>
<label htmlFor="email">
......@@ -66,7 +68,7 @@ function Login() {
id="password"
/>
</label>
<label htmlFor="submit">
<label className="submitBtn" htmlFor="submit">
<input type="submit" id="submit" />
</label>
</form>
......
......@@ -4,6 +4,8 @@ import authService from "../service/auth";
// components
import Topbar from "../components/Topbar";
import Bottombar from "../components/Bottombar";
// styles
import "../styles/layout.scss";
function Settings() {
const token = sessionStorage.getItem("user-token");
......@@ -49,6 +51,7 @@ function Settings() {
return (
<div>
<Topbar />
<div className="mainBox">
<h3>Edit Your information</h3>
<form className="authForm" onSubmit={(e) => handleSubmit(e)}>
<label htmlFor="username">
......@@ -87,7 +90,7 @@ function Settings() {
id="email"
/>
</label>
<label htmlFor="submit">
<label className="submitBtn" htmlFor="submit">
<input type="submit" id="submit" />
</label>
</form>
......@@ -96,10 +99,16 @@ function Settings() {
<div>
Want to logout?{" "}
<button onClick={() => setLogoutSuccess("logout")}>Logout</button>
<button
className="logoutBtn"
onClick={() => setLogoutSuccess("logout")}
>
Logout
</button>
</div>
<Bottombar />
</div>
</div>
);
}
......
......@@ -36,14 +36,16 @@ function Signup() {
};
return (
<div className="container">
<div className="mainBox">
<h1>Welcome to WeatherAPP/twitter/Messanger!</h1>
<h2>Stay connected to weather*stories*friends</h2>
<button>Create account with Google</button>
<br />
<button>Create account with GitHub</button>
<br />
<br />
<p>
<b>Country Code</b> and <b>City Name</b> is required for Weather
......@@ -97,7 +99,7 @@ function Signup() {
/>
</label>
<label htmlFor="submit">
<label className="submitBtn" htmlFor="submit">
<input type="submit" id="submit" />
</label>
</form>
......
......@@ -7,7 +7,7 @@ function Tweet() {
<div>
<Topbar />
<div>tweet</div>
<div className="mainBox">tweet</div>
<Bottombar />
</div>
......
......@@ -6,7 +6,10 @@
align-items: center;
text-align: center;
padding: 10px;
height: 9vh;
position: fixed;
font-size: 3rem;
width: 100%;
a {
width: 45%;
height: 90%;
......@@ -18,6 +21,7 @@
}
.logo {
color: #008080;
font-size: 4rem;
}
* {
......@@ -28,26 +32,31 @@
.topbar {
margin-bottom: 0.5rem;
justify-content: space-between;
border-bottom: 2px gray solid;
border-bottom: 4px gray solid;
top: 0;
a {
font-size: 2.9rem;
height: 3rem;
height: 5rem;
}
.logo {
font-size: 5rem;
text-align: left;
}
.settings {
font-size: 4.5rem;
text-align: right;
}
.title {
width: 40vw;
}
}
.bottombar {
margin-top: 0.5rem;
border-top: 2px gray solid;
font-size: 1.5rem;
height: 2.8rem;
border-top: 4px gray solid;
bottom: 0;
height: 4rem;
.bottomBtn {
margin-right: 0.2rem;
margin-left: 0.2rem;
margin-right: 0.4rem;
margin-left: 0.4rem;
border: 1px solid gray;
border-radius: 3px;
box-shadow: 3px 3px 3px 0px gray;
......
html {
height: 100vh;
}
* {
margin: 0;
padding: 0;
background-color: #FFDEAD;
background-color: #ffdead;
}
.container {
display: flex;
flex-direction: column;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mainBox {
min-height: 82vh;
margin-top: 13vh;
padding-left: 1rem;
padding-right: 1rem;
font-size: 2rem;
* {
font-size: 2rem;
}
h2 {
font-size: 2.5rem;
}
}
.authForm {
......@@ -25,12 +40,30 @@
}
}
.submitBtn {
width: 40%;
color: green;
border: green 2px solid;
border-radius: 4px;
input {
background-color: green;
}
}
.logoutBtn {
width: 20%;
border-radius: 4px;
background-color: red;
}
.weather-buttons {
display: flex;
flex-direction: row;
button {
margin-left: 0.2rem;
margin-right: 0.2rem;
padding: 0.2rem;
border-radius: 6px;
}
}
......
const bcrypt = require("bcryptjs");
// handles "exception" inside of async express routes
const asyncHandler = require("express-async-handler");
const User = require("../models/userModel");
const { jwtGenerator } = require("../config/jwt");
// @desc Signup new user
// @route POST /api/users
// @access Public
const signupUser = asyncHandler(async (req, res) => {
const { username, country, city, email, password } = req.body;
if (!username || !country || !city || !email || !password) {
res.status(400);
throw new Error("Please fill in all fields");
}
// Check if user already exists
const userExists = await User.findOne({ email });
if (userExists) {
res.status(400);
throw new Error("User with the email already exists");
}
// Hash password (bcrypt)
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(password, salt);
// Create/Build user
const user = await User.create({
username,
country,
city,
email,
password: hashedPassword,
});
// Send response
if (user) {
// 201: Resource successfully created
res.status(201).json({
_id: user.id,
username: user.username,
country: user.country,
city: user.city,
email: user.email,
token: jwtGenerator(user._id),
});
} else {
res.status(400);
throw new Error("Invalid user data");
}
});
// @desc Login user
// @route POST /api/users/login
// @access Public
const loginUser = asyncHandler(async (req, res) => {
const { email, password } = req.body;
// Check email & password
const userInDB = await User.findOne({ email });
const validPassword = await bcrypt.compare(password, userInDB.password);
if (userInDB && validPassword) {
res.status(200).json({
token: jwtGenerator(userInDB._id),
});
} else {
res.status(400);
throw new Error("Invalid credentials");
}
});
// @desc Get all users
// @route GET /api/users/all
// @access Public
const getAllusers = asyncHandler(async (req, res) => {
const users = await User.find()
.select("-password")
.select("-createdAt")
.select("-email");
res.status(200).json(users);
});
// @desc Get user
// @route GET /api/users/self
// @access Private
const getSelf = asyncHandler(async (req, res) => {
res.status(200).json(req.user);
});
// @desc Edit user
// @route PUT /api/users/edit
// @access Private
const editUser = asyncHandler(async (req, res) => {
const {username, country, city, email} = req.body;
console.log(username);
res.json({});
});
module.exports = {
signupUser,
loginUser,
getAllusers,
getSelf,
editUser,
};