@striae-org/striae 3.2.2 → 3.3.0

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 (37) hide show
  1. package/app/components/actions/case-export/download-handlers.ts +51 -3
  2. package/app/components/actions/case-import/confirmation-import.ts +41 -17
  3. package/app/components/actions/case-import/confirmation-package.ts +86 -0
  4. package/app/components/actions/case-import/index.ts +1 -0
  5. package/app/components/actions/case-import/orchestrator.ts +12 -2
  6. package/app/components/actions/case-import/validation.ts +5 -98
  7. package/app/components/actions/case-import/zip-processing.ts +44 -2
  8. package/app/components/actions/confirm-export.ts +44 -13
  9. package/app/components/form/form-button.tsx +1 -1
  10. package/app/components/form/form.module.css +9 -0
  11. package/app/components/public-signing-key-modal/public-signing-key-modal.module.css +163 -49
  12. package/app/components/public-signing-key-modal/public-signing-key-modal.tsx +365 -88
  13. package/app/components/sidebar/case-export/case-export.tsx +2 -54
  14. package/app/components/sidebar/case-import/case-import.tsx +18 -6
  15. package/app/components/sidebar/case-import/hooks/useFilePreview.ts +6 -4
  16. package/app/components/sidebar/case-import/utils/file-validation.ts +57 -2
  17. package/app/components/sidebar/cases/case-sidebar.tsx +101 -46
  18. package/app/components/sidebar/cases/cases.module.css +101 -18
  19. package/app/components/sidebar/notes/notes.module.css +33 -13
  20. package/app/components/user/manage-profile.tsx +1 -1
  21. package/app/components/user/mfa-phone-update.tsx +15 -12
  22. package/app/root.tsx +2 -2
  23. package/app/routes/auth/login.tsx +129 -6
  24. package/app/utils/SHA256.ts +5 -1
  25. package/app/utils/confirmation-signature.ts +5 -1
  26. package/app/utils/export-verification.ts +353 -0
  27. package/app/utils/signature-utils.ts +74 -4
  28. package/package.json +7 -4
  29. package/public/favicon.ico +0 -0
  30. package/public/icon-256.png +0 -0
  31. package/public/icon-512.png +0 -0
  32. package/public/manifest.json +39 -0
  33. package/public/shortcut.png +0 -0
  34. package/public/social-image.png +0 -0
  35. package/react-router.config.ts +5 -0
  36. package/workers/pdf-worker/scripts/generate-assets.js +94 -0
  37. package/public/favicon.svg +0 -9
package/app/components/form/form.module.css CHANGED
@@ -124,6 +124,15 @@
124
124
  background-color: color-mix(in lab, var(--error) 85%, var(--black));
125
125
  }
126
126
 
127
+ .buttonAudit {
128
+ background-color: #6f42c1;
129
+ color: var(--white);
130
+ }
131
+
132
+ .buttonAudit:hover:not(:disabled) {
133
+ background-color: #5a359a;
134
+ }
135
+
127
136
  .button:disabled {
128
137
  background-color: color-mix(in lab, var(--background) 95%, transparent);
129
138
  color: var(--textLight);
package/app/components/public-signing-key-modal/public-signing-key-modal.module.css CHANGED
@@ -79,93 +79,207 @@
79
79
  font-weight: var(--fontWeightMedium);
80
80
  }
81
81
 
82
- .label {
82
+ .verifierLayout {
83
+ display: flex;
84
+ flex-direction: column;
85
+ gap: var(--spaceL);
86
+ }
87
+
88
+ .verificationField {
89
+ display: flex;
90
+ flex-direction: column;
91
+ gap: var(--spaceS);
92
+ }
93
+
94
+ .fieldHeader {
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: space-between;
98
+ gap: var(--spaceS);
99
+ }
100
+
101
+ .fieldLabel {
83
102
  font-size: var(--fontSizeBodyXS);
84
103
  font-weight: var(--fontWeightMedium);
85
104
  color: var(--textTitle);
86
105
  }
87
106
 
88
- .field {
89
- width: 100%;
90
- max-width: 100%;
91
- box-sizing: border-box;
92
- min-height: 180px;
93
- padding: var(--spaceM);
94
- border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
95
- border-radius: var(--spaceXS);
96
- background: color-mix(in lab, var(--background) 96%, transparent);
97
- color: var(--textBody);
107
+ .hiddenFileInput {
108
+ display: none;
109
+ }
110
+
111
+ .clearButton {
112
+ background: none;
113
+ border: none;
114
+ padding: 0;
115
+ color: var(--primary);
98
116
  font-size: var(--fontSizeBodyXS);
99
- line-height: 1.4;
100
- font-family: Consolas, "Courier New", monospace;
101
- resize: vertical;
117
+ font-weight: var(--fontWeightMedium);
118
+ cursor: pointer;
102
119
  }
103
120
 
104
- .howToTitle {
121
+ .dropZone {
122
+ min-height: 144px;
123
+ margin: 0;
124
+ display: flex;
125
+ flex-direction: column;
126
+ justify-content: center;
127
+ gap: var(--spaceXS);
128
+ padding: var(--spaceL);
129
+ border: 1px dashed color-mix(in lab, var(--text) 18%, transparent);
130
+ border-radius: var(--radiusM);
131
+ background: linear-gradient(
132
+ 135deg,
133
+ color-mix(in lab, var(--primary) 4%, var(--backgroundLight)),
134
+ color-mix(in lab, var(--background) 94%, transparent)
135
+ );
136
+ cursor: pointer;
137
+ transition:
138
+ border-color var(--durationS) var(--bezierFastoutSlowin),
139
+ background-color var(--durationS) var(--bezierFastoutSlowin),
140
+ box-shadow var(--durationS) var(--bezierFastoutSlowin);
141
+ }
142
+
143
+ .dropZone:hover {
144
+ border-color: color-mix(in lab, var(--primary) 35%, transparent);
145
+ background: linear-gradient(
146
+ 135deg,
147
+ color-mix(in lab, var(--primary) 7%, var(--backgroundLight)),
148
+ color-mix(in lab, var(--background) 92%, transparent)
149
+ );
150
+ }
151
+
152
+ .dropZone:focus-visible {
153
+ outline: none;
154
+ border-color: color-mix(in lab, var(--primary) 48%, transparent);
155
+ box-shadow: 0 0 0 3px color-mix(in lab, var(--primary) 14%, transparent);
156
+ }
157
+
158
+ .dropZoneActive {
159
+ border-color: color-mix(in lab, var(--primary) 50%, transparent);
160
+ background: linear-gradient(
161
+ 135deg,
162
+ color-mix(in lab, var(--primary) 10%, var(--backgroundLight)),
163
+ color-mix(in lab, var(--background) 90%, transparent)
164
+ );
165
+ box-shadow: 0 0 0 3px color-mix(in lab, var(--primary) 12%, transparent);
166
+ }
167
+
168
+ .dropZoneDisabled {
169
+ opacity: 0.7;
170
+ cursor: not-allowed;
171
+ }
172
+
173
+ .dropZonePrimary {
105
174
  margin: 0;
106
175
  font-size: var(--fontSizeBodyS);
107
176
  font-weight: var(--fontWeightMedium);
108
177
  color: var(--textTitle);
109
178
  }
110
179
 
111
- .howToList {
180
+ .dropZoneSecondary {
112
181
  margin: 0;
113
- padding-left: var(--spaceL);
114
- display: flex;
115
- flex-direction: column;
116
- gap: var(--spaceXS);
182
+ font-size: var(--fontSizeBodyXS);
117
183
  color: var(--textBody);
118
- font-size: var(--fontSizeBodyS);
119
184
  }
120
185
 
121
- .actions {
186
+ .fieldActions {
122
187
  display: flex;
123
- justify-content: flex-end;
188
+ flex-wrap: wrap;
124
189
  gap: var(--spaceS);
125
190
  }
126
191
 
127
- .status {
192
+ .fieldError {
128
193
  margin: 0;
129
194
  font-size: var(--fontSizeBodyXS);
195
+ color: var(--error);
196
+ }
197
+
198
+ .resultCard {
199
+ display: flex;
200
+ flex-direction: column;
201
+ gap: var(--spaceXS);
202
+ padding: var(--spaceM) var(--spaceL);
203
+ border-radius: var(--radiusM);
204
+ }
205
+
206
+ .resultPass {
207
+ border: 1px solid color-mix(in lab, var(--success) 38%, transparent);
208
+ background: color-mix(in lab, var(--success) 12%, var(--backgroundLight));
209
+ }
210
+
211
+ .resultFail {
212
+ border: 1px solid color-mix(in lab, var(--error) 32%, transparent);
213
+ background: color-mix(in lab, var(--errorLight) 40%, var(--backgroundLight));
214
+ }
215
+
216
+ .resultTitle {
217
+ margin: 0;
218
+ font-size: var(--fontSizeBodyM);
219
+ font-weight: var(--fontWeightBold);
220
+ letter-spacing: 0.06em;
221
+ }
222
+
223
+ .resultPass .resultTitle {
224
+ color: color-mix(in lab, var(--success) 78%, var(--black));
225
+ }
226
+
227
+ .resultFail .resultTitle {
228
+ color: color-mix(in lab, var(--error) 78%, var(--black));
229
+ }
230
+
231
+ .resultMessage {
232
+ margin: 0;
233
+ font-size: var(--fontSizeBodyS);
130
234
  color: var(--textBody);
131
235
  }
132
236
 
133
- .copyButton {
134
- background: transparent;
135
- color: var(--primary);
136
- border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
237
+ .actions {
238
+ display: flex;
239
+ justify-content: flex-end;
240
+ gap: var(--spaceS);
241
+ flex-wrap: wrap;
242
+ }
243
+
244
+ .primaryButton,
245
+ .secondaryButton {
137
246
  border-radius: var(--spaceXS);
138
247
  padding: var(--spaceS) var(--spaceL);
139
248
  font-size: var(--fontSizeBodyS);
140
249
  font-weight: var(--fontWeightMedium);
141
250
  cursor: pointer;
142
- transition: all var(--durationS) var(--bezierFastoutSlowin);
251
+ transition:
252
+ background-color var(--durationS) var(--bezierFastoutSlowin),
253
+ border-color var(--durationS) var(--bezierFastoutSlowin),
254
+ color var(--durationS) var(--bezierFastoutSlowin);
143
255
  }
144
256
 
145
- .copyButton:hover:not(:disabled) {
146
- background: color-mix(in lab, var(--primary) 10%, transparent);
147
- border-color: color-mix(in lab, var(--primary) 55%, transparent);
257
+ .primaryButton {
258
+ background: var(--primary);
259
+ color: var(--white);
260
+ border: 1px solid var(--primary);
148
261
  }
149
262
 
150
- .copyButton:disabled {
151
- background: color-mix(in lab, var(--background) 95%, transparent);
152
- color: var(--textLight);
153
- border-color: color-mix(in lab, var(--text) 10%, transparent);
154
- cursor: not-allowed;
263
+ .primaryButton:hover:not(:disabled) {
264
+ background: color-mix(in lab, var(--primary) 84%, var(--black));
265
+ border-color: color-mix(in lab, var(--primary) 84%, var(--black));
155
266
  }
156
267
 
157
- .closeModalButton {
158
- background: var(--primary);
159
- color: white;
160
- border: none;
161
- border-radius: var(--spaceXS);
162
- padding: var(--spaceS) var(--spaceL);
163
- font-size: var(--fontSizeBodyS);
164
- font-weight: var(--fontWeightMedium);
165
- cursor: pointer;
166
- transition: all var(--durationS) var(--bezierFastoutSlowin);
268
+ .secondaryButton {
269
+ background: transparent;
270
+ color: var(--textTitle);
271
+ border: 1px solid color-mix(in lab, var(--text) 16%, transparent);
167
272
  }
168
273
 
169
- .closeModalButton:hover {
170
- background: color-mix(in lab, var(--primary) 85%, var(--black));
274
+ .secondaryButton:hover:not(:disabled) {
275
+ background: color-mix(in lab, var(--text) 5%, transparent);
276
+ border-color: color-mix(in lab, var(--text) 22%, transparent);
277
+ }
278
+
279
+ .primaryButton:disabled,
280
+ .secondaryButton:disabled {
281
+ background: color-mix(in lab, var(--background) 95%, transparent);
282
+ color: var(--textLight);
283
+ border-color: color-mix(in lab, var(--text) 10%, transparent);
284
+ cursor: not-allowed;
171
285
  }