migrate from moment to date-fns (#988)

Last years there are some alternatives to momentjs appeared. Like
[date-fns](https://date-fns.org/). Mostly they depend on new
[itnl](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl),
that is build in into all modern browsers.

Unfortunately, I wasn't able to build the project (I've never touched
rust before, and the current cargo version refused to accept configs
from repo).

That's why I'm not sure that this PR actually works :(

If somebody can check, that it builds correctly now - it would be nice
to move to less size costly solution like date-fns.

Co-authored-by: Eugene <inbox@null.page>

warpgate-web/package.json

@@ -34,6 +34,7 @@
     "@typescript-eslint/parser": "^7.13.0",
     "bootstrap": "^5.3.3",
     "copy-text-to-clipboard": "^3.0.1",
+    "date-fns": "^3.6.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -42,7 +43,6 @@
     "eslint-plugin-promise": "^6.2.0",
     "eslint-plugin-svelte": "^2.39.4",
     "format-duration": "^3.0.2",
-    "moment": "^2.29.4",
     "otplib": "^12.0.1",
     "qrcode": "^1.5.1",
     "sass": "^1.77.6",
@@ -64,4 +64,4 @@
     "xterm": "^4.18.0",
     "xterm-addon-serialize": "^0.7.0"
   }
-}
+}

warpgate-web/src/admin/Home.svelte

@@ -4,7 +4,7 @@
     import { onDestroy } from 'svelte'
     import { link } from 'svelte-spa-router'
     import { api, SessionSnapshot } from 'admin/lib/api'
-    import moment from 'moment'
+    import { formatDistance } from 'date-fns';
     import { timer, Observable, switchMap, from, combineLatest, fromEvent, merge } from 'rxjs'
     import RelativeDate from './RelativeDate.svelte'
     import AsyncButton from 'common/AsyncButton.svelte'
@@ -104,7 +104,7 @@
 
             <div class="meta">
                 {#if session.ended }
-                    {moment.duration(moment(session.ended).diff(session.started)).humanize()}
+                    {formatDistance(new Date(session.started), new Date(session.ended))}
                 {/if}
             </div>
 

warpgate-web/src/admin/Session.svelte

@@ -3,7 +3,7 @@ import { api, SessionSnapshot, Recording, TargetSSHOptions, TargetHTTPOptions, T
 import { timeAgo } from 'admin/lib/time'
 import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import moment from 'moment'
+import { formatDistance, formatDistanceToNow } from 'date-fns';
 import { onDestroy } from 'svelte'
 import { link } from 'svelte-spa-router'
 import { Alert } from '@sveltestrap/sveltestrap'
@@ -79,9 +79,9 @@ onDestroy(() => clearInterval(interval))
                 </strong>
                 <span class="text-muted">
                     {#if session.ended}
-                        {moment.duration(moment(session.ended).diff(session.started)).humanize()} long, <RelativeDate date={session.started} />
+                        {formatDistance(new Date(session.started), new Date(session.ended))} long, <RelativeDate date={session.started} />
                     {:else}
-                        {moment.duration(moment().diff(session.started)).humanize()}
+                        {formatDistanceToNow(new Date(session.started))}
                     {/if}
                 </span>
             </div>

warpgate-web/src/admin/lib/time.ts

@@ -1,5 +1,5 @@
-import moment from 'moment'
+import { formatDistanceToNow } from 'date-fns'
 
-export function timeAgo (t: Date): string {
-    return moment(t).fromNow()
+export function timeAgo(t: Date): string {
+    return formatDistanceToNow(t, { addSuffix: true })
 }