TaskManagement-Frontend/account.html at main · FlorentZani/TaskManagement-Frontend · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tasks management</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        @layer utilities {
        * {
          min-width: 0;
          box-sizing: border-box;
        }
        body {
          background-image: url("./images/background.jpg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          display: flex;
          flex-direction: column;
          gap: 16px;
          width: 100vw;
          height: 100vh;
          justify-content: center;
          align-items: center;
        }
        .content-auto {
          content-visibility: auto;
        }
        #data-container,
        .item-container {
          width: calc(100% - 24px);
          max-width: 500px;
        }
      }
    </style>
</head>

<body class="hidden">
    <div class="item-container flex justify-between">
        <h1 id="page-title" class="text-3xl font-bold">Llogaria ime</h1>
        <a href="/tasks.html"
            class="bg-white px-3 flex justify-center items-center rounded-md font-semibold border-2 border-gray-200">
            Detyrat e mia
        </a>
    </div>
    <div id="data-container"
        class="p-4 max-h-sm overflow-y-auto bg-white rounded-xl flex flex-col justify-start content-center relative shadow-xl gap-2">
        <h2 class="mb-1 font-semibold text-lg">Të dhënat e mia</h2>
        <div id="loading-box" class="w-full">
            <h1 class="text-md font-semibold text-center">Loading</h1>
            <p class="text-gray-500 text-center">Please wait a moment</p>
        </div>

        <form id="user-data-form" method="post" class="hidden flex-col w-full gap-4 rounded-lg"
            onsubmit="event.preventDefault(); editUserDataSubmit()">
            <div id="user-data-form-input-fields" class="flex flex-col gap-4 pointer-events-none">
                <input id="user-data-username" minlength="4" maxlength="32" type="text"
                    class="bg-white border p-2 rounded-md !ring-0" placeholder="Username" required />
                <input id="user-data-name" minlength="4" maxlength="32" type="text"
                    class="bg-white border p-2 rounded-md !ring-0" placeholder="Emri" required />
                <input id="user-data-last-name" minlength="4" maxlength="32" type="text"
                    class="bg-white border p-2 rounded-md !ring-0" placeholder="Mbiemri" required />
            </div>

            <div id="user-data-form-action-buttons-container" class="hidden gap-4">
                <button
                    class="w-full px-4 bg-white hover:bg-gray-100 border-2 border-gray-200 py-2 font-semibold rounded-lg transition duration-150"
                    type="button" onclick="toggleEditMode(); resetEditData()">
                    Anullo
                </button>
                <button type="submit"
                    class="w-full px-4 bg-black hover:bg-gray-800 text-white py-2 font-semibold rounded-lg transition duration-150"
                    type="button">
                    Ruaj
                </button>
            </div>
            <button id="user-data-form-edit-button" type="button"
                class="w-full px-4 bg-black hover:bg-gray-800 text-white py-2 font-semibold rounded-lg transition duration-150"
                onclick="toggleEditMode()">
                Ndrysho të dhënat
            </button>
            <p id="edit-user-data-error" class="text-red-500 text-center"></p>
        </form>

        <h2 id="password-section-title" class="mt-8 mb-1 font-semibold text-lg">
            Fjalëkalimi
        </h2>
        <form id="password-form" method="post" class="hidden flex-col w-full gap-4 rounded-lg"
            onsubmit="event.preventDefault(); editUserPasswordSubmit()">
            <div id="user-data-input-fields" class="flex flex-col gap-4">
                <input id="old-password" minlength="4" maxlength="32" type="password"
                    class="bg-white border p-2 rounded-md !ring-0" placeholder="Fjalëkalimi aktual" required />
                <input id="new-password" minlength="4" maxlength="32" type="password"
                    class="bg-white border p-2 rounded-md !ring-0" placeholder="Fjalëkalimi i ri" required />
            </div>
            <div id="password-form-action-buttons-container" class="flex gap-4">
                <button
                    class="w-full px-4 bg-white hover:bg-gray-100 border-2 border-gray-200 py-2 font-semibold rounded-lg transition duration-150"
                    type="button" onclick="togglePasswordMode(); resetPasswordData()">
                    Anullo
                </button>
                <button type="submit"
                    class="w-full px-4 bg-black hover:bg-gray-800 text-white py-2 font-semibold rounded-lg transition duration-150"
                    type="button">
                    Ruaj
                </button>
            </div>
        </form>

        <button id="password-form-edit-button"
            class="w-full px-4 bg-black hover:bg-gray-800 text-white py-2 font-semibold rounded-lg transition duration-150"
            onclick="togglePasswordMode()">
            Ndrysho fjalëkalimin
        </button>

        <h2 id="password-section-title" class="mt-8 mb-1 font-semibold text-lg text-red-500">
            Zona kritike
        </h2>
        <button id="password-form-edit-button"
            class="w-full px-4 bg-red-500 hover:bg-red-400 text-white py-2 font-semibold rounded-lg transition duration-150"
            onclick="deleteAccount()">
            Fshi llogarinë tënde
        </button>
        <p class="text-red-500 text-center italic text-sm">
            Kujdes! Fshirja e llogarisë nuk mund të kthehet.
        </p>
        <p id="edit-password-error" class="text-red-500 text-center"></p>
        <p id="login-error" class="text-red-500 text-center"></p>
        <p id="delete-account-error" class="text-red-500 text-center"></p>
    </div>
    <script src="js/account.js"></script>
</body>

</html>