auth_portail/forms.html at main · ScientificClubofESI/auth_portail · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invite Link Generator</title>
    <style>
        .responsive-box {
            padding: 2%;
            border-radius: 20px;
            background-color: rgb(235, 247, 251);
            width: 30%;
        }

        @media (max-width: 768px) {
            .responsive-box {
                width: 90%;
            }
        }

        .loading {
            display: none;
            margin-top: 20px;
            font-weight: bold;
            color: #F978DE;
        }
    </style>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:[email protected]&display=swap" rel="stylesheet">
<body style="background-image: url('./assets/bg.png'); background-size: cover;
font-family:'Quicksand'; margin-top:15%;">
   <center style="display: flex; align-items:center; justify-content:center" >
    <div class="responsive-box">
        <h1>Join us & Get <br/> Your Slack Invitation</h1>
        <div style="display: flex; justify-content:flex-start;">
            You can use the personal link only once!
        </div>
        <form id="emailForm" style="margin-top: 10%;">
            <label for="email" style="display: flex; justify-content:flex-start">Enter your Email:</label>
            <div style="display: flex; justify-content:flex-start; margin-top:5px">
                <input type="email" id="email" name="email" style="width: 100%; height:20px" required>
            </div>
            <div>
                <button style="padding: 12px; margin:40px; background-color:#F978DE; border:none; color:white; font-weight:bold; border-radius: 10px;" type="submit">Get Invite Link</button>
            </div>
        </form>
        <div class="loading" id="loading">Loading... Please wait</div>
        <div id="result"></div>
    </div>
   </center>

   <script>
    document.getElementById('emailForm').addEventListener('submit', async (event) => {
        event.preventDefault();
        const email = document.getElementById('email').value;
        const loadingDiv = document.getElementById('loading');
        const resultDiv = document.getElementById('result');

        // Show loading message
        loadingDiv.style.display = 'block';
        resultDiv.innerHTML = '';

        // Call the backend API to get the invite link
        const response = await fetch(`https://onetime-link-generator.onrender.com/get-invite-link?email=${encodeURIComponent(email)}`);
        const data = await response.json();

        // Hide loading message
        loadingDiv.style.display = 'none';

        // Display the result
        if (response.ok) {
            resultDiv.innerHTML = `<a href="${data.invite_link}">Click on your invite link</a>`;
        } else {
            resultDiv.innerHTML = `<p>${data.message}</p>`;
        }
    });
   </script>
</body>
</html>