Merge branch 'frontend' into despliegue-aws

docs/01_introduction_and_goals.adoc

@@ -34,12 +34,12 @@ The website must mainly meet the following requirements:
 
 Given that those who will habitually use the web will be the users and the administrator, the main goals would be:
 
-* Intuitive usability in the case of both the administrator and the user.
-
-* The products of the store must be constantly updated (new products and new stock).
-
-* All information regarding the data of users and their baskets must be private.
-
+[options="header",cols="1,2"]
+|===
+| Quality | Motivation
+| Usability | The application must be intiutive for both administrator and users.
+| Availability | The application must be available all time for the users to buy products.
+| Privacy and Security | All information regarding the data of users and their carts must be private.
 
 
 === Stakeholders

docs/02_architecture_constraints.adoc

@@ -1,8 +1,9 @@
 [[section-architecture-constraints]]
 == Architectural constraints
 
-=== Technical restrictions
+=== Technical constraints
 
+[options="header",cols="1,2"]
 |===
 |Requirement|Explanation
 |React|Framework oriented to the Frontend of the application.
@@ -12,8 +13,9 @@
 |Testing|Automatic and manual tests on the code.
 |===
 
-=== Organizational restrictions
+=== Organizational constraints
 
+[options="header",cols="1,2"]
 |===
 |Requirement|Explanation
 |GitHub|Git version control system with additional tools.
@@ -24,6 +26,7 @@
 
 === Convections
 
+[options="header",cols="1,2"]
 |===
 |Requirement|Explanation
 |Arc42|To develop the documentation we will follow the Arc42 model.

docs/03_system_scope_and_context.adoc

@@ -48,6 +48,7 @@ Mongoose <.. MongoDB : get products
 
 The system has SOLID architecture in order to respect the privacy of each user's data, this is achieved through the use of PODS to store the user's personal data. The programming language used in the application is Typescript and React is used as the main library to facilitate the development of the application.A certain number of apis were also used to access certain resources.
 
+[options="header",cols="1,2"]
 |===
 | Technology         | Definition
 | SOLID    | Architecture to facilitate code cleanliness and maintainability

docs/04_solution_strategy.adoc

@@ -18,6 +18,8 @@ These are the technologies we have decided to use:
 * Postman: Software to test APIs.
 * Supertest and Jest: Modules to test our application.
 * Cloudinary: Service that provides an API to upload and download the images of the products.
+* Nodemailer: API that allows us to send emails to the user with the details of the orders.
+* Shippo: Provides an API to calculate the shipping costs and the estimated day of arrival of the orders.
 
 === Architectural and design patterns
 
@@ -29,7 +31,12 @@ from the logic and the user interface.
 In order to achieve the proposed objectives we have decided to distribute the work in such a way that part of the group focuses more on
 the backend and the other one on the frontend.
 We have taken this decision since all the technologies to be used are new for all of us,
-and we believe that it will be easier to achieve the objectives if we focus mostly on one part
+and we believe that it will be easier to achieve the objectives if we focus mostly on one part.
+
+* Having half of the group focused on frontend, we believe that it will be easier to to achive the usability goal.
+* To achive the availability goal, we will have the application deployed in Amazon Web Services and it will be accesible from everywhere.
+* Privacy and Security are another goals that we are focused on. To achive this, the users must have a username and password to access to the application, 
+and we are going to use PODs to get the address from the user, so we are not storing any personal information apart from the name, email and DNI.
 
 === Organizational decisions
 

docs/07_deployment_view.adoc

@@ -8,18 +8,27 @@ To use our online shop you only need a mobile device (mobile phone, tablet...) o
 [plantuml,"DeploymentView",png]
 ----
 @startuml
-node "Server" {
-    [dede]
+allowmixing
+Rectangle Server{
+    package restapi{
+       class userController
+       class userRoute
+    }
+    package webapp{
+       class userService
+       class App
+    }
  }
 database MongoDB
-rectangle Mobile
-rectangle Computer
+rectangle Device
 rectangle PODs
 
-Mobile --> Server
-Computer --> Server
-[dede] <..> MongoDB
-[dede] <..> PODs
+App --> userService
+userService <..> userRoute : getAddress()
+userRoute--> userController
+Device --> webapp
+restapi <..> MongoDB
+userController <..> PODs : readAddress()
 @enduml
 ----
 
@@ -31,4 +40,4 @@ Mapping of Building Blocks to Infrastructure::
 | Server |  Is in charge of storing and supporting our application
 | MongoDB |  Is the database in which we will store the data of our application
 | PODs |  Each user will have ono of this and personal data will be stored in it
-|===
+|===

docs/09_design_decisions.adoc

@@ -3,18 +3,25 @@
 
 This section shows the different design decisions presented in a table sorted by importance with their pros and cons.
 
+[options="header",cols="1,2,3,4"]
 |===
 |Decision|Pros|Cons|Link
 |MongoDB|Database that allows to modify data in a more flexible way|No transactions and no atomicity|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #01]
 |MERN|Allows the parts of the project to be unified in a simpler way|Uses new technologies for team members|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #02]
 |mongoose|API that facilitates the connection to MongoDB|Never used|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #03]
 |AWS|Platform that enables deployment of Docker images|Problems related to downloading images from the virtual machine|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #07]
 |axios|API allowing requests to be made to back-end from front-end|Different response times for requests depending on the amount of data to be processed|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #04]
-|cloudinary|Host that stores the product images for free|We have never worked with an image processing API.|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #06]
+|cloudinary|Host that stores the product images for free|We have never worked with an image processing API|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #06]
 |Cluster for tests|Allows testing to be performed in a more secure manner as no application data is being worked on|Increased number of connections and keys|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #08]
+|nodemailer|It allows us to send emails from different hosts such as gmail, outlook...|We have never worked with an email delivery API.|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #09]
+|react-toastify|It allows you to create visual notifications in react in a simple way|We have never worked with this library|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #10]
+|react-client-session|A simple object to manage client session data in a React app.|We have never worked with the user session on the web|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #11]
+|react-router-dom|Library that allows to implement routes dynamically|Learn how to use this library to create application routes and links to routes|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #12]
+|shippo|API that automatically calculates shipping costs in a simple way|Learn how to use the API and how to pass the address of a POD to it|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #13]
 |===
 
 The rejected decisions are shown below.
+[options="header",cols="1,2,3,4"]
 |===
 |Decision|Pros|Cons|Link
 |Heroku|Allows projects to be deployed free of charge|Difficulties in deploying multi-repository and Docker images|https://github.com/Arquisoft/dede_es4a/wiki/Decisiones-arquitect%C3%B3nicas[DA #05]

docs/12_glossary.adoc

@@ -19,6 +19,8 @@
 |Acceptance testing|Acceptance testing is a test conducted to determine if the requirements of a specification or contract are met.
 |ReactSession| Store the data throughout the session and move the data between components.
 |react-toastify| Allows the creation of notifications for the application.
+|react-router-dom| Allows the creation of routes for the application.
+|mui| Library of React components.
 |shippo|API for calculating shipping costs from the USA with different parcel carriers.
 |nodemailer|Module for node.js that allows sending emails from different hosts such as gmail, outlook...
 |===

restapi/middlewares/validators.ts

@@ -37,7 +37,7 @@ export const validateSignUp = [
     (req: Request, res: Response, next : NextFunction) => {
         const errors = validationResult(req);
         if(!errors.isEmpty())
-            return res.status(400).json({ errors: errors.array() });
+            return res.status(423).json({ errors: errors.array()[0], msg: errors.array()[0].msg });
 
         next();
     }

webapp/src/components/Cart/Address.tsx

@@ -65,7 +65,7 @@ const Address = () => {
         const response = await orderService.getShippingDetails(user.username,address,user.token);
         if (response.status === 200){
             order.shippingCost=response.data.amount;
-            setCost(String(response.data.amount)+"€");
+            setCost(String(response.data.amount)+"$");
 
             var today = new Date(Date.now());
             var date = addDays(today,response.data.estimated_days);

webapp/src/components/Cart/Cart.tsx

@@ -73,7 +73,7 @@ const Carrito = (props: Products) => {
               </div>
         )})}
       </div>
-      <h2>Total: {price}€</h2>
+      <h2>Total: {price}$</h2>
       <button className="btn btn-primary" onClick={()=>createOrder()} disabled={props.products.length===0}>Finalize order</button>
     </div>
   )

webapp/src/components/Cart/Payment.tsx

@@ -74,11 +74,16 @@ const Payment = () => {
             toast.error("code can only contain numbers");
             return false;
         }
+        if (payment.code.length!=16){
+            toast.error("creditcard code length must be 16");
+            return false;
+        }
         if (isNaN(Number(payment.cvv))){
             toast.error("cvv can only contain numbers");
             return false;
-        }else if(payment.cvv.length!==3){
-            toast.error("cvv format is wrong");
+        }
+        if(payment.cvv.length!==3){
+            toast.error("cvv length must be 3");
             return false;
         }
         return true;

webapp/src/components/Order/Order.tsx

@@ -47,7 +47,7 @@ const Order = () => {
         )})}
         </ol>
       </div>
-      <h2>Total: {order?.totalPrice}€</h2>
+      <h2>Total: {order?.totalPrice}$</h2>
     </div>
   )
 }

webapp/src/components/Productos/ProductoDeleteItem.tsx

@@ -32,7 +32,7 @@ const ProductoDeleteItem = ({producto}: Props) => {
                     await productService.deleteProducto(user.username, user.token, producto);
                     toast.success("Succesfully deleted");
                     //window.location.reload();
-                    window.location.assign("/deleteProduct")
+                    window.location.assign("/");
                 } catch (error) {
                     toast.error("Error at deleting");
                 }

webapp/src/components/Users/Login.tsx

@@ -37,6 +37,8 @@ const Login = () => {
                     console.log(user)
                     toast.success("Welcome back " + ReactSession.get("user").username);
                     navigate('/');
+                }else{ 
+                    setUser(initialState);
                 }
             } catch (error) {
                 setUser(initialState);

webapp/src/components/Users/Register.tsx

@@ -35,9 +35,13 @@ const Register = () => {
         }
         else {
             try {
-                await userService.createNewUser(user);
-                toast.success("Succesfully registered");
-                navigate('/login');
+                const res = await userService.createNewUser(user);
+                if(res.status === 200){
+                    toast.success("Succesfully registered");
+                    navigate('/login');
+                }else{  
+                    setUser(initialState);
+                }
             } catch (error) {
                 setUser(initialState);
             }