Merge pull request #67 from emiljohansson/feature/encryption

Feature/encryption

apps/code-not-found/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "13.0.6",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/design/package.json

@@ -15,7 +15,7 @@
     "@radix-ui/react-radio-group": "latest",
     "framer-motion": "6.2.3",
     "lib": "workspace:*",
-    "next": "13.0.6",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "shared": "workspace:*"

apps/games/package.json

@@ -14,7 +14,7 @@
     "framer-motion": "6.2.3",
     "just-shuffle": "4.1.1",
     "lib": "workspace:*",
-    "next": "13.0.6",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "shared": "workspace:*"

apps/next/app/encryption/head.tsx

@@ -0,0 +1,11 @@
+import { DefaultTags } from '@/ui/DefaultTags'
+
+export default function Head () {
+  return (
+    <>
+      <DefaultTags />
+      <title>Encrypt & Decrypt a String</title>
+      <meta name="description" content="Encrypt & Decrypt a String" />
+    </>
+  )
+}

apps/next/app/encryption/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useRef, useState } from 'react'
+
+import { Label } from '@radix-ui/react-label'
+import { AES, enc } from 'crypto-js'
+import Header from 'shared/Header'
+import Content from '@/components/Content'
+import Section from '@/components/Section'
+
+const Encrypt = () => {
+  const secretRef = useRef(null)
+  const stringRef = useRef(null)
+  const [encryptedValue, setEncryptedValue] = useState('')
+
+  function onChange () {
+    const secret = secretRef.current.value
+    const string = stringRef.current.value
+    const encrypted = AES.encrypt(string, secret).toString()
+    setEncryptedValue(encrypted)
+  }
+
+  return (
+    <div className="text-left">
+      <h2>Encrypt</h2>
+      <div className="grid grid-cols-2-auto gap-2 items-center">
+        <Label htmlFor="en-secret" className="pr-3">Enter Secret</Label>
+        <input id="en-secret" className="input w-80 pr-9" ref={secretRef} onChange={onChange} />
+        <Label htmlFor="en-string" className="pr-3">Enter String</Label>
+        <input id="en-string" className="input w-80 pr-9" ref={stringRef} onChange={onChange} />
+        <Label htmlFor="en-result" className="pr-3">Encrypted Value</Label>
+        <input id="en-result" className="input w-80 pr-9" readOnly value={encryptedValue} />
+      </div>
+    </div>
+  )
+}
+
+const Decrypt = () => {
+  const secretRef = useRef(null)
+  const stringRef = useRef(null)
+  const [decryptedValue, setDecryptedValue] = useState('')
+
+  function onChange () {
+    const secret = secretRef.current.value
+    const encryptedValue = stringRef.current.value
+    const bytes = AES.decrypt(encryptedValue, secret)
+    setDecryptedValue(bytes.toString(enc.Utf8))
+  }
+
+  return (
+    <div className="text-left">
+      <h2>Decrypt</h2>
+      <div className="grid grid-cols-2-auto gap-2 items-center">
+        <Label htmlFor="de-secret" className="pr-3">Enter Secret</Label>
+        <input id="de-secret" className="input w-80 pr-9" ref={secretRef} onChange={onChange} />
+        <Label htmlFor="de-string" className="pr-3">Enter Encrypted Value</Label>
+        <input id="de-string" className="input w-80 pr-9" ref={stringRef} onChange={onChange} />
+        <Label htmlFor="de-result" className="pr-3">Decrypted Value</Label>
+        <input id="de-result" className="input w-80 pr-9" readOnly value={decryptedValue} />
+      </div>
+    </div>
+  )
+}
+
+const EncryptionPage = () => {
+  return (
+    <Content>
+      <Header />
+      <Section>
+        <div className="grid lg:grid-cols-2 gap-8">
+          <Encrypt />
+          <Decrypt />
+        </div>
+      </Section>
+    </Content>
+  )
+}
+
+export default EncryptionPage

apps/next/app/head.tsx

@@ -1,27 +1,10 @@
-const name = 'Emil Johansson'
-export const siteTitle = 'emiljohansson.dev'
+import { DefaultTags } from '@/ui/DefaultTags'
 
 export default function Head () {
   return (
     <>
+      <DefaultTags />
       <title>Welcome to emiljohansson.dev | emiljohansson.dev</title>
-
-      <link rel="apple-touch-icon" sizes="180x180" href="/images/logo/apple-touch-icon.png" />
-      <link rel="icon" type="image/png" sizes="32x32" href="/images/logo/favicon-32x32.png" />
-      <link rel="icon" type="image/png" sizes="16x16" href="/images/logo/favicon-16x16.png" />
-      <link rel="manifest" href="/images/logo/site.webmanifest" />
-
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="author" content={name} />
-      <meta name="description" content="Emil's development playground." />
-      <meta
-        property="og:image"
-        content={`https://og-image.vercel.app/${encodeURI(
-          siteTitle,
-        )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
-      />
-      <meta name="og:title" content={siteTitle} />
-      <meta name="twitter:card" content="summary_large_image" />
     </>
   )
 }

apps/next/app/layout.tsx

@@ -4,9 +4,9 @@ import { PropsWithChildren } from 'react'
 
 export default function Layout ({ children }: PropsWithChildren<unknown>) {
   return (
-    <html lang="en">
-      <body className="dark:bg-black-rich dark:text-white">
-        <main>
+    <html lang="en" className="h-full">
+      <body className="dark:bg-black-rich dark:text-white h-full">
+        <main className="h-full">
           {children}
         </main>
       </body>

apps/next/app/page.tsx

@@ -35,6 +35,12 @@ const projects = [
     description: 'Some simple card games.',
     test: 'games',
   },
+  {
+    href: '/password-generator',
+    text: 'Password Generator',
+    description: 'Generate a password that is difficult to guess.',
+    test: 'password-generator',
+  },
   {
     href: '/random-string',
     text: 'Random String',
@@ -83,22 +89,17 @@ const projects = [
     description: 'Calculate a mathematical expression from an API route.',
     test: 'calculate',
   },
-  // {
-  //   href: '/rsc',
-  //   text: 'React Server Components',
-  //   description: 'React Server Components.',
-  // },
   {
     href: '/hooks',
     text: 'Hooks',
     description: 'Custom React Hooks.',
     test: 'hooks',
   },
   {
-    href: '/password-generator',
-    text: 'Password Generator',
-    description: 'Generate a password that is difficult to guess.',
-    test: 'password-generator',
+    href: '/encryption',
+    text: 'Encrypt and Decrypt Strings',
+    description: 'Encrypts and Decrypts a string.',
+    test: 'encryption',
   },
 ]
 

apps/next/package.json

@@ -23,16 +23,19 @@
     "@radix-ui/react-progress": "1.0.0",
     "@radix-ui/react-select": "1.0.0",
     "@radix-ui/react-tabs": "1.0.0",
+    "crypto-js": "4.1.1",
     "framer-motion": "6.2.3",
     "just-range": "4.1.1",
     "lib": "workspace:*",
-    "next": "13.0.6",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "4.7.1",
     "shared": "workspace:*",
     "swr": "1.3.0"
   },
   "devDependencies": {
+    "@types/crypto-js": "4.1.1",
     "config": "workspace:*",
     "next-transpile-modules": "9.0.0",
     "tsconfig": "workspace:*"

apps/next/tsconfig.json

@@ -23,6 +23,9 @@
     "paths": {
       "@/components/*": [
         "./components/*"
+      ],
+      "@/ui/*": [
+        "./ui/*"
       ]
     },
     "plugins": [

apps/next/ui/DefaultTags.tsx

@@ -0,0 +1,25 @@
+const name = 'Emil Johansson'
+export const siteTitle = 'emiljohansson.dev'
+
+export function DefaultTags () {
+  return (
+    <>
+      <link rel="apple-touch-icon" sizes="180x180" href="/images/logo/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" sizes="32x32" href="/images/logo/favicon-32x32.png" />
+      <link rel="icon" type="image/png" sizes="16x16" href="/images/logo/favicon-16x16.png" />
+      <link rel="manifest" href="/images/logo/site.webmanifest" />
+
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="author" content={name} />
+      <meta name="description" content="Emil's development playground." />
+      <meta
+        property="og:image"
+        content={`https://og-image.vercel.app/${encodeURI(
+          siteTitle,
+        )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
+      />
+      <meta name="og:title" content={siteTitle} />
+      <meta name="twitter:card" content="summary_large_image" />
+    </>
+  )
+}

apps/password-manager/package.json

@@ -17,7 +17,7 @@
     "@supabase/ui": "0.36.5",
     "crypto-js": "4.1.1",
     "lib": "workspace:*",
-    "next": "13.0.6",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "shared": "workspace:*"

packages/config/package.json

@@ -4,7 +4,7 @@
   "main": "eslint-preset.js",
   "license": "MIT",
   "dependencies": {
-    "next": "13.0.6",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

packages/config/tailwind.config.js

@@ -84,6 +84,9 @@ module.exports = {
           },
         },
       }),
+      gridTemplateColumns: {
+        '2-auto': 'repeat(2, minmax(0, auto))',
+      },
     },
   },
   plugins: [

packages/lib/package.json

@@ -9,6 +9,7 @@
     "test:ci": "npm run test"
   },
   "dependencies": {
+    "next": "13.1.1",
     "react": "18.2.0"
   },
   "devDependencies": {

packages/shared/Header.tsx

@@ -1,12 +1,12 @@
 import type { PropsWithChildren } from 'react'
 import Link from 'next/link'
-import { ArrowLeftIcon } from '@radix-ui/react-icons'
+import { FiArrowLeft } from 'react-icons/fi'
 
 const Header = ({ children }: PropsWithChildren) => {
   return (
     <header className="flex font p-4">
       <Link href="/" data-test="back-link">
-        <ArrowLeftIcon width={30} height={30} />
+        <FiArrowLeft size={30} strokeWidth="1.5" />
         <span className="sr-only">Back</span>
       </Link>
       <div className="ml-auto">{children}</div>

packages/shared/package.json

@@ -13,9 +13,10 @@
     "@radix-ui/react-slider": "1.0.0",
     "framer-motion": "6.2.3",
     "lib": "workspace:*",
-    "next": "13.0.6",
+    "next": "13.1.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "4.7.1"
   },
   "devDependencies": {
     "tsconfig": "workspace:*"