test added

webapp/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+  }
+

webapp/package.json

@@ -2,6 +2,7 @@
   "name": "webapp",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@greatsumini/react-facebook-login": "^3.3.3",
     "@react-oauth/google": "^0.11.1",

webapp/src/Todo.js

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
+import Form from 'react-bootstrap/Form';
+
+import Button from 'react-bootstrap/Button';
+import Spinner from 'react-bootstrap/Spinner';
+import Alert from 'react-bootstrap/Alert';
+
+
+
+
+
+export default function Todo() {
+
+
+
+    const [email,setEmail] = useState("")
+    const [password,setPassword] = useState("")
+
+    const [validated, setValidated] = useState(false)
+
+    const [loading, setLoading] = useState(false)
+    const [feedBack, setFeedback] = useState()
+
+
+
+
+
+
+
+
+
+
+
+    return (
+        <div className="container-fluid" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+            <div className="blurEffect" style={{ width: '500px' }}>
+                <h1 className="mb-4" style={{textAlign:'center'}}>LOGIN</h1>
+                <Form noValidate validated={validated} >
+
+                    <FloatingLabel
+                        controlId="floatingInput"
+                        label="Email address"
+                        className="mb-3"
+                        style={{ fontSize: 'small' }}
+                    >
+                        <Form.Control onChange={(e)=>setEmail(e.target.value)} value={email} type="email" size="sm" placeholder="[email protected]" required />
+                        <Form.Control.Feedback type="invalid">Please put a valid email!</Form.Control.Feedback>
+                    </FloatingLabel>
+
+                    <FloatingLabel
+                        controlId="floatingPassword"
+                        label="Password"
+                        // className="mb-3"
+                        style={{ fontSize: 'small' }}
+                    >
+                        <Form.Control required  onChange={(e)=>setPassword(e.target.value)} value={password}  type="password" placeholder="Password" />
+                        <Form.Control.Feedback type="invalid">Password cann't be empty!</Form.Control.Feedback>
+                    </FloatingLabel>
+
+
+                <div style={{textAlign:'left'}}>
+                <a href='/resetpassword' style={{fontSize:12,}}>
+                            Forgot your password?
+                            </a>               
+                </div>
+
+                {feedBack && <Alert onClose={()=> setFeedback("") } variant="danger" className=" text-center" dismissible >{feedBack}</Alert> }
+
+                <div style={{ display: 'flex', flexDirection: 'column',marginTop: '50px'}}>
+                    <Button  type="submit" className="mb-3 task-button">
+                    {loading? (<Spinner color="gray" animation="border" />) :"Login" }
+                    </Button>
+                    {/* <hr className="hr-lines"/>
+                    <p>OR</p> */}
+                    <p className="hr-line"><span>OR</span></p>
+
+
+
+                    {/* <Button type="submit" className="mb-3 task-button" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                        <div style={{ flex: 1 / 3, textAlign: 'start' }}>
+                            <i className="bi bi-google"></i>
+                        </div>
+                        <div style={{ flex: 2 / 3, textAlign: 'start' }}>
+                            Login with Google
+                        </div>
+
+
+                    </Button> */}
+                    {/* <Button className="mb-3 task-button" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                        <div style={{ flex: 1 / 3, textAlign: 'start' }}>
+                            <i className="bi bi-facebook"></i>
+                        </div>
+                        <div style={{ flex: 2 / 3, textAlign: 'start' }}>
+                            Login with Facebook
+                        </div>
+                    </Button> */}
+
+
+
+
+
+                    <p className="mb-3" style={{ fontSize: '12', fontWeight: 'lighter',textAlign:'center'}}>
+                        If you haven't registered yet? <a href='/signup'><span>Register now</span></a>
+                    </p>
+                </div>
+                </Form>
+
+
+
+
+
+            </div>
+        </div >
+
+    )
+}

webapp/src/__tests__/Login.test.js

@@ -0,0 +1,3 @@
+test('Login test ', () => {
+  expect(true).toBe(true)
+})

webapp/src/__tests__/Todo.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import Todo from '../Todo';
+
+test('renders learn react link', () => {
+  render(<Todo />);
+//   const linkElement = screen.getByText(/learn react/i);
+//   expect(linkElement).toBeInTheDocument();
+});

webapp/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';