appscms-tools-theme 5.0.8 → 5.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_layouts/profile.html +561 -0
- data/assets/js/appscms-auth.js +9 -0
- data/assets/js/appscms-login.js +349 -0
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bd1a5efd7365955114e9fd22d26dff5258976836809ba2b4f6939cff8d2a95bd
|
|
4
|
+
data.tar.gz: 44f4e422569dda6d856a4226166896cc161e8c5197be6896fe591a054944035b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6cb4698386d05e14df6fc2cfc8267609a69a8a8c75e27177225d313dd5179e88e86683c906e48f4ae6b8737ac7a384698161b54a133c4bc279cb4e7d23d5d1da
|
|
7
|
+
data.tar.gz: 0f7347f14ee5b420ad561e5eaba8876b48e732efb8b5dc62366de3891fc70bd816ff83baff35a473596ac30d330cebd0e4b49a7bbfae9605ed60c1930e514ae0
|
|
@@ -0,0 +1,561 @@
|
|
|
1
|
+
{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
|
|
2
|
+
= page.folderName %} {% assign pageData = site.data[folder][lang][file] %} {%-
|
|
3
|
+
assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
|
|
4
|
+
|
|
5
|
+
<!DOCTYPE html>
|
|
6
|
+
<html lang="{{ page.lang }}">
|
|
7
|
+
{%- include appscms/head/head.html -%}
|
|
8
|
+
<body>
|
|
9
|
+
{%- include appscms/navbars/navbar.html -%} {%- include
|
|
10
|
+
appscms/navbars/toolbar.html -%} {%- include bookmark.html -%}
|
|
11
|
+
<style>
|
|
12
|
+
.profile-login-container {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
align-items: center;
|
|
17
|
+
background-color: #fff;
|
|
18
|
+
width: 100vw;
|
|
19
|
+
height: 90vh;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
<div>
|
|
24
|
+
<div class="login-container profile-login-container">
|
|
25
|
+
<div class="logo-container">
|
|
26
|
+
<div class="logo-bg"></div>
|
|
27
|
+
<svg
|
|
28
|
+
class="logo"
|
|
29
|
+
viewBox="0 0 100 100"
|
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
31
|
+
>
|
|
32
|
+
<rect
|
|
33
|
+
x="15"
|
|
34
|
+
y="10"
|
|
35
|
+
width="70"
|
|
36
|
+
height="80"
|
|
37
|
+
fill="none"
|
|
38
|
+
stroke="black"
|
|
39
|
+
stroke-width="3"
|
|
40
|
+
/>
|
|
41
|
+
<path
|
|
42
|
+
d="M85 35 L85 10 L65 10"
|
|
43
|
+
fill="none"
|
|
44
|
+
stroke="black"
|
|
45
|
+
stroke-width="3"
|
|
46
|
+
/>
|
|
47
|
+
<rect
|
|
48
|
+
x="25"
|
|
49
|
+
y="45"
|
|
50
|
+
width="50"
|
|
51
|
+
height="20"
|
|
52
|
+
rx="10"
|
|
53
|
+
fill="none"
|
|
54
|
+
stroke="black"
|
|
55
|
+
stroke-width="3"
|
|
56
|
+
/>
|
|
57
|
+
<circle cx="40" cy="55" r="5" fill="black" />
|
|
58
|
+
<circle cx="60" cy="55" r="5" fill="black" />
|
|
59
|
+
<path
|
|
60
|
+
d="M42 70 C50 75 50 75 58 70"
|
|
61
|
+
fill="none"
|
|
62
|
+
stroke="black"
|
|
63
|
+
stroke-width="3"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
<div class="dot dot-1"></div>
|
|
67
|
+
<div class="dot dot-2"></div>
|
|
68
|
+
<div class="dot dot-3"></div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<h1>Log in to {{site.name}}</h1>
|
|
72
|
+
<p>Log in to access your account and document storage.</p>
|
|
73
|
+
|
|
74
|
+
<button class="login-button">Log in</button>
|
|
75
|
+
|
|
76
|
+
<div class="create-account">
|
|
77
|
+
Don't have an account? <a href="#">Create account</a>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<style>
|
|
83
|
+
.logo-container {
|
|
84
|
+
position: relative;
|
|
85
|
+
margin-bottom: 40px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.logo-bg {
|
|
89
|
+
width: 150px;
|
|
90
|
+
height: 150px;
|
|
91
|
+
background-color: rgba(255, 235, 180, 0.5);
|
|
92
|
+
border-radius: 15px;
|
|
93
|
+
position: absolute;
|
|
94
|
+
top: 10px;
|
|
95
|
+
left: 50%;
|
|
96
|
+
transform: translateX(-50%) rotate(10deg);
|
|
97
|
+
z-index: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.logo {
|
|
101
|
+
position: relative;
|
|
102
|
+
z-index: 1;
|
|
103
|
+
width: 120px;
|
|
104
|
+
height: 120px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.dot {
|
|
108
|
+
width: 10px;
|
|
109
|
+
height: 10px;
|
|
110
|
+
background-color: #ffcc00;
|
|
111
|
+
border-radius: 50%;
|
|
112
|
+
position: absolute;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.dot-1 {
|
|
116
|
+
top: 0;
|
|
117
|
+
right: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.dot-2 {
|
|
121
|
+
left: 0;
|
|
122
|
+
top: 50%;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.dot-3 {
|
|
126
|
+
bottom: 0;
|
|
127
|
+
right: 50%;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
h1 {
|
|
131
|
+
font-size: 24px;
|
|
132
|
+
margin-bottom: 10px;
|
|
133
|
+
color: #333;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
p {
|
|
137
|
+
font-size: 16px;
|
|
138
|
+
color: #555;
|
|
139
|
+
margin-bottom: 30px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.login-button {
|
|
143
|
+
background-color: var(--primary-color);
|
|
144
|
+
color: white;
|
|
145
|
+
border: none;
|
|
146
|
+
border-radius: 5px;
|
|
147
|
+
padding: 12px 40px;
|
|
148
|
+
font-size: 16px;
|
|
149
|
+
font-weight: 500;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
margin-bottom: 25px;
|
|
152
|
+
transition: background-color 0.2s;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.login-button:hover {
|
|
156
|
+
background-color: var(--primary-color);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.create-account {
|
|
160
|
+
font-size: 14px;
|
|
161
|
+
color: #555;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.create-account a {
|
|
165
|
+
color: var(--primary-color);
|
|
166
|
+
text-decoration: none;
|
|
167
|
+
font-weight: 500;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.create-account a:hover {
|
|
171
|
+
text-decoration: underline;
|
|
172
|
+
}
|
|
173
|
+
</style>
|
|
174
|
+
<style>
|
|
175
|
+
body {
|
|
176
|
+
background: #fff;
|
|
177
|
+
}
|
|
178
|
+
.banner {
|
|
179
|
+
padding: 12px;
|
|
180
|
+
text-align: center;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.banner-content {
|
|
184
|
+
display: flex;
|
|
185
|
+
align-items: center;
|
|
186
|
+
justify-content: center;
|
|
187
|
+
gap: 8px;
|
|
188
|
+
max-width: 1200px;
|
|
189
|
+
margin: 0 auto;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.crown-icon {
|
|
193
|
+
color: #305bb2;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.banner a {
|
|
197
|
+
color: #305bb2;
|
|
198
|
+
font-weight: bold;
|
|
199
|
+
text-decoration: none;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.header {
|
|
203
|
+
display: flex;
|
|
204
|
+
justify-content: space-between;
|
|
205
|
+
align-items: center;
|
|
206
|
+
padding: 16px 24px;
|
|
207
|
+
background-color: #fff;
|
|
208
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.account-title {
|
|
212
|
+
font-size: 20px;
|
|
213
|
+
font-weight: bold;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.account-status {
|
|
217
|
+
display: flex;
|
|
218
|
+
align-items: center;
|
|
219
|
+
gap: 16px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.free-trial {
|
|
223
|
+
display: flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
gap: 8px;
|
|
226
|
+
font-weight: 600;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.yellow-crown {
|
|
230
|
+
color: #ffc107;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.avatar {
|
|
234
|
+
width: 40px;
|
|
235
|
+
height: 40px;
|
|
236
|
+
border-radius: 50%;
|
|
237
|
+
background-color: #f18c33;
|
|
238
|
+
color: white;
|
|
239
|
+
font-weight: bold;
|
|
240
|
+
display: flex;
|
|
241
|
+
align-items: center;
|
|
242
|
+
justify-content: center;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.container {
|
|
246
|
+
display: flex;
|
|
247
|
+
max-width: 1200px;
|
|
248
|
+
margin: 0 auto;
|
|
249
|
+
min-height: calc(100vh - 100px);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.sidebar {
|
|
253
|
+
width: 250px;
|
|
254
|
+
background-color: #fff;
|
|
255
|
+
padding: 20px 0;
|
|
256
|
+
border-right: 1px solid #eee;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.sidebar-header {
|
|
260
|
+
padding: 20px;
|
|
261
|
+
display: flex;
|
|
262
|
+
flex-direction: column;
|
|
263
|
+
align-items: center;
|
|
264
|
+
gap: 10px;
|
|
265
|
+
border-bottom: 1px solid #eee;
|
|
266
|
+
margin-bottom: 20px;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.avatar-large {
|
|
270
|
+
width: 80px;
|
|
271
|
+
height: 80px;
|
|
272
|
+
border-radius: 50%;
|
|
273
|
+
background-color: #f18c33;
|
|
274
|
+
color: white;
|
|
275
|
+
font-weight: bold;
|
|
276
|
+
font-size: 24px;
|
|
277
|
+
display: flex;
|
|
278
|
+
align-items: center;
|
|
279
|
+
justify-content: center;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.sidebar-menu {
|
|
283
|
+
list-style: none;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.sidebar-menu li {
|
|
287
|
+
padding: 12px 24px;
|
|
288
|
+
display: flex;
|
|
289
|
+
align-items: center;
|
|
290
|
+
gap: 12px;
|
|
291
|
+
cursor: pointer;
|
|
292
|
+
transition: background-color 0.2s;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.sidebar-menu li:hover {
|
|
296
|
+
background-color: #f5f5f5;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.sidebar-menu li.active {
|
|
300
|
+
background-color: #f5f5f5;
|
|
301
|
+
border-left: 3px solid #305bb2;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.sidebar-menu i {
|
|
305
|
+
font-size: 20px;
|
|
306
|
+
color: #555;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.content {
|
|
310
|
+
flex: 1;
|
|
311
|
+
padding: 40px;
|
|
312
|
+
background-color: #fff;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.content-title {
|
|
316
|
+
font-size: 24px;
|
|
317
|
+
font-weight: bold;
|
|
318
|
+
margin-bottom: 30px;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.form-section {
|
|
322
|
+
margin-bottom: 40px;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.form-title {
|
|
326
|
+
font-size: 18px;
|
|
327
|
+
font-weight: bold;
|
|
328
|
+
margin-bottom: 20px;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.form-group {
|
|
332
|
+
margin-bottom: 20px;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.form-label {
|
|
336
|
+
display: block;
|
|
337
|
+
margin-bottom: 8px;
|
|
338
|
+
font-size: 14px;
|
|
339
|
+
color: #666;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.verified-badge {
|
|
343
|
+
display: inline-block;
|
|
344
|
+
background-color: #e6f4ea;
|
|
345
|
+
color: #137333;
|
|
346
|
+
padding: 4px 8px;
|
|
347
|
+
border-radius: 4px;
|
|
348
|
+
font-size: 12px;
|
|
349
|
+
margin-left: 8px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.form-input {
|
|
353
|
+
width: 100%;
|
|
354
|
+
padding: 12px;
|
|
355
|
+
border: 1px solid #ddd;
|
|
356
|
+
border-radius: 4px;
|
|
357
|
+
font-size: 16px;
|
|
358
|
+
transition: border-color 0.2s;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.form-input:focus {
|
|
362
|
+
border-color: #305bb2;
|
|
363
|
+
outline: none;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.password-input-container {
|
|
367
|
+
position: relative;
|
|
368
|
+
margin-bottom: 20px;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.password-input-container .form-input {
|
|
372
|
+
padding-right: 40px;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.password-toggle {
|
|
376
|
+
position: absolute;
|
|
377
|
+
right: 12px;
|
|
378
|
+
top: 50%;
|
|
379
|
+
transform: translateY(-50%);
|
|
380
|
+
background: none;
|
|
381
|
+
border: none;
|
|
382
|
+
cursor: pointer;
|
|
383
|
+
color: #666;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.form-link {
|
|
387
|
+
color: #2563eb;
|
|
388
|
+
text-decoration: none;
|
|
389
|
+
font-size: 14px;
|
|
390
|
+
display: inline-block;
|
|
391
|
+
margin-top: 8px;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.btn {
|
|
395
|
+
padding: 12px 24px;
|
|
396
|
+
border: none;
|
|
397
|
+
border-radius: 4px;
|
|
398
|
+
font-size: 16px;
|
|
399
|
+
font-weight: 600;
|
|
400
|
+
cursor: pointer;
|
|
401
|
+
transition: background-color 0.2s;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.btn-primary {
|
|
405
|
+
background-color: #2563eb;
|
|
406
|
+
color: white;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.btn-primary:hover {
|
|
410
|
+
background-color: #1d4ed8;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.tab-content {
|
|
414
|
+
display: none;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.tab-content.active {
|
|
418
|
+
display: block;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/* Material Icons */
|
|
422
|
+
.material-icons {
|
|
423
|
+
font-family: "Material Icons";
|
|
424
|
+
font-weight: normal;
|
|
425
|
+
font-style: normal;
|
|
426
|
+
font-size: 24px;
|
|
427
|
+
line-height: 1;
|
|
428
|
+
letter-spacing: normal;
|
|
429
|
+
text-transform: none;
|
|
430
|
+
display: inline-block;
|
|
431
|
+
white-space: nowrap;
|
|
432
|
+
word-wrap: normal;
|
|
433
|
+
direction: ltr;
|
|
434
|
+
-webkit-font-feature-settings: "liga";
|
|
435
|
+
-webkit-font-smoothing: antialiased;
|
|
436
|
+
}
|
|
437
|
+
</style>
|
|
438
|
+
|
|
439
|
+
<div class="container user-profile-section" style="display: none">
|
|
440
|
+
<!-- Sidebar -->
|
|
441
|
+
<div class="sidebar">
|
|
442
|
+
<div class="sidebar-header">
|
|
443
|
+
<div class="avatar-large">GI</div>
|
|
444
|
+
</div>
|
|
445
|
+
<ul class="sidebar-menu">
|
|
446
|
+
<li class="tab-link active" data-tab="account">Account</li>
|
|
447
|
+
<li class="tab-link" data-tab="subscription">Subscription</li>
|
|
448
|
+
<li class="tab-link" data-tab="invoices">Invoices</li>
|
|
449
|
+
<li class="tab-link" data-tab="company">Company Information</li>
|
|
450
|
+
<li class="tab-link" data-tab="team">Team</li>
|
|
451
|
+
<li class="tab-link" data-tab="settings">Settings</li>
|
|
452
|
+
</ul>
|
|
453
|
+
</div>
|
|
454
|
+
|
|
455
|
+
<!-- Content Area -->
|
|
456
|
+
<div class="content">
|
|
457
|
+
<!-- Account Tab Content -->
|
|
458
|
+
<div id="account" class="tab-content active">
|
|
459
|
+
<h2 class="content-title">Account</h2>
|
|
460
|
+
|
|
461
|
+
<!-- Email Section -->
|
|
462
|
+
<div class="form-section">
|
|
463
|
+
<div class="form-title">
|
|
464
|
+
Email <span class="verified-badge">Verified</span>
|
|
465
|
+
</div>
|
|
466
|
+
<div class="form-group">
|
|
467
|
+
<input
|
|
468
|
+
id="user-email-input"
|
|
469
|
+
type="email"
|
|
470
|
+
class="form-input"
|
|
471
|
+
value="itsrammoudgill@gmail.com"
|
|
472
|
+
readonly
|
|
473
|
+
/>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
<!-- Name Section -->
|
|
478
|
+
<div class="form-section">
|
|
479
|
+
<div class="form-title">Name</div>
|
|
480
|
+
<div class="form-group">
|
|
481
|
+
<label class="form-label">Name</label>
|
|
482
|
+
<input type="text" class="form-input username-input" value="" />
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
486
|
+
|
|
487
|
+
<!-- Subscription Tab Content -->
|
|
488
|
+
<div id="subscription" class="tab-content">
|
|
489
|
+
<h2 class="content-title">Subscription</h2>
|
|
490
|
+
<p>Your subscription details will appear here.</p>
|
|
491
|
+
</div>
|
|
492
|
+
|
|
493
|
+
<!-- Invoices Tab Content -->
|
|
494
|
+
<div id="invoices" class="tab-content">
|
|
495
|
+
<h2 class="content-title">Invoices</h2>
|
|
496
|
+
<p>Your invoice history will appear here.</p>
|
|
497
|
+
</div>
|
|
498
|
+
|
|
499
|
+
<!-- Company Information Tab Content -->
|
|
500
|
+
<div id="company" class="tab-content">
|
|
501
|
+
<h2 class="content-title">Company Information</h2>
|
|
502
|
+
<p>Your company details will appear here.</p>
|
|
503
|
+
</div>
|
|
504
|
+
|
|
505
|
+
<!-- Team Tab Content -->
|
|
506
|
+
<div id="team" class="tab-content">
|
|
507
|
+
<h2 class="content-title">Team</h2>
|
|
508
|
+
<p>Your team management options will appear here.</p>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
<!-- Settings Tab Content -->
|
|
512
|
+
<div id="settings" class="tab-content">
|
|
513
|
+
<h2 class="content-title">Settings</h2>
|
|
514
|
+
<p>Your account settings will appear here.</p>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
|
|
519
|
+
<script>
|
|
520
|
+
// Tab functionality
|
|
521
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
522
|
+
const tabLinks = document.querySelectorAll(".tab-link");
|
|
523
|
+
const tabContents = document.querySelectorAll(".tab-content");
|
|
524
|
+
|
|
525
|
+
tabLinks.forEach((link) => {
|
|
526
|
+
link.addEventListener("click", () => {
|
|
527
|
+
// Remove active class from all tabs
|
|
528
|
+
tabLinks.forEach((l) => l.classList.remove("active"));
|
|
529
|
+
tabContents.forEach((c) => c.classList.remove("active"));
|
|
530
|
+
|
|
531
|
+
// Add active class to clicked tab
|
|
532
|
+
link.classList.add("active");
|
|
533
|
+
|
|
534
|
+
// Show corresponding content
|
|
535
|
+
const tabId = link.getAttribute("data-tab");
|
|
536
|
+
document.getElementById(tabId).classList.add("active");
|
|
537
|
+
});
|
|
538
|
+
});
|
|
539
|
+
|
|
540
|
+
// Password visibility toggle
|
|
541
|
+
const toggleButtons = document.querySelectorAll(".password-toggle");
|
|
542
|
+
toggleButtons.forEach((button) => {
|
|
543
|
+
button.addEventListener("click", () => {
|
|
544
|
+
const input = button.previousElementSibling;
|
|
545
|
+
const icon = button.querySelector(".material-icons");
|
|
546
|
+
|
|
547
|
+
if (input.type === "password") {
|
|
548
|
+
input.type = "text";
|
|
549
|
+
icon.textContent = "visibility_off";
|
|
550
|
+
} else {
|
|
551
|
+
input.type = "password";
|
|
552
|
+
icon.textContent = "visibility";
|
|
553
|
+
}
|
|
554
|
+
});
|
|
555
|
+
});
|
|
556
|
+
});
|
|
557
|
+
</script>
|
|
558
|
+
|
|
559
|
+
{%- include appscms/scripts/script.html -%}
|
|
560
|
+
</body>
|
|
561
|
+
</html>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const firebaseConfig = {
|
|
2
|
+
apiKey: "AIzaSyCLMq0zLfhR5LkHvjQI3D5yNllHMkiaNrE",
|
|
3
|
+
authDomain: "appscms-399eb.firebaseapp.com",
|
|
4
|
+
projectId: "appscms-399eb",
|
|
5
|
+
storageBucket: "appscms-399eb.firebasestorage.app",
|
|
6
|
+
messagingSenderId: "452535998358",
|
|
7
|
+
appId: "1:452535998358:web:558123baa247c3735c6fb7",
|
|
8
|
+
measurementId: "G-0RZGJ24CZV",
|
|
9
|
+
};
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
const profileButton = document.getElementById("profileButton");
|
|
2
|
+
const userModal = document.getElementById("userModal");
|
|
3
|
+
let isModalOpen = false;
|
|
4
|
+
|
|
5
|
+
profileButton.addEventListener("click", () => {
|
|
6
|
+
if (isModalOpen) {
|
|
7
|
+
userModal.style.display = "none";
|
|
8
|
+
isModalOpen = false;
|
|
9
|
+
} else {
|
|
10
|
+
userModal.style.display = "block";
|
|
11
|
+
isModalOpen = true;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
// Close modal when clicking outside
|
|
16
|
+
document.addEventListener("click", (event) => {
|
|
17
|
+
if (
|
|
18
|
+
!profileButton.contains(event.target) &&
|
|
19
|
+
!userModal.contains(event.target)
|
|
20
|
+
) {
|
|
21
|
+
userModal.style.display = "none";
|
|
22
|
+
isModalOpen = false;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
// Get the modal elements
|
|
26
|
+
const modal = document.getElementById("sideModal");
|
|
27
|
+
const modalOverlay = document.getElementById("modalOverlay");
|
|
28
|
+
const openModalBtn = document.querySelector(".open-modal-btn");
|
|
29
|
+
const closeModalBtn = document.querySelector(".close-modal-btn");
|
|
30
|
+
|
|
31
|
+
// Function to open the modal
|
|
32
|
+
function openModal() {
|
|
33
|
+
modalOverlay.style.display = "block";
|
|
34
|
+
// Slight delay for the overlay to appear before the modal slides in
|
|
35
|
+
setTimeout(() => {
|
|
36
|
+
modal.style.right = "0";
|
|
37
|
+
}, 50);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Function to close the modal
|
|
41
|
+
function closeModal() {
|
|
42
|
+
modal.style.right = "-90%";
|
|
43
|
+
// Wait for the animation to complete before hiding the overlay
|
|
44
|
+
setTimeout(() => {
|
|
45
|
+
modalOverlay.style.display = "none";
|
|
46
|
+
}, 300);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Event listeners
|
|
50
|
+
openModalBtn.addEventListener("click", openModal);
|
|
51
|
+
closeModalBtn.addEventListener("click", closeModal);
|
|
52
|
+
modalOverlay.addEventListener("click", closeModal);
|
|
53
|
+
|
|
54
|
+
// Prevent closing when clicking inside the modal
|
|
55
|
+
modal.addEventListener("click", function (event) {
|
|
56
|
+
event.stopPropagation();
|
|
57
|
+
});
|
|
58
|
+
if (window.location.pathname === "/profile") {
|
|
59
|
+
document.querySelector(".login-button").addEventListener("click", openModal);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Firebase configuration - Replace with your own Firebase config
|
|
63
|
+
|
|
64
|
+
// Initialize Firebase
|
|
65
|
+
firebase.initializeApp(firebaseConfig);
|
|
66
|
+
const auth = firebase.auth();
|
|
67
|
+
|
|
68
|
+
// Check for redirect result immediately when page loads
|
|
69
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
70
|
+
console.log("Checking for auth redirect...");
|
|
71
|
+
auth
|
|
72
|
+
.getRedirectResult()
|
|
73
|
+
.then((result) => {
|
|
74
|
+
if (result && result.user) {
|
|
75
|
+
console.log("Redirect authentication successful:", result.user);
|
|
76
|
+
// Twitter or other redirect login was successful
|
|
77
|
+
// Auth state observer will handle the UI update
|
|
78
|
+
} else if (result) {
|
|
79
|
+
console.log("Redirect completed but no user");
|
|
80
|
+
}
|
|
81
|
+
})
|
|
82
|
+
.catch((error) => {
|
|
83
|
+
console.error("Redirect result error:", error);
|
|
84
|
+
if (error.code !== "auth/credential-already-in-use") {
|
|
85
|
+
alert(`Authentication error: ${error.message}`);
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
// DOM Elements
|
|
91
|
+
const loginForm = document.getElementById("loginForm");
|
|
92
|
+
const signupForm = document.getElementById("signupForm");
|
|
93
|
+
const forgotPasswordForm = document.getElementById("forgotPasswordForm");
|
|
94
|
+
const authContainer = document.getElementById("authContainer");
|
|
95
|
+
const userAvatar = document.getElementById("userAvatar");
|
|
96
|
+
const profileUserAvatar = document.querySelector(".profile-user-avatar");
|
|
97
|
+
|
|
98
|
+
// Switch between login and signup
|
|
99
|
+
document.getElementById("showSignup").addEventListener("click", (e) => {
|
|
100
|
+
e.preventDefault();
|
|
101
|
+
loginForm.style.display = "none";
|
|
102
|
+
signupForm.style.display = "block";
|
|
103
|
+
forgotPasswordForm.style.display = "none";
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
document.getElementById("showLogin").addEventListener("click", (e) => {
|
|
107
|
+
e.preventDefault();
|
|
108
|
+
signupForm.style.display = "none";
|
|
109
|
+
loginForm.style.display = "block";
|
|
110
|
+
forgotPasswordForm.style.display = "none";
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// Show forgot password form
|
|
114
|
+
document.getElementById("forgotPassword").addEventListener("click", (e) => {
|
|
115
|
+
e.preventDefault();
|
|
116
|
+
loginForm.style.display = "none";
|
|
117
|
+
forgotPasswordForm.style.display = "block";
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
// Back to login from forgot password
|
|
121
|
+
document.getElementById("backToLogin").addEventListener("click", () => {
|
|
122
|
+
forgotPasswordForm.style.display = "none";
|
|
123
|
+
loginForm.style.display = "block";
|
|
124
|
+
document.getElementById("resetSuccess").style.display = "none";
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
// Handle reset password form submission
|
|
128
|
+
document.getElementById("resetPasswordForm").addEventListener("submit", (e) => {
|
|
129
|
+
e.preventDefault();
|
|
130
|
+
const email = document.getElementById("resetEmail").value;
|
|
131
|
+
|
|
132
|
+
auth
|
|
133
|
+
.sendPasswordResetEmail(email)
|
|
134
|
+
.then(() => {
|
|
135
|
+
// Show success message
|
|
136
|
+
document.getElementById("resetSuccess").style.display = "block";
|
|
137
|
+
document.getElementById("resetPasswordForm").reset();
|
|
138
|
+
|
|
139
|
+
// Redirect after 3 seconds
|
|
140
|
+
setTimeout(() => {
|
|
141
|
+
window.location.href = window.location.origin; // Redirect to domain root
|
|
142
|
+
}, 3000);
|
|
143
|
+
})
|
|
144
|
+
.catch((error) => {
|
|
145
|
+
alert(`Error: ${error.message}`);
|
|
146
|
+
});
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
// Toggle password visibility
|
|
150
|
+
document.getElementById("toggleLoginPassword").addEventListener("click", () => {
|
|
151
|
+
const passwordInput = document.getElementById("loginPassword");
|
|
152
|
+
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
document
|
|
156
|
+
.getElementById("toggleSignupPassword")
|
|
157
|
+
.addEventListener("click", () => {
|
|
158
|
+
const passwordInput = document.getElementById("signupPassword");
|
|
159
|
+
passwordInput.type =
|
|
160
|
+
passwordInput.type === "password" ? "text" : "password";
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
// Email/Password Login
|
|
164
|
+
document.getElementById("emailLoginForm").addEventListener("submit", (e) => {
|
|
165
|
+
e.preventDefault();
|
|
166
|
+
const email = document.getElementById("loginEmail").value;
|
|
167
|
+
const password = document.getElementById("loginPassword").value;
|
|
168
|
+
|
|
169
|
+
auth
|
|
170
|
+
.signInWithEmailAndPassword(email, password)
|
|
171
|
+
.then((userCredential) => {
|
|
172
|
+
// Signed in
|
|
173
|
+
const user = userCredential.user;
|
|
174
|
+
console.log("User logged in:", user);
|
|
175
|
+
})
|
|
176
|
+
.catch((error) => {
|
|
177
|
+
alert(`Login error: ${error.message}`);
|
|
178
|
+
});
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
// Email/Password Signup
|
|
182
|
+
document.getElementById("emailSignupForm").addEventListener("submit", (e) => {
|
|
183
|
+
e.preventDefault();
|
|
184
|
+
const email = document.getElementById("signupEmail").value;
|
|
185
|
+
const password = document.getElementById("signupPassword").value;
|
|
186
|
+
|
|
187
|
+
auth
|
|
188
|
+
.createUserWithEmailAndPassword(email, password)
|
|
189
|
+
.then((userCredential) => {
|
|
190
|
+
// Signed up
|
|
191
|
+
const user = userCredential.user;
|
|
192
|
+
console.log("User created:", user);
|
|
193
|
+
})
|
|
194
|
+
.catch((error) => {
|
|
195
|
+
alert(`Signup error: ${error.message}`);
|
|
196
|
+
});
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
// Google Login
|
|
200
|
+
document.getElementById("googleLogin").addEventListener("click", () => {
|
|
201
|
+
const provider = new firebase.auth.GoogleAuthProvider();
|
|
202
|
+
auth
|
|
203
|
+
.signInWithPopup(provider)
|
|
204
|
+
.then((result) => {
|
|
205
|
+
console.log("Google login successful");
|
|
206
|
+
})
|
|
207
|
+
.catch((error) => {
|
|
208
|
+
alert(`Google login error: ${error.message}`);
|
|
209
|
+
});
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
document.getElementById("googleSignup").addEventListener("click", () => {
|
|
213
|
+
const provider = new firebase.auth.GoogleAuthProvider();
|
|
214
|
+
auth
|
|
215
|
+
.signInWithPopup(provider)
|
|
216
|
+
.then((result) => {
|
|
217
|
+
console.log(result);
|
|
218
|
+
console.log("Google signup successful");
|
|
219
|
+
})
|
|
220
|
+
.catch((error) => {
|
|
221
|
+
alert(`Google signup error: ${error.message}`);
|
|
222
|
+
});
|
|
223
|
+
});
|
|
224
|
+
|
|
225
|
+
// Facebook Login
|
|
226
|
+
document.getElementById("facebookLogin").addEventListener("click", () => {
|
|
227
|
+
const provider = new firebase.auth.FacebookAuthProvider();
|
|
228
|
+
provider.addScope("email");
|
|
229
|
+
|
|
230
|
+
// Try popup instead of redirect for Facebook
|
|
231
|
+
auth
|
|
232
|
+
.signInWithPopup(provider)
|
|
233
|
+
.then((result) => {
|
|
234
|
+
console.log("Facebook login successful");
|
|
235
|
+
})
|
|
236
|
+
.catch((error) => {
|
|
237
|
+
console.error("Facebook login error:", error);
|
|
238
|
+
alert(`Facebook login error: ${error.message}`);
|
|
239
|
+
});
|
|
240
|
+
});
|
|
241
|
+
|
|
242
|
+
// Twitter Login - Try using popup method first
|
|
243
|
+
document.getElementById("twitterLogin").addEventListener("click", () => {
|
|
244
|
+
console.log("Starting Twitter login...");
|
|
245
|
+
const provider = new firebase.auth.TwitterAuthProvider();
|
|
246
|
+
|
|
247
|
+
try {
|
|
248
|
+
// Try popup method first as it provides better error feedback
|
|
249
|
+
auth
|
|
250
|
+
.signInWithPopup(provider)
|
|
251
|
+
.then((result) => {
|
|
252
|
+
console.log("Twitter login successful via popup");
|
|
253
|
+
})
|
|
254
|
+
.catch((error) => {
|
|
255
|
+
console.error("Twitter popup error:", error);
|
|
256
|
+
|
|
257
|
+
// If popup fails, fallback to redirect
|
|
258
|
+
if (
|
|
259
|
+
error.code === "auth/popup-blocked" ||
|
|
260
|
+
error.code === "auth/popup-closed-by-user"
|
|
261
|
+
) {
|
|
262
|
+
console.log("Popup blocked, trying redirect instead");
|
|
263
|
+
auth.signInWithRedirect(provider).catch((redirectError) => {
|
|
264
|
+
console.error("Twitter redirect error:", redirectError);
|
|
265
|
+
alert(`Twitter login error: ${redirectError.message}`);
|
|
266
|
+
});
|
|
267
|
+
} else {
|
|
268
|
+
alert(`Twitter login error: ${error.message}`);
|
|
269
|
+
}
|
|
270
|
+
});
|
|
271
|
+
} catch (e) {
|
|
272
|
+
console.error("Exception during Twitter login:", e);
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
// Logout
|
|
277
|
+
document.getElementById("logoutBtn").addEventListener("click", () => {
|
|
278
|
+
auth
|
|
279
|
+
.signOut()
|
|
280
|
+
.then(() => {
|
|
281
|
+
document.querySelector(".user-profile-header").style.display = "none";
|
|
282
|
+
window.location.reload();
|
|
283
|
+
console.log("User signed out");
|
|
284
|
+
})
|
|
285
|
+
.catch((error) => {
|
|
286
|
+
alert(`Logout error: ${error.message}`);
|
|
287
|
+
});
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
// Auth state observer
|
|
291
|
+
auth.onAuthStateChanged((user) => {
|
|
292
|
+
console.log(
|
|
293
|
+
"Auth state changed:",
|
|
294
|
+
user ? "User logged in" : "User logged out"
|
|
295
|
+
);
|
|
296
|
+
|
|
297
|
+
if (user) {
|
|
298
|
+
console.log(user);
|
|
299
|
+
|
|
300
|
+
const email = user.email || "No email available";
|
|
301
|
+
document.querySelector(".logged-in-user-email").textContent = email;
|
|
302
|
+
let displayName =
|
|
303
|
+
user.displayName || (user.email ? user.email.split("@")[0] : "User");
|
|
304
|
+
|
|
305
|
+
// Special handling for Twitter users who might not have email
|
|
306
|
+
if (
|
|
307
|
+
user.providerData[0].providerId === "twitter.com" &&
|
|
308
|
+
!user.displayName
|
|
309
|
+
) {
|
|
310
|
+
displayName = user.providerData[0].uid;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
console.log("Provider:", user.providerData[0].providerId);
|
|
314
|
+
console.log("Display name:", displayName);
|
|
315
|
+
modal.style.display = "none";
|
|
316
|
+
modal.style.right = "-90%";
|
|
317
|
+
modalOverlay.style.display = "none";
|
|
318
|
+
document.querySelector(".logged-in-username").textContent = displayName;
|
|
319
|
+
document.querySelector(".login-modal-button").style.display = "none";
|
|
320
|
+
|
|
321
|
+
// Set initials for avatar
|
|
322
|
+
const initials = displayName
|
|
323
|
+
.split(" ")
|
|
324
|
+
.map((n) => n[0])
|
|
325
|
+
.join("")
|
|
326
|
+
.toUpperCase()
|
|
327
|
+
.substring(0, 2);
|
|
328
|
+
document.getElementById("profileButton").textContent = initials;
|
|
329
|
+
profileUserAvatar.textContent = initials;
|
|
330
|
+
document.querySelector(".user-profile-header").style.display = "block";
|
|
331
|
+
|
|
332
|
+
userAvatar.textContent = initials;
|
|
333
|
+
userAvatar.style.display = "flex";
|
|
334
|
+
if (window.location.pathname === "/profile") {
|
|
335
|
+
document.querySelector(".user-profile-section").style.display = "flex";
|
|
336
|
+
document.querySelector(".profile-login-container").style.display = "none";
|
|
337
|
+
document.querySelector(".avatar-large").textContent = initials;
|
|
338
|
+
document.querySelector("#user-email-input").value = email;
|
|
339
|
+
document.querySelector(".username-input").value = displayName;
|
|
340
|
+
|
|
341
|
+
console.log("You are on the profile page.");
|
|
342
|
+
}
|
|
343
|
+
} else {
|
|
344
|
+
userAvatar.style.display = "none";
|
|
345
|
+
loginForm.style.display = "block";
|
|
346
|
+
signupForm.style.display = "none";
|
|
347
|
+
forgotPasswordForm.style.display = "none";
|
|
348
|
+
}
|
|
349
|
+
});
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 5.0.
|
|
4
|
+
version: 5.0.9
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
@@ -259,6 +259,7 @@ files:
|
|
|
259
259
|
- _layouts/photo-effects-home.html
|
|
260
260
|
- _layouts/post.html
|
|
261
261
|
- _layouts/privacyPolicy.html
|
|
262
|
+
- _layouts/profile.html
|
|
262
263
|
- _layouts/termAndCondition.html
|
|
263
264
|
- _layouts/video.html
|
|
264
265
|
- assets/.DS_Store
|
|
@@ -542,7 +543,9 @@ files:
|
|
|
542
543
|
- assets/js/adBlocker.js
|
|
543
544
|
- assets/js/ads.js
|
|
544
545
|
- assets/js/append-div.js
|
|
546
|
+
- assets/js/appscms-auth.js
|
|
545
547
|
- assets/js/appscms-infographics.js
|
|
548
|
+
- assets/js/appscms-login.js
|
|
546
549
|
- assets/js/appscms-search-home1.js
|
|
547
550
|
- assets/js/appscms-search.js
|
|
548
551
|
- assets/js/appscms-theme.js
|