From 7a30770f73c89930090d9b5b3f7d0a155ed2b4ad Mon Sep 17 00:00:00 2001 From: Kevin Kandlbinder Date: Sat, 3 Sep 2022 20:58:58 +0200 Subject: [PATCH] Add Linux Permission-Tool --- package.json | 2 +- public/locales/de/translation.json | 7 + public/locales/en/translation.json | 7 + src/tools/ToolLoader.tsx | 4 + .../LinuxPermissionsTool.module.scss | 10 ++ .../LinuxPermissionsTool.module.scss.d.ts | 6 + .../LinuxPermissionsTool.tsx | 142 ++++++++++++++++++ src/tools/tools.ts | 11 +- yarn.lock | 8 +- 9 files changed, 191 insertions(+), 6 deletions(-) create mode 100644 src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss create mode 100644 src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss.d.ts create mode 100644 src/tools/encodings/linux_permissions/LinuxPermissionsTool.tsx diff --git a/package.json b/package.json index d386fb5..cdc9fbb 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "i18next-browser-languagedetector": "^6.1.0", "i18next-http-backend": "^1.2.1", "lodash": "^4.17.21", - "lucide-react": "^0.35.0", + "lucide-react": "^0.88.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-helmet": "^6.1.0", diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 77d9244..50101d3 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -55,6 +55,13 @@ "urlencode": { "title": "URL-Kodierung", "description": "Kodiere und dekodiere URL-kodierte (or Prozent-kodierte) Zeichenfolgen." + }, + "linux_permissions": { + "title": "Linux Berechtigungen", + "description": "Linux (und andere UNIX-artige Systeme) verwenden 4 Gruppen von je 3 Bits um grundlegende Dateiberechtigungen darzustellen. Die erste Gruppe setzt die Flags set UID, set GID, und sticky. Die letzten 3 Gruppen setzen die Dateiberechtigunen für den besitzenden Benutzer, die besitzende Gruppe, und jeden anderen in dieser Reihenfolge. Die 3 Bits stehen hierbei jeweils für Lesen, Schreiben, und Ausführen. Bei Ordnern steht Ausführen für Öffnen bzw. hinein Navigieren.", + "octal": "Oktal-Wert", + "bits": "Berechtigungsbits", + "umask": "umask-Wert" } }, "networking": { diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index eb41102..41d8d84 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -55,6 +55,13 @@ "urlencode": { "title": "URL-Encoding", "description": "Encode and decode strings to and from URL-encoding (or Percent-encoding)." + }, + "linux_permissions": { + "title": "Linux File-Permissions", + "description": "Linux (or other UNIX-ish systems) use 4 groups of 3 bits to represent basic file permissions. The first group sets the flags set UID, set GID, and sticky. The last three groups set the file-permissions for the owner user, the owner group, and everyone else in that order. Here the 3 bits stand for read, write, and execute. On directories execute stands for open / navigate into.", + "octal": "Octal Value", + "bits": "Permission-Bits", + "umask": "umask-Value" } }, "networking": { diff --git a/src/tools/ToolLoader.tsx b/src/tools/ToolLoader.tsx index 06f2c7d..7a2196b 100644 --- a/src/tools/ToolLoader.tsx +++ b/src/tools/ToolLoader.tsx @@ -16,6 +16,7 @@ const Base64Tool = prerenderedLoadable(() => import('./encodings/base64/Base64To const NumberBaseTool = prerenderedLoadable(() => import('./encodings/numberbase/NumberBaseTool')); const URLEncodeTool = prerenderedLoadable(() => import('./encodings/urlencode/URLEncodeTool')); const IPv4SubnettingTool = prerenderedLoadable(() => import('./networking/ipv4subnetting/IPv4SubnettingTool')); +const LinuxPermissionsTool = prerenderedLoadable(() => import('./encodings/linux_permissions/LinuxPermissionsTool')); type ErrorBoundaryProps = { resetFunction: () => void @@ -80,6 +81,9 @@ const ToolLoader = () => { case "ipv4subnetting": return ; + case "linux_permissions": + return ; + default: return ; } diff --git a/src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss b/src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss new file mode 100644 index 0000000..3117eff --- /dev/null +++ b/src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss @@ -0,0 +1,10 @@ +@import "../../../common"; + +.inputTable { + @include boxStyle; + border-collapse: separate; + + .gap { + width: 20px; + } +} \ No newline at end of file diff --git a/src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss.d.ts b/src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss.d.ts new file mode 100644 index 0000000..bb38928 --- /dev/null +++ b/src/tools/encodings/linux_permissions/LinuxPermissionsTool.module.scss.d.ts @@ -0,0 +1,6 @@ +export const center: string; +export const flexList: string; +export const gap: string; +export const inputTable: string; +export const layoutBox: string; +export const title: string; diff --git a/src/tools/encodings/linux_permissions/LinuxPermissionsTool.tsx b/src/tools/encodings/linux_permissions/LinuxPermissionsTool.tsx new file mode 100644 index 0000000..702b481 --- /dev/null +++ b/src/tools/encodings/linux_permissions/LinuxPermissionsTool.tsx @@ -0,0 +1,142 @@ +import React, { useEffect, useState } from "react"; +import { useTranslation, Trans } from "react-i18next"; +import * as styles from "./LinuxPermissionsTool.module.scss" +import { Helmet } from "react-helmet"; + +const LinuxPermissionsTool = () => { + const { t } = useTranslation(); + + let [octal, setOctal] = useState("0766"); + let [umask, setUmask] = useState(""); + let [octet1, setOctet1] = useState(0) + let [octet2, setOctet2] = useState(0) + let [octet3, setOctet3] = useState(0) + let [octet4, setOctet4] = useState(0) + let [input, setInput] = useState<"octal"|"checkbox"|"umask">("octal") + + useEffect(() => { + + if(input === "octal") { + let digits = [0, 0, 0, 0]; + + const baseOffset = 4 - octal.length; + + for(let i = 0; i < digits.length && i+baseOffset < 4; i++) { + digits[i+baseOffset] = parseInt(octal.charAt(i), 8) + } + + setUmask(`0${digits[1]^0b111}${digits[2]^0b111}${digits[3]^0b111}`) + + setOctet1(digits[0]) + setOctet2(digits[1]) + setOctet3(digits[2]) + setOctet4(digits[3]) + } + + if(input === "umask") { + let digits = [0, 0, 0, 0]; + + const baseOffset = 4 - umask.length; + + for(let i = 0; i < digits.length && i+baseOffset < 4; i++) { + digits[i+baseOffset] = parseInt(umask.charAt(i), 8) + } + + setOctal(`0${digits[1]^0b111}${digits[2]^0b111}${digits[3]^0b111}`) + + setOctet1(digits[0]^0b111) + setOctet2(digits[1]^0b111) + setOctet3(digits[2]^0b111) + setOctet4(digits[3]^0b111) + } + + if(input === "checkbox") { + setOctal(`${octet1}${octet2}${octet3}${octet4}`) + setUmask(`0${octet2^0b111}${octet3^0b111}${octet4^0b111}`) + } + }, [octal, input, octet1, octet2, octet3, octet4, umask]) + + return ( +
+ + {t("tools.encodings.linux_permissions.title")} | {t("site.title")} + + +
+

{t("tools.encodings.linux_permissions.title")}

+ +

}} />

+ + + {setOctal(e.currentTarget.value); setInput("octal")}} value={octal} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FlagsUserGroupOther
UGSRWXRWXRWX
{setOctet1(prev => prev ^ 0b100); setInput("checkbox")}}/> {setOctet1(prev => prev ^ 0b010); setInput("checkbox")}}/> {setOctet1(prev => prev ^ 0b001); setInput("checkbox")}}/> {setOctet2(prev => prev ^ 0b100); setInput("checkbox")}}/> {setOctet2(prev => prev ^ 0b010); setInput("checkbox")}}/> {setOctet2(prev => prev ^ 0b001); setInput("checkbox")}}/> {setOctet3(prev => prev ^ 0b100); setInput("checkbox")}}/> {setOctet3(prev => prev ^ 0b010); setInput("checkbox")}}/> {setOctet3(prev => prev ^ 0b001); setInput("checkbox")}}/> {setOctet4(prev => prev ^ 0b100); setInput("checkbox")}}/> {setOctet4(prev => prev ^ 0b010); setInput("checkbox")}}/> {setOctet4(prev => prev ^ 0b001); setInput("checkbox")}}/>
+ + + + {setUmask(e.currentTarget.value); setInput("umask")}} value={umask} /> + +
+
+ ) +} + +export default LinuxPermissionsTool; \ No newline at end of file diff --git a/src/tools/tools.ts b/src/tools/tools.ts index eacb4d5..10d828b 100644 --- a/src/tools/tools.ts +++ b/src/tools/tools.ts @@ -1,4 +1,4 @@ -import {Smile, PlusSquare, Binary, Hash, Globe, Network} from "lucide-react" +import {Smile, PlusSquare, Binary, Hash, Globe, Network, FileCog} from "lucide-react" const tools = [ { @@ -53,6 +53,15 @@ const tools = [ "category": "networking", "hidden": false, "keywords": "subnetting, networking, ipv4, ip4, ip, internet protocol, subnet, subnetter, netmask, tool" + }, + { + "name": "tools.encodings.linux_permissions.title", + "external": false, + "urlname": "linux_permissions", + "icon": FileCog, + "category": "encodings", + "hidden": false, + "keywords": "Linux, Permissions, octet, octets, rwx, encoding, decoding, encoder, decoder, base, 64, binary, tool" } ] diff --git a/yarn.lock b/yarn.lock index df45e66..7e9f23d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7494,10 +7494,10 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" -lucide-react@^0.35.0: - version "0.35.0" - resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.35.0.tgz#73526e95fca41c9d937a949f908661b847d1fc5d" - integrity sha512-hxhpRRFRt9GGfgjPDDlYeTGQtW0Znj5aTUkbbdZNco0R89ClTE604GQpWOkDWNof8cWfMMlcVrw58tGdpOQKXg== +lucide-react@^0.88.0: + version "0.88.0" + resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.88.0.tgz#6269fad9e52cfbae036b7b4b95e04335f040bb6d" + integrity sha512-DiLZ0uqqt4Qpe7bc+RvJMMI7z3gWlMOnst+TtNFUH6XfQ12APMQDx+/fHsmMlIkyCs/pPo3UKZpYbZ5i1iMOuA== lz-string@^1.4.4: version "1.4.4"