Merge pull request #1 from TheBestTvarynka/dev

.gitignore

@@ -1,2 +1,3 @@
 dist/
 target/
+test_keys/

Cargo.toml

@@ -27,6 +27,8 @@ hex = "0.4.3"
 gloo-timers = "0.2.4"
 rand = { version = "0.8.5", default-features = false, features = ["small_rng"] }
 rand_chacha = "0.3.1"
+serde_json = "1.0.89"
+base64 = "0.13.1"
 
 # crypto
 picky-krb = { git = "https://github.com/TheBestTravynka/picky-rs.git", rev = "604a246" }

index.html

@@ -11,6 +11,7 @@
  <link data-trunk rel="sass" href="public/styles/algo_search.scss" />
  <link data-trunk rel="sass" href="public/styles/rsa.scss" />
  <link data-trunk rel="sass" href="public/styles/about.scss" />
+ <link data-trunk rel="sass" href="public/styles/jwt.scss" />
 
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

public/styles/input.scss

@@ -2,11 +2,11 @@
  font-family: 'JetBrains Mono', monospace;
  background: #dbcfbf;
  padding: 0.2em;
+ border-radius: 3px;
  margin: 0;
  width: calc(100% - 0.4em - 6px);
  color: #50437f;
  border: 3px solid #dbcfbf;
- border-radius: 3px;
  font-size: 0.9em;
  resize: vertical;
  transition: all 0.2s;
@@ -76,3 +76,30 @@
 .switch_label:active:after {
  width: 1.3em;
 }
+
+.formats-container {
+ display: inline-flex;
+ justify-content: flex-start;
+ gap: 0.1em;
+}
+
+.format-button {
+ font-size: 0.7em;
+ color: #403735;
+ background-color: transparent;
+ padding: 0.2em 0.2em 0.2em 0.2em;
+ border-radius: 0.2em;
+ border: 2px solid transparent;
+ font-family: 'JetBrains Mono', monospace;
+ transition: 0.3s;
+}
+
+.format-button:hover {
+ cursor: pointer;
+ border: 2px solid #736664;
+}
+
+.format-button-selected {
+ color: #e0e0e0;
+ background-color: #736664;
+}

public/styles/jwt.scss

@@ -0,0 +1,102 @@
+.jwt-page {
+ display: grid;
+ grid-template-columns: 40% 60%;
+ width: calc(100% - 0.5em);
+ gap: 0.5em;
+ transition: all 0.3s;
+}
+
+.jwt-header {
+ color: #a562e3;
+ word-wrap: break-word;
+}
+
+.jwt-header:hover {
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.jwt-payload {
+ color: mediumvioletred;
+ word-wrap: break-word;
+}
+
+.jwt-payload:hover {
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.jwt-signature {
+ color: #70a66c;
+ word-wrap: break-word;
+}
+
+.jwt-signature:hover {
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.jwt-dot {
+ background-color: #403735;
+ color: #ccc9af;
+}
+
+.jwt-actions-container {
+ display: inline-flex;
+ justify-content: flex-start;
+ gap: 0;
+}
+
+.jwt-action {
+ font-size: 0.8em;
+ color: #4c5159;
+ padding: 0.3em;
+ border: 2px solid transparent;
+ transition: all 0.2s;
+ border-radius: 0;
+ border-top: 2px solid #403735;
+ border-bottom: 2px solid #403735;
+}
+
+.jwt-action:first-child {
+ border-radius: 0.3em 0 0 0.3em;
+ border-left: 2px solid #403735;
+}
+
+.jwt-action:last-child {
+ border-radius: 0 0.3em 0.3em 0;
+ border-right: 2px solid #403735;
+}
+
+.jwt-action:hover {
+ cursor: pointer;
+ border: 2px solid #403735;
+}
+
+.selected-jwt-action {
+ color: #e0e0e0;
+ background-color: #403735;
+ border: 2px solid #403735;
+}
+
+.jwt-util-button {
+ font-size: 0.7em;
+ color: #e0e0e0;
+ background-color: #403735;
+ padding: 0.2em 0.4em 0.2em 0.4em;
+ border-radius: 0.3em;
+ font-family: 'JetBrains Mono', monospace;
+ border: 1px solid transparent;
+ transition: 0.3s;
+}
+
+.jwt-util-button:hover {
+ cursor: pointer;
+ transition: 0.3s;
+ color: #e0e0e0;
+ background-color: #403735;
+}
+
+.jwt-util-button:focus {
+ box-shadow: 0 0 0 2px #736664;
+}

public/styles/style.scss

@@ -94,6 +94,31 @@ article {
 
 .simple-digest:hover {
  cursor: pointer;
- background: #b5c9eb;
- border-radius: 0.2em;
+ text-decoration: underline;
+}
+
+.bytes-container {
+ background-color: #403735;
+ padding: 0.2em;
+ border-radius: 3px;
+}
+
+.byte-null {
+ color: red;
+}
+
+.byte-printable {
+ color: cyan;
+}
+
+.byte-whitespace {
+ color: green;
+}
+
+.byte-ascii {
+ color: rgb(232, 52, 210);
+}
+
+.byte-other {
+ color: yellow;
 }

src/about.rs

@@ -12,7 +12,7 @@ pub fn about() -> Html {
  <li>{"Kerberos ciphers: AES128-CTS-HMAC-SHA1-96/AES256-CTS-HMAC-SHA1-96"}</li>
  <li>{"Kerberos HMAC: HMAC-SHA1-96-AES128/HMAC-SHA1-96-AES256"}</li>
  <li>{"RSA"}</li>
- <li class={classes!("coming-soon")}>{"Coming soon: JWT/JWE debugger."}</li>
+ <li class={classes!("coming-soon")}>{"In progress: JWT/JWE debugger."}</li>
  </vl>
  <span>{"All computations are performed on the client side. This tool never sends the data the any servers. Tip: if your input is not hex-encoded then you can use a "}<a href={"https://bf.qkation.com"}>{"byte-formatter"}</a>{" to transform input to the hex format."}</span>
  <span>{"Authors: "}<a href={"https://github.com/TheBestTvarynka"}>{"Pavlo Myroniuk (@TheBestTvarynka)"}</a></span>

src/common/bytes_viewer.rs

@@ -0,0 +1,35 @@
+use yew::{classes, function_component, html, Html, Properties};
+
+#[derive(PartialEq, Eq, Properties)]
+pub struct BytesViewerProps {
+ pub bytes: Vec<u8>,
+}
+
+fn byte_color_class(byte: u8) -> &'static str {
+ if byte == 0 {
+ "byte-null"
+ } else if byte.is_ascii_graphic() {
+ "byte-printable"
+ } else if byte.is_ascii_whitespace() {
+ "byte-whitespace"
+ } else if byte.is_ascii() {
+ "byte-ascii"
+ } else {
+ "byte-other"
+ }
+}
+
+fn byte_component(byte: u8) -> Html {
+ html! {
+ <span class={classes!(byte_color_class(byte))}>{format!("{:02x?}", byte)}</span>
+ }
+}
+
+#[function_component(BytesViewer)]
+pub fn bytes_viewer(props: &BytesViewerProps) -> Html {
+ html! {
+ <div class={classes!("bytes-container")}>{
+ props.bytes.iter().map(|byte| byte_component(*byte)).collect::<Vec<_>>()
+ }</div>
+ }
+}

src/common/mod.rs

@@ -1,3 +1,9 @@
+mod bytes_viewer;
+mod simple_input;
+mod simple_output;
 mod switch;
 
+pub use bytes_viewer::{BytesViewer, BytesViewerProps};
+pub use simple_input::{build_simple_input, SimpleInput, SimpleInputProps};
+pub use simple_output::{build_simple_output, BytesFormat};
 pub use switch::{Switch, SwitchProps};

src/crypto_helper/input/simple.rs → src/common/simple_input.rs

@@ -4,6 +4,7 @@ use yew::{classes, function_component, html, Callback, Html, Properties, TargetC
 #[derive(Debug, PartialEq, Properties)]
 pub struct SimpleInputProps {
  pub input: String,
+ pub placeholder: String,
  pub setter: Callback<String>,
 }
 
@@ -12,26 +13,27 @@ pub fn simple_input(props: &SimpleInputProps) -> Html {
  let setter = props.setter.clone();
  let oninput = Callback::from(move |event: html::oninput::Event| {
  let input: HtmlInputElement = event.target_unchecked_into();
-
  let value = input.value();
- log::debug!("simple input value: {}", value);
 
  setter.emit(value);
  });
 
  html! {
- <textarea
- rows="2"
- placeholder={"hex-encoded input"}
- class={classes!("base-input")}
- value={props.input.clone()}
- {oninput}
- />
+ <div>
+ <textarea
+ rows="2"
+ placeholder={props.placeholder.clone()}
+ class={classes!("base-input")}
+ value={props.input.clone()}
+ {oninput}
+ />
+ <span class={classes!("total")}>{"total bytes: "}{props.input.len() / 2}</span>
+ </div>
  }
 }
 
-pub fn build_simple_input(input: String, setter: Callback<String>) -> Html {
+pub fn build_simple_input(input: String, placeholder: String, setter: Callback<String>) -> Html {
  html! {
- <SimpleInput input={input} setter={setter} />
+ <SimpleInput {input} {setter} {placeholder} />
  }
 }