feat: add dockerfile for admin-ui

admin-ui/.dockerignore

@@ -0,0 +1,18 @@
+# .dockerignore
+
+.vscode
+
+node_modules
+
+.git
+.gitattributes
+
+.eslintignore
+.eslintrc.cjs
+
+.prettierrc
+.pretieriignore
+
+README.md
+
+Dockerfile

admin-ui/Dockerfile

@@ -0,0 +1,40 @@
+# Build the first stage with alpine node image and name as build
+FROM node:18-alpine3.17 as build
+
+# update and install the latest dependencies on docker base image
+# Add non root user to the docker image and set the user
+RUN apk update && apk upgrade && adduser -D svelteuser
+USER svelteuser
+
+# set work dir as app
+WORKDIR /app
+
+# copy the sveltkit project content with proper permission for the user svelteuser
+COPY --chown=svelteuser:svelteuser . /app
+
+# install all the project npm dependencies and 
+# build the svelte project to generate the artifacts in build directory
+RUN npm install && npm run build
+
+# we are using multi stage build process to keep the image size as small as possible
+FROM node:18-alpine3.17
+# update and install latest dependencies, add dumb-init package
+# add and set non root user
+RUN apk update && apk upgrade && apk add dumb-init && adduser -D svelteuser
+USER svelteuser
+
+# set work dir as app
+WORKDIR /app
+
+# copy the build directory to the /app directory of second stage 
+COPY --chown=svelteuser:svelteuser --from=build /app/build /app/package.json ./
+
+# expose 8080 on container
+EXPOSE 8080
+
+# set app host and port and env as production
+ENV HOST=0.0.0.0 PORT=8080 NODE_ENV=production
+
+# start the app with dumb init to spawn the Node.js runtime process
+# with signal support
+CMD ["dumb-init","node","index.js"]

admin-ui/package.json

@@ -16,6 +16,7 @@
     "@skeletonlabs/skeleton": "2.10.1",
     "@skeletonlabs/tw-plugin": "0.4.0",
     "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-node": "^5.2.1",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tailwindcss/forms": "0.5.7",
@@ -32,7 +33,7 @@
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
-    "tailwindcss": "3.4.4",
+    "tailwindcss": "^3.4.4",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.0.0-alpha.20",

admin-ui/src/routes/+page.svelte

@@ -1,3 +1,23 @@
+<script lang="ts">
+    let oldPassword: string;
+    let newPassword: string;
+    let newPasswortRepeated: string;
+</script>
+
 <div>
     <h1>home</h1>
+    <div class="mt-5 card p-4">
+        <div class="w-1/3">
+            <label class="block text-sm font-bold mb-1">Old Password</label>
+            <input class="input w-full px-4 py-2 border rounded-lg" type="text" placeholder="Enter key" bind:value={oldPassword} on:input={() => {}} />
+        </div>
+        <div class="w-1/3">
+            <label class="block text-sm font-bold mb-1">New Password</label>
+            <input class="input w-full px-4 py-2 border rounded-lg" type="text" placeholder="Enter key" bind:value={newPassword} on:input={() => {}} />
+        </div>
+        <div class="w-1/3">
+            <label class="block text-sm font-bold mb-1">New Password Repeated</label>
+            <input class="input w-full px-4 py-2 border rounded-lg" type="text" placeholder="Enter key" bind:value={newPasswortRepeated} on:input={() => {}} />
+        </div>
+    </div>
 </div>

admin-ui/src/routes/pages/+page.svelte

@@ -5,7 +5,6 @@
     import Icon from '@iconify/svelte';
 	import { goto } from '$app/navigation';
 	import { createNewPage } from '../../store/pages/util/createNewPage';
-	import { get } from 'svelte/store';
     import { deletePage as deletePageApi } from '../../store/pages/util/deletePage';
     import { assignHomePage as assignHomePageApi } from '../../store/pages/util/assignHomePage';