From 09ab8085da821492de00457e278691880989a80a Mon Sep 17 00:00:00 2001 From: Valen Date: Wed, 30 Mar 2022 22:34:21 +0200 Subject: [PATCH 1/6] =?UTF-8?q?Revert=20"Soluci=C3=B3n=20problemas=20devel?= =?UTF-8?q?op"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 99783bdf47354df0adf5bfd7db036de5cbd64518. --- package.json | 5 + restapi/api.ts | 54 ++++++++ restapi/controllers/RockController.ts | 34 +++-- restapi/controllers/UserController.ts | 99 +++++++++++++- restapi/models/Rock.ts | 6 +- restapi/models/User.ts | 5 +- restapi/package.json | 2 + restapi/server.ts | 14 ++ webapp/package.json | 8 +- webapp/src/App.tsx | 24 ++++ webapp/src/components/navBar.tsx | 15 ++- .../components/solid-pods/GetPodAddress.tsx | 49 +++++++ .../src/components/solid-pods/LoginForm.tsx | 38 ++++++ webapp/src/components/solid-pods/LoginPod.tsx | 32 +++++ .../components/solid-pods/ProfileViewer.tsx | 36 +++++ webapp/src/views/Login.tsx | 112 ++++++++++++++++ webapp/src/views/Register.tsx | 125 ++++++++++++++++++ 17 files changed, 632 insertions(+), 26 deletions(-) create mode 100644 package.json create mode 100644 webapp/src/components/solid-pods/GetPodAddress.tsx create mode 100644 webapp/src/components/solid-pods/LoginForm.tsx create mode 100644 webapp/src/components/solid-pods/LoginPod.tsx create mode 100644 webapp/src/components/solid-pods/ProfileViewer.tsx create mode 100644 webapp/src/views/Login.tsx create mode 100644 webapp/src/views/Register.tsx diff --git a/package.json b/package.json new file mode 100644 index 0000000..9105606 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-router-dom": "^6.2.2" + } +} diff --git a/restapi/api.ts b/restapi/api.ts index f490420..485face 100644 --- a/restapi/api.ts +++ b/restapi/api.ts @@ -5,9 +5,13 @@ import {findUsers, addUser, deleteUser} from './controllers/UserController'; const User = require("./models/User"); const Rock = require("./models/Rock"); +import {findRocks, addRock, deleteRock, findRocksSedimentary, findRocksMetamorphic, findRocksFiery} from './controllers/RockController'; +import {findUsers, addUser, deleteUser, loginUser, logout} from './controllers/UserController'; + const api:Router = express.Router() const mongoose = require("mongoose"); +<<<<<<< HEAD //Methods for control users from the app api.get("/users/list", findUsers); @@ -20,6 +24,56 @@ api.get("/rocks/list", findRocks); api.post("/rocks/add", addRock); +api.post("/rocks/delete", deleteRock); +======= +interface User { + name: string; + email: string; +} + +//This is not a restapi as it mantains state but it is here for +//simplicity. A database should be used instead. +let users: Array = []; + +api.get( + "/users/list", + async (req: Request, res: Response): Promise => { + return res.status(200).send(users); + } +); + + +api.post( + "/users/add",[ + check('name').isLength({ min: 1 }).trim().escape(), + check('email').isEmail().normalizeEmail(), + ], + async (req: Request, res: Response): Promise => { + let name = req.body.name; + let email = req.body.email; + let user: User = {name:name,email:email} + users.push(user); + return res.sendStatus(200); + } +); +>>>>>>> parent of 99783bd... Solución problemas develop + +api.post("/users/login", loginUser); + +api.get("/users/logout", logout); + + +//Methods for product of the app +api.get("/rocks/list", findRocks); + +api.get("/rocks/list/sedimentary", findRocksSedimentary); + +api.get("/rocks/list/metamorphic", findRocksMetamorphic); + +api.get("/rocks/list/fiery", findRocksFiery); + +api.post("/rocks/add", addRock); + api.post("/rocks/delete", deleteRock); export default api; \ No newline at end of file diff --git a/restapi/controllers/RockController.ts b/restapi/controllers/RockController.ts index d43ad79..30460f9 100644 --- a/restapi/controllers/RockController.ts +++ b/restapi/controllers/RockController.ts @@ -8,35 +8,53 @@ export const findRocks = async (req:Request, res:Response) => { res.send(rocks).json(); }; +export const findRocksSedimentary = async (req:Request, res:Response) => { + const rocks = await Rock.find({type : "sedimentaria"}) + res.send(rocks).json(); +}; + +export const findRocksFiery= async (req:Request, res:Response) => { + const rocks = await Rock.find({type : "ígnea"}) + res.send(rocks).json(); +}; + +export const findRocksMetamorphic = async (req:Request, res:Response) => { + const rocks = await Rock.find({type : "metamórfica"}) + res.send(rocks).json(); +}; + export const addRock = async (req:Request, res:Response): Promise => { - + let rockId = req.body.rockId; let name = req.body.name; let type = req.body.type; let description = req.body.description; let price = req.body.price; let mohsHardness = req.body.mohsHardness; let density = req.body.density; + let texture = req.body.texture; let img = req.body.img; - let stone = await Rock.findOne( + let rock = await Rock.findOne( { name: name } ); - if (stone) { - res.send({ error: "Error: This stone is already in the app " + name }); + if (rock) { + res.send({ error: "Error: This rock is already in the app " + name }); } else { - stone = new Rock({ + rock = new Rock({ + rockId: rockId, name: name, type: type, description: description, price: price, - mooseHardness: mohsHardness, + mohsHardness: mohsHardness, density: density, + texture: texture, img: img }); - await stone.save(); - res.send(stone); + await rock.save(); + res.send(rock); } }; diff --git a/restapi/controllers/UserController.ts b/restapi/controllers/UserController.ts index 0856c78..e96f50d 100644 --- a/restapi/controllers/UserController.ts +++ b/restapi/controllers/UserController.ts @@ -2,6 +2,8 @@ import express, { Request, Response, Router } from 'express'; const User = require("../models/User"); const mongoose = require("mongoose"); +const crypto = require("crypto"); +const jwt = require("jsonwebtoken"); export const findUsers = async (req:Request, res:Response) => { const users = await User.find({}) @@ -9,20 +11,37 @@ export const findUsers = async (req:Request, res:Response) => { }; export const addUser = async (req:Request, res:Response): Promise => { - + + req.body.password = await crypto.createHmac('sha256', "abcdefg") + .update(req.body.password).digest('hex'); + + let dni = req.body.dni; let name = req.body.name; let email = req.body.email; - + let rol = 1; + let password = req.body.password; + let repeatPassword = req.body.repeatPassword; + + let errors = validateUser(dni,name,email,password,repeatPassword); + + if (errors.length != 0){ + res.send(errors).json(); + } + let user = await User.findOne( { email: email } ); + if (user) { res.send({ error: "Error: This user is already registered " + email }); } else { user = new User({ + dni: dni, name: name, - email: email + email: email, + rol: rol, + password: password }); await user.save(); res.send(user); @@ -31,10 +50,78 @@ export const addUser = async (req:Request, res:Response): Promise => { export const deleteUser = async (req:Request, res:Response): Promise => { - let email = req.body.email; + let dni = req.body.dni; let user = await User.deleteOne( - { email: email } + { dni: dni } ); res.send(user); - }; \ No newline at end of file + }; + + +export const loginUser = async (req:Request, res:Response): Promise => { + + let email = req.body.email; + let password = await crypto.createHmac('sha256', "abcdefg") + .update(req.body.password).digest('hex'); + + let user = await User.findOne( + {email: email, + password: password + } + ); + + if (user == null){ + res.status(401); + res.json({ + errores : ["Email o contraseña incorrectos"], + autenticado : false + }); + } + else{ + req.session.usuario = email; + req.session.rol = user.rol; + let token = jwt.sign( + {usuario: email , tiempo: Date.now()/1000}, "secreto"); + res.status(200); + res.json({ + autenticado: true, + token : token + }); + } +} + +export const logout = async (req:Request, res:Response): Promise => { + req.session.usuario = null; + req.session.rol = null; + res.send("Usuario Desconectado"); +} + +function validateUser(dni: string | any[], name: string | any[], email: string | any[], password: string | any[], repeatPassword: string | any[]){ + let errors = new Array(); + if (dni.length == 0){ + errors.push("Error: El campo dni no puede ser vacio" ); + } + + if (name.length == 0){ + errors.push("Error: El campo nombre no puede ser vacio" ); + } + + if (email.length == 0){ + errors.push("Error: El campo email no puede ser vacio"); + } + + if (password.length == 0){ + errors.push("Error: El campo password no puede ser vacio" ); + } + + if (repeatPassword.length == 0){ + errors.push("Error: El campo repeatPassword no puede ser vacio" ); + } + + if (repeatPassword != password){ + errors.push("Error: El campo password y repeatPassword deben ser iguales" ); + } + + return errors; +} \ No newline at end of file diff --git a/restapi/models/Rock.ts b/restapi/models/Rock.ts index 7e13433..4953518 100644 --- a/restapi/models/Rock.ts +++ b/restapi/models/Rock.ts @@ -1,13 +1,15 @@ const mongooseRocks = require("mongoose") -const stoneSchema = mongooseRocks.Schema({ +const rockSchema = mongooseRocks.Schema({ + rockId:String, name: String, type: String, description: String, price: Number, mohsHardness:Number, density:Number, + texture:String, img: String },{ versionKey: false @@ -15,4 +17,4 @@ const stoneSchema = mongooseRocks.Schema({ ) -module.exports = mongooseRocks.model("Rocks", stoneSchema) \ No newline at end of file +module.exports = mongooseRocks.model("Rocks", rockSchema) \ No newline at end of file diff --git a/restapi/models/User.ts b/restapi/models/User.ts index 5731db9..84f4ac0 100644 --- a/restapi/models/User.ts +++ b/restapi/models/User.ts @@ -2,8 +2,11 @@ const mongooseUsers = require("mongoose") const userSchema = mongooseUsers.Schema({ + dni: String, name: String, - email: String + email: String, + rol: Number, + password: String },{ versionKey: false } diff --git a/restapi/package.json b/restapi/package.json index 30356d2..ce41742 100644 --- a/restapi/package.json +++ b/restapi/package.json @@ -9,10 +9,12 @@ "author": "", "license": "ISC", "dependencies": { + "bcryptjs": "^2.4.3", "body-parser": "^1.19.1", "cors": "^2.8.5", "express": "^4.17.3", "express-prom-bundle": "^6.4.1", + "express-session": "^1.17.2", "express-validator": "^6.14.0", "mongoose": "^6.2.5", "prom-client": "^14.0.1" diff --git a/restapi/server.ts b/restapi/server.ts index 81ef464..1d5478e 100644 --- a/restapi/server.ts +++ b/restapi/server.ts @@ -19,6 +19,20 @@ app.use(metricsMiddleware); app.use(cors(options)); app.use(bp.json()); +let expressSession = require('express-session'); +app.use(expressSession({ + secret: 'abcdefg', + resave: true, + saveUninitialized: true, +})); +declare global{ + namespace Express{ + interface Request{ + session: typeof expressSession; + } + } +} + app.use("/api", api) app.listen(port, ():void => { diff --git a/webapp/package.json b/webapp/package.json index abb506f..b2e98a0 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -4,6 +4,10 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", + "@inrupt/lit-generated-vocab-common": "^0.3.11", + "@inrupt/solid-ui-react": "^2.7.0", + "@inrupt/vocab-common-rdf": "^1.0.3", + "@material-ui/core": "^4.12.3", "@mui/icons-material": "^5.2.5", "@mui/material": "^5.2.5", "@testing-library/jest-dom": "^5.16.1", @@ -53,9 +57,9 @@ "jest-cucumber": "^3.0.1", "jest-puppeteer": "^6.0.3", "puppeteer": "^13.0.1", + "react-scripts": "5.0.0", "start-server-and-test": "^1.14.0", "ts-jest": "^27.1.2", - "ts-node-dev": "^1.1.8", - "react-scripts": "5.0.0" + "ts-node-dev": "^1.1.8" } } diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 28a52bb..432bdd7 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react'; import Box from '@mui/material/Box'; +<<<<<<< HEAD import Link from '@mui/material/Link'; import Grid from '@mui/material/Grid'; import Container from '@mui/material/Container'; @@ -12,9 +13,22 @@ import { createTheme } from '@mui/material'; import './css/App.css'; import ResponsiveAppBar from './components/navBar'; +======= +//import Link from '@mui/material/Link'; +import Grid from '@mui/material/Grid'; +import Container from '@mui/material/Container'; +import Welcome from './components/Welcome'; +import {getUsers} from './api/api'; +>>>>>>> parent of 99783bd... Solución problemas develop import {Roca, User} from './shared/shareddtypes'; import Catalogo from './components/Catalogo'; import { ThemeProvider } from '@emotion/react'; +<<<<<<< HEAD +======= +import NavBar from './components/navBar'; +import { Link } from '@mui/material'; +//import {createData} from "./code/insertExampleData" +>>>>>>> parent of 99783bd... Solución problemas develop //import {createData} from "./code/insertExampleData" @@ -48,6 +62,7 @@ function App(): JSX.Element { }); return ( +<<<<<<< HEAD @@ -55,6 +70,15 @@ function App(): JSX.Element { +======= + + + + + + + +>>>>>>> parent of 99783bd... Solución problemas develop ); } diff --git a/webapp/src/components/navBar.tsx b/webapp/src/components/navBar.tsx index a03b9b5..9e13597 100644 --- a/webapp/src/components/navBar.tsx +++ b/webapp/src/components/navBar.tsx @@ -13,16 +13,18 @@ import Tooltip from '@mui/material/Tooltip'; import MenuItem from '@mui/material/MenuItem'; import logo from '../images/interfaz/logoRock.png'; + const pages = ['Catálogo', 'Iniciar Sesión', 'Registrarse']; -const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; +const settings = ['Perfil', 'Desconectar']; const ResponsiveAppBar = () => { const [anchorElNav, setAnchorElNav] = React.useState(null); const [anchorElUser, setAnchorElUser] = React.useState(null); - + const handleOpenNavMenu = (event: React.MouseEvent) => { setAnchorElNav(event.currentTarget); }; + const handleOpenUserMenu = (event: React.MouseEvent) => { setAnchorElUser(event.currentTarget); }; @@ -34,8 +36,6 @@ const ResponsiveAppBar = () => { const handleCloseUserMenu = () => { setAnchorElUser(null); }; - - return ( @@ -60,7 +60,7 @@ const ResponsiveAppBar = () => { onClick={handleOpenNavMenu} color="inherit" > - + { {pages.map((page) => ( diff --git a/webapp/src/components/solid-pods/GetPodAddress.tsx b/webapp/src/components/solid-pods/GetPodAddress.tsx new file mode 100644 index 0000000..7856e24 --- /dev/null +++ b/webapp/src/components/solid-pods/GetPodAddress.tsx @@ -0,0 +1,49 @@ +import React, { useState, useEffect } from 'react'; + +import Grid from "@mui/material/Grid" +import Box from "@mui/material/Box" + +import { FOAF, VCARD } from "@inrupt/vocab-common-rdf"; +import {getSolidDataset, getStringNoLocale, getThing, Thing, getUrl} from "@inrupt/solid-client"; + +type PODProps = { + webID: string; +}; + +async function infoAddress(webID: string): Promise { + let profileDocumentURI = webID.split("#")[0] + let myDataSet = await getSolidDataset(profileDocumentURI) + let profile = getThing(myDataSet, webID) + let urlAddress = getUrl(profile as Thing, VCARD.hasAddress) as string + let addressProfile = await getThing(myDataSet, urlAddress) + + let address = getStringNoLocale(addressProfile as Thing, VCARD.street_address) as string + let postalCode = getStringNoLocale(addressProfile as Thing, VCARD.postal_code) as string + let city = getStringNoLocale(addressProfile as Thing, VCARD.locality) as string + + let info = [address, postalCode, city] + + return info +} + +function GetPodAddress(props: PODProps): JSX.Element { + + const [info, setInfo] = React.useState([]); + const getInfoAddress = async () => setInfo(await infoAddress(props.webID)); + + useEffect(() => { + getInfoAddress(); + }) + + return ( + + + Dirección: {info[0]} + Codigo Postal: {info[1]} + Ciudad: {info[2]} + + + ) +} + +export default GetPodAddress; \ No newline at end of file diff --git a/webapp/src/components/solid-pods/LoginForm.tsx b/webapp/src/components/solid-pods/LoginForm.tsx new file mode 100644 index 0000000..41de5fe --- /dev/null +++ b/webapp/src/components/solid-pods/LoginForm.tsx @@ -0,0 +1,38 @@ +import { useState, useEffect } from "react"; +import { LoginButton } from "@inrupt/solid-ui-react"; +import { Button, TextField, FormGroup, Container } from "@material-ui/core"; + + +const LoginForm = () => { + const [idp, setIdp] = useState("https://inrupt.net"); + const [currentUrl, setCurrentUrl] = useState("https://localhost:3000"); + + useEffect(() => { + setCurrentUrl(window.location.href); + }, [setCurrentUrl]); + + return ( + + + setIdp(e.target.value)} + InputProps={{ + endAdornment: ( + + + + ), + }} + /> + + + ); +} + +export default LoginForm; \ No newline at end of file diff --git a/webapp/src/components/solid-pods/LoginPod.tsx b/webapp/src/components/solid-pods/LoginPod.tsx new file mode 100644 index 0000000..6505fc5 --- /dev/null +++ b/webapp/src/components/solid-pods/LoginPod.tsx @@ -0,0 +1,32 @@ +import { useState, useEffect } from 'react'; +import { SessionProvider, useSession } from "@inrupt/solid-ui-react"; +import LoginForm from "./LoginForm" +import ProfileViewer from "./ProfileViewer" + +//import {createData} from "./code/insertExampleData" + +function LoginPod(): JSX.Element { +//We use this state variable +const [isLoggedIn, setIsLoggedIn] = useState(false); + +//With this we can control the login status for solid +const { session } = useSession(); + +//We have logged in +session.onLogin(()=>{ + setIsLoggedIn(true) +}) + +//We have logged out +session.onLogout(()=>{ + setIsLoggedIn(false) +}) + + return ( + + {(!isLoggedIn) ? : } + + ) +} + +export default LoginPod; diff --git a/webapp/src/components/solid-pods/ProfileViewer.tsx b/webapp/src/components/solid-pods/ProfileViewer.tsx new file mode 100644 index 0000000..29fd4bc --- /dev/null +++ b/webapp/src/components/solid-pods/ProfileViewer.tsx @@ -0,0 +1,36 @@ +import { useSession, CombinedDataProvider, Image, LogoutButton, Text } from "@inrupt/solid-ui-react"; +import { Button, Card, CardActionArea, CardContent, Container, Typography } from "@material-ui/core"; +import { FOAF, VCARD } from "@inrupt/lit-generated-vocab-common"; +import GetPodAddress from './GetPodAddress'; + +const ProfileViewer = () => { + const { session } = useSession(); + + return ( + + {session.info.webId ? ( + + + + + + + + + + + ): null } + + + + + + + ); +} + +export default ProfileViewer \ No newline at end of file diff --git a/webapp/src/views/Login.tsx b/webapp/src/views/Login.tsx new file mode 100644 index 0000000..4156b73 --- /dev/null +++ b/webapp/src/views/Login.tsx @@ -0,0 +1,112 @@ +import React, { useState } from 'react'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import "./logginForm.css" +import Snackbar from '@mui/material/Snackbar'; +import Alert from '@mui/material/Alert'; +import type { AlertColor } from '@mui/material/Alert'; +import Box from '@mui/material/Box'; +import logo from '../../logoAsturShop.png' +import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; +import NavBar from "../components/navBar"; +import {useNavigate} from 'react-router-dom'; + +type EmailFormProps = { + OnUserListChange: () => void; +} + +type NotificationType = { + severity: AlertColor, + message: string; +} + +function EmailForm(): JSX.Element { + + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const [notificationStatus, setNotificationStatus] = useState(false); + const [notification, setNotification] = useState({severity:'success',message:''}); + + const navigate = useNavigate(); + + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + //let result:boolean = await checkUser(username,password); + let result:boolean = true; + if (result){ + setNotificationStatus(true); + setNotification({ + severity:'success', + message:'You have been registered in the system!' + }); + navigate("/inicio"); + //Notify the change to the parent component + } + else{ + setNotificationStatus(true); + setNotification({ + severity:'error', + message:'There\'s been an error in the register proccess.' + }); + } + } + + return ( + <> + +



+
+
+ +
+

Usuario:

+
+ + setUsername(e.target.value)} + sx={{ my: 2 }} + /> +
+
+ +

Contraseña:

+ setPassword(e.target.value)} + sx={{ my: 2 }} + /> +
+ +
+

+ +

+ +
+
+ +
+ +
+ {setNotificationStatus(false)}}> + + {notification.message} + + + + ); +} + +export default EmailForm; \ No newline at end of file diff --git a/webapp/src/views/Register.tsx b/webapp/src/views/Register.tsx new file mode 100644 index 0000000..9e61b37 --- /dev/null +++ b/webapp/src/views/Register.tsx @@ -0,0 +1,125 @@ +import React, { useState } from 'react'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import "./registro.css" +import Snackbar from '@mui/material/Snackbar'; +import Alert from '@mui/material/Alert'; +import type { AlertColor } from '@mui/material/Alert'; +import Box from '@mui/material/Box'; +import {useNavigate} from 'react-router-dom'; +import NavBar from "../components/navBar"; + +type RegisterProps = { + OnUserListChange: () => void; +} + +type NotificationType = { + severity: AlertColor, + message: string; +} + + +function RegisterForm(): JSX.Element { + + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [email, setEmail] = useState(''); + + + const [notificationStatus, setNotificationStatus] = useState(false); + const [notification, setNotification] = useState({severity:'success',message:''}); + + const navigate = useNavigate(); + + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + // let result:boolean = await addUser({email,password,confirmPassword}); + let result = true; + console.log({email}); + console.log({password}); + console.log({confirmPassword}) + + + if (result){ + console.log("User Registered Succesfully"); + setNotificationStatus(true); + setNotification({ + severity:'success', + message:'You have been registered in the system!' + }); + //Notify the change to the parent component + navigate("/loggin"); + } + else{ + setNotificationStatus(true); + setNotification({ + severity:'error', + message:'There\'s been an error in the register proccess.' + }); + } + } + return ( + <> + +

Registrarse

+ +
+
+
+ +
+ + setEmail(e.target.value)} + sx={{ my: 2 }} + + /> +
+ +
+ + setPassword(e.target.value)} + sx={{ my: 2 }} + + /> +
+
+ + setConfirmPassword(e.target.value)} + sx={{ my: 2 }} + + /> + +
+ +
+ +
+
+ + + ); +} + + export default RegisterForm; \ No newline at end of file From 6e272be2254305e32f73bf25465d902b1db30201 Mon Sep 17 00:00:00 2001 From: Valen Date: Mon, 4 Apr 2022 12:21:14 +0200 Subject: [PATCH 2/6] .env --- restapi/.env | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 restapi/.env diff --git a/restapi/.env b/restapi/.env new file mode 100644 index 0000000..15687e9 --- /dev/null +++ b/restapi/.env @@ -0,0 +1,3 @@ +DB_CONN_STRING="mongodb+srv://dede_es1a:1234@dede-es1a.shdhg.mongodb.net/myFirstDatabase?retryWrites=true&w=majority" +DB_NAME="dede-es1a" +DB_COLLECTION_NAME="myFirstDatabase" \ No newline at end of file From e9b1d93e92973bc7917f85dbed2d9896f5e23055 Mon Sep 17 00:00:00 2001 From: Valen Date: Mon, 4 Apr 2022 12:24:51 +0200 Subject: [PATCH 3/6] nav bars register login --- webapp/src/views/Login.tsx | 2 -- webapp/src/views/Register.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/webapp/src/views/Login.tsx b/webapp/src/views/Login.tsx index 4156b73..ecb6db8 100644 --- a/webapp/src/views/Login.tsx +++ b/webapp/src/views/Login.tsx @@ -8,7 +8,6 @@ import type { AlertColor } from '@mui/material/Alert'; import Box from '@mui/material/Box'; import logo from '../../logoAsturShop.png' import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; -import NavBar from "../components/navBar"; import {useNavigate} from 'react-router-dom'; type EmailFormProps = { @@ -55,7 +54,6 @@ function EmailForm(): JSX.Element { return ( <> -



diff --git a/webapp/src/views/Register.tsx b/webapp/src/views/Register.tsx index 9e61b37..4a625bc 100644 --- a/webapp/src/views/Register.tsx +++ b/webapp/src/views/Register.tsx @@ -7,7 +7,6 @@ import Alert from '@mui/material/Alert'; import type { AlertColor } from '@mui/material/Alert'; import Box from '@mui/material/Box'; import {useNavigate} from 'react-router-dom'; -import NavBar from "../components/navBar"; type RegisterProps = { OnUserListChange: () => void; @@ -61,7 +60,6 @@ function RegisterForm(): JSX.Element { } return ( <> -

Registrarse

From 1d1c33fd2611acd05cda6847660391f587df7310 Mon Sep 17 00:00:00 2001 From: Valen Date: Mon, 4 Apr 2022 12:27:47 +0200 Subject: [PATCH 4/6] correccion merge --- restapi/api.ts | 29 --------------------------- restapi/controllers/RockController.ts | 15 -------------- 2 files changed, 44 deletions(-) diff --git a/restapi/api.ts b/restapi/api.ts index 8d977f8..ae2e6f2 100644 --- a/restapi/api.ts +++ b/restapi/api.ts @@ -6,38 +6,10 @@ import {findUsers, addUser, deleteUser, loginUser, logout} from './controllers/U const User = require("./models/User"); const Rock = require("./models/Rock"); -import {findRocks, addRock, deleteRock, findRocksSedimentary, findRocksMetamorphic, findRocksFiery} from './controllers/RockController'; -import {findUsers, addUser, deleteUser, loginUser, logout} from './controllers/UserController'; const api:Router = express.Router() const mongoose = require("mongoose"); -<<<<<<< HEAD -//Methods for control users from the app -api.get("/users/list", findUsers); - -api.post("/users/add", addUser); - -api.post("/users/delete", deleteUser); - -api.post("/users/login", loginUser); - -api.get("/users/logout", logout); - - -//Methods for product of the app -api.get("/rocks/list", findRocks); - -api.get("/rocks/list/sedimentary", findRocksSedimentary); - -api.get("/rocks/list/metamorphic", findRocksMetamorphic); - -api.get("/rocks/list/fiery", findRocksFiery); - -api.post("/rocks/add", addRock); - -api.post("/rocks/delete", deleteRock); -======= interface User { name: string; email: string; @@ -68,7 +40,6 @@ api.post( return res.sendStatus(200); } ); ->>>>>>> parent of 99783bd... Solución problemas develop api.post("/users/login", loginUser); diff --git a/restapi/controllers/RockController.ts b/restapi/controllers/RockController.ts index ee790b2..36493bb 100644 --- a/restapi/controllers/RockController.ts +++ b/restapi/controllers/RockController.ts @@ -27,21 +27,6 @@ export const findRocksMetamorphic = async (req:Request, res:Response) => { res.send(rocks); }; -export const findRocksSedimentary = async (req:Request, res:Response) => { - const rocks = await Rock.find({type : "sedimentaria"}) - res.send(rocks).json(); -}; - -export const findRocksFiery= async (req:Request, res:Response) => { - const rocks = await Rock.find({type : "ígnea"}) - res.send(rocks).json(); -}; - -export const findRocksMetamorphic = async (req:Request, res:Response) => { - const rocks = await Rock.find({type : "metamórfica"}) - res.send(rocks).json(); -}; - export const addRock = async (req:Request, res:Response): Promise => { let rockId = req.body.rockId; From f63c1e6c65fcda0b9646cabce11e2bb0ff9293c8 Mon Sep 17 00:00:00 2001 From: Valen Date: Mon, 4 Apr 2022 12:38:45 +0200 Subject: [PATCH 5/6] Arreglo --- webapp/src/css/App.css | 1 + webapp/src/views/Login.tsx | 1 - webapp/src/views/Register.tsx | 1 - 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/webapp/src/css/App.css b/webapp/src/css/App.css index 423e1b6..c476d11 100644 --- a/webapp/src/css/App.css +++ b/webapp/src/css/App.css @@ -67,3 +67,4 @@ header { @import "Catalog.css"; @import "Showcases.css"; @import "Product.css"; +@import "LoginRegister.css" \ No newline at end of file diff --git a/webapp/src/views/Login.tsx b/webapp/src/views/Login.tsx index e63233b..016ae0a 100644 --- a/webapp/src/views/Login.tsx +++ b/webapp/src/views/Login.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; -import "./logginForm.css" import Snackbar from '@mui/material/Snackbar'; import Alert from '@mui/material/Alert'; import type { AlertColor } from '@mui/material/Alert'; diff --git a/webapp/src/views/Register.tsx b/webapp/src/views/Register.tsx index 89f6d26..362ccb1 100644 --- a/webapp/src/views/Register.tsx +++ b/webapp/src/views/Register.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; -import "./registro.css" import Snackbar from '@mui/material/Snackbar'; import Alert from '@mui/material/Alert'; import type { AlertColor } from '@mui/material/Alert'; From 67e6a72228d7fe62c0d790bb9810f43d9e10c79c Mon Sep 17 00:00:00 2001 From: Valen Date: Mon, 4 Apr 2022 14:55:39 +0200 Subject: [PATCH 6/6] Cambios en el css de home y catalogo. Gran mejora de adaptabilidad --- webapp/src/App.tsx | 7 ++- webapp/src/components/Product.tsx | 12 ++--- webapp/src/components/Showcase.tsx | 7 ++- webapp/src/components/Welcome.tsx | 12 ++--- webapp/src/css/App.css | 74 ++++++++---------------------- webapp/src/css/Catalog.css | 19 ++------ webapp/src/css/Product.css | 30 ++++++++---- webapp/src/css/Showcases.css | 37 +++++++++------ webapp/src/css/SpinningLogo.css | 21 +++++++++ 9 files changed, 111 insertions(+), 108 deletions(-) create mode 100644 webapp/src/css/SpinningLogo.css diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index ca98278..647734e 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -10,6 +10,7 @@ import { theme } from "./code/Theme"; import LogIn from './views/Login'; import Register from './views/Register'; import NavBar from './components/NavigationBar'; +import { Container } from '@mui/material'; //import {createData} from "./code/insertExampleData" @@ -27,9 +28,10 @@ function App(): JSX.Element { },[]); return ( - + + } /> } /> @@ -37,8 +39,9 @@ function App(): JSX.Element { }/> }/> + - + ); diff --git a/webapp/src/components/Product.tsx b/webapp/src/components/Product.tsx index 4eef154..e128e5b 100644 --- a/webapp/src/components/Product.tsx +++ b/webapp/src/components/Product.tsx @@ -24,18 +24,16 @@ function Product(product: ProductProps): JSX.Element { {product.product!==null ? <> - - - - +

{"precio: "+product.product.price+"€"}

+

{"tipo: "+ product.product.type}

+

{"mohs: "+ product.product.mohsHardness}

+

{"densidad: "+product.product.density}

: <> }
- +
); } diff --git a/webapp/src/components/Showcase.tsx b/webapp/src/components/Showcase.tsx index d5c86c9..76c1d99 100644 --- a/webapp/src/components/Showcase.tsx +++ b/webapp/src/components/Showcase.tsx @@ -1,4 +1,4 @@ -import { ListItemText } from '@mui/material'; +import { AppBar, ListItemText } from '@mui/material'; import { useState } from 'react'; import {Rock} from '../shared/shareddtypes'; import Product from './Product'; @@ -16,7 +16,9 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element { return ( <>
- + +

{prefilteredbox.name}

+
{ prefilteredbox.rocks.map((_,product)=>{ @@ -26,6 +28,7 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element { }) }
+
); diff --git a/webapp/src/components/Welcome.tsx b/webapp/src/components/Welcome.tsx index 63251ed..18ca905 100644 --- a/webapp/src/components/Welcome.tsx +++ b/webapp/src/components/Welcome.tsx @@ -9,15 +9,13 @@ function Welcome(): JSX.Element { return ( <> +
+ logo +
- - - logo - -
+
-
- +
); } diff --git a/webapp/src/css/App.css b/webapp/src/css/App.css index c476d11..abb5b22 100644 --- a/webapp/src/css/App.css +++ b/webapp/src/css/App.css @@ -1,55 +1,7 @@ -.App { - text-align: center; - background-color: #acb7be; -} - -body { - text-align: center; -} -header { - text-align: left; -} -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} .principal { - padding-top: 5px; -} -.titulo { - font-size: 38px; - padding-top: 25px; -} -.logoClass { - padding-top: 0.5em; -} -.appBar { - background-color: brown; -} -.App-header { - background-color: #acb7be; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: rgb(192, 157, 40); -} - -.App-link { - color: #e0c66f; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + margin-top: 7em; + background-color: rgb(230, 237, 241); } body { @@ -60,11 +12,25 @@ header { background-color: #f3af2f; } -#logoRock { - width: 20%; +@media only screen and (max-width: 1000px) { + body { + font-size: 12px; + } + .btnBuy{ + font-size: 12px !important; + } +} +@media only screen and (max-width: 800px) { + body { + font-size: 8px; + } + .btnBuy{ + font-size: 8px !important; + } + } - @import "Catalog.css"; @import "Showcases.css"; @import "Product.css"; -@import "LoginRegister.css" \ No newline at end of file +@import "LoginRegister.css"; +@import "SpinningLogo.css"; \ No newline at end of file diff --git a/webapp/src/css/Catalog.css b/webapp/src/css/Catalog.css index e7a3970..d7585c4 100644 --- a/webapp/src/css/Catalog.css +++ b/webapp/src/css/Catalog.css @@ -1,19 +1,8 @@ - #catalog { - border-radius: 1em; - background-color: rgb(241, 248, 255); - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - padding: 1em; - width: 75%; - left: 11%; - margin-top: 3em; + display: grid; + grid-template-columns: repeat(4,1fr); + padding-bottom: 5em; + } - - - -#catalog .product{ - margin-bottom: 6em; /* Superior margin for products inside de catalog */ -} diff --git a/webapp/src/css/Product.css b/webapp/src/css/Product.css index 46264ba..0fdfbd2 100644 --- a/webapp/src/css/Product.css +++ b/webapp/src/css/Product.css @@ -2,30 +2,44 @@ padding: 1em; margin-bottom: 3em; text-align: center; - text-rendering: optimizeSpeed; + height: 100%; } .infoProduct { - width: 100%; - height: 75%; display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2,1fr); + grid-template-rows: repeat(2,1fr); + + gap: 0.3em; } .imageProductContainer { - height: 7em; + height: 50%; display: flex; justify-content: center; align-items: center; - border: #f3af2f 0.2em dashed; - border-radius: 0.3em; + border-radius: 1em; + +} +.imageProductContainer img{ + border-radius: 1em; + margin: 1em; + + } + + .datoProduct { background-color: #ced9ee; padding: 0.3em; border-radius: 0.3em; border: rgb(230, 237, 241) 0.15em solid; - + height: 80%; display: flex; justify-content: center; align-items: center; + } +.btnBuy{ + position: relative; + top:2em !important; +} \ No newline at end of file diff --git a/webapp/src/css/Showcases.css b/webapp/src/css/Showcases.css index 6ba353c..fa69fca 100644 --- a/webapp/src/css/Showcases.css +++ b/webapp/src/css/Showcases.css @@ -3,29 +3,40 @@ background-color: #d8e3f7; border-radius: 1em; display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2,1fr); + grid-template-rows: repeat(2,1fr); + position: relative; + top: 5em; + } #showcases { max-width: max-content; - border: #f3af2f 0.5em solid; + border-radius: 1em; - position: relative; - right: 15%; - width: 125%; + gap: 1em; + padding: 1em; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .titleOfShowcase { - text-shadow: 2px 2px 8px #91b6fc; - background-color: #f3af2f; + padding-left: 1em; + margin-bottom: 0.8em; + font-size: 1.5em; + height: 3em; + + position: relative; + top: 4em; } -.showcase > .product > .infoProduct { - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 0.2em; - column-gap: 1em; +@media only screen and (max-width: 1000px) { + .btnBuy{ + font-size: 12px !important; + } } +@media only screen and (max-width: 800px) { + .btnBuy{ + font-size: 8px !important; + } +} \ No newline at end of file diff --git a/webapp/src/css/SpinningLogo.css b/webapp/src/css/SpinningLogo.css new file mode 100644 index 0000000..634bcf9 --- /dev/null +++ b/webapp/src/css/SpinningLogo.css @@ -0,0 +1,21 @@ +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} +#App-logo-container { + padding-top: 4em; + padding-bottom: 4em; + text-align: center; +} +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +#logoRock { + width: 20%; +}