@live-change/url-frontend 0.9.31 → 0.9.33

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.
Files changed (12) hide show
  1. package/front/src/NavBar.vue +28 -28
  2. package/front/src/UrlsListPage.vue +3 -3
  3. package/front/src/UrlsPage.vue +3 -3
  4. package/front/src/components/GenerateUrlForm.vue +43 -28
  5. package/front/src/components/NotAuthorized.vue +4 -4
  6. package/front/src/components/NotFound.vue +4 -4
  7. package/front/src/components/ResolveUrl.vue +1 -1
  8. package/front/src/components/TakeUrlForm.vue +14 -9
  9. package/front/src/components/Urls.vue +12 -12
  10. package/front/src/components/UrlsInfo.vue +2 -2
  11. package/front/src/components/UrlsList.vue +7 -7
  12. package/package.json +16 -16
package/front/src/NavBar.vue CHANGED
@@ -2,16 +2,16 @@
2
2
  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
3
3
  relative md:sticky top-0 z-5"
4
4
  style="min-height: 80px" key="navbar">
5
- <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
5
+ <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
6
6
  <div class="hidden lg:flex">
7
7
  <!-- place for desktop menu -->
8
8
  </div>
9
- <div class="flex flex-grow-1"></div>
9
+ <div class="flex grow"></div>
10
10
  <UserIcon />
11
11
 
12
12
 
13
- <div class="static w-auto w-full surface-overlay left-0 top-100 z-1 shadow-none hidden">
14
- <ul class="list-none p-0 m-0 flex align-items-center select-none flex-row border-top-none">
13
+ <div class="static w-auto w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow-none hidden">
14
+ <ul class="list-none p-0 m-0 flex items-center select-none flex-row border-t-0">
15
15
  <li>
16
16
  <a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100
17
17
  font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
@@ -28,48 +28,48 @@
28
28
  </div>
29
29
 
30
30
 
31
- <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple ml-2 hover:surface-100 p-2"
32
- v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
31
+ <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple ml-2 hover:bg-surface-100 dark:hover:bg-surface-700 p-2"
32
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
33
33
  <i class="pi pi-bars text-4xl"></i>
34
34
  </a>
35
- <div class="align-items-center flex-grow-1 justify-content-between hidden absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
36
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
35
+ <div class="items-center grow justify-between hidden absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none">
36
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
37
37
  <li>
38
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
38
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
39
39
  <i class="pi pi-home mr-2"></i>
40
40
  <span>Home</span>
41
41
  </a>
42
42
  </li>
43
43
  <li class="lg:relative">
44
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
45
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
44
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple"
45
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
46
46
  <i class="pi pi-users mr-2"></i>
47
47
  <span>Customers</span>
48
- <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
48
+ <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
49
49
  </a>
50
- <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
50
+ <ul class="list-none py-4 px-12 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer">
51
51
  <li>
52
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
52
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
53
53
  <i class="pi pi-user-plus mr-2"></i>
54
54
  <span class="font-medium">Add New</span>
55
55
  </a>
56
56
  </li>
57
57
  <li class="relative">
58
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
59
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
58
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple"
59
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
60
60
  <i class="pi pi-search mr-2"></i>
61
61
  <span class="font-medium">Search</span>
62
62
  <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
63
63
  </a>
64
- <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
64
+ <ul class="list-none py-4 pl-4 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer left-full top-0">
65
65
  <li>
66
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
66
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
67
67
  <i class="pi pi-shopping-cart mr-2"></i>
68
68
  <span class="font-medium">Purchases</span>
69
69
  </a>
70
70
  </li>
71
71
  <li class="relative">
72
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
72
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
73
73
  <i class="pi pi-comments mr-2"></i>
74
74
  <span class="font-medium">Messages</span>
75
75
  </a>
@@ -79,31 +79,31 @@
79
79
  </ul>
80
80
  </li>
81
81
  <li>
82
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
82
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
83
83
  <i class="pi pi-calendar mr-2"></i>
84
84
  <span>Calendar</span>
85
85
  </a>
86
86
  </li>
87
87
  <li>
88
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
88
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
89
89
  <i class="pi pi-chart-line mr-2"></i>
90
90
  <span>Stats</span>
91
91
  </a>
92
92
  </li>
93
93
  </ul>
94
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
94
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row border-t border-surface lg:border-t-0">
95
95
  <li>
96
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
96
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
97
97
  <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
98
98
  <span class="block lg:hidden font-medium">Inbox</span>
99
99
  </a>
100
100
  </li>
101
- <li class="border-top-1 surface-border lg:border-top-none">
102
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
103
- <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
101
+ <li class="border-t border-surface lg:border-t-0">
102
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
103
+ <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
104
104
  <div class="block lg:hidden">
105
- <div class="text-900 font-medium">Josephine Lillard</div>
106
- <span class="text-600 font-medium text-sm">Marketing Specialist</span>
105
+ <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
106
+ <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
107
107
  </div>
108
108
  </a>
109
109
  </li>
package/front/src/UrlsListPage.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div class="w-full sm:w-12 md:w-9 lg:w-7 surface-card p-4 shadow-2 border-round">
3
- <div class="text-center mb-5">
4
- <div class="text-900 text-3xl font-medium mb-3">
2
+ <div class="w-full sm:w-full md:w-9/12 lg:w-7/12 bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
3
+ <div class="text-center mb-8">
4
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
5
5
  Urls List
6
6
  </div>
7
7
  </div>
package/front/src/UrlsPage.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div class="w-full sm:w-12 md:w-9 lg:w-7 surface-card p-4 shadow-2 border-round">
3
- <div class="text-center mb-5">
4
- <div class="text-900 text-3xl font-medium mb-3">
2
+ <div class="w-full sm:w-full md:w-9/12 lg:w-7/12 bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
3
+ <div class="text-center mb-8">
4
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
5
5
  Urls
6
6
  </div>
7
7
  </div>
package/front/src/components/GenerateUrlForm.vue CHANGED
@@ -4,80 +4,94 @@
4
4
  :initialValues="{ maxLength: 125, charset: 'all', ...initialValues }"
5
5
  @done="handleTaken" keepOnDone>
6
6
 
7
- <div class="p-field mb-3">
8
- <label for="title" class="block text-900 font-medium mb-2">
7
+ <div class="p-field mb-4">
8
+ <label for="title" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
9
9
  Title (optional)
10
10
  </label>
11
11
  <InputText id="title" type="text" class="w-full"
12
- aria-describedby="title-help" :class="{ 'p-invalid': data.titleError }"
12
+ aria-describedby="title-help" :invalid="!!data.titleError"
13
13
  placeholder="enter title"
14
14
  v-model="data.title" />
15
- <small v-if="data.titleError" id="title-help" class="p-error">{{ t(`errors.${data.titleError}`) }}</small>
15
+ <Message v-if="data.titleError" severity="error" variant="simple" size="small">
16
+ {{ t(`errors.${data.titleError}`) }}
17
+ </Message>
16
18
  </div>
17
- <div class="p-field mb-3">
18
- <label for="path" class="block text-900 font-medium mb-2">
19
+ <div class="p-field mb-4">
20
+ <label for="path" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
19
21
  Path (optional)
20
22
  </label>
21
23
  <InputText id="path" type="text" class="w-full"
22
- aria-describedby="path-help" :class="{ 'p-invalid': data.pathError }"
24
+ aria-describedby="path-help" :invalid="!!data.pathError"
23
25
  placeholder="or enter path"
24
26
  v-model="data.path" />
25
- <small v-if="data.pathError" id="path-help" class="p-error">{{ t(`errors.${data.pathError}`) }}</small>
27
+ <Message v-if="data.pathError" severity="error" variant="simple" size="small">
28
+ {{ t(`errors.${data.pathError}`) }}
29
+ </Message>
26
30
  </div>
27
- <div class="p-field mb-3">
28
- <label for="maxLength" class="block text-900 font-medium mb-2">
31
+ <div class="p-field mb-4">
32
+ <label for="maxLength" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
29
33
  Max length
30
34
  </label>
31
35
  <InputNumber inputId="maxLength" v-model="data.maxLength" showButtons buttonLayout="horizontal"
32
36
  class="w-full"
33
37
  :step="1" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success"
34
38
  incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
35
- mode="decimal" :useGrouping="false" :class="{ 'p-invalid': data.maxLengthError }" />
36
- <small v-if="data.maxLengthError" id="maxLength-help" class="p-error">{{ t(`errors.${data.maxLengthError}`) }}</small>
39
+ mode="decimal" :useGrouping="false" :invalid="!!data.maxLengthError" />
40
+ <Message v-if="data.maxLengthError" severity="error" variant="simple" size="small">
41
+ {{ t(`errors.${data.maxLengthError}`) }}
42
+ </Message>
37
43
  </div>
38
44
 
39
- <div class="p-field mb-3">
40
- <label for="charset" class="block text-900 font-medium mb-2">
45
+ <div class="p-field mb-4">
46
+ <label for="charset" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
41
47
  Charset
42
48
  </label>
43
49
  <Dropdown id="charset" type="text" class="w-full"
44
- aria-describedby="charset-help" :class="{ 'p-invalid': data.charsetError }"
50
+ aria-describedby="charset-help" :invalid="!!data.charsetError"
45
51
  placeholder="select charset"
46
52
  v-model="data.charset" :options="charsets" optionLabel="label" optionValue="value" />
47
- <small v-if="data.charsetError" id="charset-help" class="p-error">{{ t(`errors.${data.charsetError}`) }}</small>
53
+ <Message v-if="data.charsetError" severity="error" variant="simple" size="small">
54
+ {{ t(`errors.${data.charsetError}`) }}
55
+ </Message>
48
56
  </div>
49
57
 
50
- <div class="p-field mb-3">
51
- <label for="domain" class="block text-900 font-medium mb-2">
58
+ <div class="p-field mb-4">
59
+ <label for="domain" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
52
60
  Domain (optional)
53
61
  </label>
54
62
  <InputText id="domain" type="text" class="w-full"
55
- aria-describedby="domain-help" :class="{ 'p-invalid': data.domainError }"
63
+ aria-describedby="domain-help" :invalid="!!data.domainError"
56
64
  placeholder="any"
57
65
  v-model="data.domain" />
58
- <small v-if="data.domainError" id="domain-help" class="p-error">{{ t(`errors.${data.domainError}`) }}</small>
66
+ <Message v-if="data.domainError" severity="error" variant="simple" size="small">
67
+ {{ t(`errors.${data.domainError}`) }}
68
+ </Message>
59
69
  </div>
60
70
 
61
- <div class="p-field mb-3">
62
- <label for="prefix" class="block text-900 font-medium mb-2">
71
+ <div class="p-field mb-4">
72
+ <label for="prefix" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
63
73
  Prefix (optional)
64
74
  </label>
65
75
  <InputText id="prefix" type="text" class="w-full"
66
- aria-describedby="prefix-help" :class="{ 'p-invalid': data.prefixError }"
76
+ aria-describedby="prefix-help" :invalid="!!data.prefixError"
67
77
  placeholder="or enter prefix"
68
78
  v-model="data.prefix" />
69
- <small v-if="data.prefixError" id="prefix-help" class="p-error">{{ t(`errors.${data.prefixError}`) }}</small>
79
+ <Message v-if="data.prefixError" severity="error" variant="simple" size="small">
80
+ {{ t(`errors.${data.prefixError}`) }}
81
+ </Message>
70
82
  </div>
71
83
 
72
- <div class="p-field mb-3">
73
- <label for="suffix" class="block text-900 font-medium mb-2">
84
+ <div class="p-field mb-4">
85
+ <label for="suffix" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
74
86
  Suffix (optional)
75
87
  </label>
76
88
  <InputText id="suffix" type="text" class="w-full"
77
- aria-describedby="suffix-help" :class="{ 'p-invalid': data.suffixError }"
89
+ aria-describedby="suffix-help" :invalid="!!data.suffixError"
78
90
  placeholder="enter suffix"
79
91
  v-model="data.suffix" />
80
- <small v-if="data.suffixError" id="suffix-help" class="p-error">{{ t(`errors.${data.suffixError}`) }}</small>
92
+ <Message v-if="data.suffixError" severity="error" variant="simple" size="small">
93
+ {{ t(`errors.${data.suffixError}`) }}
94
+ </Message>
81
95
  </div>
82
96
 
83
97
  <div class="flex flex-row flex-wrap">
@@ -94,6 +108,7 @@
94
108
  import InputText from "primevue/inputtext"
95
109
  import InputNumber from "primevue/inputnumber"
96
110
  import Dropdown from "primevue/dropdown"
111
+ import Message from "primevue/message"
97
112
 
98
113
  const { initialValues, target, targetType, redirect } = defineProps({
99
114
  initialValues: {
package/front/src/components/NotAuthorized.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
2
+ <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
3
3
  <div class="text-center code404">
4
- <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-3">403</span>
4
+ <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-4">403</span>
5
5
  </div>
6
- <div class="mt-6 mb-5 font-bold text-6xl text-900 text-center">Not authorized</div>
7
- <p class="text-700 text-3xl mt-0 mb-6 text-center">
6
+ <div class="mt-12 mb-8 font-bold text-6xl text-surface-900 dark:text-surface-0 text-center">Not authorized</div>
7
+ <p class="text-surface-700 dark:text-surface-100 text-3xl mt-0 mb-12 text-center">
8
8
  You do not have sufficient privileges to see this page.
9
9
  </p>
10
10
  <div class="text-center">
package/front/src/components/NotFound.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
2
+ <div class="bg-surface-0 dark:bg-surface-950 px-6 py-20 md:px-12 lg:px-20">
3
3
  <div class="text-center code404">
4
- <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-3">404</span>
4
+ <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-4">404</span>
5
5
  </div>
6
- <div class="mt-6 mb-5 font-bold text-6xl text-900 text-center">Page Not Found</div>
7
- <p class="text-700 text-3xl mt-0 mb-6 text-center">Sorry, we couldn't find the page.</p>
6
+ <div class="mt-12 mb-8 font-bold text-6xl text-surface-900 dark:text-surface-0 text-center">Page Not Found</div>
7
+ <p class="text-surface-700 dark:text-surface-100 text-3xl mt-0 mb-12 text-center">Sorry, we couldn't find the page.</p>
8
8
  <div class="text-center">
9
9
  <Button v-if="canGoBack" @click="goBack()"
10
10
  class="p-button-text mr-2" label="Go Back" icon="pi pi-arrow-left" />
package/front/src/components/ResolveUrl.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <slot v-if="url && accessible" :url="url" :target="url.target" :class="clazz" :style="style">
3
- <div class="w-full surface-card p-4 shadow-2 border-round">
3
+ <div class="w-full bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
4
4
  <h2>Url resolved:</h2>
5
5
  <pre>{{ JSON.stringify(url, null, " ") }}</pre>
6
6
  </div>
package/front/src/components/TakeUrlForm.vue CHANGED
@@ -3,25 +3,29 @@
3
3
  <command-form service="url" action="takeUrl" v-slot="{ data }" :parameters="{ target, targetType, redirect }"
4
4
  :initialValues="initialValues" @done="handleTaken" keepOnDone>
5
5
 
6
- <div class="p-field mb-3">
7
- <label for="path" class="block text-900 font-medium mb-2">
6
+ <div class="p-field mb-4">
7
+ <label for="path" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
8
8
  Path
9
9
  </label>
10
10
  <InputText id="path" type="text" class="w-full"
11
- aria-describedby="path-help" :class="{ 'p-invalid': data.pathError }"
11
+ aria-describedby="path-help" :invalid="!!data.pathError"
12
12
  placeholder="enter/absolute/path"
13
13
  v-model="data.path" />
14
- <small v-if="data.pathError" id="path-help" class="p-error">{{ t(`errors.${data.pathError}`) }}</small>
14
+ <Message v-if="data.pathError" severity="error" variant="simple" size="small">
15
+ {{ t(`errors.${data.pathError}`) }}
16
+ </Message>
15
17
  </div>
16
- <div class="p-field mb-3">
17
- <label for="domain" class="block text-900 font-medium mb-2">
18
+ <div class="p-field mb-4">
19
+ <label for="domain" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">
18
20
  Domain (optional)
19
21
  </label>
20
22
  <InputText id="domain" type="text" class="w-full"
21
- aria-describedby="domain-help" :class="{ 'p-invalid': data.domainError }"
23
+ aria-describedby="domain-help" :invalid="!!data.domainError"
22
24
  placeholder="any"
23
25
  v-model="data.domain" />
24
- <small v-if="data.domainError" id="domain-help" class="p-error">{{ t(`errors.${data.domainError}`) }}</small>
26
+ <Message v-if="data.domainError" severity="error" variant="simple" size="small">
27
+ {{ t(`errors.${data.domainError}`) }}
28
+ </Message>
25
29
  </div>
26
30
 
27
31
  <div class="flex flex-row flex-wrap">
@@ -32,7 +36,7 @@
32
36
  </command-form>
33
37
 
34
38
  <Dialog :visible="generateDialogVisible" @update:visible="v => generateDialogVisible = v"
35
- :modal="true" class="w-full sm:w-9 md:w-8 lg:w-6">
39
+ :modal="true" class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12">
36
40
  <template #header>
37
41
  <h3>Generate url</h3>
38
42
  </template>
@@ -46,6 +50,7 @@
46
50
  import Button from "primevue/button"
47
51
  import InputText from "primevue/inputtext"
48
52
  import Dialog from "primevue/dialog"
53
+ import Message from "primevue/message"
49
54
 
50
55
  import GenerateUrlForm from "./GenerateUrlForm.vue"
51
56
 
package/front/src/components/Urls.vue CHANGED
@@ -1,23 +1,23 @@
1
1
  <template>
2
- <div class="mb-4">
2
+ <div class="mb-6">
3
3
  <div v-if="isAccessible">
4
- <div class="mb-4">
5
- <div class="text-900 text-xl font-medium mb-2">
4
+ <div class="mb-6">
5
+ <div class="text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">
6
6
  Canonical Url
7
7
  </div>
8
8
  <div v-if="canonical">
9
- <div class="w-full flex flex-wrap flex-row align-items-center">
10
- <span class="text-right overflow-hidden text-overflow-ellipsis mr-1">
9
+ <div class="w-full flex flex-wrap flex-row items-center">
10
+ <span class="text-right overflow-hidden text-ellipsis mr-1">
11
11
  {{ canonical.domain || '*' }}
12
12
  </span>
13
- <span class="flex-grow-1">
13
+ <span class="grow">
14
14
  /{{ canonical.path }}
15
15
  </span>
16
16
  <Button icon="pi pi-pencil" label="Edit" class="p-button-warning mr-1" @click="editCanonical" />
17
17
  <Button icon="pi pi-trash" label="Delete" class="p-button-danger" @click="deleteCanonical"/>
18
18
 
19
19
  <Dialog :visible="editCanonicalDialogVisible" @update:visible="v => editCanonicalDialogVisible = v"
20
- :modal="true" class="w-full sm:w-9 md:w-8 lg:w-6">
20
+ :modal="true" class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12">
21
21
  <template #header>
22
22
  <h3>Edit canonical url</h3>
23
23
  </template>
@@ -33,14 +33,14 @@
33
33
  </div>
34
34
 
35
35
  <div v-if="redirects.length > 0">
36
- <div class="text-900 text-xl font-medium mb-2">
36
+ <div class="text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">
37
37
  Redirects
38
38
  </div>
39
- <div class="w-full flex flex-wrap flex-row align-items-center mb-1" v-for="url of redirects" :key="url.to">
40
- <span class="text-right overflow-hidden text-overflow-ellipsis mr-1">
39
+ <div class="w-full flex flex-wrap flex-row items-center mb-1" v-for="url of redirects" :key="url.to">
40
+ <span class="text-right overflow-hidden text-ellipsis mr-1">
41
41
  {{ url.domain || '*' }}
42
42
  </span>
43
- <span class="flex-grow-1">
43
+ <span class="grow">
44
44
  /{{ url.path }}
45
45
  </span>
46
46
  <Button icon="pi pi-trash" label="Delete" class="p-button-danger" @click="() => deleteRedirect(url)"/>
@@ -53,7 +53,7 @@
53
53
  </div>
54
54
 
55
55
  <Dialog :visible="createRedirectDialogVisible" @update:visible="v => createRedirectDialogVisible = v"
56
- :modal="true" class="w-full sm:w-9 md:w-8 lg:w-6">
56
+ :modal="true" class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12">
57
57
  <template #header>
58
58
  <h3>Add redirect</h3>
59
59
  </template>
package/front/src/components/UrlsInfo.vue CHANGED
@@ -4,14 +4,14 @@
4
4
  <template v-if="canonical">
5
5
  <span class="font-bold mr-2">Url:</span>
6
6
  <span class="mr-1 font-normal">{{ canonical.domain || '*' }}</span>
7
- <span class="text-overflow-ellipsis overflow-hidden font-normal flex-grow-1">
7
+ <span class="text-ellipsis overflow-hidden font-normal grow">
8
8
  {{props.prefix}}{{ canonical.path }}
9
9
  </span>
10
10
 
11
11
  </template>
12
12
  <span v-else>No Url</span>
13
13
  <template v-if="redirects.length">
14
- <i class="pi pi-arrow-up-right mr-1 ml-3"></i>
14
+ <i class="pi pi-arrow-up-right mr-1 ml-4"></i>
15
15
  <span class="font-bold">{{ redirects.length }}</span>
16
16
  </template>
17
17
  </div>
package/front/src/components/UrlsList.vue CHANGED
@@ -6,19 +6,19 @@
6
6
  :ref="el => bucket.domElements[index] = el"
7
7
  class="mb-1">
8
8
  <!-- <pre>{{ JSON.stringify(url, null, ' ') }}</pre>-->
9
- <div class="flex flex-row align-items-center">
10
- <div class="flex-shrink-0 mr-2">
9
+ <div class="flex flex-row items-center">
10
+ <div class="shrink-0 mr-2">
11
11
  <i class="pi pi-globe text-2xl" />
12
12
  </div>
13
- <div class="flex flex-row flex-grow-1 flex-wrap">
14
- <div class="py-1 flex-grow-0">
13
+ <div class="flex flex-row grow flex-wrap">
14
+ <div class="py-1 grow-0">
15
15
  <router-link :to="urlLink(url)">{{ urlLink(url) }}</router-link>
16
16
  </div>
17
- <div v-if="url.type == 'redirect'" class="flex flex-row align-items-center">
18
- <div class="flex-shrink-0 mr-2 ml-5">
17
+ <div v-if="url.type == 'redirect'" class="flex flex-row items-center">
18
+ <div class="shrink-0 mr-2 ml-8">
19
19
  <i class="pi pi-arrow-right text-2xl" />
20
20
  </div>
21
- <div class="py-1 flex-grow-0">
21
+ <div class="py-1 grow-0">
22
22
  <router-link :to="urlLink(url.canonical)">{{ urlLink(url.canonical) }}</router-link>
23
23
  </div>
24
24
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/url-frontend",
3
- "version": "0.9.31",
3
+ "version": "0.9.33",
4
4
  "scripts": {
5
5
  "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
6
6
  "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,18 +22,18 @@
22
22
  "type": "module",
23
23
  "dependencies": {
24
24
  "@fortawesome/fontawesome-free": "^6.7.2",
25
- "@live-change/cli": "^0.9.31",
26
- "@live-change/dao": "^0.9.31",
27
- "@live-change/dao-vue3": "^0.9.31",
28
- "@live-change/dao-websocket": "^0.9.31",
29
- "@live-change/framework": "^0.9.31",
30
- "@live-change/password-authentication-service": "^0.9.31",
31
- "@live-change/prosemirror-service": "^0.9.31",
32
- "@live-change/secret-code-service": "^0.9.31",
33
- "@live-change/secret-link-service": "^0.9.31",
34
- "@live-change/session-service": "^0.9.31",
35
- "@live-change/vue3-components": "^0.9.31",
36
- "@live-change/vue3-ssr": "^0.9.31",
25
+ "@live-change/cli": "^0.9.33",
26
+ "@live-change/dao": "^0.9.33",
27
+ "@live-change/dao-vue3": "^0.9.33",
28
+ "@live-change/dao-websocket": "^0.9.33",
29
+ "@live-change/framework": "^0.9.33",
30
+ "@live-change/password-authentication-service": "^0.9.33",
31
+ "@live-change/prosemirror-service": "^0.9.33",
32
+ "@live-change/secret-code-service": "^0.9.33",
33
+ "@live-change/secret-link-service": "^0.9.33",
34
+ "@live-change/session-service": "^0.9.33",
35
+ "@live-change/vue3-components": "^0.9.33",
36
+ "@live-change/vue3-ssr": "^0.9.33",
37
37
  "@vueuse/core": "^12.3.0",
38
38
  "codeceptjs-assert": "^0.0.5",
39
39
  "compression": "^1.7.5",
@@ -41,7 +41,7 @@
41
41
  "get-port-sync": "1.0.1",
42
42
  "primeflex": "^3.3.1",
43
43
  "primeicons": "^7.0.0",
44
- "primevue": "^3.52.0",
44
+ "primevue": "^4.2.5",
45
45
  "rollup-plugin-node-builtins": "^2.1.2",
46
46
  "rollup-plugin-visualizer": "5.14.0",
47
47
  "serialize-javascript": "^6.0.2",
@@ -51,7 +51,7 @@
51
51
  "vue3-scroll-border": "0.1.6"
52
52
  },
53
53
  "devDependencies": {
54
- "@live-change/codeceptjs-helper": "^0.9.31",
54
+ "@live-change/codeceptjs-helper": "^0.9.33",
55
55
  "codeceptjs": "^3.6.10",
56
56
  "generate-password": "1.7.1",
57
57
  "playwright": "1.49.1",
@@ -62,5 +62,5 @@
62
62
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
63
63
  "license": "ISC",
64
64
  "description": "",
65
- "gitHead": "4e12be9d3f339492bb9ddc3c6c77581e52d1ba60"
65
+ "gitHead": "c6eaa7764dc12b9489b74386b1227b71d0640e09"
66
66
  }