File size: 3,413 Bytes
0c6c1fb
 
 
 
 
 
dc1083b
47fe473
0c6c1fb
fdb8d32
0c6c1fb
fdb8d32
 
 
 
f1808d6
 
68ed63e
 
0c6c1fb
03d6d1a
 
13ebb53
af04874
 
 
 
 
 
 
 
 
 
 
 
 
 
d338b03
0ddeb2c
c7fb6c1
a0b5637
13ebb53
554f8be
293e7da
f1808d6
0894c99
dd3d3fb
 
 
dd7a7a0
 
c7fb6c1
91b073c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a0b5637
337ce49
91b073c
32c8e97
f6929f2
32c8e97
 
 
 
 
 
 
 
 
f6929f2
32c8e97
 
 
f6929f2
32c8e97
f6929f2
32c8e97
f6929f2
32c8e97
 
 
 
91b073c
dd7a7a0
 
0c6c1fb
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link rel="stylesheet" type="text/css" href="/static/style.css"> <!-- Add this line for your CSS -->

</head>
  
<body>
  <footer>
        <!-- Footer content -->
        <p>Copyright © Your Website</p>
    </footer>
    <div class="background-container">
        <div class="color-overlay"></div>
        
  
    <h1>Register</h1>
      <!-- Add this inside your register.html where appropriate -->
<a href="{{ google_oauth_url }}">Register with Google</a>
    <form action="/register" method="post" id="registration-form">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>
        
        <label for="confirm_password">Confirm Password:</label>
        <input type="password" id="confirm_password" name="confirm_password" required><br><br>
        
                <!-- Hidden field for the reCAPTCHA token -->
        <input type="hidden" id="recaptcha_token" name="recaptcha_token" value="">

          <div class="g-recaptcha" 
         data-sitekey="6LeSJgwpAAAAAD9UlPdC911k8UgD6Uh3068xXgGj"
         data-callback="setRecaptchaToken">
    </div>
      <br>
    <button type="submit" id="submit-button">Register</button>
    </div>


    </form>


    </div>
          <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script>
    function setRecaptchaToken(token) {
        document.getElementById('recaptcha_token').value = token;
    }

    function areFieldsFilled() {
        var username = document.getElementById('username').value.trim();
        var email = document.getElementById('email').value.trim();
        var password = document.getElementById('password').value.trim();
        var confirmPassword = document.getElementById('confirm_password').value.trim();
        var recaptchaToken = document.getElementById('recaptcha_token').value.trim();

        return username && email && password && confirmPassword && recaptchaToken;
    }

    document.getElementById('registration-form').addEventListener('submit', function(event) {
        event.preventDefault();

        if (!areFieldsFilled()) {
            alert("Please fill in all required fields and complete the reCAPTCHA.");
            return;
        }

        var formData = new FormData(this);

        fetch('/register', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            storeAccessToken(data.access_token);
            window.location.href = data.redirect_url;
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });

    function storeAccessToken(token) {
        // Implement your token storage logic here
        console.log("Token stored:", token);
    }
</script>
</body>

</html>