MovieMo/Home.jsx at main · cocodev1/MovieMo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { useState } from "react";
import Header from "./Header";
import { useNavigate } from 'react-router-dom';
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import { BACKEND } from "./src/const";


export default function Home() {


    const navigate = useNavigate()

    const [show, setShow] = useState(false)
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const login = async () => {
        try {
            const res = await fetch(`${BACKEND}/user`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    email: email,
                    password: password
                })
            })
            if(res.status == 500) {
                console.log("User already exists")
            }
        } catch(e) {
            console.log("User exist", e)
        }
        localStorage.setItem('email', email)
        setShow(false)
        navigate('/discover')
    }

    return (
        <>
        <Header />
        <div style={{
            backgroundImage: 'url(https://raw.githubusercontent.com/mc2076/moviemosaic/main/american-movie-posters-z0puq43u0qbtr6j2.webp)',
            height: '93.2vh',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            backgroundBlendMode: 'multiply'}}>
            <div className="big-home justify-content-center">
                <div className="col-md-12 text-center">
                    <h1  class="mb-4" style={{
                        fontSize: '3.5rem',
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis'
                    }}>Welcome to Movie Mosaic!</h1>
                    <p  className="big-home" style={{
                        fontSize: '2rem'
                    }}> Let us help you find the movie you are looking for.</p>
                    <p>  </p>
                    <p>  </p>
                    <button type="button" className="btn btn-primary btn-lg" onClick={() => setShow(true)} data-bs-theme={localStorage.getItem('theme')}>Get Started</button>
                </div>
            </div>
            <Modal show={show} onHide={() => setShow(false)} data-bs-theme={localStorage.getItem('theme')}>
                   <Modal.Header closeButton data-bs-theme={localStorage.getItem('theme')} style={{...(localStorage.getItem('theme') == 'dark' && {color: "#fff"})}}>
                          <Modal.Title>Login</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>Email</p>
                        <input type="email" onChange={e => setEmail(e.target.value)} />
                        <p>Password</p>
                        <input type="password" onChange={e => setPassword(e.target.value)}/>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="primary" onClick={login}>
                            Login
                        </Button>
                    </Modal.Footer>

        </Modal>
        </div>

        </>
    )
}