Add page for encrypting with public key

Author: ulrikandersen

src/app/(authed)/encrypt/action.ts

@@ -0,0 +1,7 @@
+'use server'
+
+import { encryptionService } from '@/composition'
+
+export async function encrypt(text: string): Promise<string> {
+    return encryptionService.encrypt(text)
+}

src/app/(authed)/encrypt/layout.tsx

@@ -0,0 +1,20 @@
+import { Box, Stack } from "@mui/material"
+import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"
+
+export default function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <Stack sx={{ height: "100%" }}>
+      <SecondarySplitHeader/>
+      <Box
+        sx={{
+          flexGrow: 1,
+          overflowY: "auto",
+          paddingLeft: 2,
+          paddingRight: 2
+        }}
+      >
+        {children}
+      </Box>
+    </Stack>
+  )
+}

src/app/(authed)/encrypt/page.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react'
+import { encrypt } from './action'
+import { Box, Button, TextareaAutosize, Typography } from '@mui/material'
+
+export default function EncryptPage() {
+    const [inputText, setInputText] = useState('')
+    const [encryptedText, setEncryptedText] = useState('')
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault()
+        const encrypted = await encrypt(inputText)
+        setEncryptedText(encrypted)
+    }
+
+    return (
+        <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            flexDirection="column"
+            height={1}
+            width={1}
+            gap={6}
+        >
+            <Typography variant="h4">
+                Encrypt text for remote config
+            </Typography>
+            <Typography variant="body1">
+                Use this to encrypt values to be used in the configuration file.<br />
+                The input text is encrypted using the public key of the server.
+            </Typography>
+            <form onSubmit={handleSubmit}>
+                <TextareaAutosize
+                    value={inputText}
+                    onChange={(e) => setInputText(e.target.value)}
+                    cols={50}
+                    minRows={10}
+                />
+                <br />
+                <Button type="submit" variant="outlined"
+                    color="primary"
+                    size="large"
+                    sx={{ height: 56, width: 1 }}
+                >Encrypt</Button>
+            </form>
+            {encryptedText && (
+                <textarea readOnly value={encryptedText} rows={10} cols={50} />
+            )}
+        </Box>
+    )
+}