WE4_Project/src/app/views/account.php at 1d9b0f33fc6d14ec8f19ed114d51b1b1b94bdf9a · TheRefraction/WE4_Project · 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
<?php include 'partials/header.php'; ?>

<main class="container py-5">
    <h1 class="text-pourpre" >My account</h1>

    <div id="loading">Loading account information...</div>

    <!-- Sensitive information are not displayed until server is sure user is authenticated -->
    <div id="account-content" style="display: none;" class="card shadow-sm p-4 mb-4">
        <div class="account-details row">
            <div class="col-md-4">
                <label class="fw-bold">First name</label>
                <p id="user-first-name" class="border-bottom pb-1"></p>
            </div>
            <div class="col-md-4">
                <label class="fw-bold">Last name</label>
                <p id="user-last-name" class="border-bottom pb-1"></p>
            </div>
            <div class="col-md-4">
                <label class="fw-bold">Email</label>
                <p id="user-email" class="border-bottom pb-1"></p>
            </div>
        </div>
    </div>

    <h2 class="text-pourpre border-bottom pb-2 mb-3">Update account</h2>
    <form action="/update-account" method="POST" class="card p-4 shadow-sm">
        <div class="account-details row g-3">
            <div class="col-md-4">
                <label class="form-label">First name</label>
                <input type="text" name="first_name" class="form-control"/>
            </div>
            <div class="col-md-4">
                <label class="form-label">Last name</label>
                <input type="text" name="last_name" class="form-control"/>
            </div>
            <div class="col-md-4">
                <label class="form-label">Phone</label>
                <input type="text" name="phone" class="form-control"/>
            </div>
            <div class="col-12 mt-4">
                <button type="submit" class="btn btn-pourpre text-white px-4">Update</button>
            </div>
        </div>
    </form>
</main>

<!-- This may be deprecated -->
<script>
    fetch('/account-data')
        .then(response => {
            // Session has been lost
            if (response.status === 401) {
                window.location.href = '/sign-in';
                return;
            }

            return response.json();
        })
        .then(data => {
            if (data && !data.error) {
                document.getElementById('user-first-name').textContent = data.first_name;
                document.getElementById('user-last-name').textContent = data.last_name;
                document.getElementById('user-email').textContent = data.email;

                document.getElementById('loading').style.display = 'none';
                document.getElementById('account-content').style.display = 'block';
            }
        })
        .catch(err => {
            // Redirect if network issue
            window.location.href = '/sign-in';
        });
</script>

<?php include 'partials/footer.php'; ?>