.NET
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.
JWT.IO allows you to decode, verify and generate JWT.
Learn more about jwtDebugger
Algorithm
HEADER:ALGORITHM & TOKEN TYPE
PAYLOAD:DATA
VERIFY SIGNATURE
HMACSHA256(
- base64UrlEncode(header) + "." +
- base64UrlEncode(payload),
-
-) RSASHA256( - base64UrlEncode(header) + "." + - base64UrlEncode(payload), - , - -) -
Libraries for Token Signing/Verification
Filter by
Warning: Critical vulnerabilities in JSON Web Token libraries with asymmetric keys.Learn more
.NET
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
.NET (RT)
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Python
Minimum Version 1.0.1
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Python
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Python
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Node.js
Minimum Version 4.2.2
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Java
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Java
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Java
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Java
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
JavaScript
Minimum Version 3.2.0
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
PHP
Minimum Version 2.0.0
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
PHP
Minimum Version 2.2.0
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
PHP
Minimum Version 3.0.0
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
PHP
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Perl
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Ruby
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Ruby
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Ruby
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Elixir
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Go
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Go
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Go
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Haskell
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Haskell
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Rust
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Lua
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Scala
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Scala
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
D
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Clojure
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Swift
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
C
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
kdb+/Q
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
Delphi
Sign
Verify
iss check
sub check
aud check
exp check
nbf check
iat check
jti check
HS256
HS384
HS512
RS256
RS384
RS512
ES256
ES384
ES512
JWT.io is brought to you by Auth0.
A cloud service, APIs and tools that eliminate the friction of identity for your applications and APIs.
Create free accountTOKENS CREATED
Introduction to JSON Web Tokens
What is JSON Web Token?
-JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with HMAC algorithm) or a public/private key pair using RSA.
-Let's explain some concepts of this definition further.
--
-
Compact: Because of its size, it can be sent through an URL, POST parameter, or inside an HTTP header. Additionally, due to its size its transmission is fast.
-
-Self-contained: The payload contains all the required information about the user, to avoid querying the database more than once.
-
-
When should you use JSON Web Tokens?
-There are some scenarios where JSON Web Tokens are useful:
--
-
Authentication: This is the typical scenario for using JWT, once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token. Single Sign On is a feature that widely uses JWT nowadays, because of its small overhead and its ability to be easily used among systems of different domains.
-
-Information Exchange: JSON Web Tokens are a good way of securely transmitting information between parties, because as they can be signed, for example using public/private key pairs, you can be sure that the senders are who they say they are. Additionally, as the signature is calculated using the header and the payload, you can also verify that the content hasn't changed.
-
-
Which is the JSON Web Token structure?
-JSON Web Tokens consist of three parts separated by dots (.), which are:
-
-
- Header -
- Payload -
- Signature -
Therefore, a JWT typically looks like the following.
-xxxxx.yyyyy.zzzzz
Let's break down the different parts.
-Header
-The header typically consists of two parts: the type of the token, which is JWT, and the hashing algorithm such as HMAC SHA256 or RSA.
-For example:
-{
- "alg": "HS256",
- "typ": "JWT"
-}
-Then, this JSON is Base64Url encoded to form the first part of the JWT.
-Payload
-The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata. -There are three types of claims: reserved, public, and private claims.
--
-
Reserved claims: These are a set of predefined claims, which are not mandatory but recommended, thought to provide a set of useful, interoperable claims. Some of them are: iss (issuer), exp (expiration time), sub (subject), aud (audience), among others.
--
-Notice that the claim names are only three characters long as JWT is meant to be compact.
-
-Public claims: These can be defined at will by those using JWTs. But to avoid collisions they should be defined in the IANA JSON Web Token Registry or be defined as a URI that contains a collision resistant namespace.
-
-Private claims: These are the custom claims created to share information between parties that agree on using them.
-
-
An example of payload could be:
-{
- "sub": "1234567890",
- "name": "John Doe",
- "admin": true
-}
-The payload is then Base64Url encoded to form the second part of the JSON Web Token.
-Signature
-To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
-For example if you want to use the HMAC SHA256 algorithm, the signature will be created in the following way.
-HMACSHA256(
- base64UrlEncode(header) + "." +
- base64UrlEncode(payload),
- secret)
-The signature is used to verify that the sender of the JWT is who it says it is and to ensure that the message was't changed in the way.
-Putting all together
-The output is three Base64 strings separated by dots that can be easily passed in HTML and HTTP environments, while being more compact compared to XML-based standards such as SAML.
-The following shows a JWT that has the previous header and payload encoded, and it is signed with a secret.
-
If you want to play with JWT and put these concepts to practice, you can use jwt.io Debugger to decode, verify and generate JWTs.
-
How do JSON Web Tokens work?
-In authentication, when the user successfully logs in using his credentials, a JSON Web Token will be returned and must be saved locally (typically in local storage, but cookies can be also used), instead of the traditional approach of creating a session in the server and returning a cookie.
-Whenever the user wants to access a protected route or resource, it should send the JWT, typically in the Authorization header using the Bearer schema. Therefore the content of the header should look like the following.
-Authorization: Bearer <token>
-This is a stateless authentication mechanism as the user state is never saved in the server memory. -The server's protected routes will check for a valid JWT in the Authorization header, and if there is, the user will be allowed. As JWTs are self-contained, all the necessary information is there, reducing the need of going back and forward to the database.
-This allows to fully rely on data APIs that are stateless and even make requests to downstream services. It doesn't matter which domains are serving your APIs, as Cross-Origin Resource Sharing (CORS) won't be an issue as it doesn't use cookies.
-The following diagram shows this process:
-
Why should we use JSON Web Tokens?
-Let's talk about the benefits of JSON Web Tokens (JWT) comparing it to Simple Web Tokens (SWT) and Security Assertion Markup Language Tokens (SAML).
-As JSON is less verbose than XML, when it is encoded its size is also smaller; making JWT more compact than SAML. This makes JWT a good choice to be passed in HTML and HTTP environments.
-Security-wise, SWT can only be symmetric signed by a shared secret using the HMAC algorithm. While JWT and SAML tokens can also use a public/private key pair in the form of a X.509 certificate to sign them. However, signing XML with XML Digital Signature without introducing obscure security holes is very difficult compared to the simplicity of signing JSON.
-JSON parsers are common in most programming languages, because they map directly to objects, conversely XML doesn't have a natural document-to-object mapping. This makes it easier to work with JWT than SAML assertions.
-Regarding usage, JWT is used at an Internet scale. This highlights the ease of client side processing of the JSON Web token on multiple platforms, especially, mobile.
-
-Comparison of the length of an encoded JWT and an encoded SAML
If you want to read more about JSON Web Tokens and even start using them to perform authentication in your own applications, browse to the JSON Web Token landing page in Auth0.
-Get started with JWT today
Start using the toolJWT.io is brought to you by Auth0.
A cloud service, APIs and tools that eliminate the friction of identity for your applications and APIs.
Create free accountTOKENS CREATED
',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},i.prototype.init=function(e,i,o){if(this.enabled=!0,this.type=e,this.$element=t(i),this.options=this.getOptions(o),this.$viewport=this.options.viewport&&t(t.isFunction(this.options.viewport)?this.options.viewport.call(this,this.$element):this.options.viewport.selector||this.options.viewport),this.inState={click:!1,hover:!1,focus:!1},this.$element[0]instanceof document.constructor&&!this.options.selector)throw new Error("`selector` option must be specified when initializing "+this.type+" on the window.document object!");for(var n=this.options.trigger.split(" "),s=n.length;s--;){var r=n[s];if("click"==r)this.$element.on("click."+this.type,this.options.selector,t.proxy(this.toggle,this));else if("manual"!=r){var a="hover"==r?"mouseenter":"focusin",l="hover"==r?"mouseleave":"focusout";this.$element.on(a+"."+this.type,this.options.selector,t.proxy(this.enter,this)),this.$element.on(l+"."+this.type,this.options.selector,t.proxy(this.leave,this))}}this.options.selector?this._options=t.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},i.prototype.getDefaults=function(){return i.DEFAULTS},i.prototype.getOptions=function(e){return e=t.extend({},this.getDefaults(),this.$element.data(),e),e.delay&&"number"==typeof e.delay&&(e.delay={show:e.delay,hide:e.delay}),e},i.prototype.getDelegateOptions=function(){var e={},i=this.getDefaults();return this._options&&t.each(this._options,function(t,o){i[t]!=o&&(e[t]=o)}),e},i.prototype.enter=function(e){var i=e instanceof this.constructor?e:t(e.currentTarget).data("bs."+this.type);return i||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i)),e instanceof t.Event&&(i.inState["focusin"==e.type?"focus":"hover"]=!0),i.tip().hasClass("in")||"in"==i.hoverState?void(i.hoverState="in"):(clearTimeout(i.timeout),i.hoverState="in",i.options.delay&&i.options.delay.show?void(i.timeout=setTimeout(function(){"in"==i.hoverState&&i.show()},i.options.delay.show)):i.show())},i.prototype.isInStateTrue=function(){for(var t in this.inState)if(this.inState[t])return!0;return!1},i.prototype.leave=function(e){var i=e instanceof this.constructor?e:t(e.currentTarget).data("bs."+this.type);return i||(i=new this.constructor(e.currentTarget,this.getDelegateOptions()),t(e.currentTarget).data("bs."+this.type,i)),e instanceof t.Event&&(i.inState["focusout"==e.type?"focus":"hover"]=!1),i.isInStateTrue()?void 0:(clearTimeout(i.timeout),i.hoverState="out",i.options.delay&&i.options.delay.hide?void(i.timeout=setTimeout(function(){"out"==i.hoverState&&i.hide()},i.options.delay.hide)):i.hide())},i.prototype.show=function(){var e=t.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(e);var o=t.contains(this.$element[0].ownerDocument.documentElement,this.$element[0]);if(e.isDefaultPrevented()||!o)return;var n=this,s=this.tip(),r=this.getUID(this.type);this.setContent(),s.attr("id",r),this.$element.attr("aria-describedby",r),this.options.animation&&s.addClass("fade");var a="function"==typeof this.options.placement?this.options.placement.call(this,s[0],this.$element[0]):this.options.placement,l=/\s?auto?\s?/i,p=l.test(a);p&&(a=a.replace(l,"")||"top"),s.detach().css({top:0,left:0,display:"block"}).addClass(a).data("bs."+this.type,this),this.options.container?s.appendTo(this.options.container):s.insertAfter(this.$element),this.$element.trigger("inserted.bs."+this.type);var h=this.getPosition(),f=s[0].offsetWidth,c=s[0].offsetHeight;if(p){var d=a,u=this.getPosition(this.$viewport);a="bottom"==a&&h.bottom+c>u.bottom?"top":"top"==a&&h.top-c
',
- '',
- '
',
- ''+(value ? value : '')+'
',
- '',
- '',
- '
',
- '',
- ''+(value ? value : '')+'
',
- '- ',
- this.createListItem(this.classes.before, lastDigit),
- this.createListItem(this.classes.active, this.digit),
- '
- ',
- '
- ', - ''+this.meridiumText+'', - ' ', - '
")),e}function h(e,n,t){var r=n?R[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function p(e){var n=i(e);if(!a(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/
+
+
+ ),
+ {
+ ...size,
+ },
+ );
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 00000000..50612804
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
new file mode 100644
index 00000000..911ceda8
--- /dev/null
+++ b/src/app/global-error.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { UnexpectedErrorComponent } from "@/features/common/components/errors/unexpected-error/unexpected-error.component";
+import React from "react";
+import { getLayoutDictionary } from "@/features/localization/services/language-dictionary.service";
+import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.config";
+import { DEFAULT_THEME_VALUE } from "@/features/themes/theme.config";
+import { ErrorPageComponent } from "@/features/common/components/errors/error-page/error-page.component";
+
+export default function GlobalError({
+ reset,
+}: {
+ error: Error & { digest?: string };
+ reset: () => void;
+}) {
+ const languageCode = DEFAULT_LANGUAGE_CODE;
+ const themeCode = DEFAULT_THEME_VALUE;
+
+ const layoutDictionary = getLayoutDictionary(languageCode);
+
+ return (
+
+
+
+ ),
+ {
+ ...size,
+ },
+ );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 00000000..06490eda
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,33 @@
+import type { Metadata, Viewport } from "next";
+import React from "react";
+import { BASE_URL } from "@/libs/config/project.constants";
+import "@/libs/theme/styles/globals.scss";
+
+declare global {
+ interface Window {
+ OneTrust: any;
+ OnetrustActiveGroups: any;
+ }
+}
+
+export const viewport: Viewport = {
+ themeColor: "#111111",
+};
+
+export async function generateMetadata(): Promise{children}
+
+
+
+
+
+
+
+ {dictionary.ctaButton && (
+
+ {dictionary.ctaButton.label}
+ + {dictionary.title} +
+{dictionary.description}
+
+
+
+ )}
+
+
+ );
+};
+
+enum PicketListItemStateValues {
+ INACTIVE = "INACTIVE",
+ ACTIVE = "ACTIVE",
+}
+
+interface PickerListItemProps
+ {icon}
+
+ {label && {label}}
+ {compactLabel && (
+ {compactLabel}
+ )}
+
+
+ {dictionary.cta.title}
+
+ {dictionary.cta.description}
+
+
+
+
+
+
+
+ label={null}
+ compactLabel={null}
+ icon={
+ isSystemThemePreference(currentTheme.code) ? (
+
+
+
+ );
+};
diff --git a/src/features/common/components/box/box.module.scss b/src/features/common/components/box/box.module.scss
new file mode 100644
index 00000000..2fd52eaf
--- /dev/null
+++ b/src/features/common/components/box/box.module.scss
@@ -0,0 +1,14 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.container {
+ @include Container;
+}
+
+.wrapper {
+ @include ExtendedGrid;
+}
+
+.content {
+ @include InnerContentGrid;
+}
diff --git a/src/features/common/components/card-message/card-message.component.tsx b/src/features/common/components/card-message/card-message.component.tsx
new file mode 100644
index 00000000..71050402
--- /dev/null
+++ b/src/features/common/components/card-message/card-message.component.tsx
@@ -0,0 +1,49 @@
+import React, { PropsWithChildren } from "react";
+import styles from "./card-message.module.scss";
+import ReactMarkdown from "react-markdown";
+import { clsx } from "clsx";
+import { MonoFont } from "@/libs/theme/fonts";
+
+export const CardMessageComponent: React.FC
+
+
+ {cards.map((card) => (
+
+ );
+};
diff --git a/src/features/common/components/card-stack/card-stack.module.scss b/src/features/common/components/card-stack/card-stack.module.scss
new file mode 100644
index 00000000..60b1d088
--- /dev/null
+++ b/src/features/common/components/card-stack/card-stack.module.scss
@@ -0,0 +1,75 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.cardStack {
+ grid-column: span 6;
+ display: flex;
+ flex-direction: column;
+ border-radius: 0.5rem;
+ border: 1px solid var(--color_border_bold);
+ background: var(--color_bg_layer_alternate);
+
+ overflow: hidden;
+}
+
+.card__title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.25rem;
+ text-transform: uppercase;
+ padding: 0.5rem 0.75rem;
+ border-bottom: 1px solid var(--color_border_bold);
+
+ color: var(--color_fg_default);
+
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.24px;
+}
+
+.card {
+ grid-column: span 6;
+ display: flex;
+ flex-direction: column;
+ border-top: 1px solid var(--color_border_bold);
+
+ &:first-child {
+ border-top: unset;
+ }
+}
+
+.card__body {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ min-height: 4rem;
+
+ &[data-no-padding] {
+ padding: 0;
+ }
+}
+
+.card__action {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ flex: 1;
+ padding: 0.25rem 1rem;
+
+ border-top: 1px solid var(--color_border_bold);
+}
+
+.cardTabs__actionButtons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+}
diff --git a/src/features/common/components/card-tabs/card-tabs.component.tsx b/src/features/common/components/card-tabs/card-tabs.component.tsx
new file mode 100644
index 00000000..ac6e3ae2
--- /dev/null
+++ b/src/features/common/components/card-tabs/card-tabs.component.tsx
@@ -0,0 +1,316 @@
+import React, { useEffect, useId, useState } from "react";
+import styles from "./card-tabs.module.scss";
+import {
+ CardComponentProps,
+ FramelessCardComponent,
+} from "@/features/common/components/card/card.component";
+import { clsx } from "clsx";
+import { MonoFont } from "@/libs/theme/fonts";
+import Cookies from "js-cookie";
+import {
+ DebuggerOutputModalValues,
+ useDebuggerStore,
+} from "@/features/debugger/services/debugger.store";
+import {
+ Dialog,
+ Heading,
+ Key,
+ Modal,
+ Tab,
+ TabList,
+ TabPanel,
+ Tabs,
+} from "react-aria-components";
+
+type CardTabsProps = {
+ resizeId: string;
+ languageCode: string;
+ title: string | null;
+ cards: CardComponentProps[];
+ activeTabId: string;
+ handleActiveCardChange: (tabId: string) => void;
+};
+
+const CardTabs: React.FC
+ {title && (
+ {
+ handleActiveCardChange(e.toString());
+ }}
+ className={clsx(MonoFont.className, styles.cardTabs)}
+ >
+ <>
+
+ {cards.map((props) => {
+ const { title, compactTitle, id } = props;
+
+ return (
+
+
+
+ {title}
+
+
+ {compactTitle}
+
+
+
+ );
+ })}
+
+ {activeCard.slots?.toolbar && (
+
+
+ );
+ })}
+
+
+
+ );
+};
+
+type CardTabsComponentProps = {
+ resizeId: string;
+ languageCode: string;
+ title: string | null;
+ cards: CardComponentProps[];
+};
+
+export const CardTabsComponent: React.FC+ {title} +
+ )} +
+ {activeCard.slots.toolbar}
+
+ )}
+
+ {cards.map((card) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/features/common/components/card-toolbar/card-toolbar.module.scss b/src/features/common/components/card-toolbar/card-toolbar.module.scss
new file mode 100644
index 00000000..217c8d91
--- /dev/null
+++ b/src/features/common/components/card-toolbar/card-toolbar.module.scss
@@ -0,0 +1,6 @@
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+}
diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx
new file mode 100644
index 00000000..bb9e5912
--- /dev/null
+++ b/src/features/common/components/card/card.component.tsx
@@ -0,0 +1,215 @@
+import React, { PropsWithChildren, useId } from "react";
+import styles from "./card.module.scss";
+import { clsx } from "clsx";
+import { getLocalizedSecondaryFont, MonoFont } from "@/libs/theme/fonts";
+import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component";
+
+export interface CardComponentProps extends PropsWithChildren {
+ id: string;
+ languageCode: string;
+ title: string;
+ compactTitle: string;
+ options: Partial<{
+ noPadding: boolean;
+ fullWidth: boolean;
+ fullHeight: boolean;
+ isOutput: boolean;
+ hideTitle: boolean;
+ frameless: boolean;
+ }> | null;
+
+ slots: Partial<{
+ notification: React.ReactNode | null;
+ toolbar: React.ReactNode;
+ footer: React.ReactNode | null;
+ }> | null;
+
+ messages: Partial<{
+ errors: string[] | null;
+ warnings: string[] | null;
+ success: string[] | null;
+ }> | null;
+}
+
+export const CardComponent: React.FC
+ {!options?.hideTitle && (
+ <>
+ {titleKey && (
+
+ );
+};
+
+export const FramelessCardComponent: React.FC
+ {titleKey && !compactTitle && (
+
+ )}
+
+ )}
+ {messages && messages.errors && messages.errors.length > 0 ? (
+ + + {titleKey} + {titleValue && `: `} + + {titleValue && ( + + {titleValue} + + )} +
+ )} + {titleKey && compactTitle && ( + <> ++ + {titleKey} + {titleValue && `: `} + + {titleValue && ( + + {titleValue} + + )} +
++ + {compactTitle} + +
+ + )} + {slots?.toolbar} +
+ {messages.errors.map((line, index) => {
+ return (
+ {line}
+ );
+ })}
+
+ ) : messages?.success ? (
+
+ {messages.success.map((line, index) => {
+ return (
+ {line}
+ );
+ })}
+
+ ) : null}
+ {messages && messages.warnings && messages.warnings.length > 0 && (
+
+ {messages.warnings.map((line, index) => {
+ return (
+ {line}
+ );
+ })}
+
+ )}
+ {slots?.notification}
+
+ {children}
+
+ {slots?.footer && (
+ {slots.footer}
+ )}
+
+ {sectionHeadline && (
+ <>
+
+ );
+};
diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss
new file mode 100644
index 00000000..a320b31e
--- /dev/null
+++ b/src/features/common/components/card/card.module.scss
@@ -0,0 +1,270 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.cardHeadline__title {
+ grid-column: 1 / -1;
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ text-transform: uppercase;
+ padding: 0.5rem 0;
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.24px;
+
+ & * {
+ font-size: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 12;
+ scroll-margin-top: calc($navbar-height + $workflows-navbar-height + 2rem);
+ }
+}
+
+.cardHeadline__titleTag {
+ color: var(--color_fg_default);
+ opacity: 0.64;
+}
+
+.cardHeadline__description {
+ grid-column: span 6;
+ width: 100%;
+ color: var(--color_fg_default);
+ display: flex;
+ flex-direction: column;
+
+ gap: 0.625rem;
+
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ margin-bottom: 0.5rem;
+
+ & strong {
+ font-weight: 500;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 12;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.card {
+ isolation: isolate;
+ grid-column: span 6;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ border-radius: 0.5rem;
+ border: 1px solid var(--color_border_bold);
+ background: var(--color_bg_code-editor);
+ overflow: hidden;
+
+ &[data-type="output"] {
+ background: var(--color_bg_layer_alternate);
+ }
+
+ &[data-frameless="true"] {
+ border-radius: 0;
+ border: none;
+ }
+}
+
+.card__hasFullWidth {
+ grid-column: 1 / -1;
+}
+
+.card__hasFullHeight {
+ height: 100%;
+}
+
+.card__exampleBar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem;
+ height: 3.5rem;
+
+ border-bottom: 1px solid var(--color_border_bold);
+ gap: 0.25rem;
+ text-transform: uppercase;
+
+ background-color: var(--color_bg_layer);
+}
+
+.card__headline {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5rem 1rem;
+ height: 3rem;
+
+ border-bottom: 1px solid var(--color_border_bold);
+ gap: 0.25rem;
+ text-transform: uppercase;
+}
+
+.card__fullTitle {
+ display: none;
+
+ @media #{$breakpoint-dimension-xs-430} {
+ display: block;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ display: none;
+ }
+
+ @media only screen and (min-width: 900px) {
+ display: block;
+ }
+}
+
+.card__compactTitle {
+ @media #{$breakpoint-dimension-xs-430} {
+ display: none;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ display: block;
+ }
+
+ @media only screen and (min-width: 900px) {
+ display: none;
+ }
+}
+
+.card__titleKey {
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-style: normal;
+ font-weight: 500;
+ letter-spacing: 0.24px;
+ text-transform: uppercase;
+}
+
+.card__titleValue {
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.24px;
+ text-transform: uppercase;
+}
+
+.card__action {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ flex-shrink: 0;
+ padding: 0.25rem 1rem;
+ height: 3.5rem;
+
+ border-top: 1px solid var(--color_border_bold);
+}
+
+.card__body {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ padding: 1rem;
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ min-height: 4rem;
+
+ &[data-no-padding] {
+ padding: 0;
+ }
+}
+
+.card__body__buttons {
+ position: absolute;
+ top: 0.5rem;
+ right: 1rem;
+ z-index: 2;
+}
+
+.card__status {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ padding: 0.5rem 1rem;
+ gap: 0.25rem;
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ color: var(--color_fg_default);
+ border-top: 1px solid var(--color_border_bold);
+}
+
+.card__success {
+ background-color: var(--color_bg_state_success_subtle);
+
+ span,
+ p,
+ code {
+ color: var(--color_fg_on_state_success_subtle);
+ }
+
+ strong {
+ color: var(--color_fg_on_state_success_subtle);
+ }
+
+ a {
+ color: var(--color_fg_on_state_success_subtle);
+ }
+}
+
+.card__error {
+ background-color: var(--color_bg_state_danger_subtle);
+
+ span,
+ p,
+ code {
+ color: var(--color_fg_on_state_danger_subtle);
+ }
+
+ strong {
+ color: var(--color_fg_on_state_danger_subtle);
+ }
+
+ a {
+ color: var(--color_fg_on_state_danger_subtle);
+ }
+}
+
+.card__warning {
+ background-color: var(--color_bg_state_caution_subtle);
+
+ span,
+ p,
+ code {
+ color: var(--color_fg_on_state_caution_subtle);
+ }
+
+ strong {
+ color: var(--color_fg_on_state_caution_subtle);
+ }
+
+ a {
+ color: var(--color_fg_on_state_caution_subtle);
+ }
+}
+
+.cardTabs__actionButtons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+}
diff --git a/src/features/common/components/code-editor/editor.component.tsx b/src/features/common/components/code-editor/editor.component.tsx
new file mode 100644
index 00000000..6a442eb0
--- /dev/null
+++ b/src/features/common/components/code-editor/editor.component.tsx
@@ -0,0 +1,621 @@
+import * as React from "react";
+import cssStyles from "./editor.module.scss";
+
+type Padding+ {sectionHeadline.title} + {sectionHeadline.titleTag && ( + + {sectionHeadline.titleTag} + + )} +
+ {sectionHeadline.description && ( ++ {sectionHeadline.description} +
+ )} + + )} +
+ " } }
+ : { children: highlighted })}
+ />
+
+
+ );
+};
diff --git a/src/features/common/components/widget-textarea/widget-textarea.module.scss b/src/features/common/components/widget-textarea/widget-textarea.module.scss
new file mode 100644
index 00000000..11bf0218
--- /dev/null
+++ b/src/features/common/components/widget-textarea/widget-textarea.module.scss
@@ -0,0 +1,46 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.input {
+ height: 100%;
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ padding: 1rem;
+ background: transparent;
+ border: none;
+ resize: none;
+ color: var(--color_fg_default);
+
+ &:focus-visible {
+ outline: 1px solid var(--color_border_focus) !important;
+ outline-offset: -1px !important;
+ z-index: 1 !important;
+ border-radius: 0.125rem;
+ }
+
+ &:disabled {
+ opacity: 0.48;
+ cursor: not-allowed;
+ }
+
+ &::-webkit-scrollbar {
+ width: 0.75rem;
+ height: 0.75rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 2rem transparent;
+ cursor: pointer !important;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border: 0.25rem solid transparent;
+ background-clip: padding-box;
+ border-radius: 9999px;
+ background-color: var(--color_bg_scrollbar);
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+}
diff --git a/src/features/common/components/widget/widget/widget.component.tsx b/src/features/common/components/widget/widget/widget.component.tsx
new file mode 100644
index 00000000..eff71f5c
--- /dev/null
+++ b/src/features/common/components/widget/widget/widget.component.tsx
@@ -0,0 +1,73 @@
+import React, { ReactNode, useId } from "react";
+import styles from "./widget.module.scss";
+import { BoxComponent } from "@/features/common/components/box/box.component";
+import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+import { clsx } from "clsx";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
+
+interface WidgetComponentProps {
+ id: string;
+ widget: DebuggerWidgetValues;
+ languageCode: string;
+ headlineConfig: { isVisible: boolean; actions?: React.ReactNode };
+ title: string;
+ description: string;
+ exampleGenerator: {
+ label: string;
+ };
+ contentInput: ReactNode;
+ contentOutput: ReactNode;
+ warnings: string[] | null;
+}
+
+export const WidgetComponent: React.FC = ({
+ id,
+ widget,
+ languageCode,
+ headlineConfig,
+ title,
+ description,
+ exampleGenerator,
+ contentInput,
+ contentOutput,
+}) => {
+ const widgetId = useId();
+
+ return (
+
+ {headlineConfig.isVisible && (
+
+ );
+};
diff --git a/src/features/common/components/widget/widget/widget.module.scss b/src/features/common/components/widget/widget/widget.module.scss
new file mode 100644
index 00000000..288e51b6
--- /dev/null
+++ b/src/features/common/components/widget/widget/widget.module.scss
@@ -0,0 +1,69 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.content {
+ @include InnerContentGrid;
+
+ grid-row-gap: 0.5rem;
+}
+
+.content__input {
+ grid-column: span 6;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.content__output {
+ grid-column: span 6;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.grid__title {
+ grid-column: 1 / -1;
+ width: 100%;
+ color: var(--color_fg_bold);
+ font-size: 1.5rem;
+ line-height: 2.25rem;
+ letter-spacing: -0.8px;
+ display: flex;
+ justify-content: space-between;
+
+ :global(html[lang="ja"]) & {
+ font-size: 1.125rem;
+ line-height: 1.625rem;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ scroll-margin-top: calc($navbar-height + $workflows-navbar-height + 1rem);
+ font-size: 1.75rem;
+ line-height: 2.25rem;
+ }
+}
+
+.input__description {
+ grid-column: span 6;
+ width: 100%;
+ color: var(--color_fg_default);
+ display: flex;
+ flex-direction: column;
+
+ gap: 0.625rem;
+ row-gap: 0.25rem;
+
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+
+ & strong {
+ font-weight: 500;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 12;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
diff --git a/src/features/common/hooks/use-close-element.tsx b/src/features/common/hooks/use-close-element.tsx
new file mode 100644
index 00000000..d1792076
--- /dev/null
+++ b/src/features/common/hooks/use-close-element.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+
+export const useCloseElement = (
+ refs: React.RefObject[],
+ handleClose: () => void,
+) => {
+ useEffect(() => {
+ if (!refs) {
+ return;
+ }
+
+ function handleClickOutside(event: MouseEvent | TouchEvent) {
+ const hit =
+ refs.filter((ref) => ref.current && ref.current.contains(event.target))
+ .length > 0;
+
+ if (!hit) {
+ event.stopPropagation();
+ handleClose();
+ }
+ }
+
+ function handleKeyDown(event: KeyboardEvent) {
+ refs.forEach((ref) => {
+ if (ref.current) {
+ switch (event.key) {
+ case "Escape":
+ handleClose();
+ break;
+ default:
+ return;
+ }
+ event.preventDefault();
+ }
+ });
+ }
+
+ document.addEventListener("mousedown", handleClickOutside);
+ document.addEventListener("keydown", handleKeyDown);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [refs, handleClose]);
+};
diff --git a/src/features/common/models/author-metadata.model.ts b/src/features/common/models/author-metadata.model.ts
new file mode 100644
index 00000000..f8a16b80
--- /dev/null
+++ b/src/features/common/models/author-metadata.model.ts
@@ -0,0 +1,4 @@
+export interface AuthorMetadataModel {
+ name: string;
+ url: string;
+}
diff --git a/src/features/common/models/debugger-error.model.ts b/src/features/common/models/debugger-error.model.ts
new file mode 100644
index 00000000..b6742b3d
--- /dev/null
+++ b/src/features/common/models/debugger-error.model.ts
@@ -0,0 +1,12 @@
+import { DebuggerTaskValues } from "@/features/common/values/debugger-task.values";
+import { DebuggerInputValues } from "@/features/common/values/debugger-input.values";
+
+export interface DebuggerErrorModel {
+ task: DebuggerTaskValues;
+ input: DebuggerInputValues;
+ message: string;
+}
+
+export interface DebuggerErrorModelWithData extends DebuggerErrorModel {
+ data?: T;
+}
diff --git a/src/features/common/models/debugger-picker-option.model.ts b/src/features/common/models/debugger-picker-option.model.ts
new file mode 100644
index 00000000..15b9b7f6
--- /dev/null
+++ b/src/features/common/models/debugger-picker-option.model.ts
@@ -0,0 +1,5 @@
+export interface DebuggerPickerOptionModel {
+ value: any;
+ label: string;
+ isDisabled?: boolean;
+}
diff --git a/src/features/common/models/decoded-token.model.ts b/src/features/common/models/decoded-token.model.ts
new file mode 100644
index 00000000..c9c7e88e
--- /dev/null
+++ b/src/features/common/models/decoded-token.model.ts
@@ -0,0 +1,13 @@
+import { JWTHeaderParameters, JWTPayload } from "jose";
+
+export interface DecodedJwtHeaderModel extends Partial {
+ alg: string;
+}
+export interface DecodedJwtPayloadModel extends JWTPayload {}
+
+export interface DecodedTokenModel {
+ header: DecodedJwtHeaderModel;
+ payload: DecodedJwtPayloadModel | string;
+ errors: boolean;
+ warnings: string[];
+}
diff --git a/src/features/common/models/hero-metadata.model.ts b/src/features/common/models/hero-metadata.model.ts
new file mode 100644
index 00000000..03a5a5c3
--- /dev/null
+++ b/src/features/common/models/hero-metadata.model.ts
@@ -0,0 +1,4 @@
+export interface HeroMetadataModel {
+ title: string;
+ description: string | null;
+}
diff --git a/src/features/common/models/image-metadata.model.ts b/src/features/common/models/image-metadata.model.ts
new file mode 100644
index 00000000..e6e4ceb6
--- /dev/null
+++ b/src/features/common/models/image-metadata.model.ts
@@ -0,0 +1,4 @@
+export interface ImageMetadataModel {
+ url: string;
+ alt: string;
+}
diff --git a/src/features/common/models/link-metadata.model.ts b/src/features/common/models/link-metadata.model.ts
new file mode 100644
index 00000000..90ff56bc
--- /dev/null
+++ b/src/features/common/models/link-metadata.model.ts
@@ -0,0 +1,5 @@
+export interface LinkMetadataModel {
+ label: string;
+ path: string;
+ isExternal?: boolean;
+}
diff --git a/src/features/common/models/page-metadata.model.ts b/src/features/common/models/page-metadata.model.ts
new file mode 100644
index 00000000..17c81fe7
--- /dev/null
+++ b/src/features/common/models/page-metadata.model.ts
@@ -0,0 +1,12 @@
+import { AuthorMetadataModel } from "@/features/common/models/author-metadata.model";
+import { Metadata } from "next";
+
+export interface PageMetadataModel extends Metadata {
+ title: string;
+ description: string;
+ authors: AuthorMetadataModel[];
+ images: string[];
+ keywords: string[];
+ datePublished: string;
+ dateModified: string;
+}
diff --git a/src/features/common/models/page-metadata.props.ts b/src/features/common/models/page-metadata.props.ts
new file mode 100644
index 00000000..12f97b92
--- /dev/null
+++ b/src/features/common/models/page-metadata.props.ts
@@ -0,0 +1,3 @@
+export type PageMetadataProps = {
+ params: { language: string };
+};
diff --git a/src/features/common/models/page.props.ts b/src/features/common/models/page.props.ts
new file mode 100644
index 00000000..6d0302c6
--- /dev/null
+++ b/src/features/common/models/page.props.ts
@@ -0,0 +1,3 @@
+export interface PageProps {
+ params: { language: string };
+}
diff --git a/src/features/common/models/static-image-metadata.model.ts b/src/features/common/models/static-image-metadata.model.ts
new file mode 100644
index 00000000..f65aabdb
--- /dev/null
+++ b/src/features/common/models/static-image-metadata.model.ts
@@ -0,0 +1,6 @@
+export interface StaticImageMetadataModel {
+ src: string;
+ alt: string;
+ width: number;
+ height: number;
+}
diff --git a/src/features/common/models/theme.model.ts b/src/features/common/models/theme.model.ts
new file mode 100644
index 00000000..786a9adb
--- /dev/null
+++ b/src/features/common/models/theme.model.ts
@@ -0,0 +1,6 @@
+import { ThemePickerCodeValues } from "@/features/common/values/theme.values";
+
+export interface ThemeModel {
+ code: ThemePickerCodeValues;
+ label: string;
+}
diff --git a/src/features/common/models/ui-language.model.ts b/src/features/common/models/ui-language.model.ts
new file mode 100644
index 00000000..2c33f718
--- /dev/null
+++ b/src/features/common/models/ui-language.model.ts
@@ -0,0 +1,4 @@
+export interface UiLanguageModel {
+ code: string;
+ label: string;
+}
diff --git a/src/features/common/services/app.store.ts b/src/features/common/services/app.store.ts
new file mode 100644
index 00000000..adce8025
--- /dev/null
+++ b/src/features/common/services/app.store.ts
@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+
+interface AppStoreState {
+ theme$: string | null;
+}
+
+interface AppStoreActions {
+ setTheme$: (value: string) => void;
+}
+
+type AppStore = AppStoreState & AppStoreActions;
+
+const initialState: AppStoreState = {
+ theme$: null,
+};
+
+export const useAppStore = create()(
+ subscribeWithSelector((set) => ({
+ ...initialState,
+ setTheme$: (value) =>
+ set({
+ theme$: value,
+ }),
+ })),
+);
diff --git a/src/features/common/services/debugger.utils.ts b/src/features/common/services/debugger.utils.ts
new file mode 100644
index 00000000..98635bb4
--- /dev/null
+++ b/src/features/common/services/debugger.utils.ts
@@ -0,0 +1,14 @@
+import { DebuggerModeValues } from "@/features/common/values/debugger-mode.values";
+
+export const getSanitizedDebuggerModeValues = (
+ value: string | null,
+): DebuggerModeValues | null => {
+ if (
+ value === DebuggerModeValues.SPLIT ||
+ value === DebuggerModeValues.UNIFIED
+ ) {
+ return value;
+ }
+
+ return null;
+};
diff --git a/src/features/common/services/decoder.utils.ts b/src/features/common/services/decoder.utils.ts
new file mode 100644
index 00000000..03684493
--- /dev/null
+++ b/src/features/common/services/decoder.utils.ts
@@ -0,0 +1,14 @@
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+
+export const getSanitizedDescriptionVisibilityValue = (
+ value: string | null,
+): ClaimDescriptionVisibilityValues | null => {
+ if (
+ value === ClaimDescriptionVisibilityValues.VISIBLE ||
+ value === ClaimDescriptionVisibilityValues.HIDDEN
+ ) {
+ return value;
+ }
+
+ return null;
+};
diff --git a/src/features/common/services/hero.utils.ts b/src/features/common/services/hero.utils.ts
new file mode 100644
index 00000000..58c5e09e
--- /dev/null
+++ b/src/features/common/services/hero.utils.ts
@@ -0,0 +1,14 @@
+import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
+
+export const getSanitizedHeroModalStateValue = (
+ value: string | null,
+): HeroModalStateValues | null => {
+ if (
+ value === HeroModalStateValues.CLOSED ||
+ value === HeroModalStateValues.OPEN
+ ) {
+ return value;
+ }
+
+ return null;
+};
diff --git a/src/features/common/services/jwt.service.ts b/src/features/common/services/jwt.service.ts
new file mode 100644
index 00000000..a56d14a7
--- /dev/null
+++ b/src/features/common/services/jwt.service.ts
@@ -0,0 +1,1439 @@
+import {
+ err,
+ fromAsyncThrowable,
+ fromPromise,
+ fromThrowable,
+ ok,
+ Result,
+} from "neverthrow";
+import {
+ DecodedJwtHeaderModel,
+ DecodedJwtPayloadModel,
+} from "@/features/common/models/decoded-token.model";
+import { JwtTypeValues } from "@/features/common/values/jwt-type.values";
+import {
+ CompactJWSHeaderParameters,
+ CompactSign,
+ CompactVerifyResult,
+ importPKCS8,
+ type JWK,
+ KeyLike,
+} from "jose";
+import nodeForge from "node-forge";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import {
+ getAlgName,
+ getOperationException,
+ safeBase64url,
+ safeBase64urlToBuffer,
+ safeBufferFrom,
+ safeCompactVerify,
+ safeDecodeBase64url,
+ safeImportJWK,
+ safeImportSPKI,
+ safeImportX509,
+ safeJsonParse,
+ safeJsonStringify,
+ safeNewUint8ArrayFromBuffer,
+ safeParseInt,
+ safePublicKeyFromPem,
+ safePublicKeyToPem,
+ safeTextEncode,
+} from "@/features/common/services/utils";
+import {
+ DebuggerErrorModel,
+ DebuggerErrorModelWithData,
+} from "@/features/common/models/debugger-error.model";
+import {
+ algDictionary,
+ jwsAlgHeaderParameterValuesDictionary,
+} from "@/features/common/values/jws-alg-header-parameter-values.dictionary";
+import {
+ JwtHeaderDecoderSchema,
+ JwtHeaderEncoderSchema,
+} from "@/features/encoder/schemas/jwt-header.schema";
+import { DebuggerTaskValues } from "@/features/common/values/debugger-task.values";
+import { DebuggerInputValues } from "@/features/common/values/debugger-input.values";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+
+export function isSupportedAlg(algorithm: string): boolean {
+ const noneAlg = jwsAlgHeaderParameterValuesDictionary.none[algorithm];
+
+ const macAlg = jwsAlgHeaderParameterValuesDictionary.mac[algorithm];
+
+ const digitalSignatureAlg =
+ jwsAlgHeaderParameterValuesDictionary.digitalSignature[algorithm];
+
+ return !!noneAlg || !!macAlg || !!digitalSignatureAlg;
+}
+
+export function isNoneAlg(algorithm: string): boolean {
+ const alg = jwsAlgHeaderParameterValuesDictionary.none[algorithm];
+
+ return !!alg;
+}
+
+export function isHmacAlg(algorithm: string): boolean {
+ const alg = jwsAlgHeaderParameterValuesDictionary.mac[algorithm];
+
+ return !!alg;
+}
+
+export function isDigitalSignatureAlg(algorithm: string): boolean {
+ const alg = jwsAlgHeaderParameterValuesDictionary.digitalSignature[algorithm];
+
+ return !!alg || algorithm === algDictionary.EdDSA;
+}
+
+export const getAlgSize = (value: string): Result<{ size: number }, string> => {
+ const algorithm = getAlgName(value);
+
+ if (!isSupportedAlg(algorithm)) {
+ return err(
+ `Invalid cryptographic algorithm. Only use "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ );
+ }
+
+ const algRegex = /^([a-zA-Z]+)(\d+)$/;
+ const match = algorithm.match(algRegex);
+ const isEdDSA = algorithm === algDictionary.EdDSA;
+ const isNone = algorithm === algDictionary.NONE;
+
+ if (isNone) {
+ return err(`Can't calculate length for Unsecured JWT.`);
+ }
+
+ if (isEdDSA) {
+ return err(`Can't calculate length from EdDSA algorithm.`);
+ }
+
+ if (!match) {
+ return err(
+ `Invalid cryptographic algorithm. Only use "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ );
+ }
+
+ const algSize = match[2];
+
+ const safeParseIntResult = safeParseInt(algSize, 10);
+
+ if (safeParseIntResult.isErr()) {
+ return err(safeParseIntResult.error);
+ }
+
+ return ok({
+ size: safeParseIntResult.value,
+ });
+};
+
+export const isValidBase64UrlString = (source: string): boolean => {
+ if (source === undefined) {
+ return false;
+ }
+
+ const base64UrlPattern = /^[A-Za-z0-9_-]*$/;
+
+ return base64UrlPattern.test(source);
+};
+
+export const parseStringIntoValidJsonObject = (
+ text: string,
+): Result => {
+ const safeJsonParseResult = safeJsonParse(text);
+
+ if (safeJsonParseResult.isErr()) {
+ return err(safeJsonParseResult.error);
+ }
+
+ const parsedText = safeJsonParseResult.value;
+
+ if (
+ parsedText !== null &&
+ typeof parsedText === "object" &&
+ !Array.isArray(parsedText)
+ ) {
+ return ok(parsedText);
+ }
+
+ return err(`The given string does not represent a valid JSON object.`);
+};
+
+export const stringifyJsonObject = (obj: object): Result => {
+ const result = safeJsonStringify(obj, null, 2);
+
+ if (result.isErr()) {
+ return err(result.error);
+ }
+
+ return ok(result.value);
+};
+
+export const getValidatedEncoderHeader = (
+ value: object,
+): Result<
+ {
+ header: DecodedJwtHeaderModel;
+ headerWarnings: string[] | null;
+ },
+ { headerErrors: string[]; signingErrors: string[] }
+> => {
+ const jwtHeaderParseResult = JwtHeaderEncoderSchema.safeParse(value);
+ const headerWarnings: string[] = [];
+
+ if (!jwtHeaderParseResult.success) {
+ const { fieldErrors } = jwtHeaderParseResult.error.flatten();
+
+ return err({
+ headerErrors: fieldErrors.alg ? [...fieldErrors.alg] : [],
+ signingErrors: fieldErrors.alg
+ ? ["Fix any errors in the JWT header to enable editing this field."]
+ : [],
+ });
+ }
+
+ if ("typ" in value && value.typ !== "JWT") {
+ headerWarnings.push(
+ '[RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-5.1) recommends for the "typ" claim value to be "JWT" when used.',
+ );
+ }
+
+ return ok({
+ header: value as DecodedJwtHeaderModel,
+ headerWarnings: headerWarnings.length > 0 ? headerWarnings : null,
+ });
+};
+
+export const getValidatedDecoderHeader = (
+ value: object,
+): Result<
+ {
+ header: DecodedJwtHeaderModel;
+ headerWarnings: string[] | null;
+ },
+ { headerErrors: string[] }
+> => {
+ const jwtHeaderParseResult = JwtHeaderDecoderSchema.safeParse(value);
+ const headerWarnings: string[] = [];
+
+ if (!jwtHeaderParseResult.success) {
+ const { fieldErrors } = jwtHeaderParseResult.error.flatten();
+
+ return err({
+ headerErrors: fieldErrors.alg ? [...fieldErrors.alg] : [],
+ });
+ }
+
+ if (!("typ" in value && value.typ === "JWT")) {
+ headerWarnings.push(
+ '[RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-5.1) recommends for the "typ" claim value to be "JWT" when used.',
+ );
+ }
+
+ return ok({
+ header: value as DecodedJwtHeaderModel,
+ headerWarnings: headerWarnings.length > 0 ? headerWarnings : null,
+ });
+};
+
+export const validateJwtFormat = (
+ value: string,
+): Result<
+ {
+ type: JwtTypeValues;
+ signingAlgorithm: string;
+ decoded: { header: DecodedJwtHeaderModel; payload: DecodedJwtPayloadModel };
+ },
+ // TODO: Update with proper types
+ DebuggerErrorModelWithData<{
+ header: any;
+ payload: any;
+ }>
+> => {
+ if (!value) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `JWT must not be empty.`,
+ });
+ }
+
+ const segmentLabelMap: { [index: number]: string } = {
+ 0: "first (header)",
+ 1: "second (payload)",
+ 2: "third (signature)",
+ };
+
+ const segments = value.split(".");
+
+ // TODO: Update with proper types
+ const error: DebuggerErrorModelWithData<{
+ header: any;
+ payload: any;
+ }> = {
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `This tool only supports a JWT that uses the JWS Compact Serialization, which must have three base64url-encoded segments separated by two period ('.') characters as defined on [RFC 7515](https://datatracker.ietf.org/doc/html/rfc7515#section-3.3)`,
+ };
+
+ if (!isValidBase64UrlString(segments[0])) {
+ return err(error);
+ }
+
+ const decodedHeaderSegmentResult = safeDecodeBase64url(http://github.com/segments[0]);
+
+ if (decodedHeaderSegmentResult.isErr()) {
+ return err(error);
+ }
+
+ const decodedHeaderSegment = decodedHeaderSegmentResult.value;
+
+ const headerParsingResult =
+ parseStringIntoValidJsonObject(decodedHeaderSegment);
+
+ if (headerParsingResult.isErr()) {
+ return err(error);
+ }
+
+ if (segments.length === 1 || (segments.length === 2 && segments[1] === "")) {
+ return err({
+ ...error,
+ data: {
+ header: headerParsingResult.value,
+ payload: null,
+ },
+ });
+ }
+
+ if (!isValidBase64UrlString(segments[1])) {
+ return err(error);
+ }
+
+ const decodedPayloadSegmentResult = safeDecodeBase64url(http://github.com/segments[1]);
+
+ if (decodedPayloadSegmentResult.isErr()) {
+ return err(error);
+ }
+
+ const decodedPayloadSegment = decodedPayloadSegmentResult.value;
+
+ const payloadParsingResult = parseStringIntoValidJsonObject(
+ decodedPayloadSegment,
+ );
+
+ if (
+ isNoneAlg((headerParsingResult.value as DecodedJwtHeaderModel).alg) &&
+ segments.length === 2 &&
+ segments[1] !== ""
+ ) {
+ if (payloadParsingResult.isErr()) {
+ return err({
+ ...error,
+ data: {
+ header: headerParsingResult.value,
+ payload: decodedPayloadSegment,
+ },
+ });
+ }
+
+ return err({
+ ...error,
+ data: {
+ header: headerParsingResult.value,
+ payload: payloadParsingResult.value,
+ },
+ });
+ }
+
+ if (
+ !isNoneAlg((headerParsingResult.value as DecodedJwtHeaderModel).alg) &&
+ ((segments.length === 2 && segments[1] !== "") ||
+ (segments.length === 3 && segments[2] === ""))
+ ) {
+ if (payloadParsingResult.isErr()) {
+ return err({
+ ...error,
+ data: {
+ header: headerParsingResult.value,
+ payload: decodedPayloadSegment,
+ },
+ });
+ }
+
+ return err({
+ ...error,
+ data: {
+ header: headerParsingResult.value,
+ payload: payloadParsingResult.value,
+ },
+ });
+ }
+
+ if (segments.length !== 3) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `This tool only supports a JWT that uses the JWS Compact Serialization, which must have three base64url-encoded segments separated by two period ('.') characters as defined on [RFC 7515](https://datatracker.ietf.org/doc/html/rfc7515#section-3.3)`,
+ });
+ }
+
+ const signatureSegment = segments[2];
+
+ for (let i = 0; i < segments.length; i++) {
+ const segment = segments[i];
+
+ if (i < 2 && !segment) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `The ${segmentLabelMap[i]} segment cannot be an empty string as defined on [RFC 7515](https://datatracker.ietf.org/doc/html/rfc7515#section-3.3).`,
+ });
+ }
+
+ if (!isValidBase64UrlString(segment)) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `Each JWT segment must be a base64url-encoded as defined on [RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-3). The ${segmentLabelMap[i]} segment isn't.`,
+ });
+ }
+ }
+
+ if (decodedHeaderSegmentResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `Each JWT segment must be a base64url-encoded as defined on [RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-3). The ${segmentLabelMap[0]} segment isn't.`,
+ });
+ }
+
+ if (decodedPayloadSegmentResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `Each JWT segment must be a base64url-encoded as defined on [RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-3). The ${segmentLabelMap[1]} segment isn't.`,
+ });
+ }
+
+ if (headerParsingResult.isErr() && payloadParsingResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `The first segment, the JWT header, and the second segment, the JWT payload, must represent a completely valid JSON object conforming to [RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-3).`,
+ data: {
+ header: decodedHeaderSegment,
+ payload: decodedPayloadSegment,
+ },
+ });
+ }
+
+ if (headerParsingResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `The first segment, the JWT header, must represent a completely valid JSON object conforming to [RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-3).`,
+ data: {
+ header: decodedHeaderSegment,
+ payload: payloadParsingResult.isOk() ? payloadParsingResult.value : "",
+ },
+ });
+ }
+
+ if (payloadParsingResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `The second segment, the JWT payload, must represent a completely valid JSON object conforming to [RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-3).`,
+ data: {
+ header: headerParsingResult.isOk() ? headerParsingResult.value : "",
+ payload: decodedPayloadSegment,
+ },
+ });
+ }
+
+ const payloadJsonObject =
+ payloadParsingResult.value as DecodedJwtPayloadModel;
+
+ const getValidatedHeaderResult = getValidatedDecoderHeader(
+ headerParsingResult.value,
+ );
+
+ if (getValidatedHeaderResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: getValidatedHeaderResult.error.headerErrors.join(" "),
+ data: {
+ header: headerParsingResult.value,
+ payload: payloadParsingResult.value,
+ },
+ });
+ }
+
+ const { header } = getValidatedHeaderResult.value;
+
+ let type: JwtTypeValues | null = null;
+
+ if (isNoneAlg(header.alg) && !signatureSegment) {
+ type = JwtTypeValues.Unsecured;
+ }
+
+ if (isNoneAlg(header.alg) && signatureSegment) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `Unsecured JWTs must not have a signature part as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ });
+ }
+
+ if (isHmacAlg(header.alg)) {
+ type = JwtTypeValues.MACed;
+ }
+
+ if (isDigitalSignatureAlg(header.alg)) {
+ type = JwtTypeValues.DigitallySigned;
+ }
+
+ if (!type) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: `The JWT header does not have a valid "alg" claim as required by [RFC 7515 (JSON Web Signature)](https://datatracker.ietf.org/doc/html/rfc7515#section-4.1.1)`,
+ });
+ }
+
+ return ok({
+ type,
+ signingAlgorithm: header.alg,
+ decoded: {
+ header: header,
+ payload: payloadJsonObject,
+ },
+ });
+};
+
+export const validateSymmetricSecret = async ({
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+}: {
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+}): Promise> => {
+ if (!symmetricSecretKey) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.SECRET,
+ message: "Enter a secret to verify the JWT signature.",
+ });
+ }
+
+ if (
+ symmetricSecretKeyEncoding === EncodingValues.BASE64URL &&
+ !isValidBase64UrlString(symmetricSecretKey)
+ ) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.SECRET,
+ message:
+ "Invalid base64url string. Use the Base64 encoding using the URL and filename-safe character set as defined in [Section 5 of RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648#section-5).",
+ });
+ }
+
+ if (
+ symmetricSecretKeyEncoding === EncodingValues.BASE64URL &&
+ symmetricSecretKey.length < 2
+ ) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.SECRET,
+ message:
+ "The smallest possible binary input is a single byte (8 bits), which is represented by 2 base64url characters.",
+ });
+ }
+
+ const getSymmetricSecretKeyByteArrayResult = getSymmetricSecretKeyByteArray(
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ );
+
+ if (getSymmetricSecretKeyByteArrayResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.SECRET,
+ message: getSymmetricSecretKeyByteArrayResult.error,
+ });
+ }
+
+ const symmetricSecretKeyByteArray =
+ getSymmetricSecretKeyByteArrayResult.value;
+
+ return ok(symmetricSecretKeyByteArray);
+};
+
+type VerifyMACedJwtParams = {
+ jwt: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+};
+
+export const verifyMACedJwt = async ({
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ jwt,
+}: VerifyMACedJwtParams): Promise<
+ Result
+> => {
+ const validateSymmetricSecretResult = await validateSymmetricSecret({
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ });
+
+ if (validateSymmetricSecretResult.isErr()) {
+ return err(validateSymmetricSecretResult.error);
+ }
+
+ const validatedSymmetricKey = validateSymmetricSecretResult.value;
+
+ const safeCompactVerifyResult = await safeCompactVerify(
+ jwt,
+ validatedSymmetricKey,
+ );
+
+ if (safeCompactVerifyResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.SECRET,
+ message: safeCompactVerifyResult.error.message,
+ });
+ }
+
+ return ok(safeCompactVerifyResult.value);
+};
+
+export async function validateAsymmetricKey({
+ alg,
+ asymmetricPublicKey,
+ asymmetricPublicKeyFormat,
+}: {
+ alg: string;
+ asymmetricPublicKey: KeyLike | string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+}): Promise> {
+ const spki = `-----BEGIN PUBLIC KEY-----`;
+ const pkcs1 = `-----BEGIN RSA PUBLIC KEY-----`;
+ const x509 = `-----BEGIN CERTIFICATE-----`;
+
+ if (!asymmetricPublicKey) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: "Enter a public key to verify the JWT signature.",
+ });
+ }
+
+ try {
+ if (
+ typeof asymmetricPublicKey === "string" &&
+ asymmetricPublicKeyFormat === AsymmetricKeyFormatValues.PEM
+ ) {
+ if (asymmetricPublicKey.startsWith(x509)) {
+ const safeImportX509Result = await safeImportX509(
+ asymmetricPublicKey,
+ alg,
+ );
+
+ if (safeImportX509Result.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: safeImportX509Result.error,
+ });
+ }
+
+ const cryptoKey = safeImportX509Result.value;
+
+ return ok(cryptoKey);
+ }
+
+ if (asymmetricPublicKey.startsWith(spki)) {
+ const safeImportSPKIResult = await safeImportSPKI(
+ asymmetricPublicKey,
+ alg,
+ );
+
+ if (safeImportSPKIResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: safeImportSPKIResult.error,
+ });
+ }
+
+ const cryptoKey = safeImportSPKIResult.value;
+
+ return ok(cryptoKey);
+ }
+
+ if (asymmetricPublicKey.startsWith(pkcs1)) {
+ const publicKeyFromPemResult =
+ safePublicKeyFromPem(asymmetricPublicKey);
+
+ if (publicKeyFromPemResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: publicKeyFromPemResult.error,
+ });
+ }
+
+ const publicKeyFromPem = publicKeyFromPemResult.value;
+
+ const PublicKeyToPemResult = safePublicKeyToPem(publicKeyFromPem);
+
+ if (PublicKeyToPemResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: PublicKeyToPemResult.error,
+ });
+ }
+
+ const spkiKey = PublicKeyToPemResult.value;
+
+ const safeImportSPKIResult = await safeImportSPKI(spkiKey, alg);
+
+ if (safeImportSPKIResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: safeImportSPKIResult.error,
+ });
+ }
+
+ const cryptoKey = safeImportSPKIResult.value;
+
+ return ok(cryptoKey);
+ }
+ }
+
+ if (
+ typeof asymmetricPublicKey === "string" &&
+ asymmetricPublicKeyFormat === AsymmetricKeyFormatValues.JWK
+ ) {
+ const safeJsonParseResult = safeJsonParse(asymmetricPublicKey);
+
+ if (safeJsonParseResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: `The provided key is not a valid JWK. Ensure it is a correctly formatted JSON Web Key (JWK) as defined on [RFC 7517](https://datatracker.ietf.org/doc/html/rfc7517#section-4).`,
+ });
+ }
+
+ const parsedPublicKey = safeJsonParseResult.value;
+
+ if (!("kty" in parsedPublicKey)) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: `The provided key is not a valid JWK. The 'kty' member must be present in a JWK as defined on [RFC 7517](https://datatracker.ietf.org/doc/html/rfc7517#section-4.1).`,
+ });
+ }
+
+ const safeImportJWKResult = await safeImportJWK(parsedPublicKey, alg);
+
+ if (safeImportJWKResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: safeImportJWKResult.error,
+ });
+ }
+
+ const jwk = safeImportJWKResult.value;
+
+ return ok(jwk);
+ }
+
+ if (typeof asymmetricPublicKey !== "string") {
+ return ok(asymmetricPublicKey);
+ }
+
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: `Invalid public key format or structure.`,
+ });
+ } catch (e) {
+ if (e instanceof Error) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: e.message,
+ });
+ }
+
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: `Invalid public key format or structure.`,
+ });
+ }
+}
+
+type VerifyDigitallySignedJwtParams = {
+ jwt: string;
+ alg: string;
+ asymmetricPublicKey: KeyLike | string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+};
+
+export async function verifyDigitallySignedJwt({
+ jwt,
+ asymmetricPublicKey,
+ alg,
+ asymmetricPublicKeyFormat,
+}: VerifyDigitallySignedJwtParams): Promise<
+ Result
+> {
+ const validateAsymmetricKeyResult = await validateAsymmetricKey({
+ alg,
+ asymmetricPublicKey,
+ asymmetricPublicKeyFormat,
+ });
+
+ if (validateAsymmetricKeyResult.isErr()) {
+ return err(validateAsymmetricKeyResult.error);
+ }
+
+ const validatedAsymmetricKey = validateAsymmetricKeyResult.value;
+
+ const safeCompactVerifyResult = await safeCompactVerify(
+ jwt,
+ validatedAsymmetricKey,
+ );
+
+ if (safeCompactVerifyResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: safeCompactVerifyResult.error.message,
+ });
+ }
+
+ return ok(true);
+}
+
+export const getSymmetricSecretKeyByteArray = (
+ key: string,
+ encoding: EncodingValues = EncodingValues.UTF8,
+): Result => {
+ if (encoding === EncodingValues.BASE64URL) {
+ const safeBase64urlToBufferResult = safeBase64urlToBuffer(key);
+
+ if (safeBase64urlToBufferResult.isErr()) {
+ return err(safeBase64urlToBufferResult.error);
+ }
+
+ const buffer = safeBase64urlToBufferResult.value;
+
+ const safeNewUint8ArrayResult = safeNewUint8ArrayFromBuffer(buffer);
+
+ if (safeNewUint8ArrayResult.isErr()) {
+ return err(safeNewUint8ArrayResult.error);
+ }
+
+ const uint8Array = safeNewUint8ArrayResult.value;
+
+ return ok(uint8Array);
+ }
+
+ const safeTextEncodeResult = safeTextEncode(key);
+
+ if (safeTextEncodeResult.isErr()) {
+ return err(safeTextEncodeResult.error);
+ }
+
+ return ok(safeTextEncodeResult.value);
+};
+
+export const getJwk = ({ alg, use, key_ops, ext, ...jwk }: JWK): JWK => jwk;
+
+const safePrivateKeyFromPem = fromThrowable(
+ nodeForge.pki.privateKeyFromPem,
+ (e) => {
+ const message = "Cannot get private key from PEM";
+
+ if (e instanceof Error) {
+ return e.message || message;
+ }
+
+ return message;
+ },
+);
+
+const safePrivateKeyToAsn1 = fromThrowable(
+ nodeForge.pki.privateKeyToAsn1,
+ (e) => {
+ const message = "Cannot convert private key ASN.1";
+
+ if (e instanceof Error) {
+ return e.message || message;
+ }
+
+ return message;
+ },
+);
+
+const safeWrapRsaPrivateKey = fromThrowable(
+ nodeForge.pki.wrapRsaPrivateKey,
+ (e) => {
+ const message = "Cannot wrap RSA private key";
+
+ if (e instanceof Error) {
+ return e.message || message;
+ }
+
+ return message;
+ },
+);
+
+const safePrivateKeyInfoToPem = fromThrowable(
+ nodeForge.pki.privateKeyInfoToPem,
+ (e) => {
+ const message = "Cannot convert private key info to PEM";
+
+ if (e instanceof Error) {
+ return e.message || message;
+ }
+
+ return message;
+ },
+);
+
+const safeImportPKCS8 = fromAsyncThrowable(importPKCS8, (e) => {
+ const message =
+ "Cannot import PEM-encoded PKCS#8 string as a runtime-specific private key representation.";
+
+ return getOperationException({
+ e,
+ defaultMessage: message,
+ });
+});
+
+export const getAsymmetricKeyCryptoKey = async (
+ key: string,
+ alg: string,
+ keyFormat: AsymmetricKeyFormatValues,
+): Promise> => {
+ if (keyFormat === AsymmetricKeyFormatValues.PEM) {
+ if (key.startsWith("-----BEGIN RSA PRIVATE KEY-----")) {
+ const safePrivateKeyFromPemResult = safePrivateKeyFromPem(key);
+
+ if (safePrivateKeyFromPemResult.isErr()) {
+ return err(safePrivateKeyFromPemResult.error);
+ }
+
+ const privateKeyFromPem = safePrivateKeyFromPemResult.value;
+
+ const safePrivateKeyToAsn1Result =
+ safePrivateKeyToAsn1(privateKeyFromPem);
+
+ if (safePrivateKeyToAsn1Result.isErr()) {
+ return err(safePrivateKeyToAsn1Result.error);
+ }
+
+ const privateKeyToAsn1 = safePrivateKeyToAsn1Result.value;
+
+ const safeWrapRsaPrivateKeyResult =
+ safeWrapRsaPrivateKey(privateKeyToAsn1);
+
+ if (safeWrapRsaPrivateKeyResult.isErr()) {
+ return err(safeWrapRsaPrivateKeyResult.error);
+ }
+
+ const wrapRsaPrivateKey = safeWrapRsaPrivateKeyResult.value;
+
+ const safePrivateKeyInfoToPemResult =
+ safePrivateKeyInfoToPem(wrapRsaPrivateKey);
+
+ if (safePrivateKeyInfoToPemResult.isErr()) {
+ return err(safePrivateKeyInfoToPemResult.error);
+ }
+
+ key = safePrivateKeyInfoToPemResult.value;
+ }
+
+ if (key.startsWith("-----BEGIN")) {
+ const safeImportPKCS8Result = await safeImportPKCS8(key, alg);
+
+ if (safeImportPKCS8Result.isErr()) {
+ return err(safeImportPKCS8Result.error);
+ }
+
+ const cryptoKey = safeImportPKCS8Result.value;
+
+ return ok(cryptoKey);
+ }
+ }
+
+ if (keyFormat === AsymmetricKeyFormatValues.JWK) {
+ const safeJsonParseResult = safeJsonParse(key);
+
+ if (safeJsonParseResult.isErr()) {
+ return err(
+ `The provided key is not a valid JWK. Ensure it is a correctly formatted JSON Web Key (JWK) as defined on [RFC 7517](https://datatracker.ietf.org/doc/html/rfc7517#section-4).`,
+ );
+ }
+
+ const parsedKey = safeJsonParseResult.value;
+ const jwk = getJwk(parsedKey);
+
+ if (!("kty" in jwk) && !("d" in jwk)) {
+ return err(
+ `The provided key is not a valid JWK. Ensure it is a correctly formatted JSON Web Key (JWK) as defined on [RFC 7517](https://datatracker.ietf.org/doc/html/rfc7517#section-4).`,
+ );
+ }
+
+ if (!("kty" in jwk)) {
+ return err(
+ `The provided key is not a valid JWK. The 'kty' member must be present in a JWK as defined on [RFC 7517](https://datatracker.ietf.org/doc/html/rfc7517#section-4.1).`,
+ );
+ }
+
+ if (!("d" in jwk)) {
+ return err(
+ `Private key is not a private JWK. The 'd' parameter must be present as defined on [RFC 7518](https://datatracker.ietf.org/doc/html/rfc7518#section-6).`,
+ );
+ }
+
+ const safeImportJWKResult = await safeImportJWK(jwk, alg);
+
+ if (safeImportJWKResult.isErr()) {
+ return err(safeImportJWKResult.error);
+ }
+
+ const cryptoKey = safeImportJWKResult.value;
+
+ return ok(cryptoKey);
+ }
+
+ return err("Missing or incorrect private key format.");
+};
+
+const createCompactSignObject = fromThrowable(
+ (payload: Uint8Array) => new CompactSign(payload),
+ () => "Unable to create object to build and sign Compact JWS strings",
+);
+
+const setProtectedHeader = fromThrowable(
+ (compactSign: CompactSign, header: CompactJWSHeaderParameters) =>
+ compactSign.setProtectedHeader(header),
+ () => "Unable to set the JWS Protected Header on the Compact Sign object.",
+);
+
+const signValue = (compactSign: CompactSign, key: Uint8Array) => {
+ return fromPromise(compactSign.sign(key), (e) => {
+ if (e instanceof Error) {
+ return new Error(e.message);
+ }
+
+ return new Error("Unable to sign token.");
+ });
+};
+
+const signValueWithPrivateKey = (
+ compactSign: CompactSign,
+ key: KeyLike | Uint8Array,
+) => {
+ return fromPromise(compactSign.sign(key), (e) => {
+ console.error(e);
+
+ if (e instanceof Error) {
+ return new Error(e.message);
+ }
+
+ return new Error("Unable to sign token with private key.");
+ });
+};
+
+export const createUnsecuredJwt = async (
+ header: { [index: string]: any } | string,
+ payload: { [index: string]: any } | string,
+): Promise> => {
+ if (!(typeof header === "string" || header instanceof String)) {
+ const result = safeJsonStringify(header);
+
+ if (result.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: "Given header is not a valid JSON object representation.",
+ });
+ }
+
+ header = result.value;
+ }
+
+ if (!(typeof payload === "string" || payload instanceof String)) {
+ const result = safeJsonStringify(payload);
+
+ if (result.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message: "Given payload is not a valid JSON object representation.",
+ });
+ }
+
+ payload = result.value;
+ }
+
+ const encodedHeaderResult = safeBase64url(http://github.com/header%20as%20string);
+
+ if (encodedHeaderResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: encodedHeaderResult.error,
+ });
+ }
+
+ const encodedPayloadResult = safeBase64url(http://github.com/payload%20as%20string);
+
+ if (encodedPayloadResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message: encodedPayloadResult.error,
+ });
+ }
+
+ const unsecureJwt = `${encodedHeaderResult.value}.${encodedPayloadResult.value}.`;
+
+ return ok(unsecureJwt);
+};
+
+export const signWithSymmetricSecretKey = async (
+ header: CompactJWSHeaderParameters,
+ payload: { [index: string]: any } | string,
+ key: string,
+ encodingFormat: EncodingValues = EncodingValues.UTF8,
+): Promise> => {
+ if (!header.alg) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: 'Missing "alg" claim in header',
+ });
+ }
+
+ const getSymmetricSecretKeyByteArrayResult = getSymmetricSecretKeyByteArray(
+ key,
+ encodingFormat,
+ );
+
+ if (getSymmetricSecretKeyByteArrayResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.SECRET,
+ message: getSymmetricSecretKeyByteArrayResult.error,
+ });
+ }
+
+ const symmetricSecretKeyByteArray =
+ getSymmetricSecretKeyByteArrayResult.value;
+
+ if (!(typeof payload === "string" || payload instanceof String)) {
+ const result = safeJsonStringify(payload);
+
+ if (result.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message: "Given payload is not a valid JSON object representation.",
+ });
+ }
+
+ payload = result.value;
+ }
+
+ const safeTextEncodeResult = safeTextEncode(payload as string);
+
+ if (safeTextEncodeResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message:
+ "Given payload cannot be encoded into an array of 8-bit unsigned integers.",
+ });
+ }
+
+ const encodedPayload = safeTextEncodeResult.value;
+
+ const createCompactSignObjectResult = createCompactSignObject(encodedPayload);
+
+ if (createCompactSignObjectResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message: createCompactSignObjectResult.error,
+ });
+ }
+
+ const compactSign = createCompactSignObjectResult.value;
+
+ const setProtectedHeaderResult = setProtectedHeader(compactSign, header);
+
+ if (setProtectedHeaderResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: setProtectedHeaderResult.error,
+ });
+ }
+
+ const compactSignWithProtectedHeader = setProtectedHeaderResult.value;
+
+ const signValueResult = await signValue(
+ compactSignWithProtectedHeader,
+ symmetricSecretKeyByteArray,
+ );
+
+ if (signValueResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.SECRET,
+ message: signValueResult.error.message,
+ });
+ }
+
+ return ok(signValueResult.value);
+};
+
+export const signWithAsymmetricPrivateKey = async (
+ header: CompactJWSHeaderParameters,
+ payload: { [index: string]: any } | string,
+ key: string,
+ keyFormat: AsymmetricKeyFormatValues,
+): Promise> => {
+ if (!header.alg) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: 'Missing "alg" claim in header',
+ });
+ }
+
+ const getAsymmetricKeyCryptoKeyResult = await getAsymmetricKeyCryptoKey(
+ key,
+ header.alg,
+ keyFormat,
+ );
+
+ if (getAsymmetricKeyCryptoKeyResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: getAsymmetricKeyCryptoKeyResult.error,
+ });
+ }
+
+ const asymmetricKeyCryptoKey = getAsymmetricKeyCryptoKeyResult.value;
+
+ if (!(typeof payload === "string" || payload instanceof String)) {
+ const result = safeJsonStringify(payload);
+
+ if (result.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message: "Given payload is not a valid JSON object representation.",
+ });
+ }
+
+ payload = result.value;
+ }
+
+ const safeTextEncodeResult = safeTextEncode(payload as string);
+
+ if (safeTextEncodeResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message:
+ "Given payload cannot be encoded into an array of 8-bit unsigned integers.",
+ });
+ }
+
+ const encodedPayload = safeTextEncodeResult.value;
+
+ const createCompactSignObjectResult = createCompactSignObject(encodedPayload);
+
+ if (createCompactSignObjectResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.PAYLOAD,
+ message: createCompactSignObjectResult.error,
+ });
+ }
+
+ const compactSign = createCompactSignObjectResult.value;
+
+ const setProtectedHeaderResult = setProtectedHeader(compactSign, header);
+
+ if (setProtectedHeaderResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: setProtectedHeaderResult.error,
+ });
+ }
+
+ const compactSignWithProtectedHeader = setProtectedHeaderResult.value;
+
+ const signValueResult = await signValueWithPrivateKey(
+ compactSignWithProtectedHeader,
+ asymmetricKeyCryptoKey,
+ );
+
+ if (signValueResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: signValueResult.error.message,
+ });
+ }
+
+ return ok(signValueResult.value);
+};
+
+// TODO: Update with proper types
+export const getStringifiedHeaderAndPayload = (
+ header: any,
+ payload: any,
+): Result<{ header: string; payload: string }, DebuggerErrorModel> => {
+ const stringifyHeaderResult = stringifyJsonObject(header);
+ const stringifyPayloadResult = stringifyJsonObject(payload);
+
+ if (stringifyHeaderResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: stringifyHeaderResult.error,
+ });
+ }
+
+ if (stringifyPayloadResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.DECODE,
+ input: DebuggerInputValues.JWT,
+ message: stringifyPayloadResult.error,
+ });
+ }
+
+ return ok({
+ header: stringifyHeaderResult.value,
+ payload: stringifyPayloadResult.value,
+ });
+};
+
+export const checkHmacSecretLength = (
+ secret: string,
+ algSize: number,
+ encodingFormat: EncodingValues = EncodingValues.UTF8,
+): Result => {
+ if (encodingFormat === EncodingValues.BASE64URL) {
+ const safeBase64urlToBufferResult = safeBase64urlToBuffer(secret);
+
+ if (safeBase64urlToBufferResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: safeBase64urlToBufferResult.error,
+ });
+ }
+
+ const buffer = safeBase64urlToBufferResult.value;
+
+ const inputBits = buffer.length * 8;
+
+ if (inputBits >= algSize) {
+ return ok(void 0);
+ }
+ }
+
+ if (encodingFormat !== EncodingValues.BASE64URL) {
+ const safeBufferFromResult = safeBufferFrom(secret);
+
+ if (safeBufferFromResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: safeBufferFromResult.error,
+ });
+ }
+
+ const buffer = safeBufferFromResult.value;
+
+ const inputBits = buffer.length * 8;
+
+ if (inputBits >= algSize) {
+ return ok(void 0);
+ }
+ }
+
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: `A key of ${algSize} bits or larger MUST be used with HS${algSize} as specified on [RFC 7518](https://datatracker.ietf.org/doc/html/rfc7518#section-3.2).`,
+ });
+};
+
+export const isP521Supported = async (): Promise => {
+ try {
+ await window.crypto.subtle.generateKey(
+ {
+ name: algDictionary.ECDSA,
+ namedCurve: "P-521",
+ },
+ true,
+ ["sign", "verify"],
+ );
+
+ return true;
+ } catch (e) {
+ return false;
+ }
+};
+
+export const isEd25519Supported = async (): Promise => {
+ try {
+ await window.crypto.subtle.generateKey(
+ {
+ name: algDictionary.Ed25519,
+ },
+ true,
+ ["sign", "verify"],
+ );
+
+ return true;
+ } catch (e) {
+ return false;
+ }
+};
+
+export const isEd448Supported = async (): Promise => {
+ try {
+ await window.crypto.subtle.generateKey(
+ {
+ name: algDictionary.Ed448,
+ },
+ true,
+ ["sign", "verify"],
+ );
+
+ return true;
+ } catch (e) {
+ return false;
+ }
+};
diff --git a/src/features/common/services/utils.ts b/src/features/common/services/utils.ts
new file mode 100644
index 00000000..a6d69d8e
--- /dev/null
+++ b/src/features/common/services/utils.ts
@@ -0,0 +1,244 @@
+import {
+ err,
+ fromAsyncThrowable,
+ fromPromise,
+ fromThrowable,
+ ok,
+ Result,
+} from "neverthrow";
+import {
+ compactVerify,
+ importJWK,
+ importSPKI,
+ importX509,
+ KeyLike,
+} from "jose";
+import nodeForge from "node-forge";
+import base64url from "base64url";
+import { algDictionary } from "@/features/common/values/jws-alg-header-parameter-values.dictionary";
+
+export const extractJwt = (value: string): string => {
+ if (!value) {
+ return "";
+ }
+
+ const jwt = value.split(/\s+/).filter((element) => element.startsWith("ey"));
+
+ return jwt[0] || value;
+};
+
+export const safeParseInt = fromThrowable(parseInt, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Cannot parse string into number.";
+});
+
+export const safeJsonParse = fromThrowable(JSON.parse, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Cannot parse string into JSON.";
+});
+
+export const safeBase64url = fromThrowable(base64url, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Cannot encode value into base64url.";
+});
+
+export const safeDecodeBase64url = fromThrowable(base64url.decode, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Cannot decode value from base64url.";
+});
+
+export const safeBase64urlToBuffer = fromThrowable(base64url.toBuffer, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Cannot convert base64url-encoded value to a Buffer containing the decoded bytes.";
+});
+
+export const safeBufferFrom = fromThrowable(Buffer.from, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Cannot creates a new Buffer using the passed value";
+});
+
+export const safeJsonStringify = fromThrowable(JSON.stringify, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Cannot convert object into JSON string.";
+});
+
+export const safeNewUint8ArrayFromBuffer = fromThrowable(
+ (buffer: ArrayBufferLike) => new Uint8Array(buffer),
+ (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Can't create array of 8-bit unsigned integers.";
+ },
+);
+
+/**
+ * Why do we need to create this binding?
+ * Source: https://ardislu.dev/illegal-invocation-on-map
+ */
+const encode = TextEncoder.prototype.encode.bind(new TextEncoder());
+
+export const safeTextEncode = fromThrowable(encode, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Unable to encode given string into an array of 8-bit unsigned integers.";
+});
+
+export const getTimeClaimProcessedValue = (
+ time: string,
+): Result => {
+ try {
+ if (/\d+,?$/.test(time)) {
+ return ok(new Date(parseInt(time, 10) * 1000).toString());
+ } else {
+ return ok(new Date(time.replace(/[",]/g, "")).toString());
+ }
+ } catch (e) {
+ return err("Invalid date");
+ }
+};
+
+export const operationExceptionDictionary = {
+ TypeError:
+ "Operation could not be performed as value is not of the expected type.",
+ NotSupportedError: "The algorithm is not supported.",
+ SyntaxError: "A required parameter was missing or out-of-range.",
+ InvalidAccessError:
+ "The requested operation is not valid for the provided key.",
+ DataError: "Data provided to the operation does not meet requirements.",
+ OperationError: "The operation failed for an operation-specific reason.",
+};
+
+export const getOperationException = ({
+ e,
+ defaultMessage,
+}: {
+ e: unknown;
+ defaultMessage: string;
+}): string => {
+ if (!(e instanceof Error)) {
+ return defaultMessage;
+ }
+
+ if (e.name === "TypeError") {
+ return operationExceptionDictionary.TypeError;
+ }
+
+ if (e.name === "NotSupportedError" || e.name === "JOSENotSupported") {
+ return operationExceptionDictionary.NotSupportedError;
+ }
+
+ if (e.name === "SyntaxError") {
+ return operationExceptionDictionary.SyntaxError;
+ }
+
+ if (e.name === "InvalidAccessError") {
+ return operationExceptionDictionary.InvalidAccessError;
+ }
+
+ if (e.name === "DataError") {
+ return operationExceptionDictionary.DataError;
+ }
+
+ if (e.name === "OperationError") {
+ return operationExceptionDictionary.OperationError;
+ }
+
+ return e.message || defaultMessage;
+};
+
+export const safeImportSPKI = fromAsyncThrowable(importSPKI, (e) => {
+ const message =
+ "Cannot import PEM-encoded SPKI string as a runtime-specific public key representation.";
+
+ return getOperationException({
+ e,
+ defaultMessage: message,
+ });
+});
+
+export const safeImportX509 = fromAsyncThrowable(importX509, (e) => {
+ const message = `"x509" must be X.509 formatted string. [Learn more](https://en.wikipedia.org/wiki/X.509).`;
+
+ return getOperationException({
+ e,
+ defaultMessage: message,
+ });
+});
+
+export const safeImportJWK = fromAsyncThrowable(importJWK, (e) => {
+ const message = "Cannot import JWK to a runtime-specific key representation.";
+
+ return getOperationException({
+ e,
+ defaultMessage: message,
+ });
+});
+
+export const safeCompactVerify = (jws: string, key: Uint8Array | KeyLike) => {
+ return fromPromise(compactVerify(jws, key), (e) => {
+ if (e instanceof Error) {
+ if (e.name === "JWSSignatureVerificationFailed") {
+ return new Error(
+ "Signature verification failed. Try again with another value.",
+ );
+ }
+
+ return new Error(e.message);
+ }
+
+ return new Error("Unable to verify signature using that value.");
+ });
+};
+
+export const safePublicKeyFromPem = fromThrowable(
+ nodeForge.pki.publicKeyFromPem,
+ (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Unable to get public key from PEM string.";
+ },
+);
+
+export const safePublicKeyToPem = fromThrowable(
+ nodeForge.pki.publicKeyToPem,
+ (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Unable to transform public key to PEM string.";
+ },
+);
+
+export const getAlgName = (value: string) => {
+ return value === algDictionary.Ed25519 || value === algDictionary.Ed448
+ ? algDictionary.EdDSA
+ : value;
+};
diff --git a/src/features/common/testing.dictionary.ts b/src/features/common/testing.dictionary.ts
new file mode 100644
index 00000000..2e8c469d
--- /dev/null
+++ b/src/features/common/testing.dictionary.ts
@@ -0,0 +1,25 @@
+export const testingDictionary = {
+ decoder: {
+ widget: {
+ label: "JWT decoder widget",
+ toolbar: {
+ label: "Sync tools toggle",
+ input: {
+ label: "Toggle sync mode",
+ },
+ },
+ jwt: {
+ label: "JWT editor",
+ },
+ header: {
+ label: "Decoded header",
+ tabs: {
+ json: "",
+ },
+ },
+ payload: {
+ label: "Decoded payload",
+ },
+ },
+ },
+};
diff --git a/src/features/common/values/asymmetric-key-format.values.ts b/src/features/common/values/asymmetric-key-format.values.ts
new file mode 100644
index 00000000..9533060a
--- /dev/null
+++ b/src/features/common/values/asymmetric-key-format.values.ts
@@ -0,0 +1,4 @@
+export enum AsymmetricKeyFormatValues {
+ PEM = "PEM",
+ JWK = "JWK",
+}
diff --git a/src/features/common/values/button.values.ts b/src/features/common/values/button.values.ts
new file mode 100644
index 00000000..ceebf042
--- /dev/null
+++ b/src/features/common/values/button.values.ts
@@ -0,0 +1,15 @@
+export enum ButtonSize {
+ Large = "large",
+ Medium = "medium",
+}
+
+export enum ButtonMode {
+ Primary = "primary",
+ Secondary = "secondary",
+ Minimal = "minimal",
+}
+
+export enum ButtonContext {
+ WorkflowAction = "WorkflowAction",
+ FeedbackAction = "FeedbackAction",
+}
diff --git a/src/features/common/values/claim-description-visibility.values.ts b/src/features/common/values/claim-description-visibility.values.ts
new file mode 100644
index 00000000..a5509a9b
--- /dev/null
+++ b/src/features/common/values/claim-description-visibility.values.ts
@@ -0,0 +1,4 @@
+export enum ClaimDescriptionVisibilityValues {
+ VISIBLE = "VISIBLE",
+ HIDDEN = "HIDDEN",
+}
diff --git a/src/features/common/values/constants.ts b/src/features/common/values/constants.ts
new file mode 100644
index 00000000..06ac8e96
--- /dev/null
+++ b/src/features/common/values/constants.ts
@@ -0,0 +1 @@
+export const NOOP_ALG = "no-op";
diff --git a/src/features/common/values/debugger-input.values.ts b/src/features/common/values/debugger-input.values.ts
new file mode 100644
index 00000000..2d006ea7
--- /dev/null
+++ b/src/features/common/values/debugger-input.values.ts
@@ -0,0 +1,7 @@
+export enum DebuggerInputValues {
+ JWT = "jwt",
+ SECRET = "secret",
+ KEY = "key",
+ HEADER = "header",
+ PAYLOAD = "payload",
+}
diff --git a/src/features/common/values/debugger-mode.values.ts b/src/features/common/values/debugger-mode.values.ts
new file mode 100644
index 00000000..d8f88e62
--- /dev/null
+++ b/src/features/common/values/debugger-mode.values.ts
@@ -0,0 +1,4 @@
+export enum DebuggerModeValues {
+ SPLIT = "SPLIT",
+ UNIFIED = "UNIFIED",
+}
diff --git a/src/features/common/values/debugger-task.values.ts b/src/features/common/values/debugger-task.values.ts
new file mode 100644
index 00000000..307a6900
--- /dev/null
+++ b/src/features/common/values/debugger-task.values.ts
@@ -0,0 +1,5 @@
+export enum DebuggerTaskValues {
+ DECODE = "decode",
+ VERIFY = "verify",
+ ENCODE = "encode",
+}
diff --git a/src/features/common/values/debugger-widget.values.ts b/src/features/common/values/debugger-widget.values.ts
new file mode 100644
index 00000000..4644fc74
--- /dev/null
+++ b/src/features/common/values/debugger-widget.values.ts
@@ -0,0 +1,4 @@
+export enum DebuggerWidgetValues {
+ DECODER = "DECODER",
+ ENCODER = "ENCODER",
+}
diff --git a/src/features/common/values/default-tokens.values.ts b/src/features/common/values/default-tokens.values.ts
new file mode 100644
index 00000000..a35c3fc0
--- /dev/null
+++ b/src/features/common/values/default-tokens.values.ts
@@ -0,0 +1,279 @@
+// Yes, all keys here are supposed to be exposed, you can commit
+// them safely to GitHub.
+
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+
+const rsaPrivateKey = `-----BEGIN PRIVATE KEY-----
+MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQC7VJTUt9Us8cKj
+MzEfYyjiWA4R4/M2bS1GB4t7NXp98C3SC6dVMvDuictGeurT8jNbvJZHtCSuYEvu
+NMoSfm76oqFvAp8Gy0iz5sxjZmSnXyCdPEovGhLa0VzMaQ8s+CLOyS56YyCFGeJZ
+qgtzJ6GR3eqoYSW9b9UMvkBpZODSctWSNGj3P7jRFDO5VoTwCQAWbFnOjDfH5Ulg
+p2PKSQnSJP3AJLQNFNe7br1XbrhV//eO+t51mIpGSDCUv3E0DDFcWDTH9cXDTTlR
+ZVEiR2BwpZOOkE/Z0/BVnhZYL71oZV34bKfWjQIt6V/isSMahdsAASACp4ZTGtwi
+VuNd9tybAgMBAAECggEBAKTmjaS6tkK8BlPXClTQ2vpz/N6uxDeS35mXpqasqskV
+laAidgg/sWqpjXDbXr93otIMLlWsM+X0CqMDgSXKejLS2jx4GDjI1ZTXg++0AMJ8
+sJ74pWzVDOfmCEQ/7wXs3+cbnXhKriO8Z036q92Qc1+N87SI38nkGa0ABH9CN83H
+mQqt4fB7UdHzuIRe/me2PGhIq5ZBzj6h3BpoPGzEP+x3l9YmK8t/1cN0pqI+dQwY
+dgfGjackLu/2qH80MCF7IyQaseZUOJyKrCLtSD/Iixv/hzDEUPfOCjFDgTpzf3cw
+ta8+oE4wHCo1iI1/4TlPkwmXx4qSXtmw4aQPz7IDQvECgYEA8KNThCO2gsC2I9PQ
+DM/8Cw0O983WCDY+oi+7JPiNAJwv5DYBqEZB1QYdj06YD16XlC/HAZMsMku1na2T
+N0driwenQQWzoev3g2S7gRDoS/FCJSI3jJ+kjgtaA7Qmzlgk1TxODN+G1H91HW7t
+0l7VnL27IWyYo2qRRK3jzxqUiPUCgYEAx0oQs2reBQGMVZnApD1jeq7n4MvNLcPv
+t8b/eU9iUv6Y4Mj0Suo/AU8lYZXm8ubbqAlwz2VSVunD2tOplHyMUrtCtObAfVDU
+AhCndKaA9gApgfb3xw1IKbuQ1u4IF1FJl3VtumfQn//LiH1B3rXhcdyo3/vIttEk
+48RakUKClU8CgYEAzV7W3COOlDDcQd935DdtKBFRAPRPAlspQUnzMi5eSHMD/ISL
+DY5IiQHbIH83D4bvXq0X7qQoSBSNP7Dvv3HYuqMhf0DaegrlBuJllFVVq9qPVRnK
+xt1Il2HgxOBvbhOT+9in1BzA+YJ99UzC85O0Qz06A+CmtHEy4aZ2kj5hHjECgYEA
+mNS4+A8Fkss8Js1RieK2LniBxMgmYml3pfVLKGnzmng7H2+cwPLhPIzIuwytXywh
+2bzbsYEfYx3EoEVgMEpPhoarQnYPukrJO4gwE2o5Te6T5mJSZGlQJQj9q4ZB2Dfz
+et6INsK0oG8XVGXSpQvQh3RUYekCZQkBBFcpqWpbIEsCgYAnM3DQf3FJoSnXaMhr
+VBIovic5l0xFkEHskAjFTevO86Fsz1C2aSeRKSqGFoOQ0tmJzBEs1R6KqnHInicD
+TQrKhArgLXX4v3CddjfTRJkFWDbE/CkvKZNOrcf1nhaGCPspRJj2KUkj1Fhl9Cnc
+dn/RsYEONbwQSjIfMPkvxF+8HQ==
+-----END PRIVATE KEY-----`;
+
+const rsaJwk = {
+ e: "AQAB",
+ n: "u1SU1LfVLPHCozMxH2Mo4lgOEePzNm0tRgeLezV6ffAt0gunVTLw7onLRnrq0_IzW7yWR7QkrmBL7jTKEn5u-qKhbwKfBstIs-bMY2Zkp18gnTxKLxoS2tFczGkPLPgizskuemMghRniWaoLcyehkd3qqGElvW_VDL5AaWTg0nLVkjRo9z-40RQzuVaE8AkAFmxZzow3x-VJYKdjykkJ0iT9wCS0DRTXu269V264Vf_3jvredZiKRkgwlL9xNAwxXFg0x_XFw005UWVRIkdgcKWTjpBP2dPwVZ4WWC-9aGVd-Gyn1o0CLelf4rEjGoXbAAEgAqeGUxrcIlbjXfbcmw",
+ d: "pOaNpLq2QrwGU9cKVNDa-nP83q7EN5LfmZempqyqyRWVoCJ2CD-xaqmNcNtev3ei0gwuVawz5fQKowOBJcp6MtLaPHgYOMjVlNeD77QAwnywnvilbNUM5-YIRD_vBezf5xudeEquI7xnTfqr3ZBzX43ztIjfyeQZrQAEf0I3zceZCq3h8HtR0fO4hF7-Z7Y8aEirlkHOPqHcGmg8bMQ_7HeX1iYry3_Vw3Smoj51DBh2B8aNpyQu7_aofzQwIXsjJBqx5lQ4nIqsIu1IP8iLG_-HMMRQ984KMUOBOnN_dzC1rz6gTjAcKjWIjX_hOU-TCZfHipJe2bDhpA_PsgNC8Q",
+ p: "8KNThCO2gsC2I9PQDM_8Cw0O983WCDY-oi-7JPiNAJwv5DYBqEZB1QYdj06YD16XlC_HAZMsMku1na2TN0driwenQQWzoev3g2S7gRDoS_FCJSI3jJ-kjgtaA7Qmzlgk1TxODN-G1H91HW7t0l7VnL27IWyYo2qRRK3jzxqUiPU",
+ q: "x0oQs2reBQGMVZnApD1jeq7n4MvNLcPvt8b_eU9iUv6Y4Mj0Suo_AU8lYZXm8ubbqAlwz2VSVunD2tOplHyMUrtCtObAfVDUAhCndKaA9gApgfb3xw1IKbuQ1u4IF1FJl3VtumfQn__LiH1B3rXhcdyo3_vIttEk48RakUKClU8",
+ dp: "zV7W3COOlDDcQd935DdtKBFRAPRPAlspQUnzMi5eSHMD_ISLDY5IiQHbIH83D4bvXq0X7qQoSBSNP7Dvv3HYuqMhf0DaegrlBuJllFVVq9qPVRnKxt1Il2HgxOBvbhOT-9in1BzA-YJ99UzC85O0Qz06A-CmtHEy4aZ2kj5hHjE",
+ dq: "mNS4-A8Fkss8Js1RieK2LniBxMgmYml3pfVLKGnzmng7H2-cwPLhPIzIuwytXywh2bzbsYEfYx3EoEVgMEpPhoarQnYPukrJO4gwE2o5Te6T5mJSZGlQJQj9q4ZB2Dfzet6INsK0oG8XVGXSpQvQh3RUYekCZQkBBFcpqWpbIEs",
+ qi: "JzNw0H9xSaEp12jIa1QSKL4nOZdMRZBB7JAIxU3rzvOhbM9QtmknkSkqhhaDkNLZicwRLNUeiqpxyJ4nA00KyoQK4C11-L9wnXY300SZBVg2xPwpLymTTq3H9Z4Whgj7KUSY9ilJI9RYZfQp3HZ_0bGBDjW8EEoyHzD5L8RfvB0",
+ kty: "RSA",
+};
+
+const rsaPublicKey = `-----BEGIN PUBLIC KEY-----
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAu1SU1LfVLPHCozMxH2Mo
+4lgOEePzNm0tRgeLezV6ffAt0gunVTLw7onLRnrq0/IzW7yWR7QkrmBL7jTKEn5u
++qKhbwKfBstIs+bMY2Zkp18gnTxKLxoS2tFczGkPLPgizskuemMghRniWaoLcyeh
+kd3qqGElvW/VDL5AaWTg0nLVkjRo9z+40RQzuVaE8AkAFmxZzow3x+VJYKdjykkJ
+0iT9wCS0DRTXu269V264Vf/3jvredZiKRkgwlL9xNAwxXFg0x/XFw005UWVRIkdg
+cKWTjpBP2dPwVZ4WWC+9aGVd+Gyn1o0CLelf4rEjGoXbAAEgAqeGUxrcIlbjXfbc
+mwIDAQAB
+-----END PUBLIC KEY-----`;
+
+const ecPrivateKey256 = `-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgevZzL1gdAFr88hb2
+OF/2NxApJCzGCEDdfSp6VQO30hyhRANCAAQRWz+jn65BtOMvdyHKcvjBeBSDZH2r
+1RTwjmYSi9R/zpBnuQ4EiMnCqfMPWiZqB4QdbAd0E7oH50VpuZ1P087G
+-----END PRIVATE KEY-----`;
+
+const ecJwk256 = {
+ crv: "P-256",
+ x: "EVs_o5-uQbTjL3chynL4wXgUg2R9q9UU8I5mEovUf84",
+ y: "kGe5DgSIycKp8w9aJmoHhB1sB3QTugfnRWm5nU_TzsY",
+ d: "evZzL1gdAFr88hb2OF_2NxApJCzGCEDdfSp6VQO30hw",
+ kty: "EC",
+};
+
+const ecPublicKey256 = `-----BEGIN PUBLIC KEY-----
+MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEEVs/o5+uQbTjL3chynL4wXgUg2R9
+q9UU8I5mEovUf86QZ7kOBIjJwqnzD1omageEHWwHdBO6B+dFabmdT9POxg==
+-----END PUBLIC KEY-----`;
+
+const ecPrivateKey384 = `-----BEGIN PRIVATE KEY-----
+MIG2AgEAMBAGByqGSM49AgEGBSuBBAAiBIGeMIGbAgEBBDCAHpFQ62QnGCEvYh/p
+E9QmR1C9aLcDItRbslbmhen/h1tt8AyMhskeenT+rAyyPhGhZANiAAQLW5ZJePZz
+MIPAxMtZXkEWbDF0zo9f2n4+T1h/2sh/fviblc/VTyrv10GEtIi5qiOy85Pf1RRw
+8lE5IPUWpgu553SteKigiKLUPeNpbqmYZUkWGh3MLfVzLmx85ii2vMU=
+-----END PRIVATE KEY-----`;
+
+const ecJwk384 = {
+ crv: "P-384",
+ x: "C1uWSXj2czCDwMTLWV5BFmwxdM6PX9p-Pk9Yf9rIf374m5XP1U8q79dBhLSIuaoj",
+ y: "svOT39UUcPJROSD1FqYLued0rXiooIii1D3jaW6pmGVJFhodzC31cy5sfOYotrzF",
+ d: "gB6RUOtkJxghL2If6RPUJkdQvWi3AyLUW7JW5oXp_4dbbfAMjIbJHnp0_qwMsj4R",
+ kty: "EC",
+};
+
+const ecPublicKey384 = `-----BEGIN PUBLIC KEY-----
+MHYwEAYHKoZIzj0CAQYFK4EEACIDYgAEC1uWSXj2czCDwMTLWV5BFmwxdM6PX9p+
+Pk9Yf9rIf374m5XP1U8q79dBhLSIuaojsvOT39UUcPJROSD1FqYLued0rXiooIii
+1D3jaW6pmGVJFhodzC31cy5sfOYotrzF
+-----END PUBLIC KEY-----`;
+
+const ecPrivateKey521 = `-----BEGIN PRIVATE KEY-----
+MIHuAgEAMBAGByqGSM49AgEGBSuBBAAjBIHWMIHTAgEBBEIBiyAa7aRHFDCh2qga
+9sTUGINE5jHAFnmM8xWeT/uni5I4tNqhV5Xx0pDrmCV9mbroFtfEa0XVfKuMAxxf
+Z6LM/yKhgYkDgYYABAGBzgdnP798FsLuWYTDDQA7c0r3BVk8NnRUSexpQUsRilPN
+v3SchO0lRw9Ru86x1khnVDx+duq4BiDFcvlSAcyjLACJvjvoyTLJiA+TQFdmrear
+jMiZNE25pT2yWP1NUndJxPcvVtfBW48kPOmvkY4WlqP5bAwCXwbsKrCgk6xbsp12
+ew==
+-----END PRIVATE KEY-----`;
+
+const ecJwk521 = {
+ crv: "P-521",
+ x: "AYHOB2c_v3wWwu5ZhMMNADtzSvcFWTw2dFRJ7GlBSxGKU82_dJyE7SVHD1G7zrHWSGdUPH526rgGIMVy-VIBzKMs",
+ y: "AIm-O-jJMsmID5NAV2at5quMyJk0TbmlPbJY_U1Sd0nE9y9W18FbjyQ86a-RjhaWo_lsDAJfBuwqsKCTrFuynXZ7",
+ d: "AYsgGu2kRxQwodqoGvbE1BiDROYxwBZ5jPMVnk_7p4uSOLTaoVeV8dKQ65glfZm66BbXxGtF1XyrjAMcX2eizP8i",
+ kty: "EC",
+};
+
+const ecPublicKey521 = `-----BEGIN PUBLIC KEY-----
+MIGbMBAGByqGSM49AgEGBSuBBAAjA4GGAAQBgc4HZz+/fBbC7lmEww0AO3NK9wVZ
+PDZ0VEnsaUFLEYpTzb90nITtJUcPUbvOsdZIZ1Q8fnbquAYgxXL5UgHMoywAib47
+6MkyyYgPk0BXZq3mq4zImTRNuaU9slj9TVJ3ScT3L1bXwVuPJDzpr5GOFpaj+WwM
+Al8G7CqwoJOsW7Kddns=
+-----END PUBLIC KEY-----`;
+
+const edPublicKey = `-----BEGIN PUBLIC KEY-----
+MCowBQYDK2VwAyEAwmK6SSAu2E9V7uynkCKEaj5nZJyTvNG4x0KohsRzLpg=
+-----END PUBLIC KEY-----`;
+
+const edPrivateKey = `-----BEGIN PRIVATE KEY-----
+MC4CAQAwBQYDK2VwBCIEIFxEb2I7tPuKvihV4PgA55HDyMoVPHs2p0/nqJOBeuGG
+-----END PRIVATE KEY-----`;
+
+const edJwk = {
+ crv: "Ed25519",
+ d: "XERvYju0-4q-KFXg-ADnkcPIyhU8ezanT-eok4F64YY",
+ x: "wmK6SSAu2E9V7uynkCKEaj5nZJyTvNG4x0KohsRzLpg",
+ kty: "OKP",
+};
+
+interface DefaultTokenModel {
+ token: string;
+}
+
+export interface DefaultUnsecuredTokenModel {
+ token: string;
+}
+
+export interface DefaultTokenWithSecretModel extends DefaultTokenModel {
+ secret: string;
+ secretEncoding: EncodingValues;
+}
+
+export interface DefaultTokenWithKeysModel extends DefaultTokenModel {
+ privateKey: string;
+ privateKeyFormat: AsymmetricKeyFormatValues;
+ jwk: object;
+ publicKey: string;
+ publicKeyFormat: AsymmetricKeyFormatValues;
+}
+
+export interface DefaultTokensModel {
+ [index: string]:
+ | DefaultUnsecuredTokenModel
+ | DefaultTokenWithKeysModel
+ | DefaultTokenWithSecretModel;
+}
+
+export const DefaultTokensValues: DefaultTokensModel = {
+ none: {
+ token:
+ "eyJhbGciOiJub25lIn0.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTczNjI5MjEyNH0.",
+ },
+ HS256: {
+ token:
+ "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30",
+ secret: "a-string-secret-at-least-256-bits-long",
+ secretEncoding: EncodingValues.UTF8,
+ },
+ HS384: {
+ token:
+ "eyJhbGciOiJIUzM4NCIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.owv7q9nVbW5tqUezF_G2nHTra-ANW3HqW9epyVwh08Y-Z-FKsnG8eBIpC4GTfTVU",
+ secret: "a-valid-string-secret-that-is-at-least-384-bits-long",
+ secretEncoding: EncodingValues.UTF8,
+ },
+ HS512: {
+ token:
+ "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.ANCf_8p1AE4ZQs7QuqGAyyfTEgYrKSjKWkhBk5cIn1_2QVr2jEjmM-1tu7EgnyOf_fAsvdFXva8Sv05iTGzETg",
+ secret:
+ "a-valid-string-secret-that-is-at-least-512-bits-long-which-is-very-long",
+ secretEncoding: EncodingValues.UTF8,
+ },
+ RS256: {
+ token:
+ "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.NHVaYe26MbtOYhSKkoKYdFVomg4i8ZJd8_-RU8VNbftc4TSMb4bXP3l3YlNWACwyXPGffz5aXHc6lty1Y2t4SWRqGteragsVdZufDn5BlnJl9pdR_kdVFUsra2rWKEofkZeIC4yWytE58sMIihvo9H1ScmmVwBcQP6XETqYd0aSHp1gOa9RdUPDvoXQ5oqygTqVtxaDr6wUFKrKItgBMzWIdNZ6y7O9E0DhEPTbE9rfBo6KTFsHAZnMg4k68CDp2woYIaXbmYTWcvbzIuHO7_37GT79XdIwkm95QJ7hYC9RiwrV7mesbY4PAahERJawntho0my942XheVLmGwLMBkQ",
+ privateKey: rsaPrivateKey,
+ jwk: rsaJwk,
+ publicKey: rsaPublicKey,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ RS384: {
+ token:
+ "eyJhbGciOiJSUzM4NCIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.o1hC1xYbJolSyh0-bOY230w22zEQSk5TiBfc-OCvtpI2JtYlW-23-8B48NpATozzMHn0j3rE0xVUldxShzy0xeJ7vYAccVXu2Gs9rnTVqouc-UZu_wJHkZiKBL67j8_61L6SXswzPAQu4kVDwAefGf5hyYBUM-80vYZwWPEpLI8K4yCBsF6I9N1yQaZAJmkMp_Iw371Menae4Mp4JusvBJS-s6LrmG2QbiZaFaxVJiW8KlUkWyUCns8-qFl5OMeYlgGFsyvvSHvXCzQrsEXqyCdS4tQJd73ayYA4SPtCb9clz76N1zE5WsV4Z0BYrxeb77oA7jJhh994RAPzCG0hmQ",
+ privateKey: rsaPrivateKey,
+ jwk: rsaJwk,
+ publicKey: rsaPublicKey,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ RS512: {
+ token:
+ "eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.jYW04zLDHfR1v7xdrW3lCGZrMIsVe0vWCfVkN2DRns2c3MN-mcp_-RE6TN9umSBYoNV-mnb31wFf8iun3fB6aDS6m_OXAiURVEKrPFNGlR38JSHUtsFzqTOj-wFrJZN4RwvZnNGSMvK3wzzUriZqmiNLsG8lktlEn6KA4kYVaM61_NpmPHWAjGExWv7cjHYupcjMSmR8uMTwN5UuAwgW6FRstCJEfoxwb0WKiyoaSlDuIiHZJ0cyGhhEmmAPiCwtPAwGeaL1yZMcp0p82cpTQ5Qb-7CtRov3N4DcOHgWYk6LomPR5j5cCkePAz87duqyzSMpCB0mCOuE3CU2VMtGeQ",
+ privateKey: rsaPrivateKey,
+ jwk: rsaJwk,
+ publicKey: rsaPublicKey,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ ES256: {
+ token:
+ "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.tyh-VfuzIxCyGYDlkBA7DfyjrqmSHu6pQ2hoZuFqUSLPNY2N0mpHb3nk5K17HWP_3cYHBw7AhHale5wky6-sVA",
+ privateKey: ecPrivateKey256,
+ jwk: ecJwk256,
+ publicKey: ecPublicKey256,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ ES384: {
+ token:
+ "eyJhbGciOiJFUzM4NCIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.VUPWQZuClnkFbaEKCsPy7CZVMh5wxbCSpaAWFLpnTe9J0--PzHNeTFNXCrVHysAa3eFbuzD8_bLSsgTKC8SzHxRVSj5eN86vBPo_1fNfE7SHTYhWowjY4E_wuiC13yoj",
+ privateKey: ecPrivateKey384,
+ jwk: ecJwk384,
+ publicKey: ecPublicKey384,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ ES512: {
+ token:
+ "eyJhbGciOiJFUzUxMiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.AbVUinMiT3J_03je8WTOIl-VdggzvoFgnOsdouAs-DLOtQzau9valrq-S6pETyi9Q18HH-EuwX49Q7m3KC0GuNBJAc9Tksulgsdq8GqwIqZqDKmG7hNmDzaQG1Dpdezn2qzv-otf3ZZe-qNOXUMRImGekfQFIuH_MjD2e8RZyww6lbZk",
+ privateKey: ecPrivateKey521,
+ jwk: ecJwk521,
+ publicKey: ecPublicKey521,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ PS256: {
+ token:
+ "eyJhbGciOiJQUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.iOeNU4dAFFeBwNj6qdhdvm-IvDQrTa6R22lQVJVuWJxorJfeQww5Nwsra0PjaOYhAMj9jNMO5YLmud8U7iQ5gJK2zYyepeSuXhfSi8yjFZfRiSkelqSkU19I-Ja8aQBDbqXf2SAWA8mHF8VS3F08rgEaLCyv98fLLH4vSvsJGf6ueZSLKDVXz24rZRXGWtYYk_OYYTVgR1cg0BLCsuCvqZvHleImJKiWmtS0-CymMO4MMjCy_FIl6I56NqLE9C87tUVpo1mT-kbg5cHDD8I7MjCW5Iii5dethB4Vid3mZ6emKjVYgXrtkOQ-JyGMh6fnQxEFN1ft33GX2eRHluK9eg",
+ privateKey: rsaPrivateKey,
+ jwk: rsaJwk,
+ publicKey: rsaPublicKey,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ PS384: {
+ token:
+ "eyJhbGciOiJQUzM4NCIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.Lfe_aCQme_gQpUk9-6l9qesu0QYZtfdzfy08w8uqqPH_gnw-IVyQwyGLBHPFBJHMbifdSMxPjJjkCD0laIclhnBhowILu6k66_5Y2z78GHg8YjKocAvB-wSUiBhuV6hXVxE5emSjhfVz2OwiCk2bfk2hziRpkdMvfcITkCx9dmxHU6qcEIsTTHuH020UcGayB1-IoimnjTdCsV1y4CMr_ECDjBrqMdnontkqKRIM1dtmgYFsJM6xm7ewi_ksG_qZHhaoBkxQ9wq9OVQRGiSZYowCp73d2BF3jYMhdmv2JiaUz5jRvv6lVU7Quq6ylVAlSPxeov9voYHO1mgZFCY1kQ",
+ privateKey: rsaPrivateKey,
+ jwk: rsaJwk,
+ publicKey: rsaPublicKey,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ PS512: {
+ token:
+ "eyJhbGciOiJQUzUxMiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.J5W09-rNx0pt5_HBiydR-vOluS6oD-RpYNa8PVWwMcBDQSXiw6-EPW8iSsalXPspGj3ouQjAnOP_4-zrlUUlvUIt2T79XyNeiKuooyIFvka3Y5NnGiOUBHWvWcWp4RcQFMBrZkHtJM23sB5D7Wxjx0-HFeNk-Y3UJgeJVhg5NaWXypLkC4y0ADrUBfGAxhvGdRdULZivfvzuVtv6AzW6NRuEE6DM9xpoWX_4here-yvLS2YPiBTZ8xbB3axdM99LhES-n52lVkiX5AWg2JJkEROZzLMpaacA_xlbUz_zbIaOaoqk8gB5oO7kI6sZej3QAdGigQy-hXiRnW_L98d4GQ",
+ privateKey: rsaPrivateKey,
+ jwk: rsaJwk,
+ publicKey: rsaPublicKey,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ },
+ Ed25519: {
+ token:
+ "eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.JkKWCY39IdWEQttmdqR7VdsvT-_QxheW_eb0S5wr_j83ltux_JDUIXs7a3Dtn3xuqzuhetiuJrWIvy5TzimeCg",
+ privateKey: edPrivateKey,
+ publicKey: edPublicKey,
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ jwk: edJwk,
+ },
+};
diff --git a/src/features/common/values/encoding.values.ts b/src/features/common/values/encoding.values.ts
new file mode 100644
index 00000000..af9eedb6
--- /dev/null
+++ b/src/features/common/values/encoding.values.ts
@@ -0,0 +1,4 @@
+export enum EncodingValues {
+ UTF8 = "UTF-8",
+ BASE64URL = "base64url",
+}
diff --git a/src/features/common/values/jws-alg-header-parameter-values.dictionary.ts b/src/features/common/values/jws-alg-header-parameter-values.dictionary.ts
new file mode 100644
index 00000000..beca2e97
--- /dev/null
+++ b/src/features/common/values/jws-alg-header-parameter-values.dictionary.ts
@@ -0,0 +1,137 @@
+export interface JwsAlgHeaderParameterModel {
+ name: string;
+ description: string;
+ curves?: string[];
+}
+
+export interface JwsAlgHeaderParameterValuesDictionaryModel {
+ unsecured: {
+ [index: string]: JwsAlgHeaderParameterModel;
+ none: JwsAlgHeaderParameterModel;
+ };
+ mac: {
+ [index: string]: JwsAlgHeaderParameterModel;
+ HS256: JwsAlgHeaderParameterModel;
+ HS384: JwsAlgHeaderParameterModel;
+ HS512: JwsAlgHeaderParameterModel;
+ };
+ digitalSignature: {
+ [index: string]: JwsAlgHeaderParameterModel;
+ RS256: JwsAlgHeaderParameterModel;
+ RS384: JwsAlgHeaderParameterModel;
+ RS512: JwsAlgHeaderParameterModel;
+ ES256: JwsAlgHeaderParameterModel;
+ ES384: JwsAlgHeaderParameterModel;
+ ES512: JwsAlgHeaderParameterModel;
+ PS256: JwsAlgHeaderParameterModel;
+ PS384: JwsAlgHeaderParameterModel;
+ PS512: JwsAlgHeaderParameterModel;
+ Ed25519: JwsAlgHeaderParameterModel;
+ Ed448: JwsAlgHeaderParameterModel;
+ };
+}
+
+export const jwsExampleAlgHeaderParameterValuesDictionary: JwsAlgHeaderParameterValuesDictionaryModel =
+ {
+ unsecured: {
+ none: {
+ name: "none",
+ description: "No digital signature or MAC or performed",
+ },
+ },
+ mac: {
+ HS256: {
+ name: "HS256",
+ description: "HMAC using SHA-256",
+ },
+ HS384: { name: "HS384", description: "HMAC using SHA-256" },
+ HS512: { name: "HS512", description: "HMAC using SHA-256" },
+ },
+ digitalSignature: {
+ RS256: { name: "RS256", description: "HMAC using SHA-256" },
+ RS384: { name: "RS384", description: "HMAC using SHA-256" },
+ RS512: { name: "RS512", description: "HMAC using SHA-256" },
+ ES256: { name: "ES256", description: "HMAC using SHA-256" },
+ ES384: { name: "ES384", description: "HMAC using SHA-256" },
+ ES512: { name: "ES512", description: "HMAC using SHA-256" },
+ PS256: { name: "PS256", description: "HMAC using SHA-256" },
+ PS384: { name: "PS384", description: "HMAC using SHA-256" },
+ PS512: { name: "PS512", description: "HMAC using SHA-256" },
+ Ed25519: {
+ name: "EdDSA (Ed25519)",
+ description: "Edwards-curve Digital Signature Algorithm",
+ },
+ Ed448: {
+ name: "EdDSA (Ed448)",
+ description: "Edwards-curve Digital Signature Algorithm",
+ },
+ },
+ };
+
+export interface JwsExampleAlgHeaderParameterValuesDictionaryModel {
+ none: {
+ [index: string]: JwsAlgHeaderParameterModel;
+ none: JwsAlgHeaderParameterModel;
+ };
+ mac: {
+ [index: string]: JwsAlgHeaderParameterModel;
+ HS256: JwsAlgHeaderParameterModel;
+ HS384: JwsAlgHeaderParameterModel;
+ HS512: JwsAlgHeaderParameterModel;
+ };
+ digitalSignature: {
+ [index: string]: JwsAlgHeaderParameterModel;
+ RS256: JwsAlgHeaderParameterModel;
+ RS384: JwsAlgHeaderParameterModel;
+ RS512: JwsAlgHeaderParameterModel;
+ ES256: JwsAlgHeaderParameterModel;
+ ES384: JwsAlgHeaderParameterModel;
+ ES512: JwsAlgHeaderParameterModel;
+ PS256: JwsAlgHeaderParameterModel;
+ PS384: JwsAlgHeaderParameterModel;
+ PS512: JwsAlgHeaderParameterModel;
+ EdDSA: JwsAlgHeaderParameterModel;
+ };
+}
+
+export const jwsAlgHeaderParameterValuesDictionary: JwsExampleAlgHeaderParameterValuesDictionaryModel =
+ {
+ none: {
+ none: {
+ name: "none",
+ description: "Unsecured JWT",
+ },
+ },
+ mac: {
+ HS256: {
+ name: "HS256",
+ description: "HMAC using SHA-256",
+ },
+ HS384: { name: "HS384", description: "HMAC using SHA-256" },
+ HS512: { name: "HS512", description: "HMAC using SHA-256" },
+ },
+ digitalSignature: {
+ RS256: { name: "RS256", description: "HMAC using SHA-256" },
+ RS384: { name: "RS384", description: "HMAC using SHA-256" },
+ RS512: { name: "RS512", description: "HMAC using SHA-256" },
+ ES256: { name: "ES256", description: "HMAC using SHA-256" },
+ ES384: { name: "ES384", description: "HMAC using SHA-256" },
+ ES512: { name: "ES512", description: "HMAC using SHA-256" },
+ PS256: { name: "PS256", description: "HMAC using SHA-256" },
+ PS384: { name: "PS384", description: "HMAC using SHA-256" },
+ PS512: { name: "PS512", description: "HMAC using SHA-256" },
+ EdDSA: {
+ name: "EdDSA",
+ description: "Edwards-curve Digital Signature Algorithm",
+ },
+ },
+ };
+
+export const algDictionary = {
+ NONE: "none",
+ ES512: "ES512",
+ ECDSA: "ECDSA",
+ EdDSA: "EdDSA",
+ Ed25519: "Ed25519",
+ Ed448: "Ed448",
+};
diff --git a/src/features/common/values/jwt-signature-status.values.ts b/src/features/common/values/jwt-signature-status.values.ts
new file mode 100644
index 00000000..f7123a82
--- /dev/null
+++ b/src/features/common/values/jwt-signature-status.values.ts
@@ -0,0 +1,6 @@
+export enum JwtSignatureStatusValues {
+ VALID = "VALID",
+ INVALID = "INVALID",
+ WARNING = "WARNING",
+ UNKNOWN = "UNKNOWN",
+}
diff --git a/src/features/common/values/jwt-type.values.ts b/src/features/common/values/jwt-type.values.ts
new file mode 100644
index 00000000..bda789f5
--- /dev/null
+++ b/src/features/common/values/jwt-type.values.ts
@@ -0,0 +1,5 @@
+export enum JwtTypeValues {
+ Unsecured = "Unsecured",
+ MACed = "MACed",
+ DigitallySigned = "DigitallySigned",
+}
diff --git a/src/features/common/values/mobile-menu-state.values.ts b/src/features/common/values/mobile-menu-state.values.ts
new file mode 100644
index 00000000..2ced7937
--- /dev/null
+++ b/src/features/common/values/mobile-menu-state.values.ts
@@ -0,0 +1,4 @@
+export enum MobileMenuStateValues {
+ CLOSED = "closed",
+ OPEN = "open",
+}
diff --git a/src/features/common/values/modal-state.values.ts b/src/features/common/values/modal-state.values.ts
new file mode 100644
index 00000000..ea8d0607
--- /dev/null
+++ b/src/features/common/values/modal-state.values.ts
@@ -0,0 +1,4 @@
+export enum ModalStateValues {
+ CLOSED = "closed",
+ OPEN = "open",
+}
diff --git a/src/features/common/values/signing-alg-category.values.ts b/src/features/common/values/signing-alg-category.values.ts
new file mode 100644
index 00000000..f1bb00eb
--- /dev/null
+++ b/src/features/common/values/signing-alg-category.values.ts
@@ -0,0 +1,7 @@
+export enum SigningAlgCategoryValues {
+ ANY = "ANY",
+ SYMMETRIC = "SYMMETRIC",
+ ASYMMETRIC = "ASYMMETRIC",
+ NONE = "NONE",
+ NOOP = "NOOP",
+}
diff --git a/src/features/common/values/string.values.ts b/src/features/common/values/string.values.ts
new file mode 100644
index 00000000..1f1acb5e
--- /dev/null
+++ b/src/features/common/values/string.values.ts
@@ -0,0 +1,62 @@
+export const StringValues = {
+ common: {
+ shareThisJwt: "Share JWT",
+ jwtIoUrlCopied: "Copied",
+ claims: {
+ exp: "Expiration time (seconds since Unix epoch)",
+ nbf: "Not valid before (seconds since Unix epoch)",
+ iat: "Issued at (seconds since Unix epoch)",
+ iss: "Issuer (who created and signed this token)",
+ sub: "Subject (whom the token refers to)",
+ aud: "Audience (who or what the token is intended for)",
+ jti: "JWT ID (unique identifier for this token)",
+ typ: "Type of token",
+ azp: "Authorized party (the party to which this token was issued)",
+ alg: "Signature or encryption algorithm",
+ jku: "JSON Web Key Set URL",
+ jwk: "JSON Web Key Set (embedded)",
+ kid: "Key ID",
+ x5u: "X.509 Certificate URL",
+ x5t: "X.509 Fingerprint (SHA-1)",
+ "x5t#S256": "X.509 Fingerprint (SHA-256)",
+ cty: "Content type",
+ crit: "Extensions or claims that MUST be processed or verified",
+ enc: "Encryption algorithm",
+ zip: "Compression algorithm",
+ kty: "Key type",
+ use: 'Intended use of key: "sig" or "enc" (other values accepted)',
+ key_ops: "Intended operations for this key",
+ sid: "Session ID (String identifier for a Session)",
+ updated_at: "Last modification timestamp",
+ at_hash: "Access Token hash value",
+ c_hash: "Authorization Code hash value",
+ s_hash: "State hash value",
+ nonce: "Unique value associating request to token",
+ auth_time: "Time when authentication occurred",
+ amr: "Authentication methods array",
+ acr: "Authentication context class",
+ },
+ },
+ extension: {
+ alreadyInstalled: "Already installed",
+ addToBrowser: "Add to Browser",
+ noJwtsFound: "No JWTs found",
+ saveBackTo: "Save back to ",
+ },
+ editor: {
+ signatureVerified: "Signature Verified",
+ signatureInvalid: "Invalid Signature",
+ signatureWarning: "Please address JWT issues to verify signature.",
+ jwtInvalid: "Invalid JWT",
+ },
+ warnings: {
+ headerBase64Invalid:
+ 'Looks like your JWT header is not encoded correctly using base64url (https://tools.ietf.org/html/rfc4648#section-5). Note that padding ("=") must be omitted as per https://tools.ietf.org/html/rfc7515#section-2',
+ payloadBase64Invalid:
+ 'Looks like your JWT payload is not encoded correctly using base64url (https://tools.ietf.org/html/rfc4648#section-5). Note that padding ("=") must be omitted as per https://tools.ietf.org/html/rfc7515#section-2',
+ signatureBase64Invalid:
+ 'Looks like your JWT signature is not encoded correctly using base64url (https://tools.ietf.org/html/rfc4648#section-5). Note that padding ("=") must be omitted as per https://tools.ietf.org/html/rfc7515#section-2',
+ payloadInvalidJSON:
+ "Looks like your JWT payload is not a valid JSON object. JWT payloads must be top level JSON objects as per https://tools.ietf.org/html/rfc7519#section-7.2",
+ },
+};
diff --git a/src/features/common/values/theme.values.ts b/src/features/common/values/theme.values.ts
new file mode 100644
index 00000000..616e2b37
--- /dev/null
+++ b/src/features/common/values/theme.values.ts
@@ -0,0 +1,12 @@
+export enum ThemePickerCodeValues {
+ SYSTEM = "system",
+ DARK = "dark",
+ LIGHT = "light",
+}
+
+export enum ThemeCookieValues {
+ SYSTEM_LIGHT = "system-light",
+ SYSTEM_DARK = "system-dark",
+ DARK = "dark",
+ LIGHT = "light",
+}
diff --git a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx
new file mode 100644
index 00000000..b22fb781
--- /dev/null
+++ b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx
@@ -0,0 +1,234 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import styles from "./debugger-alg-picker.module.scss";
+import { getPickersUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import {
+ isEd25519Supported,
+ isEd448Supported,
+ isP521Supported,
+} from "@/features/common/services/jwt.service";
+import { useDecoderStore } from "@/features/decoder/services/decoder.store";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+import { DebuggerPickerComponent } from "@/features/common/components/debugger-picker/debugger-picker.component";
+import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model";
+import {
+ algDictionary,
+ jwsExampleAlgHeaderParameterValuesDictionary,
+} from "@/features/common/values/jws-alg-header-parameter-values.dictionary";
+import { useButton } from "@react-aria/button";
+import { clsx } from "clsx";
+import { PrimaryFont } from "@/libs/theme/fonts";
+
+enum PickerStates {
+ IDLE = "IDLE",
+ PICKING = "PICKING",
+}
+
+interface DebuggerAlgPickerComponentProps {
+ languageCode: string;
+ label: string;
+}
+
+export const DebuggerAlgPickerComponent: React.FC<
+ DebuggerAlgPickerComponentProps
+> = ({ languageCode, label }) => {
+ const activeWidget$ = useDebuggerStore((state) => state.activeWidget$);
+
+ return (
+ (null);
+
+ const { buttonProps } = useButton(
+ {
+ elementType: "span",
+ preventFocusOnPress: true,
+ },
+ buttonRef,
+ );
+
+ const [pickerState, setPickerState] = useState(
+ PickerStates.IDLE,
+ );
+ const [canUseEs512, setCanUseEs512] = useState(false);
+ const [canUseEd25519, setCanUseEd25519] = useState(false);
+ const [canUseEd448, setCanUseEd448] = useState(false);
+
+ const dictionary = getPickersUiDictionary(languageCode);
+
+ const selectEncoderAlg$ = useEncoderStore(
+ (state) => state.selectEncodingExample,
+ );
+
+ const selectDecoderAlg$ = useDecoderStore(
+ (state) => state.selectDecodingExample,
+ );
+
+ const selectExample = (value: string) => {
+ const algorithm = value;
+
+ if (widget === DebuggerWidgetValues.DECODER) {
+ selectDecoderAlg$(algorithm);
+ }
+
+ if (widget === DebuggerWidgetValues.ENCODER) {
+ selectEncoderAlg$(algorithm);
+ }
+
+ setPickerState(PickerStates.IDLE);
+ };
+
+ const openPicker = () => {
+ setPickerState(PickerStates.PICKING);
+ };
+
+ const closePicker = () => {
+ setPickerState(PickerStates.IDLE);
+ };
+
+ useEffect(() => {
+ (async function runEs512Check() {
+ setCanUseEs512(await isP521Supported());
+ })();
+
+ (async function runEd25519Check() {
+ setCanUseEd25519(await isEd25519Supported());
+ })();
+
+ (async function runEd448Check() {
+ setCanUseEd448(await isEd448Supported());
+ })();
+ }, []);
+
+ const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
+ return Object.entries(
+ jwsExampleAlgHeaderParameterValuesDictionary.unsecured,
+ ).map((entry) => {
+ const [key, value] = entry;
+
+ return {
+ value: key,
+ label: value.name,
+ };
+ });
+ }, []);
+
+ const symmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
+ return Object.entries(jwsExampleAlgHeaderParameterValuesDictionary.mac).map(
+ (entry) => {
+ const [key, value] = entry;
+
+ return {
+ value: key,
+ label: value.name,
+ };
+ },
+ );
+ }, []);
+
+ const asymmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
+ const digitalSignatureEntries = Object.entries(
+ jwsExampleAlgHeaderParameterValuesDictionary.digitalSignature,
+ );
+
+ const asymmetricAlgOptions: DebuggerPickerOptionModel[] = [];
+
+ for (let i = 0; i < digitalSignatureEntries.length; i++) {
+ const entry = digitalSignatureEntries[i];
+
+ const [key, value] = entry;
+
+ if (key === algDictionary.ES512) {
+ asymmetricAlgOptions.push({
+ value: key,
+ label: value.name,
+ isDisabled: !canUseEs512,
+ });
+
+ continue;
+ }
+
+ if (key === algDictionary.Ed25519) {
+ asymmetricAlgOptions.push({
+ value: key,
+ label: value.name,
+ isDisabled: !canUseEd25519,
+ });
+
+ continue;
+ }
+
+ if (key === algDictionary.Ed448) {
+ asymmetricAlgOptions.push({
+ value: key,
+ label: value.name,
+ isDisabled: !canUseEd448,
+ });
+
+ continue;
+ }
+
+ asymmetricAlgOptions.push({
+ value: key,
+ label: value.name,
+ });
+ }
+
+ return asymmetricAlgOptions;
+ }, [canUseEd25519, canUseEd448, canUseEs512]);
+
+ const algOptions = useMemo(() => {
+ return [...noneAlgOptions, ...symmetricAlgOptions, ...asymmetricAlgOptions];
+ }, [asymmetricAlgOptions, noneAlgOptions, symmetricAlgOptions]);
+
+ return (
+
+
+ {dictionary.feedback.label}
+
+ {"|"}
+
+ {dictionary.issue.label}
+
+
+ );
+};
diff --git a/src/features/debugger/components/debugger-feedback/debugger-feedback.module.scss b/src/features/debugger/components/debugger-feedback/debugger-feedback.module.scss
new file mode 100644
index 00000000..6faf4c99
--- /dev/null
+++ b/src/features/debugger/components/debugger-feedback/debugger-feedback.module.scss
@@ -0,0 +1,32 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.content {
+ @include InnerContentFlex;
+ justify-content: center;
+ align-items: center;
+
+ gap: 0.5rem;
+
+ color: var(--functional-gray-400);
+ font-size: 0.75rem;
+}
+
+.feedback__link {
+ &:hover,
+ &:active {
+ opacity: 1;
+ color: var(--color_fg_link_primary);
+ }
+
+ &:focus-visible {
+ color: var(--color_fg_link_primary);
+ outline: solid 1px var(--color_border_focus);
+ outline-offset: 0.125rem;
+ border-radius: 0.125rem;
+ }
+}
+
+.feedback__spacer {
+ font-size: 0.625rem;
+}
diff --git a/src/features/debugger/components/debugger-switch/debugger-switch.component.tsx b/src/features/debugger/components/debugger-switch/debugger-switch.component.tsx
new file mode 100644
index 00000000..bb484f44
--- /dev/null
+++ b/src/features/debugger/components/debugger-switch/debugger-switch.component.tsx
@@ -0,0 +1,58 @@
+import React, { useId } from "react";
+import styles from "./debugger-switch.module.scss";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { clsx } from "clsx";
+import { MonoFont } from "@/libs/theme/fonts";
+import { DebuggerModeValues } from "@/features/common/values/debugger-mode.values";
+import { testingDictionary } from "@/features/common/testing.dictionary";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+
+interface DebuggerSwitchComponentProps {
+ mode: DebuggerModeValues;
+ widget: DebuggerWidgetValues;
+ label: string;
+ compactLabel: string;
+}
+
+export const DebuggerSwitchComponent: React.FC = (
+ props,
+) => {
+ const ariaId = useId();
+ const { mode, widget, label, compactLabel } = props;
+
+ const setMode$ = useDebuggerStore((state) => state.setMode$);
+
+ const toggleSwitch = () => {
+ if (mode === DebuggerModeValues.SPLIT) {
+ setMode$(DebuggerModeValues.UNIFIED, widget);
+ }
+
+ if (mode === DebuggerModeValues.UNIFIED) {
+ setMode$(DebuggerModeValues.SPLIT, widget);
+ }
+ };
+
+ return (
+
+
+ );
+ }
+
+ return null;
+};
diff --git a/src/features/debugger/components/debugger-toolbar/debugger-toolbar.module.scss b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.module.scss
new file mode 100644
index 00000000..d31a7832
--- /dev/null
+++ b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.module.scss
@@ -0,0 +1,83 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.content {
+ @include InnerContentFlex;
+ flex-direction: column;
+
+ grid-row-gap: 0;
+}
+
+.toolbar {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0.5rem;
+}
+
+.tabs {
+ display: flex;
+ gap: 1rem;
+ list-style: none;
+}
+
+.titleTab {
+ color: var(--color_fg_bold);
+ font-size: 1.5rem;
+ line-height: 2.25rem;
+ letter-spacing: -0.8px;
+ background-color: transparent;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ opacity: 0.48;
+
+ &[data-active="true"] {
+ opacity: 1;
+ }
+
+ :global(html[lang="ja"]) & {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ font-size: 1.75rem;
+ line-height: 2.25rem;
+ }
+}
+
+.titleTab__compactLabel {
+ @media #{$tablet} {
+ display: none;
+ }
+}
+
+.titleTab__fullLabel {
+ display: none;
+
+ @media #{$tablet} {
+ display: unset;
+ }
+}
+
+.description {
+ width: 100%;
+ color: var(--color_fg_default);
+ display: flex;
+ flex-direction: column;
+ row-gap: 0.5rem;
+
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ margin-bottom: 0.5rem;
+
+ & strong {
+ font-weight: 500;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
diff --git a/src/features/debugger/components/debugger-widget/debugger-widget.component.tsx b/src/features/debugger/components/debugger-widget/debugger-widget.component.tsx
new file mode 100644
index 00000000..2cc687db
--- /dev/null
+++ b/src/features/debugger/components/debugger-widget/debugger-widget.component.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { TokenDecoderComponent } from "@/features/decoder/components/token-decoder.component";
+import { TokenEncoderComponent } from "@/features/encoder/components/token-encoder.component";
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { DebuggerToolbarComponent } from "@/features/debugger/components/debugger-toolbar/debugger-toolbar.component";
+import { DebuggerModeValues } from "@/features/common/values/debugger-mode.values";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+import { DebuggerSwitchComponent } from "@/features/debugger/components/debugger-switch/debugger-switch.component";
+import { DebuggerFeedbackComponent } from "@/features/debugger/components/debugger-feedback/debugger-feedback.component";
+import styles from "./debugger-widget.module.scss";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+
+interface DebuggerWidgetComponentProps {
+ languageCode: string;
+ decodedHeaderInitialTabId: string;
+ decodedPayloadInitialTabId: string;
+ decodedHeaderDescriptionVisibility: ClaimDescriptionVisibilityValues;
+ decodedPayloadDescriptionVisibility: ClaimDescriptionVisibilityValues;
+ decoderDictionary: HomeDictionaryModel["decoder"];
+ encoderDictionary: HomeDictionaryModel["encoder"];
+ // debuggerInitialMode: DebuggerModeValues;
+}
+
+export const DebuggerWidgetComponent: React.FC<
+ DebuggerWidgetComponentProps
+> = ({
+ languageCode,
+ decodedHeaderDescriptionVisibility: initialDecodedHeaderDescriptionVisibility,
+ decodedHeaderInitialTabId,
+ decodedPayloadDescriptionVisibility:
+ initialDecodedPayloadDescriptionVisibility,
+ decodedPayloadInitialTabId,
+ decoderDictionary,
+ encoderDictionary,
+ // debuggerInitialMode,
+}) => {
+ const activeWidget$ = useDebuggerStore((state) => state.activeWidget$);
+ const mode$ = useDebuggerStore((state) => state.mode$);
+ const setMode$ = useDebuggerStore((state) => state.setMode$);
+
+ const decodedHeaderTabId$ = useDebuggerStore(
+ (state) => state.decodedHeaderTabId$,
+ );
+ const decodedPayloadTabId$ = useDebuggerStore(
+ (state) => state.decodedPayloadTabId$,
+ );
+ const decodedHeaderDescriptionVisibility$ = useDebuggerStore(
+ (state) => state.decodedHeaderDescriptionVisibility$,
+ );
+ const decodedPayloadDescriptionVisibility$ = useDebuggerStore(
+ (state) => state.decodedPayloadDescriptionVisibility$,
+ );
+
+ const [mode, setMode] = useState(
+ DebuggerModeValues.UNIFIED,
+ );
+ const [decodedHeaderTabId, setDecodedHeaderTabId] = useState(
+ decodedHeaderInitialTabId,
+ );
+ const [decodedPayloadTabId, setDecodedPayloadTabId] = useState(
+ decodedPayloadInitialTabId,
+ );
+ const [
+ decodedHeaderDescriptionVisibility,
+ setDecodedHeaderDescriptionVisibility,
+ ] = useState(
+ initialDecodedHeaderDescriptionVisibility,
+ );
+ const [
+ decodedPayloadDescriptionVisibility,
+ setDecodedPayloadDescriptionVisibility,
+ ] = useState(
+ initialDecodedPayloadDescriptionVisibility,
+ );
+
+ useEffect(() => {
+ if (decodedHeaderTabId$ === null) {
+ return;
+ }
+
+ setDecodedHeaderTabId(decodedHeaderTabId$);
+ }, [decodedHeaderTabId$]);
+
+ useEffect(() => {
+ if (decodedPayloadTabId$ === null) {
+ return;
+ }
+
+ setDecodedPayloadTabId(decodedPayloadTabId$);
+ }, [decodedPayloadTabId$]);
+
+ useEffect(() => {
+ if (decodedHeaderDescriptionVisibility$ === null) {
+ return;
+ }
+
+ setDecodedHeaderDescriptionVisibility(decodedHeaderDescriptionVisibility$);
+ }, [decodedHeaderDescriptionVisibility$]);
+
+ useEffect(() => {
+ if (decodedPayloadDescriptionVisibility$ === null) {
+ return;
+ }
+
+ setDecodedPayloadDescriptionVisibility(
+ decodedPayloadDescriptionVisibility$,
+ );
+ }, [decodedPayloadDescriptionVisibility$]);
+
+ // useEffect(() => {
+ // setMode$(debuggerInitialMode, activeWidget$);
+ // }, []);
+
+ // useEffect(() => {
+ // if (!mode$) {
+ // return;
+ // }
+ //
+ // setMode(mode$);
+ //
+ // const sanitizedDebuggerModeValue = getSanitizedDebuggerModeValues(mode$);
+ //
+ // if (sanitizedDebuggerModeValue) {
+ // Cookies.set(DEBUGGER_MODE_KEY, sanitizedDebuggerModeValue, {
+ // secure: true,
+ // });
+ // }
+ // }, [debuggerInitialMode, mode$]);
+
+ if (mode === DebuggerModeValues.UNIFIED) {
+ return (
+ ;
+ encoderInputs$: Partial;
+ mode$: DebuggerModeValues | null;
+ activeWidget$: DebuggerWidgetValues;
+ stash$: Partial;
+
+ decodedHeaderTabId$: string | null;
+ decodedPayloadTabId$: string | null;
+ decodedHeaderDescriptionVisibility$: ClaimDescriptionVisibilityValues | null;
+ decodedPayloadDescriptionVisibility$: ClaimDescriptionVisibilityValues | null;
+
+ outputModalState$: DebuggerOutputModalValues;
+ outputModalId$: string | null;
+};
+
+type DebuggerStoreActions = {
+ setDecoderInputs$: (params: Partial) => void;
+ setEncoderInputs$: (params: Partial) => void;
+ setStash$: (params: Partial) => void;
+ setMode$: (mode: DebuggerModeValues, widget: DebuggerWidgetValues) => void;
+ setActiveWidget$: (widget: DebuggerWidgetValues) => void;
+ setDecodedHeaderTabId$: (key: string) => void;
+ setDecodedPayloadTabId$: (key: string) => void;
+ setDecodedHeaderDescriptionVisibility$: (
+ value: ClaimDescriptionVisibilityValues,
+ ) => void;
+ setDecodedPayloadDescriptionVisibility$: (
+ value: ClaimDescriptionVisibilityValues,
+ ) => void;
+ openOutputModal$: (id: string) => void;
+ closeOutputModal$: () => void;
+};
+
+export const initialState: DebuggerStoreState = {
+ mode$: null,
+ activeWidget$: DebuggerWidgetValues.DECODER,
+ decoderInputs$: {},
+ encoderInputs$: {},
+ stash$: {},
+ decodedHeaderTabId$: null,
+ decodedPayloadTabId$: null,
+ decodedHeaderDescriptionVisibility$: null,
+ decodedPayloadDescriptionVisibility$: null,
+ outputModalState$: DebuggerOutputModalValues.CLOSED,
+ outputModalId$: null,
+};
+
+export type DebuggerStore = DebuggerStoreState & DebuggerStoreActions;
+
+export const useDebuggerStore = create()(
+ subscribeWithSelector((set) => ({
+ ...initialState,
+ setDecoderInputs$: (params) =>
+ set(({ decoderInputs$ }) => ({
+ decoderInputs$: {
+ ...decoderInputs$,
+ ...params,
+ },
+ })),
+ setEncoderInputs$: (params) =>
+ set(({ encoderInputs$ }) => ({
+ encoderInputs$: {
+ ...encoderInputs$,
+ ...params,
+ },
+ })),
+ setStash$: (params) =>
+ set(({ stash$ }) => ({
+ stash$: {
+ ...stash$,
+ ...params,
+ },
+ })),
+ setMode$: (mode, widget) =>
+ set((state) => {
+ if (
+ mode === DebuggerModeValues.UNIFIED &&
+ widget === DebuggerWidgetValues.DECODER
+ ) {
+ const decoderState = useDecoderStore.getState();
+
+ if (isNoneAlg(decoderState.alg)) {
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: decoderState.alg,
+ jwt: decoderState.jwt,
+ };
+
+ const encoderUpdate: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: decoderState.alg,
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ };
+
+ const encoderInputsUpdate: Partial =
+ encoderUpdate;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputsUpdate,
+ },
+ };
+ }
+
+ if (isHmacAlg(decoderState.alg)) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: decoderState.alg,
+ jwt: decoderState.jwt,
+ symmetricSecretKey: decoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ decoderState.symmetricSecretKeyEncoding,
+ };
+
+ const encoderUpdate: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: decoderState.alg,
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ symmetricSecretKey: decoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ decoderState.symmetricSecretKeyEncoding,
+ };
+
+ const encoderInputsUpdate: Partial =
+ encoderUpdate;
+
+ debuggerStash.symmetricSecretKey = decoderState.symmetricSecretKey;
+ debuggerStash.symmetricSecretKeyEncoding =
+ decoderState.symmetricSecretKeyEncoding;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputsUpdate,
+ },
+ debuggerStash: {
+ ...debuggerStash,
+ },
+ };
+ }
+
+ if (isDigitalSignatureAlg(decoderState.alg)) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: decoderState.alg,
+ jwt: decoderState.jwt,
+ asymmetricPublicKey: decoderState.asymmetricPublicKey,
+ asymmetricPublicKeyFormat: decoderState.asymmetricPublicKeyFormat,
+ };
+
+ const encoderUpdate: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: decoderState.alg,
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ asymmetricPrivateKey: debuggerStash.asymmetricPrivateKey || "",
+ asymmetricPrivateKeyFormat:
+ debuggerStash.asymmetricPrivateKeyFormat ||
+ AsymmetricKeyFormatValues.PEM,
+ };
+
+ const encoderInputsUpdate: Partial =
+ encoderUpdate;
+
+ // debuggerStash.asymmetricPrivateKey =
+ // encoderState.asymmetricPrivateKey;
+ // debuggerStash.asymmetricPrivateKeyFormat =
+ // encoderState.asymmetricPrivateKeyFormat;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputsUpdate,
+ },
+ debuggerStash: {
+ ...debuggerStash,
+ },
+ };
+ }
+ }
+
+ if (
+ mode === DebuggerModeValues.UNIFIED &&
+ widget === DebuggerWidgetValues.ENCODER
+ ) {
+ const encoderState = useEncoderStore.getState();
+
+ if (isNoneAlg(encoderState.alg) && encoderState.jwt) {
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: encoderState.alg,
+ header: encoderState.header,
+ payload: encoderState.payload,
+ };
+
+ const decoderUpdate: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: encoderState.alg,
+ jwt: encoderState.jwt,
+ };
+
+ const decoderInputsUpdate: Partial =
+ decoderUpdate;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputsUpdate,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ };
+ }
+
+ if (isHmacAlg(encoderState.alg) && encoderState.jwt) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: encoderState.alg,
+ header: encoderState.header,
+ payload: encoderState.payload,
+ symmetricSecretKey: encoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ encoderState.symmetricSecretKeyEncoding,
+ };
+
+ const decoderUpdate: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: encoderState.alg,
+ jwt: encoderState.jwt,
+ symmetricSecretKey: encoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ encoderState.symmetricSecretKeyEncoding,
+ };
+
+ const decoderInputsUpdate: Partial =
+ decoderUpdate;
+
+ debuggerStash.symmetricSecretKey = encoderState.symmetricSecretKey;
+ debuggerStash.symmetricSecretKeyEncoding =
+ encoderState.symmetricSecretKeyEncoding;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputsUpdate,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ stash$: {
+ ...debuggerStash,
+ },
+ };
+ }
+
+ if (isDigitalSignatureAlg(encoderState.alg) && encoderState.jwt) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: encoderState.alg,
+ header: encoderState.header,
+ payload: encoderState.payload,
+ asymmetricPrivateKey: encoderState.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat:
+ encoderState.asymmetricPrivateKeyFormat,
+ };
+
+ const decoderUpdate: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: encoderState.alg,
+ jwt: encoderState.jwt,
+ asymmetricPublicKey: debuggerStash.asymmetricPublicKey || "",
+ asymmetricPublicKeyFormat:
+ debuggerStash.asymmetricPublicKeyFormat ||
+ AsymmetricKeyFormatValues.PEM,
+ };
+
+ const decoderInputsUpdate: Partial =
+ decoderUpdate;
+
+ // debuggerStash.symmetricSecretKey = encoderState.symmetricSecretKey;
+ // debuggerStash.symmetricSecretKeyEncoding =
+ // encoderState.symmetricSecretKeyEncoding;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputsUpdate,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ stash$: {
+ ...debuggerStash,
+ },
+ };
+ }
+ }
+
+ if (
+ mode === DebuggerModeValues.SPLIT &&
+ widget === DebuggerWidgetValues.DECODER
+ ) {
+ const decoderState = useDecoderStore.getState();
+
+ if (isNoneAlg(decoderState.alg)) {
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: decoderState.alg,
+ jwt: decoderState.jwt,
+ };
+
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: decoderState.alg,
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ };
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ };
+ }
+
+ if (isHmacAlg(decoderState.alg)) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: decoderState.alg,
+ jwt: decoderState.jwt,
+ symmetricSecretKey: decoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ decoderState.symmetricSecretKeyEncoding,
+ };
+
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: decoderState.alg,
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ symmetricSecretKey: decoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ decoderState.symmetricSecretKeyEncoding,
+ };
+
+ debuggerStash.symmetricSecretKey = decoderState.symmetricSecretKey;
+ debuggerStash.symmetricSecretKeyEncoding =
+ decoderState.symmetricSecretKeyEncoding;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ debuggerStash: {
+ ...debuggerStash,
+ },
+ };
+ }
+
+ if (isDigitalSignatureAlg(decoderState.alg)) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: decoderState.alg,
+ jwt: decoderState.jwt,
+ asymmetricPublicKey: decoderState.asymmetricPublicKey,
+ asymmetricPublicKeyFormat: decoderState.asymmetricPublicKeyFormat,
+ };
+
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: decoderState.alg,
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ asymmetricPrivateKey: debuggerStash.asymmetricPrivateKey || "",
+ asymmetricPrivateKeyFormat:
+ debuggerStash.asymmetricPrivateKeyFormat ||
+ AsymmetricKeyFormatValues.PEM,
+ };
+
+ // debuggerStash.asymmetricPrivateKey =
+ // encoderState.asymmetricPrivateKey;
+ // debuggerStash.asymmetricPrivateKeyFormat =
+ // encoderState.asymmetricPrivateKeyFormat;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ debuggerStash: {
+ ...debuggerStash,
+ },
+ };
+ }
+ }
+
+ if (
+ mode === DebuggerModeValues.SPLIT &&
+ widget === DebuggerWidgetValues.ENCODER
+ ) {
+ const encoderState = useEncoderStore.getState();
+
+ if (isNoneAlg(encoderState.alg) && encoderState.jwt) {
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: encoderState.alg,
+ header: encoderState.header,
+ payload: encoderState.payload,
+ };
+
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.NONE,
+ alg: encoderState.alg,
+ jwt: encoderState.jwt,
+ };
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ };
+ }
+
+ if (isHmacAlg(encoderState.alg) && encoderState.jwt) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: encoderState.alg,
+ header: encoderState.header,
+ payload: encoderState.payload,
+ symmetricSecretKey: encoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ encoderState.symmetricSecretKeyEncoding,
+ };
+
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: encoderState.alg,
+ jwt: encoderState.jwt,
+ symmetricSecretKey: encoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ encoderState.symmetricSecretKeyEncoding,
+ };
+
+ debuggerStash.symmetricSecretKey = encoderState.symmetricSecretKey;
+ debuggerStash.symmetricSecretKeyEncoding =
+ encoderState.symmetricSecretKeyEncoding;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ stash$: {
+ ...debuggerStash,
+ },
+ };
+ }
+
+ if (isDigitalSignatureAlg(encoderState.alg) && encoderState.jwt) {
+ const debuggerStash = structuredClone(state.stash$);
+
+ const encoderInputSnapshot: EncoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: encoderState.alg,
+ header: encoderState.header,
+ payload: encoderState.payload,
+ asymmetricPrivateKey: encoderState.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat:
+ encoderState.asymmetricPrivateKeyFormat,
+ };
+
+ const decoderInputSnapshot: DecoderInputsModel = {
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: encoderState.alg,
+ jwt: encoderState.jwt,
+ asymmetricPublicKey: debuggerStash.asymmetricPublicKey || "",
+ asymmetricPublicKeyFormat:
+ debuggerStash.asymmetricPublicKeyFormat ||
+ AsymmetricKeyFormatValues.PEM,
+ };
+
+ // debuggerStash.symmetricSecretKey = encoderState.symmetricSecretKey;
+ // debuggerStash.symmetricSecretKeyEncoding =
+ // encoderState.symmetricSecretKeyEncoding;
+
+ return {
+ activeWidget$: widget,
+ mode$: mode,
+ decoderInputs$: {
+ ...decoderInputSnapshot,
+ },
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ stash$: {
+ ...debuggerStash,
+ },
+ };
+ }
+ }
+
+ return {
+ mode$: mode,
+ };
+ }),
+ setActiveWidget$: (widget) =>
+ set((state) => {
+ const debuggerStash = structuredClone(state.stash$);
+
+ // From DECODER to ENCODER
+ if (widget === DebuggerWidgetValues.ENCODER) {
+ const decoderState = useDecoderStore.getState();
+
+ let decoderInputSnapshot: Partial = {};
+ let encoderInputsUpdate: Partial = {};
+
+ if (isNoneAlg(decoderState.alg)) {
+ decoderInputSnapshot = {
+ jwt: decoderState.jwt,
+ algType: SigningAlgCategoryValues.NONE,
+ alg: decoderState.alg,
+ };
+
+ encoderInputsUpdate = {
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ algType: SigningAlgCategoryValues.NONE,
+ alg: decoderState.alg,
+ };
+ }
+
+ if (isHmacAlg(decoderState.alg)) {
+ decoderInputSnapshot = {
+ jwt: decoderState.jwt,
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: decoderState.alg,
+ symmetricSecretKey: decoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ decoderState.symmetricSecretKeyEncoding,
+ };
+
+ encoderInputsUpdate = {
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: decoderState.alg,
+ symmetricSecretKey: decoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ decoderState.symmetricSecretKeyEncoding,
+ };
+
+ debuggerStash.symmetricSecretKey = decoderState.symmetricSecretKey;
+ debuggerStash.symmetricSecretKeyEncoding =
+ decoderState.symmetricSecretKeyEncoding;
+ }
+
+ if (isDigitalSignatureAlg(decoderState.alg)) {
+ decoderInputSnapshot = {
+ jwt: decoderState.jwt,
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: decoderState.alg,
+ asymmetricPublicKey: decoderState.asymmetricPublicKey,
+ asymmetricPublicKeyFormat: decoderState.asymmetricPublicKeyFormat,
+ };
+
+ debuggerStash.asymmetricPublicKey =
+ decoderState.asymmetricPublicKey;
+ debuggerStash.asymmetricPublicKeyFormat =
+ decoderState.asymmetricPublicKeyFormat;
+
+ encoderInputsUpdate = {
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: decoderState.alg,
+ asymmetricPrivateKey: debuggerStash.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat:
+ debuggerStash.asymmetricPublicKeyFormat,
+ };
+ }
+
+ if (decoderState.alg === NOOP_ALG) {
+ decoderInputSnapshot = {
+ jwt: decoderState.jwt,
+ algType: SigningAlgCategoryValues.NOOP,
+ alg: decoderState.alg,
+ };
+
+ encoderInputsUpdate = {
+ header: decoderState.decodedHeader,
+ payload: decoderState.decodedPayload,
+ algType: SigningAlgCategoryValues.NOOP,
+ alg: decoderState.alg,
+ };
+ }
+
+ if (!(decoderState.decodedHeader && decoderState.decodedPayload)) {
+ return {
+ activeWidget$: widget,
+ decoderInputs$: { ...decoderInputSnapshot },
+ encoderInputs$: {
+ ...encoderInputsUpdate,
+ },
+ stash$: { ...debuggerStash },
+ };
+ }
+
+ return {
+ activeWidget$: widget,
+ decoderInputs$: { ...decoderInputSnapshot },
+ encoderInputs$: {
+ ...encoderInputsUpdate,
+ },
+ stash$: { ...debuggerStash },
+ };
+ }
+
+ // From ENCODER to DECODER
+ if (widget === DebuggerWidgetValues.DECODER) {
+ const encoderState = useEncoderStore.getState();
+
+ let encoderInputSnapshot: Partial = {};
+ let decoderInputsUpdate: Partial = {};
+
+ if (isNoneAlg(encoderState.alg)) {
+ encoderInputSnapshot = {
+ header: encoderState.header,
+ payload: encoderState.payload,
+ algType: SigningAlgCategoryValues.NONE,
+ alg: encoderState.alg,
+ };
+
+ decoderInputsUpdate = {
+ jwt: encoderState.jwt || state.decoderInputs$.jwt,
+ algType: SigningAlgCategoryValues.NONE,
+ alg: encoderState.alg,
+ };
+ }
+
+ if (isHmacAlg(encoderState.alg)) {
+ encoderInputSnapshot = {
+ header: encoderState.header,
+ payload: encoderState.payload,
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: encoderState.alg,
+ symmetricSecretKey: encoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ encoderState.symmetricSecretKeyEncoding,
+ };
+
+ decoderInputsUpdate = {
+ jwt: encoderState.jwt || state.decoderInputs$.jwt,
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: encoderState.alg,
+ symmetricSecretKey: encoderState.symmetricSecretKey,
+ symmetricSecretKeyEncoding:
+ encoderState.symmetricSecretKeyEncoding,
+ };
+
+ debuggerStash.symmetricSecretKey = encoderState.symmetricSecretKey;
+ debuggerStash.symmetricSecretKeyEncoding =
+ encoderState.symmetricSecretKeyEncoding;
+ }
+
+ if (isDigitalSignatureAlg(encoderState.alg)) {
+ encoderInputSnapshot = {
+ header: encoderState.header,
+ payload: encoderState.payload,
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: encoderState.alg,
+ asymmetricPrivateKey: encoderState.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat:
+ encoderState.asymmetricPrivateKeyFormat,
+ };
+
+ decoderInputsUpdate = {
+ jwt: encoderState.jwt || state.decoderInputs$.jwt,
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: encoderState.alg,
+ asymmetricPublicKey: debuggerStash.asymmetricPublicKey,
+ asymmetricPublicKeyFormat:
+ debuggerStash.asymmetricPublicKeyFormat,
+ };
+
+ debuggerStash.asymmetricPrivateKey =
+ encoderState.asymmetricPrivateKey;
+ debuggerStash.asymmetricPrivateKeyFormat =
+ encoderState.asymmetricPrivateKeyFormat;
+ }
+
+ if (!encoderState.jwt) {
+ return {
+ activeWidget$: widget,
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ decoderInputs$: {
+ ...state.decoderInputs$,
+ },
+ stash$: { ...debuggerStash },
+ };
+ }
+
+ return {
+ activeWidget$: widget,
+ encoderInputs$: {
+ ...encoderInputSnapshot,
+ },
+ decoderInputs$: {
+ ...decoderInputsUpdate,
+ },
+ stash$: { ...debuggerStash },
+ };
+ }
+
+ return {};
+ }),
+ setDecodedHeaderTabId$: (value) =>
+ set({
+ decodedHeaderTabId$: value,
+ }),
+ setDecodedPayloadTabId$: (value) =>
+ set({
+ decodedPayloadTabId$: value,
+ }),
+ setDecodedHeaderDescriptionVisibility$: (value) =>
+ set({
+ decodedHeaderDescriptionVisibility$: value,
+ }),
+ setDecodedPayloadDescriptionVisibility$: (value) =>
+ set({
+ decodedPayloadDescriptionVisibility$: value,
+ }),
+ openOutputModal$: (id) => {
+ document.body.classList.add("mobile-scroll-lock");
+
+ set({
+ outputModalState$: DebuggerOutputModalValues.OPEN,
+ outputModalId$: id,
+ });
+ },
+ closeOutputModal$: () => {
+ document.body.classList.remove("mobile-scroll-lock");
+
+ set({
+ outputModalState$: DebuggerOutputModalValues.CLOSED,
+ outputModalId$: null,
+ });
+ },
+ })),
+);
diff --git a/src/features/decoder/components/claim.component.tsx b/src/features/decoder/components/claim.component.tsx
new file mode 100644
index 00000000..8bcb012b
--- /dev/null
+++ b/src/features/decoder/components/claim.component.tsx
@@ -0,0 +1,134 @@
+import React from "react";
+import styles from "./claim.module.scss";
+import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component";
+import {
+ getTimeClaimProcessedValue,
+ safeJsonStringify,
+} from "@/features/common/services/utils";
+import { clsx } from "clsx";
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+
+const warningMessages: Record = {
+ time: "This value must be of type [`NumericDate`](https://datatracker.ietf.org/doc/html/rfc7519#section-2), representing seconds.",
+};
+
+const infoMessages: Record = {
+ time: "This value must be a [`NumericDate`](https://datatracker.ietf.org/doc/html/rfc7519#section-2) type, representing seconds.",
+};
+
+interface ClaimComponentProps {
+ field: string;
+ value: any;
+ description?: string;
+ descriptionVisibility?: ClaimDescriptionVisibilityValues;
+}
+
+export const ClaimComponent: React.FC = ({
+ field,
+ value,
+ description,
+ descriptionVisibility,
+}) => {
+ let processedValue = value;
+ let warningMessage: string | null = null;
+ let infoMessage: string | null = null;
+ let canRenderAsCode = false;
+
+ if (
+ field === "iat" ||
+ field === "exp" ||
+ field === "updated_at" ||
+ field === "auth_time" ||
+ field === "nbf"
+ ) {
+ const iatProcessResult = getTimeClaimProcessedValue(value);
+
+ if (iatProcessResult.isOk()) {
+ processedValue = `${value} (${iatProcessResult.value})`;
+ }
+
+ infoMessage = infoMessages["time"];
+ }
+
+ if (field === "exp") {
+ const now = new Date();
+ const exp = new Date(value * 1000);
+
+ if (now > exp && warningMessages["exp"]) {
+ warningMessage = warningMessages["exp"];
+ }
+ }
+
+ if (field === "typ" && value !== "JWT") {
+ warningMessage = warningMessages["typ"];
+ }
+
+ if (typeof value === "boolean") {
+ processedValue = String(value);
+ }
+
+ if (typeof value === "object") {
+ const safeJsonStringifyResult = safeJsonStringify(value);
+
+ if (safeJsonStringifyResult.isErr()) {
+ processedValue = `[object Object]`;
+ }
+
+ if (safeJsonStringifyResult.isOk()) {
+ processedValue = safeJsonStringifyResult.value;
+ }
+ }
+
+ if (typeof value === "object" && !Array.isArray(value) && value !== null) {
+ const safeJsonStringifyResult = safeJsonStringify(value, null, 2);
+
+ if (safeJsonStringifyResult.isOk()) {
+ processedValue = safeJsonStringifyResult.value;
+ canRenderAsCode = true;
+ }
+ }
+
+ return (
+ <>
+ = ({
+ decodedElement,
+ descriptionVisibility,
+}) => {
+ const notAvailableValue = "N/A";
+ const safeJsonParseResult = safeJsonParse(decodedElement);
+
+ if (safeJsonParseResult.isErr()) {
+ return (
+
+
+ ),
+ },
+ options: { noPadding: true, isOutput: true },
+ messages: null,
+ },
+ {
+ id: dataTestidDictionary.decoder.decodedHeader.table.id,
+ languageCode: languageCode,
+ title: dictionary.tabs.claims.label,
+ compactTitle: dictionary.tabs.claims.label,
+ children: (
+
+
+ ),
+ },
+ messages: null,
+ },
+ ];
+
+ return (
+ = ({
+ decodedHeader,
+}) => {
+ return (
+
+
+ ),
+ },
+ options: {
+ noPadding: true,
+ isOutput: true,
+ },
+ messages: null,
+ },
+ {
+ id: dataTestidDictionary.decoder.decodedPayload.table.id,
+ languageCode: languageCode,
+ title: dictionary.tabs.claims.label,
+ compactTitle: dictionary.tabs.claims.label,
+ children: (
+
+
+ ),
+ },
+ messages: null,
+ },
+ ];
+
+ return (
+ = ({
+ token,
+ handleJwtChange,
+}) => {
+ return (
+ handleJwtChange(code)}
+ highlight={(code) => {
+ if (!code) {
+ return (
+
+
+
+ );
+ }
+
+ const parts = code.split(".");
+ const lastIndex = parts.length - 1;
+
+ return parts.map((part, index) => {
+ const text = part.trim();
+ const withDot = index !== lastIndex;
+
+ if (index === 0) {
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ }
+
+ if (index === 1) {
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ }
+
+ if (index === 2) {
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ }
+
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ });
+ }}
+ padding="1rem"
+ style={{
+ fontFamily: '"Roboto Mono", monospace',
+ fontSize: 14,
+ lineHeight: 1.4,
+ border: "none",
+ outline: "none",
+ minHeight: "4rem",
+ }}
+ />
+ );
+};
diff --git a/src/features/decoder/components/jwt-input.component.tsx b/src/features/decoder/components/jwt-input.component.tsx
new file mode 100644
index 00000000..fe99a3ac
--- /dev/null
+++ b/src/features/decoder/components/jwt-input.component.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { CardComponent } from "@/features/common/components/card/card.component";
+import { JwtEditorComponent } from "@/features/decoder/components/jwt-editor.component";
+import { DEFAULT_JWT } from "@/features/decoder/services/token-decoder.service";
+import { useDecoderStore } from "@/features/decoder/services/decoder.store";
+import { TokenDecoderSignatureValidationComponent } from "@/features/decoder/components/token-decoder-signature-validation.component";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { extractJwt } from "@/features/common/services/utils";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+import { CardToolbarComponent } from "@/features/common/components/card-toolbar/card-toolbar.component";
+import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component";
+import { CardToolbarClearButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component";
+import styles from "./jwt-input.module.scss";
+
+type JwtInputComponentProps = {
+ languageCode: string;
+ dictionary: HomeDictionaryModel["decoder"]["jwtEditor"];
+};
+
+export const JwtInputComponent: React.FC = ({
+ languageCode,
+ dictionary,
+}) => {
+ const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange);
+ const jwt$ = useDecoderStore((state) => state.jwt);
+ const decodeErrors$ = useDecoderStore((state) => state.decodingErrors);
+
+ const decoderInputs$ = useDebuggerStore((state) => state.decoderInputs$);
+
+ const [token, setToken] = useState(
+ decoderInputs$.jwt || DEFAULT_JWT.token,
+ );
+
+ const clearValue = async () => {
+ handleJwtChange$("");
+ };
+
+ const handleJwtChange = async (newValue: string) => {
+ const cleanValue = extractJwt(newValue);
+
+ setToken(cleanValue);
+
+ handleJwtChange$(cleanValue);
+ };
+
+ useEffect(() => {
+ setToken(jwt$);
+ }, [jwt$]);
+
+ return (
+ <>
+ {dictionary.headline}
+
+
+ ),
+ }}
+ >
+ (
+ decoderInputs$.algType === SigningAlgCategoryValues.SYMMETRIC &&
+ decoderInputs$.symmetricSecretKey
+ ? decoderInputs$.symmetricSecretKey
+ : DEFAULT_JWT.secret,
+ );
+ const [publicKey, setPublicKey] = useState("");
+
+ useEffect(() => {
+ if (controlledSymmetricSecretKey) {
+ setSecret(controlledSymmetricSecretKey.value.trim());
+ }
+ }, [controlledSymmetricSecretKey]);
+
+ useEffect(() => {
+ if (controlledAsymmetricPublicKey) {
+ setPublicKey(controlledAsymmetricPublicKey.value.trim());
+ }
+ }, [controlledAsymmetricPublicKey]);
+
+ const clearValue = async () => {
+ if (isHmacAlg(alg$)) {
+ handleSymmetricSecretKeyChange$("");
+ resetControlledSymmetricSecretKey$();
+ }
+
+ if (isDigitalSignatureAlg(alg$)) {
+ handleAsymmetricPublicKeyChange$("");
+ resetControlledAsymmetricPublicKey$();
+ }
+ };
+
+ const handleSymmetricSecretKeyChange = async (
+ e: ChangeEvent,
+ ) => {
+ const key = e.target.value;
+
+ const cleanValue = key.trim();
+
+ setSecret(cleanValue);
+
+ handleSymmetricSecretKeyChange$(cleanValue);
+ };
+
+ const handleAsymmetricPublicKeyChange = async (
+ e: ChangeEvent,
+ ) => {
+ const key = e.target.value;
+
+ const cleanValue = key.trim();
+
+ setPublicKey(cleanValue);
+
+ handleAsymmetricPublicKeyChange$(cleanValue);
+ };
+
+ if (isNoneAlg(alg$)) {
+ return null;
+ }
+
+ if (alg$ === NOOP_ALG) {
+ return null;
+ }
+
+ return (
+
+
+ );
+};
diff --git a/src/features/decoder/components/secret-key-input.module.scss b/src/features/decoder/components/secret-key-input.module.scss
new file mode 100644
index 00000000..a4d81ca0
--- /dev/null
+++ b/src/features/decoder/components/secret-key-input.module.scss
@@ -0,0 +1,81 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.stack {
+ grid-column: span 6;
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ width: 100%;
+ gap: 1rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ display: none;
+ }
+}
+
+.grid__subtitle {
+ grid-column: 1 / -1;
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ text-transform: uppercase;
+ padding: 0.5rem 0;
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.24px;
+
+ & * {
+ font-size: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 12;
+ scroll-margin-top: calc($navbar-height + $workflows-navbar-height + 2rem);
+ }
+}
+
+.grid__subtitleTag {
+ color: var(--color_fg_default);
+ opacity: 0.64;
+}
+
+.decodedOutputCardTabs {
+ grid-column: span 6;
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ width: 100%;
+ gap: 0.5rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 12;
+ }
+}
+
+.input__description {
+ grid-column: span 6;
+ width: 100%;
+ color: var(--color_fg_default);
+ display: flex;
+ flex-direction: column;
+
+ gap: 0.625rem;
+
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ margin-bottom: 0.5rem;
+
+ & strong {
+ font-weight: 500;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 12;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
diff --git a/src/features/decoder/components/signature-verification-public-key-input.component.tsx b/src/features/decoder/components/signature-verification-public-key-input.component.tsx
new file mode 100644
index 00000000..7b48b66c
--- /dev/null
+++ b/src/features/decoder/components/signature-verification-public-key-input.component.tsx
@@ -0,0 +1,20 @@
+import React, { ChangeEvent } from "react";
+import { WidgetTextareaComponent } from "@/features/common/components/widget-textarea/widget-textarea.component";
+
+interface SignatureVerificationPublicKeyInputComponentProps {
+ publicKey: string;
+ handlePublicKeyChange: (e: ChangeEvent) => void;
+ placeholder: string;
+}
+
+export const SignatureVerificationPublicKeyInputComponent: React.FC<
+ SignatureVerificationPublicKeyInputComponentProps
+> = ({ publicKey, handlePublicKeyChange, placeholder }) => {
+ return (
+ ) => void;
+}
+
+export const SignatureVerificationSecretInputComponent: React.FC<
+ SignatureVerificationSecretInputComponentProps
+> = ({ secret, handleSecretChange }) => {
+ return (
+ (EncodingValues.UTF8);
+
+ useEffect(() => {
+ if (controlledSymmetricSecretKey) {
+ setSecretEncodingFormat(controlledSymmetricSecretKey.encoding);
+ }
+ }, [controlledSymmetricSecretKey]);
+
+ const onSecretEncodingFormatChange = (value: string) => {
+ setSecretEncodingFormat(value as EncodingValues);
+
+ handleSymmetricSecretKeyEncodingChange(value as EncodingValues);
+ };
+
+ return (
+ (
+ AsymmetricKeyFormatValues.PEM,
+ );
+
+ useEffect(() => {
+ if (controlledAsymmetricPublicKey) {
+ setKeyFormat(controlledAsymmetricPublicKey.format);
+ }
+ }, [controlledAsymmetricPublicKey]);
+
+ const handlePrivateKeyFormatChange = (value: string) => {
+ setKeyFormat(value as AsymmetricKeyFormatValues);
+
+ handlePublicKeyFormatChange(value as AsymmetricKeyFormatValues);
+ };
+
+ return (
+ = ({
+ languageCode,
+ dictionary,
+ decodedHeaderInitialTabId,
+ decodedPayloadInitialTabId,
+ decodedHeaderDescriptionVisibility,
+ decodedPayloadDescriptionVisibility,
+ headlineConfig,
+}) => {
+ const isMounted = useRef(false);
+
+ const router = useRouter();
+
+ const decoderInputs$ = useDebuggerStore((state) => state.decoderInputs$);
+
+ const loadDecoderInputs = useDecoderStore((state) => state.loadDecoderInputs);
+ const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange);
+ const showUseHashWarning$ = useDecoderStore(
+ (state) => state.showUseHashWarning,
+ );
+
+ useEffect(() => {
+ const handleHashChange = () => {
+ const hash = window.location.hash.substring(1);
+
+ if (hash.includes("debugger-io?token=")) {
+ const debugHash = window.location.hash
+ .substring(1)
+ .replace("debugger-io?", "");
+ const debugHashParams = new URLSearchParams(debugHash);
+ const token = debugHashParams.get(SupportedTokenHashParamValues.TOKEN);
+
+ const currentUrl = window.location.href.split("#")[0];
+
+ if (!(currentUrl && token)) {
+ return;
+ }
+
+ const newUrl = `${currentUrl}#${SupportedTokenHashParamValues.TOKEN}=${token}`;
+
+ window.location.replace(newUrl);
+
+ return;
+ }
+
+ if (!hash.includes("=")) {
+ return;
+ }
+
+ const hashParams = new URLSearchParams(hash);
+
+ Object.values(SupportedTokenHashParamValues).forEach((hashParamKey) => {
+ const token = hashParams.get(hashParamKey);
+
+ if (token) {
+ handleJwtChange$(token);
+ }
+ });
+ };
+
+ const handleWarning = () => {
+ const search = window.location.search;
+
+ const searchParams = new URLSearchParams(search);
+ const warning = searchParams.get(WARNING_PARAM_KEY);
+
+ if (warning === WARNING_PARAM_VALUE) {
+ showUseHashWarning$();
+
+ searchParams.delete(WARNING_PARAM_KEY);
+
+ const currentUrl = window.location.href.split("?")[0];
+
+ let newUrl = `${currentUrl}`;
+
+ if (searchParams.size > 0) {
+ newUrl += `?${searchParams.toString()}`;
+ }
+
+ if (window.location.hash) {
+ newUrl += window.location.hash;
+ }
+
+ router.push(newUrl);
+ }
+ };
+
+ window.addEventListener("hashchange", handleHashChange);
+
+ handleHashChange();
+ handleWarning();
+
+ return () => {
+ window.removeEventListener("hashchange", handleHashChange);
+ };
+ }, [handleJwtChange$, router, showUseHashWarning$]);
+
+ useEffect(() => {
+ if (isMounted.current) {
+ return;
+ }
+
+ isMounted.current = true;
+
+ if (!decoderInputs$.algType) {
+ return;
+ }
+
+ if (!decoderInputs$.alg) {
+ return;
+ }
+
+ if (decoderInputs$.jwt === undefined) {
+ return;
+ }
+
+ if (decoderInputs$.algType === SigningAlgCategoryValues.NONE) {
+ loadDecoderInputs({
+ algType: SigningAlgCategoryValues.NONE,
+ alg: decoderInputs$.alg,
+ jwt: decoderInputs$.jwt,
+ });
+ }
+
+ if (
+ decoderInputs$.algType === SigningAlgCategoryValues.SYMMETRIC &&
+ decoderInputs$.symmetricSecretKey !== undefined &&
+ decoderInputs$.symmetricSecretKeyEncoding !== undefined
+ ) {
+ loadDecoderInputs({
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: decoderInputs$.alg,
+ jwt: decoderInputs$.jwt,
+ symmetricSecretKey: decoderInputs$.symmetricSecretKey,
+ symmetricSecretKeyEncoding: decoderInputs$.symmetricSecretKeyEncoding,
+ });
+ }
+
+ if (decoderInputs$.algType === SigningAlgCategoryValues.ASYMMETRIC) {
+ loadDecoderInputs({
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: decoderInputs$.alg,
+ jwt: decoderInputs$.jwt,
+ asymmetricPublicKey: decoderInputs$.asymmetricPublicKey || "",
+ asymmetricPublicKeyFormat:
+ decoderInputs$.asymmetricPublicKeyFormat ||
+ useDebuggerStore.getState().stash$.asymmetricPrivateKeyFormat ||
+ AsymmetricKeyFormatValues.PEM,
+ });
+ }
+ }, [decoderInputs$, loadDecoderInputs, headlineConfig.isVisible]);
+
+ return (
+ ()(
+ subscribeWithSelector((set, get) => ({
+ ...initialState,
+ selectDecodingExample: async (algorithm) => {
+ const update = await TokenDecoderService.selectDecodingExample(algorithm);
+
+ set(update);
+ },
+ handleJwtChange: async (newToken) => {
+ const {
+ alg,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ asymmetricPublicKey,
+ asymmetricPublicKeyFormat,
+ } = get();
+
+ const update = await TokenDecoderService.handleJwtChange({
+ alg,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ asymmetricPublicKey,
+ asymmetricPublicKeyFormat,
+ newToken,
+ });
+
+ set(update);
+ },
+ handleSymmetricSecretKeyChange: async (newSymmetricSecretKey) => {
+ const { jwt, symmetricSecretKeyEncoding } = get();
+ const update = await TokenDecoderService.handleSymmetricSecretKeyChange({
+ jwt,
+ symmetricSecretKeyEncoding,
+ symmetricSecretKey: newSymmetricSecretKey,
+ });
+
+ set(update);
+ },
+ handleSymmetricSecretKeyEncodingChange: async (newEncoding) => {
+ const update =
+ await TokenDecoderService.handleSymmetricSecretKeyEncodingChange({
+ jwt: get().jwt,
+ symmetricSecretKey: get().symmetricSecretKey,
+ symmetricSecretKeyEncoding: newEncoding,
+ });
+
+ set(update);
+ },
+
+ handleAsymmetricPublicKeyChange: async (newAsymmetricPublicKey) => {
+ const { jwt, alg, asymmetricPublicKeyFormat } = get();
+
+ const update = await TokenDecoderService.handleAsymmetricPublicKeyChange({
+ jwt,
+ alg,
+ asymmetricPublicKeyFormat,
+ asymmetricPublicKey: newAsymmetricPublicKey,
+ });
+
+ set(update);
+ },
+ handleAsymmetricPublicKeyFormatChange: async (newFormat) => {
+ const { jwt, alg, asymmetricPublicKey } = get();
+
+ const update =
+ await TokenDecoderService.handleAsymmetricPublicKeyFormatChange({
+ jwt,
+ alg,
+ asymmetricPublicKey,
+ asymmetricPublicKeyFormat: newFormat,
+ });
+
+ set(update);
+ },
+ resetControlledSymmetricSecretKey: () =>
+ set((state) => ({
+ controlledSymmetricSecretKey: {
+ id: new Date().valueOf(),
+ value: "",
+ encoding: state.symmetricSecretKeyEncoding,
+ },
+ })),
+ resetControlledAsymmetricPublicKey: () =>
+ set((state) => ({
+ controlledAsymmetricPublicKey: {
+ id: new Date().valueOf(),
+ value: "",
+ format: state.asymmetricPublicKeyFormat,
+ },
+ })),
+ showUseHashWarning: () => {
+ set({
+ useHashWarningVisibility: HashWarningVisibilityValues.VISIBLE,
+ });
+ },
+ hideUseHashWarning: () => {
+ set({
+ useHashWarningVisibility: HashWarningVisibilityValues.HIDDEN,
+ });
+ },
+ loadDecoderInputs: async (params) => {
+ const update = await TokenDecoderService.loadDecoderInputs(params);
+
+ set(update);
+ },
+ })),
+);
diff --git a/src/features/decoder/services/public-key.service.ts b/src/features/decoder/services/public-key.service.ts
new file mode 100644
index 00000000..34a83d33
--- /dev/null
+++ b/src/features/decoder/services/public-key.service.ts
@@ -0,0 +1,293 @@
+import { createRemoteJWKSet, exportJWK, KeyLike } from "jose";
+import {
+ DecodedJwtHeaderModel,
+ DecodedJwtPayloadModel,
+ DecodedTokenModel,
+} from "@/features/common/models/decoded-token.model";
+import { err, fromPromise, fromThrowable, ok, Result } from "neverthrow";
+import { DebuggerErrorModel } from "@/features/common/models/debugger-error.model";
+import { isHmacAlg } from "@/features/common/services/jwt.service";
+import {
+ safeJsonParse,
+ safeJsonStringify,
+} from "@/features/common/services/utils";
+import { DebuggerTaskValues } from "@/features/common/values/debugger-task.values";
+import { DebuggerInputValues } from "@/features/common/values/debugger-input.values";
+
+function getKeyFromX5c(x5c: unknown): Result {
+ if (!Array.isArray(x5c) || typeof x5c[0] !== "string") {
+ return err(Error("x5c claim not present or invalid"));
+ }
+
+ const newline = (x5c[0].match(/.{1,64}/g) || []).join("\n");
+
+ return ok(
+ `-----BEGIN CERTIFICATE-----\n${newline}\n-----END CERTIFICATE-----`,
+ );
+}
+
+async function getKeyFromX5Claims(claims: any): Promise> {
+ if (claims.x5c) {
+ const getKeyFromX5cResult = getKeyFromX5c(claims.x5c);
+
+ if (getKeyFromX5cResult.isErr()) {
+ return err(getKeyFromX5cResult.error);
+ }
+
+ return ok(getKeyFromX5cResult.value);
+ }
+
+ if (claims.x5u) {
+ try {
+ const response = await fetch(claims.x5u);
+ const data = await response.text();
+
+ const getKeyFromX5cResult = getKeyFromX5c(data);
+
+ if (getKeyFromX5cResult.isErr()) {
+ return err(getKeyFromX5cResult.error);
+ }
+
+ return ok(getKeyFromX5cResult.value);
+ } catch (e) {
+ return err(new Error("x5u claim not available"));
+ }
+ }
+
+ return err(new Error("x5c or x5u claims not available"));
+}
+
+const safeJoseCreateRemoteJWKSet = fromThrowable(createRemoteJWKSet, (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return "Unable to create remote JWKS.";
+});
+
+const safeCreateUrl = (url: string): Result => {
+ try {
+ const parsedUrl = new URL(url);
+
+ if (parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:") {
+ return ok(parsedUrl);
+ }
+
+ return err("Unable to create URL from value");
+ } catch (e) {
+ return err("Unable to create URL from value");
+ }
+};
+
+const safeExportJWK = (key: KeyLike | Uint8Array) => {
+ return fromPromise(exportJWK(key), (e) => {
+ console.error(e);
+
+ return "Unable to export key to a JWK";
+ });
+};
+
+async function getKeyFromJwkKeySetUrl(
+ header: DecodedJwtHeaderModel,
+ url: string,
+): Promise> {
+ const safeCreateUrlResult = safeCreateUrl(url);
+
+ if (safeCreateUrlResult.isErr()) {
+ return err(safeCreateUrlResult.error);
+ }
+
+ const urlObj = safeCreateUrlResult.value;
+
+ const safeJoseCreateRemoteJWKSetResult = safeJoseCreateRemoteJWKSet(urlObj);
+
+ if (safeJoseCreateRemoteJWKSetResult.isErr()) {
+ return err(safeJoseCreateRemoteJWKSetResult.error);
+ }
+
+ const getKeyFromJwkKeySetUrlFn = safeJoseCreateRemoteJWKSetResult.value;
+
+ try {
+ const key = await getKeyFromJwkKeySetUrlFn(header);
+
+ const safeExportJWKResult = await safeExportJWK(key);
+
+ if (safeExportJWKResult.isErr()) {
+ return err(safeExportJWKResult.error);
+ }
+
+ const jwk = safeExportJWKResult.value;
+
+ const safeJsonStringifyResult = safeJsonStringify(jwk, null, 2);
+
+ if (safeJsonStringifyResult.isErr()) {
+ return err(safeJsonStringifyResult.error);
+ }
+
+ return ok(safeJsonStringifyResult.value);
+ } catch (error) {
+ return err("Unable to get public key from the JSON Web Key Set.");
+ }
+}
+
+const safeFetch = (url: string) => {
+ return fromPromise(fetch(url), (e) => {
+ if (e instanceof Error) {
+ return e.message;
+ }
+
+ return `Unable to fetch from ${url}`;
+ });
+};
+
+const safeFetchPublicKeyFromJwtIssuer = async (
+ payload: DecodedJwtPayloadModel,
+ header: DecodedJwtHeaderModel,
+): Promise> => {
+ if (!payload.iss) {
+ return err(`Payload does not have an "iss" claim.`);
+ }
+
+ const url =
+ payload.iss +
+ (payload.iss.charAt(payload.iss.length - 1) === "/"
+ ? ".well-known/openid-configuration"
+ : "/.well-known/openid-configuration");
+
+ const fetchResult = await safeFetch(url);
+
+ if (fetchResult.isErr()) {
+ return err(fetchResult.error);
+ }
+
+ const response = fetchResult.value;
+ const text = await response.text();
+
+ const safeJsonParseResult = safeJsonParse(text);
+
+ if (safeJsonParseResult.isErr()) {
+ return err(safeJsonParseResult.error);
+ }
+
+ const data = safeJsonParseResult.value;
+
+ if (!data || !data.jwks_uri || typeof data.jwks_uri !== "string") {
+ return err(`Could not get jwks_uri from URL: ${url}`);
+ }
+
+ const getKeyFromJwkKeySetUrlResult = await getKeyFromJwkKeySetUrl(
+ header,
+ data.jwks_uri,
+ );
+
+ if (getKeyFromJwkKeySetUrlResult.isErr()) {
+ return err(getKeyFromJwkKeySetUrlResult.error);
+ }
+
+ return ok(getKeyFromJwkKeySetUrlResult.value);
+};
+
+export async function downloadPublicKeyIfPossible(
+ decodedToken: DecodedTokenModel,
+): Promise> {
+ const defaultErrorMessage =
+ "Unable to automatically download public key from JWT. Please enter public key manually to verify the JWT signature.";
+
+ const header = decodedToken.header;
+ const payload = decodedToken.payload;
+
+ if (!header.alg || isHmacAlg(header.alg)) {
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.JWT,
+ message: `Unsupported alg: ${header.alg}`,
+ });
+ }
+
+ if (header.x5c || header.x5u) {
+ const getKeyFromX5ClaimsResult = await getKeyFromX5Claims(header);
+
+ if (getKeyFromX5ClaimsResult.isErr()) {
+ console.error(getKeyFromX5ClaimsResult.error.message);
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: defaultErrorMessage,
+ });
+ }
+
+ return ok(getKeyFromX5ClaimsResult.value);
+ }
+
+ if (header.jku) {
+ const getKeyFromJwkKeySetUrlResult = await getKeyFromJwkKeySetUrl(
+ header,
+ header.jku,
+ );
+
+ if (getKeyFromJwkKeySetUrlResult.isErr()) {
+ console.error(getKeyFromJwkKeySetUrlResult.error);
+
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: defaultErrorMessage,
+ });
+ }
+
+ return ok(getKeyFromJwkKeySetUrlResult.value);
+ }
+
+ if (header.jwk) {
+ const safeJsonStringifyResult = safeJsonStringify(header.jwk, null, 2);
+
+ if (safeJsonStringifyResult.isErr()) {
+ console.error(safeJsonStringifyResult.error);
+
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: defaultErrorMessage,
+ });
+ }
+
+ return ok(safeJsonStringifyResult.value);
+ }
+
+ if (typeof payload === "object" && "iss" in payload && payload.iss) {
+ const invalidIssuerUrlErrorMessage = `Unable to retrieve public key from issuer (iss) '${payload.iss}'. Expected a valid HTTPS URL. Please enter public key manually to verify the JWT signature.`;
+
+ const safeCreateUrlResult = safeCreateUrl(payload.iss);
+
+ if (safeCreateUrlResult.isErr()) {
+ console.error(safeCreateUrlResult.error);
+
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.JWT,
+ message: invalidIssuerUrlErrorMessage,
+ });
+ }
+
+ const safeFetchPublicKeyFromJwtIssuerResult =
+ await safeFetchPublicKeyFromJwtIssuer(payload, header);
+
+ if (safeFetchPublicKeyFromJwtIssuerResult.isErr()) {
+ console.error(safeFetchPublicKeyFromJwtIssuerResult.error);
+
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.JWT,
+ message: defaultErrorMessage,
+ });
+ }
+
+ return ok(safeFetchPublicKeyFromJwtIssuerResult.value);
+ }
+
+ return err({
+ task: DebuggerTaskValues.VERIFY,
+ input: DebuggerInputValues.KEY,
+ message: defaultErrorMessage,
+ });
+}
diff --git a/src/features/decoder/services/token-decoder.service.ts b/src/features/decoder/services/token-decoder.service.ts
new file mode 100644
index 00000000..d04b58d6
--- /dev/null
+++ b/src/features/decoder/services/token-decoder.service.ts
@@ -0,0 +1,929 @@
+import {
+ DefaultTokensValues,
+ DefaultTokenWithKeysModel,
+ DefaultTokenWithSecretModel,
+ DefaultUnsecuredTokenModel,
+} from "@/features/common/values/default-tokens.values";
+import {
+ extractJwt,
+ getAlgName,
+ operationExceptionDictionary,
+} from "@/features/common/services/utils";
+import {
+ getStringifiedHeaderAndPayload,
+ isDigitalSignatureAlg,
+ isHmacAlg,
+ isNoneAlg,
+ isSupportedAlg,
+ parseStringIntoValidJsonObject,
+ validateAsymmetricKey,
+ validateJwtFormat,
+ validateSymmetricSecret,
+ verifyDigitallySignedJwt,
+ verifyMACedJwt,
+} from "@/features/common/services/jwt.service";
+import { JwtTypeValues } from "@/features/common/values/jwt-type.values";
+import { downloadPublicKeyIfPossible } from "@/features/decoder/services/public-key.service";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import {
+ DecoderStore,
+ DecoderStoreState,
+} from "@/features/decoder/services/decoder.store";
+import { DebuggerInputValues } from "@/features/common/values/debugger-input.values";
+import { err, ok, Result } from "neverthrow";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-category.values";
+import { JwtSignatureStatusValues } from "@/features/common/values/jwt-signature-status.values";
+import { StringValues } from "@/features/common/values/string.values";
+import { DecoderInputsModel } from "@/features/debugger/models/decoder-inputs.model";
+import { NOOP_ALG } from "@/features/common/values/constants";
+
+export const DEFAULT_ALG_TYPE = "HS";
+export const DEFAULT_ALG_SIZE = 256;
+export const DEFAULT_ALG = `${DEFAULT_ALG_TYPE}${DEFAULT_ALG_SIZE}`;
+
+export const DEFAULT_JWT = DefaultTokensValues[
+ DEFAULT_ALG
+] as DefaultTokenWithSecretModel;
+
+type HandleSymmetricSecretKeyHelperOk = Pick<
+ DecoderStoreState,
+ "signatureStatus"
+>;
+type HandleSymmetricSecretKeyHelperError = Pick<
+ DecoderStoreState,
+ "signatureStatus" | "verificationInputErrors" | "signatureWarnings"
+>;
+
+type HandleAsymmetricPublicKeyHelperOk = Pick<
+ DecoderStoreState,
+ "signatureStatus"
+>;
+type HandleAsymmetricPublicKeyHelperError = Pick<
+ DecoderStoreState,
+ "signatureStatus" | "verificationInputErrors" | "signatureWarnings"
+>;
+
+class _TokenDecoderService {
+ async selectDecodingExample(
+ algorithmPickerOptionValue: string,
+ ): Promise> {
+ const defaultToken =
+ DefaultTokensValues[algorithmPickerOptionValue] || DEFAULT_JWT;
+
+ const algorithm = getAlgName(algorithmPickerOptionValue);
+
+ if (isNoneAlg(algorithm)) {
+ const token = defaultToken as DefaultUnsecuredTokenModel;
+
+ return await this.loadDecoderInputs({
+ jwt: token.token,
+ alg: algorithm,
+ algType: SigningAlgCategoryValues.NONE,
+ });
+ }
+
+ if (isHmacAlg(algorithm)) {
+ const token = defaultToken as DefaultTokenWithSecretModel;
+
+ return await this.loadDecoderInputs({
+ jwt: token.token,
+ alg: algorithm,
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ symmetricSecretKey: token.secret,
+ symmetricSecretKeyEncoding: token.secretEncoding,
+ });
+ }
+
+ if (isDigitalSignatureAlg(algorithm)) {
+ const token = defaultToken as DefaultTokenWithKeysModel;
+
+ const stateUpdate = await this.loadDecoderInputs({
+ jwt: token.token,
+ alg: algorithm,
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ asymmetricPublicKey: token.publicKey,
+ asymmetricPublicKeyFormat: token.publicKeyFormat,
+ });
+
+ useDebuggerStore.getState().setStash$({
+ asymmetricPrivateKey: token.privateKey,
+ asymmetricPrivateKeyFormat: token.privateKeyFormat,
+ });
+
+ return stateUpdate;
+ }
+
+ return {};
+ }
+
+ async loadDecoderInputs(
+ params: DecoderInputsModel,
+ ): Promise> {
+ const cleanJwtInput = extractJwt(params.jwt);
+
+ const stateUpdate: Partial = {
+ jwt: cleanJwtInput,
+ decodingErrors: null,
+ signatureStatus: JwtSignatureStatusValues.UNKNOWN,
+ signatureWarnings: null,
+ verificationInputErrors: null,
+ };
+
+ if (params.algType === SigningAlgCategoryValues.SYMMETRIC) {
+ stateUpdate.symmetricSecretKey = params.symmetricSecretKey;
+ stateUpdate.symmetricSecretKeyEncoding =
+ params.symmetricSecretKeyEncoding;
+ stateUpdate.controlledSymmetricSecretKey = {
+ id: new Date().valueOf(),
+ value: params.symmetricSecretKey,
+ encoding: params.symmetricSecretKeyEncoding,
+ };
+
+ const validateSymmetricSecretResult = await validateSymmetricSecret({
+ symmetricSecretKey: params.symmetricSecretKey,
+ symmetricSecretKeyEncoding: params.symmetricSecretKeyEncoding,
+ });
+
+ if (validateSymmetricSecretResult.isErr()) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [
+ "Fix secret input errors to verify signature.",
+ ];
+ stateUpdate.verificationInputErrors = [
+ validateSymmetricSecretResult.error.message,
+ ];
+ }
+ }
+
+ if (params.algType === SigningAlgCategoryValues.ASYMMETRIC) {
+ stateUpdate.asymmetricPublicKey = params.asymmetricPublicKey;
+ stateUpdate.asymmetricPublicKeyFormat = params.asymmetricPublicKeyFormat;
+ stateUpdate.controlledAsymmetricPublicKey = {
+ id: new Date().valueOf(),
+ value: params.asymmetricPublicKey,
+ format: params.asymmetricPublicKeyFormat,
+ };
+
+ const validateAsymmetricKeyResult = await validateAsymmetricKey({
+ alg: params.alg,
+ asymmetricPublicKey: params.asymmetricPublicKey,
+ asymmetricPublicKeyFormat: params.asymmetricPublicKeyFormat,
+ });
+
+ if (validateAsymmetricKeyResult.isErr()) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [
+ "Fix public key input errors to verify signature.",
+ ];
+ stateUpdate.verificationInputErrors = [
+ validateAsymmetricKeyResult.error.message,
+ ];
+ }
+ }
+
+ const validateJwtFormatResult = validateJwtFormat(cleanJwtInput);
+
+ if (validateJwtFormatResult.isErr()) {
+ stateUpdate.decodingErrors = [validateJwtFormatResult.error.message];
+ stateUpdate.decodedHeader = "";
+ stateUpdate.decodedPayload = "";
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [StringValues.editor.signatureWarning];
+
+ return stateUpdate;
+ }
+
+ const { type, decoded } = validateJwtFormatResult.value;
+
+ stateUpdate.alg = decoded.header.alg;
+
+ const getStringifiedHeaderAndPayloadResult = getStringifiedHeaderAndPayload(
+ decoded.header,
+ decoded.payload,
+ );
+
+ if (getStringifiedHeaderAndPayloadResult.isErr()) {
+ stateUpdate.decodingErrors = [
+ getStringifiedHeaderAndPayloadResult.error.message,
+ ];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [StringValues.editor.signatureWarning];
+
+ return stateUpdate;
+ }
+
+ const { payload: decodedPayload, header: decodedHeader } =
+ getStringifiedHeaderAndPayloadResult.value;
+
+ stateUpdate.decodedHeader = decodedHeader;
+ stateUpdate.decodedPayload = decodedPayload;
+
+ if (type === JwtTypeValues.Unsecured) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [
+ `This is an Unsecured JWT as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ ];
+ stateUpdate.verificationInputErrors = [
+ "Can't verify signature for an Unsecured JWT.",
+ ];
+
+ return stateUpdate;
+ }
+
+ if (
+ type === JwtTypeValues.MACed &&
+ params.algType === SigningAlgCategoryValues.SYMMETRIC
+ ) {
+ const symmetricSecretKey = params.symmetricSecretKey;
+ const symmetricSecretKeyEncoding = params.symmetricSecretKeyEncoding;
+
+ const verificationResult = await verifyMACedJwt({
+ jwt: cleanJwtInput,
+ symmetricSecretKey: symmetricSecretKey,
+ symmetricSecretKeyEncoding: symmetricSecretKeyEncoding,
+ });
+
+ if (verificationResult.isErr()) {
+ stateUpdate.verificationInputErrors = [
+ verificationResult.error.message,
+ ];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.INVALID;
+ stateUpdate.symmetricSecretKey = symmetricSecretKey;
+ stateUpdate.symmetricSecretKeyEncoding = symmetricSecretKeyEncoding;
+ stateUpdate.controlledSymmetricSecretKey = {
+ id: new Date().valueOf(),
+ value: symmetricSecretKey,
+ encoding: symmetricSecretKeyEncoding,
+ };
+
+ return stateUpdate;
+ }
+
+ if (verificationResult.isOk()) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.VALID;
+ stateUpdate.symmetricSecretKey = symmetricSecretKey;
+ stateUpdate.symmetricSecretKeyEncoding = symmetricSecretKeyEncoding;
+ stateUpdate.controlledSymmetricSecretKey = {
+ id: new Date().valueOf(),
+ value: symmetricSecretKey,
+ encoding: symmetricSecretKeyEncoding,
+ };
+ }
+
+ return stateUpdate;
+ }
+
+ if (
+ type === JwtTypeValues.DigitallySigned &&
+ params.algType === SigningAlgCategoryValues.ASYMMETRIC
+ ) {
+ const asymmetricPublicKey = params.asymmetricPublicKey;
+ const keyFormat = params.asymmetricPublicKeyFormat;
+
+ const verificationResult = await verifyDigitallySignedJwt({
+ jwt: cleanJwtInput,
+ asymmetricPublicKey: asymmetricPublicKey,
+ alg: params.alg,
+ asymmetricPublicKeyFormat: keyFormat,
+ });
+
+ if (verificationResult.isErr()) {
+ if (
+ verificationResult.error.message ===
+ operationExceptionDictionary.NotSupportedError
+ ) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.verificationInputErrors = [
+ verificationResult.error.message,
+ ];
+ stateUpdate.signatureWarnings = [
+ `Unable to validate signature as signing algorithm is not supported.`,
+ ];
+ stateUpdate.asymmetricPublicKeyFormat = keyFormat;
+ stateUpdate.controlledAsymmetricPublicKey = {
+ id: new Date().valueOf(),
+ value: asymmetricPublicKey,
+ format: keyFormat,
+ };
+
+ return stateUpdate;
+ }
+
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.INVALID;
+ stateUpdate.verificationInputErrors = [
+ verificationResult.error.message,
+ ];
+ stateUpdate.asymmetricPublicKey = asymmetricPublicKey;
+ stateUpdate.asymmetricPublicKeyFormat = keyFormat;
+ stateUpdate.controlledAsymmetricPublicKey = {
+ id: new Date().valueOf(),
+ value: asymmetricPublicKey,
+ format: keyFormat,
+ };
+
+ return stateUpdate;
+ }
+
+ if (verificationResult.isOk()) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.VALID;
+ stateUpdate.asymmetricPublicKey = asymmetricPublicKey;
+ stateUpdate.asymmetricPublicKeyFormat = keyFormat;
+ stateUpdate.controlledAsymmetricPublicKey = {
+ id: new Date().valueOf(),
+ value: asymmetricPublicKey,
+ format: keyFormat,
+ };
+ }
+
+ return stateUpdate;
+ }
+
+ return stateUpdate;
+ }
+
+ async handleJwtChange({
+ alg,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ asymmetricPublicKey: initialAsymmetricPublicKey,
+ asymmetricPublicKeyFormat: initialAsymmetricPublicKeyFormat,
+ newToken,
+ }: {
+ alg: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ asymmetricPublicKey: string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+ newToken: string;
+ }): Promise> {
+ const cleanJwtInput = extractJwt(newToken);
+
+ const stateUpdate: Partial = {
+ decodingErrors: null,
+ signatureStatus: JwtSignatureStatusValues.UNKNOWN,
+ signatureWarnings: null,
+ verificationInputErrors: null,
+ jwt: cleanJwtInput,
+ decodedHeader: "",
+ decodedPayload: "",
+ };
+
+ if (!cleanJwtInput) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [StringValues.editor.signatureWarning];
+ }
+
+ if (isHmacAlg(alg)) {
+ const validateSymmetricSecretResult = await validateSymmetricSecret({
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ });
+
+ if (validateSymmetricSecretResult.isErr()) {
+ stateUpdate.verificationInputErrors = [
+ validateSymmetricSecretResult.error.message,
+ ];
+ }
+ }
+
+ if (isDigitalSignatureAlg(alg)) {
+ const validateAsymmetricKeyResult = await validateAsymmetricKey({
+ alg,
+ asymmetricPublicKey: initialAsymmetricPublicKey,
+ asymmetricPublicKeyFormat: initialAsymmetricPublicKeyFormat,
+ });
+
+ if (validateAsymmetricKeyResult.isErr()) {
+ stateUpdate.verificationInputErrors = [
+ validateAsymmetricKeyResult.error.message,
+ ];
+ }
+ }
+
+ const validateJwtFormatResult = validateJwtFormat(cleanJwtInput);
+
+ if (validateJwtFormatResult.isErr()) {
+ switch (validateJwtFormatResult.error.input) {
+ case DebuggerInputValues.JWT: {
+ if (validateJwtFormatResult.error.data?.header) {
+ stateUpdate.alg = isSupportedAlg(
+ validateJwtFormatResult.error.data.header.alg,
+ )
+ ? validateJwtFormatResult.error.data.header.alg
+ : NOOP_ALG;
+
+ const getStringifiedHeaderAndPayloadResult =
+ getStringifiedHeaderAndPayload(
+ validateJwtFormatResult.error.data.header,
+ {},
+ );
+
+ if (getStringifiedHeaderAndPayloadResult.isOk()) {
+ stateUpdate.decodedHeader =
+ getStringifiedHeaderAndPayloadResult.value.header;
+ }
+ }
+
+ if (validateJwtFormatResult.error.data?.payload) {
+ const getStringifiedHeaderAndPayloadResult =
+ getStringifiedHeaderAndPayload(
+ {},
+ validateJwtFormatResult.error.data.payload,
+ );
+
+ if (getStringifiedHeaderAndPayloadResult.isOk()) {
+ stateUpdate.decodedPayload =
+ getStringifiedHeaderAndPayloadResult.value.payload;
+ }
+ }
+
+ stateUpdate.decodingErrors = [validateJwtFormatResult.error.message];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [
+ StringValues.editor.signatureWarning,
+ ];
+
+ break;
+ }
+ default: {
+ stateUpdate.decodingErrors = [validateJwtFormatResult.error.message];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [
+ StringValues.editor.signatureWarning,
+ ];
+ }
+ }
+
+ return stateUpdate;
+ }
+
+ const { type, decoded } = validateJwtFormatResult.value;
+ const getStringifiedHeaderAndPayloadResult = getStringifiedHeaderAndPayload(
+ decoded.header,
+ decoded.payload,
+ );
+
+ if (getStringifiedHeaderAndPayloadResult.isErr()) {
+ stateUpdate.decodingErrors = [
+ getStringifiedHeaderAndPayloadResult.error.message,
+ ];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [StringValues.editor.signatureWarning];
+
+ return stateUpdate;
+ }
+
+ const { payload: decodedPayload, header: decodedHeader } =
+ getStringifiedHeaderAndPayloadResult.value;
+
+ stateUpdate.decodedHeader = decodedHeader;
+ stateUpdate.decodedPayload = decodedPayload;
+
+ stateUpdate.alg = decoded.header.alg;
+
+ if (type === JwtTypeValues.Unsecured) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.signatureWarnings = [
+ `This is an Unsecured JWT as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ ];
+ stateUpdate.verificationInputErrors = [
+ "Can't verify signature for an Unsecured JWT.",
+ ];
+
+ return stateUpdate;
+ }
+
+ let asymmetricPublicKey = initialAsymmetricPublicKey;
+ let asymmetricPublicKeyFormat = initialAsymmetricPublicKeyFormat;
+
+ if (symmetricSecretKey && type === JwtTypeValues.MACed) {
+ const verificationResult = await verifyMACedJwt({
+ jwt: cleanJwtInput,
+ symmetricSecretKey: symmetricSecretKey,
+ symmetricSecretKeyEncoding: symmetricSecretKeyEncoding,
+ });
+
+ if (verificationResult.isErr()) {
+ stateUpdate.verificationInputErrors = [
+ verificationResult.error.message,
+ ];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.INVALID;
+
+ return stateUpdate;
+ }
+
+ if (verificationResult.isOk()) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.VALID;
+ stateUpdate.symmetricSecretKey = symmetricSecretKey;
+ stateUpdate.symmetricSecretKeyEncoding = symmetricSecretKeyEncoding;
+ stateUpdate.controlledSymmetricSecretKey = {
+ id: new Date().valueOf(),
+ value: symmetricSecretKey,
+ encoding: symmetricSecretKeyEncoding,
+ };
+ }
+
+ return stateUpdate;
+ }
+
+ if (type === JwtTypeValues.DigitallySigned) {
+ const downloadPublicKeyResult = await downloadPublicKeyIfPossible({
+ header: decoded.header,
+ payload: decoded.payload,
+ errors: false,
+ warnings: [],
+ });
+
+ if (downloadPublicKeyResult.isErr()) {
+ stateUpdate.verificationInputErrors = [
+ downloadPublicKeyResult.error.message,
+ ];
+ stateUpdate.signatureWarnings = [
+ `Fix public key input errors to verify signature.`,
+ ];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.WARNING;
+ stateUpdate.asymmetricPublicKey = "";
+ stateUpdate.controlledAsymmetricPublicKey = {
+ id: new Date().valueOf(),
+ value: "",
+ format: asymmetricPublicKeyFormat,
+ };
+
+ return stateUpdate;
+ }
+
+ if (downloadPublicKeyResult.isOk()) {
+ asymmetricPublicKey = downloadPublicKeyResult.value;
+
+ const parseResult = parseStringIntoValidJsonObject(asymmetricPublicKey);
+
+ if (parseResult.isOk()) {
+ asymmetricPublicKeyFormat = AsymmetricKeyFormatValues.JWK;
+ }
+
+ if (parseResult.isErr()) {
+ asymmetricPublicKeyFormat = AsymmetricKeyFormatValues.PEM;
+ }
+
+ if (asymmetricPublicKeyFormat) {
+ stateUpdate.asymmetricPublicKeyFormat = asymmetricPublicKeyFormat;
+ stateUpdate.controlledAsymmetricPublicKey = {
+ id: new Date().valueOf(),
+ value: asymmetricPublicKey,
+ format: asymmetricPublicKeyFormat,
+ };
+ }
+ }
+
+ const verificationResult = await verifyDigitallySignedJwt({
+ jwt: cleanJwtInput,
+ asymmetricPublicKey: asymmetricPublicKey,
+ alg: decoded.header.alg,
+ asymmetricPublicKeyFormat:
+ asymmetricPublicKeyFormat || AsymmetricKeyFormatValues.PEM,
+ });
+
+ if (verificationResult.isErr()) {
+ stateUpdate.verificationInputErrors = [
+ verificationResult.error.message,
+ ];
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.INVALID;
+
+ return stateUpdate;
+ }
+
+ if (verificationResult.isOk()) {
+ stateUpdate.signatureStatus = JwtSignatureStatusValues.VALID;
+ stateUpdate.asymmetricPublicKey = asymmetricPublicKey;
+ stateUpdate.asymmetricPublicKeyFormat = asymmetricPublicKeyFormat;
+ stateUpdate.controlledAsymmetricPublicKey = {
+ id: new Date().valueOf(),
+ value: asymmetricPublicKey,
+ format: asymmetricPublicKeyFormat,
+ };
+
+ return stateUpdate;
+ }
+ }
+
+ return stateUpdate;
+ }
+
+ async handleSymmetricSecretKeyHelper(params: {
+ jwt: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ symmetricSecretKey: string;
+ }): Promise<
+ Result<
+ HandleSymmetricSecretKeyHelperOk,
+ HandleSymmetricSecretKeyHelperError
+ >
+ > {
+ const { jwt, symmetricSecretKey, symmetricSecretKeyEncoding } = params;
+
+ if (!jwt) {
+ const validateSymmetricSecretResult = await validateSymmetricSecret({
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ });
+
+ if (validateSymmetricSecretResult.isErr()) {
+ const error: HandleSymmetricSecretKeyHelperError = {
+ signatureStatus: JwtSignatureStatusValues.WARNING,
+ signatureWarnings: ["Fix secret input errors to verify signature."],
+ verificationInputErrors: [
+ validateSymmetricSecretResult.error.message,
+ ],
+ };
+
+ return err(error);
+ }
+
+ const error: HandleSymmetricSecretKeyHelperError = {
+ signatureStatus: JwtSignatureStatusValues.WARNING,
+ signatureWarnings: [StringValues.editor.signatureWarning],
+ verificationInputErrors: null,
+ };
+
+ return err(error);
+ }
+
+ const verificationResult = await verifyMACedJwt({
+ jwt: jwt,
+ symmetricSecretKey: symmetricSecretKey,
+ symmetricSecretKeyEncoding: symmetricSecretKeyEncoding,
+ });
+
+ if (verificationResult.isErr()) {
+ const error: HandleSymmetricSecretKeyHelperError = {
+ signatureStatus: JwtSignatureStatusValues.INVALID,
+ verificationInputErrors: [verificationResult.error.message],
+ signatureWarnings: null,
+ };
+
+ return err(error);
+ }
+
+ return ok({
+ signatureStatus: JwtSignatureStatusValues.VALID,
+ });
+ }
+
+ async handleSymmetricSecretKeyChange({
+ jwt,
+ symmetricSecretKeyEncoding,
+ symmetricSecretKey,
+ }: {
+ jwt: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ symmetricSecretKey: string;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ symmetricSecretKey: symmetricSecretKey,
+ verificationInputErrors: null,
+ signatureStatus: JwtSignatureStatusValues.UNKNOWN,
+ signatureWarnings: null,
+ };
+
+ const handleSymmetricSecretChangeHelperResult =
+ await this.handleSymmetricSecretKeyHelper({
+ jwt,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ });
+
+ if (handleSymmetricSecretChangeHelperResult.isErr()) {
+ const { verificationInputErrors, signatureStatus, signatureWarnings } =
+ handleSymmetricSecretChangeHelperResult.error;
+
+ return {
+ ...stateUpdate,
+ verificationInputErrors,
+ signatureStatus,
+ signatureWarnings,
+ };
+ }
+
+ return {
+ ...stateUpdate,
+ signatureStatus:
+ handleSymmetricSecretChangeHelperResult.value.signatureStatus,
+ };
+ }
+
+ async handleSymmetricSecretKeyEncodingChange({
+ jwt,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ }: {
+ jwt: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ symmetricSecretKeyEncoding: symmetricSecretKeyEncoding,
+ verificationInputErrors: null,
+ signatureStatus: JwtSignatureStatusValues.UNKNOWN,
+ signatureWarnings: null,
+ };
+
+ const handleSymmetricSecretChangeHelperResult =
+ await this.handleSymmetricSecretKeyHelper({
+ jwt,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ });
+
+ if (handleSymmetricSecretChangeHelperResult.isErr()) {
+ const { verificationInputErrors, signatureStatus, signatureWarnings } =
+ handleSymmetricSecretChangeHelperResult.error;
+
+ return {
+ ...stateUpdate,
+ verificationInputErrors,
+ signatureStatus,
+ signatureWarnings,
+ };
+ }
+
+ return {
+ ...stateUpdate,
+ signatureStatus:
+ handleSymmetricSecretChangeHelperResult.value.signatureStatus,
+ };
+ }
+ async handleAsymmetricPublicKeyHelper({
+ jwt,
+ alg,
+ asymmetricPublicKeyFormat,
+ asymmetricPublicKey,
+ }: {
+ jwt: string;
+ alg: string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+ asymmetricPublicKey: string;
+ }): Promise<
+ Result<
+ HandleAsymmetricPublicKeyHelperOk,
+ HandleAsymmetricPublicKeyHelperError
+ >
+ > {
+ if (!jwt) {
+ const validateAsymmetricKeyResult = await validateAsymmetricKey({
+ alg,
+ asymmetricPublicKey,
+ asymmetricPublicKeyFormat,
+ });
+
+ if (validateAsymmetricKeyResult.isErr()) {
+ const error: HandleAsymmetricPublicKeyHelperError = {
+ signatureStatus: JwtSignatureStatusValues.WARNING,
+ signatureWarnings: [
+ "Fix public key input errors to verify signature.",
+ ],
+ verificationInputErrors: [validateAsymmetricKeyResult.error.message],
+ };
+
+ return err(error);
+ }
+
+ const error: HandleSymmetricSecretKeyHelperError = {
+ signatureStatus: JwtSignatureStatusValues.WARNING,
+ signatureWarnings: [StringValues.editor.signatureWarning],
+ verificationInputErrors: null,
+ };
+
+ return err(error);
+ }
+
+ const verificationResult = await verifyDigitallySignedJwt({
+ jwt: jwt,
+ asymmetricPublicKey: asymmetricPublicKey,
+ alg: alg,
+ asymmetricPublicKeyFormat: asymmetricPublicKeyFormat,
+ });
+
+ if (verificationResult.isErr()) {
+ if (
+ verificationResult.error.message ===
+ operationExceptionDictionary.NotSupportedError
+ ) {
+ const error: HandleAsymmetricPublicKeyHelperError = {
+ signatureStatus: JwtSignatureStatusValues.WARNING,
+ verificationInputErrors: [verificationResult.error.message],
+ signatureWarnings: [
+ `Unable to validate signature as signing algorithm is not supported.`,
+ ],
+ };
+
+ return err(error);
+ }
+
+ const error: HandleAsymmetricPublicKeyHelperError = {
+ signatureStatus: JwtSignatureStatusValues.INVALID,
+ verificationInputErrors: [verificationResult.error.message],
+ signatureWarnings: null,
+ };
+
+ return err(error);
+ }
+
+ return ok({
+ signatureStatus: JwtSignatureStatusValues.VALID,
+ });
+ }
+
+ async handleAsymmetricPublicKeyChange({
+ jwt,
+ alg,
+ asymmetricPublicKeyFormat,
+ asymmetricPublicKey,
+ }: {
+ jwt: string;
+ alg: string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+ asymmetricPublicKey: string;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ asymmetricPublicKey: asymmetricPublicKey,
+ verificationInputErrors: null,
+ signatureStatus: JwtSignatureStatusValues.UNKNOWN,
+ signatureWarnings: null,
+ };
+
+ const handleAsymmetricPublicKeyHelperResult =
+ await this.handleAsymmetricPublicKeyHelper({
+ jwt: jwt,
+ alg: alg,
+ asymmetricPublicKey: asymmetricPublicKey,
+ asymmetricPublicKeyFormat: asymmetricPublicKeyFormat,
+ });
+
+ if (handleAsymmetricPublicKeyHelperResult.isErr()) {
+ const { verificationInputErrors, signatureStatus, signatureWarnings } =
+ handleAsymmetricPublicKeyHelperResult.error;
+
+ return {
+ ...stateUpdate,
+ verificationInputErrors,
+ signatureStatus,
+ signatureWarnings,
+ };
+ }
+
+ return {
+ ...stateUpdate,
+ signatureStatus:
+ handleAsymmetricPublicKeyHelperResult.value.signatureStatus,
+ };
+ }
+
+ async handleAsymmetricPublicKeyFormatChange({
+ jwt,
+ alg,
+ asymmetricPublicKey,
+ asymmetricPublicKeyFormat,
+ }: {
+ jwt: string;
+ alg: string;
+ asymmetricPublicKey: string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ asymmetricPublicKeyFormat: asymmetricPublicKeyFormat,
+ verificationInputErrors: null,
+ signatureStatus: JwtSignatureStatusValues.UNKNOWN,
+ signatureWarnings: null,
+ };
+
+ const handleAsymmetricPublicKeyHelperResult =
+ await this.handleAsymmetricPublicKeyHelper({
+ jwt: jwt,
+ alg: alg,
+ asymmetricPublicKey: asymmetricPublicKey,
+ asymmetricPublicKeyFormat: asymmetricPublicKeyFormat,
+ });
+
+ if (handleAsymmetricPublicKeyHelperResult.isErr()) {
+ const { verificationInputErrors, signatureStatus, signatureWarnings } =
+ handleAsymmetricPublicKeyHelperResult.error;
+
+ return {
+ ...stateUpdate,
+ verificationInputErrors,
+ signatureStatus,
+ signatureWarnings,
+ };
+ }
+
+ return {
+ ...stateUpdate,
+ signatureStatus:
+ handleAsymmetricPublicKeyHelperResult.value.signatureStatus,
+ };
+ }
+}
+
+export const TokenDecoderService = new _TokenDecoderService();
diff --git a/src/features/encoder/components/encoded-jwt-output.component.tsx b/src/features/encoder/components/encoded-jwt-output.component.tsx
new file mode 100644
index 00000000..6f167a10
--- /dev/null
+++ b/src/features/encoder/components/encoded-jwt-output.component.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { CardComponent } from "@/features/common/components/card/card.component";
+import { EncodedTokenComponent } from "@/features/encoder/components/encoded-token.component";
+import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+import { CardToolbarComponent } from "@/features/common/components/card-toolbar/card-toolbar.component";
+import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component";
+
+type EncodedJwtOutputComponentProps = {
+ languageCode: string;
+ dictionary: HomeDictionaryModel["encoder"]["encodedJwt"];
+};
+
+export const EncodedJwtOutputComponent: React.FC<
+ EncodedJwtOutputComponentProps
+> = ({ languageCode, dictionary }) => {
+ const encodedToken$ = useEncoderStore((state) => state.jwt);
+ const encodingWarnings = useEncoderStore((state) => state.encodingWarnings);
+ const encodingErrors = useEncoderStore((state) => state.encodingErrors);
+
+ return (
+
+
+ );
+};
diff --git a/src/features/encoder/components/encoded-token.component.tsx b/src/features/encoder/components/encoded-token.component.tsx
new file mode 100644
index 00000000..426f7d51
--- /dev/null
+++ b/src/features/encoder/components/encoded-token.component.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import { EditorComponent } from "@/features/common/components/code-editor/editor.component";
+
+interface EncodedTokenComponentProps {
+ encodedToken: string;
+}
+
+export const EncodedTokenComponent: React.FC = ({
+ encodedToken,
+}) => {
+ const handleTokenEditorChange = async () => void 0;
+
+ return (
+ {
+ const parts = code.split(".");
+ const lastIndex = parts.length - 1;
+
+ return parts.map((part, index) => {
+ const text = part.trim();
+ const withDot = index !== lastIndex;
+
+ if (index === 0) {
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ }
+
+ if (index === 1) {
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ }
+
+ if (index === 2) {
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ }
+
+ return (
+
+ {text}
+ {withDot && .}
+
+ );
+ });
+ }}
+ padding={16}
+ style={{
+ fontFamily: '"Roboto Mono", monospace',
+ fontSize: 14,
+ lineHeight: 1.4,
+ border: "none",
+ outline: "none",
+ }}
+ />
+ );
+};
diff --git a/src/features/encoder/components/header-editor.component.tsx b/src/features/encoder/components/header-editor.component.tsx
new file mode 100644
index 00000000..20d76d77
--- /dev/null
+++ b/src/features/encoder/components/header-editor.component.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { highlight, languages } from "prismjs";
+
+import "prismjs/components/prism-json";
+import { EditorComponent } from "@/features/common/components/code-editor/editor.component";
+
+interface HeaderEditorComponentProps {
+ header: string;
+ handleHeaderChange: (newValue: string) => void;
+}
+
+export const HeaderEditorComponent: React.FC = ({
+ header,
+ handleHeaderChange,
+}) => {
+ return (
+ highlight(code, languages.json, "json")}
+ padding="1rem"
+ style={{
+ fontFamily: '"Roboto Mono", monospace',
+ fontSize: 14,
+ lineHeight: 1.4,
+ border: "none",
+ outline: "none",
+ }}
+ />
+ );
+};
diff --git a/src/features/encoder/components/payload-editor.component.tsx b/src/features/encoder/components/payload-editor.component.tsx
new file mode 100644
index 00000000..111a7301
--- /dev/null
+++ b/src/features/encoder/components/payload-editor.component.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { highlight, languages } from "prismjs";
+import "prismjs/components/prism-json";
+import { EditorComponent } from "@/features/common/components/code-editor/editor.component";
+
+interface PayloadEditorComponentProps {
+ payload: string;
+ handlePayloadChange: (newValue: string) => void;
+}
+
+export const PayloadEditorComponent: React.FC = ({
+ payload,
+ handlePayloadChange,
+}) => {
+ if (payload === null) {
+ return;
+ }
+
+ return (
+ highlight(code, languages.json, "json")}
+ padding="1rem"
+ style={{
+ fontFamily: '"Roboto Mono", monospace',
+ fontSize: 14,
+ lineHeight: 1.4,
+ border: "none",
+ outline: "none",
+ }}
+ />
+ );
+};
diff --git a/src/features/encoder/components/signing-private-key-editor.component.tsx b/src/features/encoder/components/signing-private-key-editor.component.tsx
new file mode 100644
index 00000000..f18f6fe1
--- /dev/null
+++ b/src/features/encoder/components/signing-private-key-editor.component.tsx
@@ -0,0 +1,24 @@
+import React, { ChangeEvent } from "react";
+import { WidgetTextareaComponent } from "@/features/common/components/widget-textarea/widget-textarea.component";
+
+interface SigningPrivateKeyEditorComponentProps {
+ privateKey: string;
+ handlePrivateKeyChange: (e: ChangeEvent) => void;
+ headerErrors: string[] | null;
+ placeholder: string;
+}
+
+export const SigningPrivateKeyEditorComponent: React.FC<
+ SigningPrivateKeyEditorComponentProps
+> = ({ privateKey, handlePrivateKeyChange, headerErrors, placeholder }) => {
+ return (
+ 0 : false}
+ rows={5}
+ name="private-key"
+ onChange={handlePrivateKeyChange}
+ placeholder={placeholder}
+ value={privateKey}
+ >
+ );
+};
diff --git a/src/features/encoder/components/signing-secret-editor.component.tsx b/src/features/encoder/components/signing-secret-editor.component.tsx
new file mode 100644
index 00000000..07cd6fe9
--- /dev/null
+++ b/src/features/encoder/components/signing-secret-editor.component.tsx
@@ -0,0 +1,21 @@
+import React, { ChangeEvent } from "react";
+import { WidgetTextareaComponent } from "@/features/common/components/widget-textarea/widget-textarea.component";
+
+interface SigningSecretEditorComponentProps {
+ secret: string;
+ handleSecretChange: (e: ChangeEvent) => void;
+ headerErrors: string[] | null;
+}
+
+export const SigningSecretEditorComponent: React.FC<
+ SigningSecretEditorComponentProps
+> = ({ secret, handleSecretChange, headerErrors }) => {
+ return (
+ 0}
+ name="secret"
+ onChange={handleSecretChange}
+ value={secret}
+ />
+ );
+};
diff --git a/src/features/encoder/components/token-encoder-encoding-format-picker.component.tsx b/src/features/encoder/components/token-encoder-encoding-format-picker.component.tsx
new file mode 100644
index 00000000..631dd252
--- /dev/null
+++ b/src/features/encoder/components/token-encoder-encoding-format-picker.component.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import styles from "./token-encoder-encoding-format-picker.module.scss";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import { getPickersUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { DebuggerPickerComponent } from "@/features/common/components/debugger-picker/debugger-picker.component";
+
+interface TokenEncoderEncodingFormatPickerComponentProps {
+ languageCode: string;
+}
+
+export const TokenEncoderEncodingFormatPickerComponent: React.FC<
+ TokenEncoderEncodingFormatPickerComponentProps
+> = ({ languageCode }) => {
+ const dictionary = getPickersUiDictionary(languageCode);
+
+ const handleSymmetricSecretKeyEncodingChange = useEncoderStore(
+ (state) => state.handleSymmetricSecretKeyEncodingChange,
+ );
+ const controlledSymmetricSecretKey = useEncoderStore(
+ (state) => state.controlledSymmetricSecretKey,
+ );
+
+ const [secretEncodingFormat, setSecretEncodingFormat] =
+ useState(EncodingValues.UTF8);
+
+ useEffect(() => {
+ if (controlledSymmetricSecretKey) {
+ setSecretEncodingFormat(controlledSymmetricSecretKey.encoding);
+ }
+ }, [controlledSymmetricSecretKey]);
+
+ const onSecretEncodingFormatChange = (value: string) => {
+ setSecretEncodingFormat(value as EncodingValues);
+
+ handleSymmetricSecretKeyEncodingChange(value as EncodingValues);
+ };
+
+ return (
+ (DEFAULT_HEADER);
+ const [payload, setPayload] = useState(DEFAULT_PAYLOAD);
+ const [secret, setSecret] = useState(DEFAULT_SYMMETRIC_SECRET);
+ const [privateKey, setPrivateKey] = useState("");
+
+ useEffect(() => {
+ setHeader(controlledHeader$.value);
+ }, [controlledHeader$]);
+
+ useEffect(() => {
+ setPayload(controlledPayload$.value);
+ }, [controlledPayload$]);
+
+ useEffect(() => {
+ if (controlledSymmetricSecretKey$) {
+ setSecret(controlledSymmetricSecretKey$.value);
+ }
+ }, [controlledSymmetricSecretKey$]);
+
+ useEffect(() => {
+ if (controlledAsymmetricPrivateKey$) {
+ setPrivateKey(controlledAsymmetricPrivateKey$.value);
+ }
+ }, [controlledAsymmetricPrivateKey$]);
+
+ const handleHeaderChange$ = useEncoderStore(
+ (state) => state.handleHeaderChange,
+ );
+ const resetControlledHeader$ = useEncoderStore(
+ (state) => state.resetControlledHeader,
+ );
+ const handlePayloadChange$ = useEncoderStore(
+ (state) => state.handlePayloadChange,
+ );
+ const resetControlledPayload$ = useEncoderStore(
+ (state) => state.resetControlledPayload,
+ );
+ const handleSymmetricSecretKeyChange$ = useEncoderStore(
+ (state) => state.handleSymmetricSecretKeyChange,
+ );
+ const resetControlledSymmetricSecretKey$ = useEncoderStore(
+ (state) => state.resetControlledSymmetricSecretKey,
+ );
+ const handleAsymmetricPrivateKeyChange$ = useEncoderStore(
+ (state) => state.handleAsymmetricPrivateKeyChange,
+ );
+ const resetControlledAsymmetricPrivateKey$ = useEncoderStore(
+ (state) => state.resetControlledAsymmetricPrivateKey,
+ );
+
+ const clearHeader = async () => {
+ handleHeaderChange$("");
+ resetControlledHeader$();
+ };
+
+ const clearPayload = async () => {
+ handlePayloadChange$("");
+ resetControlledPayload$();
+ };
+
+ const clearSecretKey = async () => {
+ if (headerErrors$ && headerErrors$.length > 0) {
+ return;
+ }
+
+ if (isHmacAlg(alg$)) {
+ handleSymmetricSecretKeyChange$("");
+ resetControlledSymmetricSecretKey$();
+ }
+
+ if (isDigitalSignatureAlg(alg$)) {
+ handleAsymmetricPrivateKeyChange$("");
+ resetControlledAsymmetricPrivateKey$();
+ }
+ };
+
+ const handleHeaderChange = useCallback(
+ (newValue: string) => {
+ const cleanValue = newValue.trim();
+
+ setHeader(cleanValue);
+
+ handleHeaderChange$(cleanValue);
+ },
+ [handleHeaderChange$],
+ );
+
+ const handlePayloadChange = useCallback(
+ (newValue: string) => {
+ const cleanValue = newValue.trim();
+
+ setPayload(cleanValue);
+
+ handlePayloadChange$(cleanValue);
+ },
+ [handlePayloadChange$],
+ );
+
+ const handleSymmetricSecretKeyChange = async (
+ e: ChangeEvent,
+ ) => {
+ const key = e.target.value;
+
+ const cleanValue = key.trim();
+
+ setSecret(cleanValue);
+
+ handleSymmetricSecretKeyChange$(cleanValue);
+ };
+
+ const handleAsymmetricPrivateKeyChange = async (
+ e: ChangeEvent,
+ ) => {
+ const key = e.target.value;
+
+ const cleanValue = key.trim();
+
+ setPrivateKey(cleanValue);
+
+ handleAsymmetricPrivateKeyChange$(cleanValue);
+ };
+
+ const cards: CardComponentProps[] = [
+ {
+ id: dataTestidDictionary.encoder.headerEditor.id,
+ languageCode: languageCode,
+ title: dictionary.headerEditor.title,
+ compactTitle: dictionary.headerEditor.compactTitle,
+ children: (
+
+
+ ),
+ },
+ options: { noPadding: true },
+ },
+ {
+ id: dataTestidDictionary.encoder.payloadEditor.id,
+ languageCode: languageCode,
+ title: dictionary.payloadEditor.title,
+ compactTitle: dictionary.payloadEditor.compactTitle,
+ children: (
+
+
+ ),
+ },
+ options: { noPadding: true },
+ },
+ ];
+
+ if (isHmacAlg(alg$) || isDigitalSignatureAlg(alg$)) {
+ cards.push({
+ id: dataTestidDictionary.encoder.secretKeyEditor.id,
+ languageCode: languageCode,
+ title: isHmacAlg(alg$)
+ ? dictionary.signatureEditor.title.secret
+ : dictionary.signatureEditor.title.privateKey,
+ compactTitle: isHmacAlg(alg$)
+ ? dictionary.signatureEditor.compactTitle.secret
+ : dictionary.signatureEditor.compactTitle.privateKey,
+ options: {
+ noPadding: true,
+ },
+ children: (
+ <>
+ {isHmacAlg(alg$) && (
+
+ 0) ||
+ (isHmacAlg(alg$) && !secret) ||
+ (isDigitalSignatureAlg(alg$) && !privateKey)
+ }
+ />
+
+ ),
+ footer: isHmacAlg(alg$) ? (
+ (
+ AsymmetricKeyFormatValues.PEM,
+ );
+
+ useEffect(() => {
+ if (controlledAsymmetricPrivateKey$) {
+ setKeyFormat(controlledAsymmetricPrivateKey$.format);
+ }
+ }, [controlledAsymmetricPrivateKey$]);
+
+ const onPrivateKeyFormatChange = (value: string) => {
+ setKeyFormat(value as AsymmetricKeyFormatValues);
+
+ handlePrivateKeyFormatChange(value as AsymmetricKeyFormatValues);
+ };
+
+ return (
+ = ({
+ languageCode,
+ dictionary,
+ headlineConfig,
+}) => {
+ const isMounted = useRef(false);
+
+ const encodingWarnings$ = useEncoderStore((state) => state.encodingWarnings);
+ const encoderInputs$ = useDebuggerStore((state) => state.encoderInputs$);
+ const loadEncoderInputs = useEncoderStore((state) => state.loadEncoderInputs);
+
+ useEffect(() => {
+ if (isMounted.current) {
+ return;
+ }
+
+ isMounted.current = true;
+
+ if (!encoderInputs$.algType) {
+ return;
+ }
+
+ if (!encoderInputs$.alg) {
+ return;
+ }
+
+ if (
+ encoderInputs$.header === undefined ||
+ encoderInputs$.payload === undefined
+ ) {
+ return;
+ }
+
+ if (encoderInputs$.algType === SigningAlgCategoryValues.NONE) {
+ loadEncoderInputs({
+ algType: SigningAlgCategoryValues.NONE,
+ alg: encoderInputs$.alg,
+ header: encoderInputs$.header,
+ payload: encoderInputs$.payload,
+ });
+ }
+
+ if (
+ encoderInputs$.algType === SigningAlgCategoryValues.SYMMETRIC &&
+ encoderInputs$.symmetricSecretKey !== undefined &&
+ encoderInputs$.symmetricSecretKeyEncoding !== undefined
+ ) {
+ loadEncoderInputs({
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ alg: encoderInputs$.alg,
+ header: encoderInputs$.header,
+ payload: encoderInputs$.payload,
+ symmetricSecretKey: encoderInputs$.symmetricSecretKey,
+ symmetricSecretKeyEncoding: encoderInputs$.symmetricSecretKeyEncoding,
+ });
+ }
+
+ if (
+ encoderInputs$.algType === SigningAlgCategoryValues.ASYMMETRIC &&
+ encoderInputs$.asymmetricPrivateKeyFormat !== undefined
+ ) {
+ loadEncoderInputs({
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ alg: encoderInputs$.alg,
+ header: encoderInputs$.header,
+ payload: encoderInputs$.payload,
+ asymmetricPrivateKey: encoderInputs$.asymmetricPrivateKey || "",
+ asymmetricPrivateKeyFormat: encoderInputs$.asymmetricPrivateKeyFormat,
+ });
+ }
+
+ if (encoderInputs$.algType === SigningAlgCategoryValues.NOOP) {
+ loadEncoderInputs({
+ algType: SigningAlgCategoryValues.NOOP,
+ alg: encoderInputs$.alg,
+ header: encoderInputs$.header,
+ payload: encoderInputs$.payload,
+ });
+ }
+ }, [encoderInputs$, loadEncoderInputs, headlineConfig.isVisible]);
+
+ return (
+ ()(
+ subscribeWithSelector((set, get) => ({
+ ...initialState,
+ selectEncodingExample: async (algorithm) => {
+ const update = await TokenEncoderService.selectEncodingExample(algorithm);
+
+ set(update);
+ },
+ resetSymmetricSecretKeyError: () =>
+ set(() => ({
+ symmetricSecretKeyErrors: null,
+ signingErrors: null,
+ })),
+ resetAsymmetricPrivateKeyError: () =>
+ set(() => ({
+ asymmetricPrivateKeyErrors: null,
+ symmetricSecretKeyErrors: null,
+ signingErrors: null,
+ })),
+ handleHeaderChange: async (newHeader) => {
+ const {
+ payload,
+ alg,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat,
+ } = get();
+
+ const update = await TokenEncoderService.handleHeaderChange({
+ header: newHeader,
+ payload,
+ alg,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat,
+ });
+
+ set(update);
+ },
+ handlePayloadChange: async (newPayload) => {
+ const {
+ header,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat,
+ } = get();
+
+ const update = await TokenEncoderService.handlePayloadChange({
+ header,
+ payload: newPayload,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat,
+ });
+
+ set(update);
+ },
+ handleSymmetricSecretKeyChange: async (newSecret) => {
+ const { header, payload, symmetricSecretKeyEncoding } = get();
+
+ const update = await TokenEncoderService.handleSymmetricSecretKeyChange({
+ symmetricSecretKey: newSecret,
+ header,
+ payload,
+ symmetricSecretKeyEncoding,
+ });
+
+ set(update);
+ },
+ handleSymmetricSecretKeyEncodingChange: async (newEncoding) => {
+ const { header, payload, symmetricSecretKey } = get();
+
+ const update =
+ await TokenEncoderService.handleSymmetricSecretKeyEncodingChange({
+ header,
+ payload,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding: newEncoding,
+ });
+
+ set(update);
+ },
+ handleAsymmetricPrivateKeyChange: async (newPrivateKey) => {
+ const { header, payload, asymmetricPrivateKeyFormat } = get();
+
+ const update = await TokenEncoderService.handleAsymmetricPrivateKeyChange(
+ {
+ header,
+ payload,
+ asymmetricPrivateKey: newPrivateKey,
+ asymmetricPrivateKeyFormat,
+ },
+ );
+
+ set(update);
+ },
+ handleAsymmetricPrivateKeyFormatChange: async (newFormat) => {
+ const { header, payload, asymmetricPrivateKey } = get();
+
+ const update =
+ await TokenEncoderService.handleAsymmetricPrivateKeyFormatChange({
+ header,
+ payload,
+ asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat: newFormat,
+ });
+
+ set(update);
+ },
+ setControlledHeader: (value) =>
+ set(() => ({
+ controlledHeader: { id: new Date().valueOf(), value: value },
+ })),
+ resetControlledHeader: () =>
+ set(() => ({
+ controlledHeader: {
+ id: new Date().valueOf(),
+ value: "",
+ },
+ })),
+ setControlledPayload: (value) =>
+ set(() => ({
+ controlledPayload: { id: new Date().valueOf(), value: value },
+ })),
+ resetControlledPayload: () =>
+ set(() => ({
+ controlledPayload: { id: new Date().valueOf(), value: "" },
+ })),
+ resetControlledSymmetricSecretKey: () => {
+ const { symmetricSecretKeyEncoding } = get();
+
+ set({
+ controlledSymmetricSecretKey: {
+ id: new Date().valueOf(),
+ value: "",
+ encoding: symmetricSecretKeyEncoding,
+ },
+ });
+ },
+ resetControlledAsymmetricPrivateKey: () => {
+ const { asymmetricPrivateKeyFormat } = get();
+
+ set({
+ controlledAsymmetricPrivateKey: {
+ id: new Date().valueOf(),
+ value: "",
+ format: asymmetricPrivateKeyFormat,
+ },
+ });
+ },
+ loadEncoderInputs: async (params) => {
+ const update = await TokenEncoderService.loadEncoderInput(params);
+
+ set(update);
+ },
+ })),
+);
diff --git a/src/features/encoder/services/token-encoder.service.ts b/src/features/encoder/services/token-encoder.service.ts
new file mode 100644
index 00000000..9174354c
--- /dev/null
+++ b/src/features/encoder/services/token-encoder.service.ts
@@ -0,0 +1,1343 @@
+import {
+ DefaultTokensValues,
+ DefaultTokenWithKeysModel,
+ DefaultTokenWithSecretModel,
+} from "@/features/common/values/default-tokens.values";
+import { CompactJWSHeaderParameters } from "jose";
+import {
+ DecodedJwtHeaderModel,
+ DecodedJwtPayloadModel,
+} from "@/features/common/models/decoded-token.model";
+import {
+ checkHmacSecretLength,
+ createUnsecuredJwt,
+ getAlgSize,
+ getValidatedEncoderHeader,
+ isDigitalSignatureAlg,
+ isHmacAlg,
+ isNoneAlg,
+ isValidBase64UrlString,
+ parseStringIntoValidJsonObject,
+ signWithAsymmetricPrivateKey,
+ signWithSymmetricSecretKey,
+} from "@/features/common/services/jwt.service";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import { err, ok, Result } from "neverthrow";
+import { DebuggerErrorModel } from "@/features/common/models/debugger-error.model";
+import {
+ getAlgName,
+ safeJsonParse,
+ safeJsonStringify,
+} from "@/features/common/services/utils";
+import { EncoderStoreState } from "@/features/encoder/services/encoder.store";
+import { DebuggerTaskValues } from "@/features/common/values/debugger-task.values";
+import { DebuggerInputValues } from "@/features/common/values/debugger-input.values";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-category.values";
+import { EncoderInputsModel } from "@/features/debugger/models/encoder-inputs.model";
+
+type EncodingHeaderErrors = {
+ headerErrors: string[] | null;
+ signingErrors: string[] | null;
+};
+
+type EncodingPayloadErrors = {
+ payloadErrors: string[] | null;
+};
+
+type EncodingSymmetricSecretKeyErrors = {
+ headerErrors: string[] | null;
+ signingErrors: string[] | null;
+ payloadErrors: string[] | null;
+ encodingErrors: string[] | null;
+ symmetricSecretKeyErrors: string[] | null;
+};
+
+type EncodingAsymmetricPrivateKeyErrors = {
+ headerErrors: string[] | null;
+ signingErrors: string[] | null;
+ payloadErrors: string[] | null;
+ encodingErrors: string[] | null;
+};
+
+type EncodingJwtErrors = {
+ headerErrors: string[] | null;
+ signingErrors: string[] | null;
+ payloadErrors: string[] | null;
+ encodingErrors: string[] | null;
+};
+
+class _TokenEncoderService {
+ async selectEncodingExample(
+ algorithmPickerOptionValue: string,
+ ): Promise> {
+ const stateUpdate: Partial = {
+ signingErrors: null,
+ headerErrors: null,
+ headerWarnings: null,
+ payloadErrors: null,
+ encodingWarnings: null,
+ };
+
+ const jwt = DefaultTokensValues[algorithmPickerOptionValue];
+
+ const algorithm = getAlgName(algorithmPickerOptionValue);
+
+ const header = isNoneAlg(algorithm)
+ ? {
+ alg: algorithm,
+ }
+ : {
+ alg: algorithm,
+ typ: "JWT",
+ };
+
+ /**
+ * We need to update the value of this payload; otherwise, the controlledPayload observable
+ * won't emit anything as its value would not change.
+ */
+ const payload = {
+ sub: "1234567890",
+ name: "John Doe",
+ admin: true,
+ /**
+ * iat must be numeric value representing the number of seconds from
+ * 1970-01-01T00:00:00Z UTC until the specified UTC date/time,
+ * ignoring leap seconds.
+ */
+ iat: Math.floor(new Date().getTime() / 1000) + 60 * 60 * 24,
+ };
+
+ stateUpdate.exampleAlg = algorithmPickerOptionValue;
+ stateUpdate.alg = algorithm;
+
+ const stringifiedHeaderResult = safeJsonStringify(header, null, 2);
+ const stringifiedPayloadResult = safeJsonStringify(payload, null, 2);
+
+ if (stringifiedHeaderResult.isErr()) {
+ stateUpdate.headerErrors = [
+ "Given header is not a valid JSON object representation.",
+ ];
+ stateUpdate.signingErrors = [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ];
+ }
+
+ if (stringifiedHeaderResult.isOk()) {
+ stateUpdate.header = stringifiedHeaderResult.value;
+ stateUpdate.controlledHeader = {
+ id: new Date().valueOf(),
+ value: stringifiedHeaderResult.value,
+ };
+ }
+
+ if (stringifiedPayloadResult.isErr()) {
+ stateUpdate.payloadErrors = [
+ "Given payload is not a valid JSON object representation.",
+ ];
+ }
+
+ if (stringifiedPayloadResult.isOk()) {
+ stateUpdate.payload = stringifiedPayloadResult.value;
+ stateUpdate.controlledPayload = {
+ id: new Date().valueOf(),
+ value: stringifiedPayloadResult.value,
+ };
+ }
+
+ if (isNoneAlg(algorithm)) {
+ const encodeJWTResult = await this.encodeUnsecuredJWT(header, payload);
+
+ if (encodeJWTResult.isErr()) {
+ stateUpdate.headerErrors = encodeJWTResult.error.headerErrors;
+ stateUpdate.payloadErrors = encodeJWTResult.error.payloadErrors;
+ stateUpdate.signingErrors = encodeJWTResult.error.signingErrors;
+ stateUpdate.encodingErrors = encodeJWTResult.error.encodingErrors;
+ }
+
+ if (encodeJWTResult.isOk()) {
+ stateUpdate.jwt = encodeJWTResult.value.jwt.trim();
+ stateUpdate.encodingWarnings = [
+ `This is an Unsecured JWT as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ ];
+ }
+
+ return {
+ ...stateUpdate,
+ };
+ }
+
+ if (isHmacAlg(algorithm)) {
+ const secret = (jwt as DefaultTokenWithSecretModel).secret;
+
+ const encodeJWTResult = await this.encodeJWTWithHmacAlg(
+ header,
+ payload,
+ secret,
+ EncodingValues.UTF8,
+ );
+
+ if (encodeJWTResult.isErr()) {
+ stateUpdate.signingErrors = [encodeJWTResult.error.message];
+ }
+
+ if (encodeJWTResult.isOk()) {
+ stateUpdate.jwt = encodeJWTResult.value.trim();
+ }
+
+ return {
+ ...stateUpdate,
+ symmetricSecretKey: secret,
+ symmetricSecretKeyEncoding: EncodingValues.UTF8,
+ controlledSymmetricSecretKey: {
+ id: new Date().valueOf(),
+ value: secret,
+ encoding: EncodingValues.UTF8,
+ },
+ };
+ }
+
+ if (isDigitalSignatureAlg(algorithm)) {
+ const digitallySignedToken = jwt as DefaultTokenWithKeysModel;
+ const privateKey = digitallySignedToken.privateKey;
+
+ const encodeJWTResult = await this.encodeJWTWithDigitalSignatureAlg(
+ header,
+ payload,
+ privateKey,
+ AsymmetricKeyFormatValues.PEM,
+ );
+
+ if (encodeJWTResult.isErr()) {
+ stateUpdate.signingErrors = [encodeJWTResult.error.message];
+ }
+
+ if (encodeJWTResult.isOk()) {
+ stateUpdate.jwt = encodeJWTResult.value.trim();
+
+ useDebuggerStore.getState().setStash$({
+ asymmetricPublicKey: digitallySignedToken.publicKey,
+ asymmetricPublicKeyFormat: digitallySignedToken.publicKeyFormat,
+ });
+ }
+
+ return {
+ ...stateUpdate,
+ asymmetricPrivateKey: privateKey,
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ controlledAsymmetricPrivateKey: {
+ id: new Date().valueOf(),
+ value: privateKey,
+ format: AsymmetricKeyFormatValues.PEM,
+ },
+ };
+ }
+
+ return stateUpdate;
+ }
+
+ async loadEncoderInput(
+ params: EncoderInputsModel,
+ ): Promise> {
+ const stateUpdate: Partial = {
+ signingErrors: null,
+ headerErrors: null,
+ headerWarnings: null,
+ payloadErrors: null,
+ encodingWarnings: null,
+ jwt: null,
+ };
+
+ if (params.algType === SigningAlgCategoryValues.SYMMETRIC) {
+ stateUpdate.symmetricSecretKey = params.symmetricSecretKey;
+ stateUpdate.symmetricSecretKeyEncoding =
+ params.symmetricSecretKeyEncoding;
+ stateUpdate.controlledSymmetricSecretKey = {
+ id: new Date().valueOf(),
+ value: params.symmetricSecretKey,
+ encoding: params.symmetricSecretKeyEncoding,
+ };
+ }
+
+ if (params.algType === SigningAlgCategoryValues.ASYMMETRIC) {
+ stateUpdate.asymmetricPrivateKey = params.asymmetricPrivateKey;
+ stateUpdate.asymmetricPrivateKeyFormat =
+ params.asymmetricPrivateKeyFormat;
+ stateUpdate.controlledAsymmetricPrivateKey = {
+ id: new Date().valueOf(),
+ value: params.asymmetricPrivateKey,
+ format: params.asymmetricPrivateKeyFormat,
+ };
+ }
+
+ stateUpdate.alg = params.alg;
+
+ stateUpdate.header = params.header;
+ stateUpdate.controlledHeader = {
+ id: new Date().valueOf(),
+ value: params.header,
+ };
+
+ stateUpdate.payload = params.payload;
+ stateUpdate.controlledPayload = {
+ id: new Date().valueOf(),
+ value: params.payload,
+ };
+
+ const safeJsonParseHeaderResult = safeJsonParse(params.header);
+ const safeJsonParsePayloadResult = safeJsonParse(params.payload);
+
+ if (
+ safeJsonParseHeaderResult.isErr() &&
+ safeJsonParsePayloadResult.isErr()
+ ) {
+ stateUpdate.headerErrors = [
+ "Given header is not a valid JSON object representation.",
+ ];
+ stateUpdate.signingErrors = [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ];
+ stateUpdate.payloadErrors = [
+ "Given payload is not a valid JSON object representation.",
+ ];
+
+ return {
+ ...stateUpdate,
+ };
+ }
+
+ if (safeJsonParseHeaderResult.isErr()) {
+ stateUpdate.headerErrors = [
+ "Given header is not a valid JSON object representation.",
+ ];
+ stateUpdate.signingErrors = [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ];
+
+ return {
+ ...stateUpdate,
+ };
+ }
+
+ if (safeJsonParsePayloadResult.isErr()) {
+ stateUpdate.payloadErrors = [
+ "The payload must be a valid JSON object. [Learn more](https://datatracker.ietf.org/doc/html/rfc7515#section-4.1.1).",
+ safeJsonParsePayloadResult.error,
+ ];
+
+ if (params.algType === SigningAlgCategoryValues.NOOP) {
+ stateUpdate.headerErrors = [
+ `Missing or invalid cryptographic algorithm. Only use "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ ];
+ }
+
+ return {
+ ...stateUpdate,
+ };
+ }
+
+ const header = safeJsonParseHeaderResult.value;
+ const payload = safeJsonParsePayloadResult.value;
+
+ if (params.algType === SigningAlgCategoryValues.NONE) {
+ const encodeUnsecuredJWTResult = await this.encodeUnsecuredJWT(
+ header,
+ payload,
+ );
+
+ if (encodeUnsecuredJWTResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...encodeUnsecuredJWTResult.error,
+ };
+ }
+
+ if (encodeUnsecuredJWTResult.isOk()) {
+ stateUpdate.encodingWarnings = [
+ `This is an Unsecured JWT as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ ];
+
+ stateUpdate.jwt = encodeUnsecuredJWTResult.value.jwt.trim();
+ }
+
+ return {
+ ...stateUpdate,
+ };
+ }
+
+ if (params.algType === SigningAlgCategoryValues.SYMMETRIC) {
+ const encodeJWTResult = await this.encodeJWTWithHmacAlg(
+ header,
+ payload,
+ params.symmetricSecretKey,
+ params.symmetricSecretKeyEncoding,
+ );
+
+ if (encodeJWTResult.isErr()) {
+ stateUpdate.signingErrors = [encodeJWTResult.error.message];
+ }
+
+ if (encodeJWTResult.isOk()) {
+ stateUpdate.jwt = encodeJWTResult.value.trim();
+ }
+
+ return {
+ ...stateUpdate,
+ symmetricSecretKey: params.symmetricSecretKey,
+ symmetricSecretKeyEncoding: params.symmetricSecretKeyEncoding,
+ controlledSymmetricSecretKey: {
+ id: new Date().valueOf(),
+ value: params.symmetricSecretKey,
+ encoding: params.symmetricSecretKeyEncoding,
+ },
+ };
+ }
+
+ if (params.algType === SigningAlgCategoryValues.ASYMMETRIC) {
+ const privateKey = params.asymmetricPrivateKey || "";
+
+ const encodeJWTResult = await this.encodeJWTWithDigitalSignatureAlg(
+ header,
+ payload,
+ privateKey,
+ params.asymmetricPrivateKeyFormat,
+ );
+
+ if (encodeJWTResult.isErr()) {
+ stateUpdate.signingErrors = [encodeJWTResult.error.message];
+ }
+
+ if (encodeJWTResult.isOk()) {
+ stateUpdate.jwt = encodeJWTResult.value.trim();
+ }
+
+ return {
+ ...stateUpdate,
+ asymmetricPrivateKey: privateKey,
+ asymmetricPrivateKeyFormat: params.asymmetricPrivateKeyFormat,
+ controlledAsymmetricPrivateKey: {
+ id: new Date().valueOf(),
+ value: privateKey,
+ format: params.asymmetricPrivateKeyFormat,
+ },
+ };
+ }
+
+ if (params.algType === SigningAlgCategoryValues.NOOP) {
+ stateUpdate.headerErrors = [
+ `Missing or invalid cryptographic algorithm. Only use "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ ];
+
+ return {
+ ...stateUpdate,
+ };
+ }
+
+ return stateUpdate;
+ }
+
+ private async encodeUnsecuredJWT(
+ header: DecodedJwtHeaderModel,
+ payload: DecodedJwtPayloadModel,
+ ): Promise<
+ Result<
+ {
+ jwt: string;
+ },
+ EncodingJwtErrors
+ >
+ > {
+ if (!isNoneAlg(header.alg)) {
+ const errors: EncodingJwtErrors = {
+ headerErrors: [
+ `Only use the "alg" parameter set to "none" in the header to create an Unsecured JWT as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ ],
+ payloadErrors: null,
+ signingErrors: null,
+ encodingErrors: null,
+ };
+
+ return err(errors);
+ }
+
+ const createUnsecuredJwtResult = await createUnsecuredJwt(header, payload);
+
+ if (createUnsecuredJwtResult.isErr()) {
+ const errors: EncodingJwtErrors = {
+ headerErrors: null,
+ payloadErrors: [createUnsecuredJwtResult.error.message],
+ signingErrors: null,
+ encodingErrors: null,
+ };
+
+ return err(errors);
+ }
+
+ return ok({
+ jwt: createUnsecuredJwtResult.value,
+ });
+ }
+
+ private async encodeJWTWithHmacAlg(
+ header: DecodedJwtHeaderModel,
+ payload: DecodedJwtPayloadModel,
+ key: string,
+ encodingFormat: EncodingValues,
+ ): Promise> {
+ if (isHmacAlg(header.alg)) {
+ if (!key) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: "Secret must not be empty.",
+ });
+ }
+
+ const getAlgSizeResult = getAlgSize(header.alg);
+
+ if (getAlgSizeResult.isErr()) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: getAlgSizeResult.error,
+ });
+ }
+
+ const checkHmacSecretLengthResult = checkHmacSecretLength(
+ key,
+ getAlgSizeResult.value.size,
+ encodingFormat,
+ );
+
+ if (checkHmacSecretLengthResult.isErr()) {
+ return err(checkHmacSecretLengthResult.error);
+ }
+
+ return await signWithSymmetricSecretKey(
+ header as CompactJWSHeaderParameters,
+ payload,
+ key,
+ encodingFormat,
+ );
+ }
+
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: `Invalid MAC algorithm. Only use MAC "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ });
+ }
+
+ private async encodeJWTWithDigitalSignatureAlg(
+ header: DecodedJwtHeaderModel,
+ payload: DecodedJwtPayloadModel,
+ key: string,
+ keyFormat: AsymmetricKeyFormatValues,
+ ): Promise> {
+ if (isDigitalSignatureAlg(header.alg)) {
+ if (!key) {
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.KEY,
+ message: "Private key must not be empty.",
+ });
+ }
+
+ return await signWithAsymmetricPrivateKey(
+ header as CompactJWSHeaderParameters,
+ payload,
+ key,
+ keyFormat,
+ );
+ }
+
+ return err({
+ task: DebuggerTaskValues.ENCODE,
+ input: DebuggerInputValues.HEADER,
+ message: `Invalid Digital Signature algorithm. Only use Digital Signature "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ });
+ }
+
+ processHeader(params: {
+ header: string;
+ signingAlgCategory: SigningAlgCategoryValues;
+ }): Result<
+ {
+ header: DecodedJwtHeaderModel;
+ headerWarnings: string[] | null;
+ },
+ EncodingHeaderErrors
+ > {
+ const header = params.header;
+ const signingAlgCategory = params.signingAlgCategory;
+
+ const headerParsingResult = parseStringIntoValidJsonObject(header);
+
+ if (headerParsingResult.isErr()) {
+ const errors: EncodingHeaderErrors = {
+ headerErrors: [
+ "The header must be a valid JSON Object. [See examples](https://datatracker.ietf.org/doc/html/rfc8259#section-13)",
+ headerParsingResult.error,
+ ],
+ signingErrors: [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ],
+ };
+
+ return err(errors);
+ }
+
+ const getValidatedHeaderResult = getValidatedEncoderHeader(
+ headerParsingResult.value,
+ );
+
+ if (getValidatedHeaderResult.isErr()) {
+ return err({
+ ...getValidatedHeaderResult.error,
+ });
+ }
+
+ const decodedHeader = getValidatedHeaderResult.value.header;
+
+ if (isNoneAlg(decodedHeader.alg)) {
+ return ok({
+ header: decodedHeader,
+ headerWarnings:
+ getValidatedHeaderResult.value.headerWarnings &&
+ getValidatedHeaderResult.value.headerWarnings.length > 0
+ ? getValidatedHeaderResult.value.headerWarnings
+ : null,
+ });
+ }
+
+ if (
+ signingAlgCategory === SigningAlgCategoryValues.SYMMETRIC &&
+ !isHmacAlg(decodedHeader.alg)
+ ) {
+ const errors: EncodingHeaderErrors = {
+ headerErrors: [
+ `Invalid MAC algorithm. Only use MAC "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ ],
+ signingErrors: [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ],
+ };
+
+ return err(errors);
+ }
+
+ if (
+ signingAlgCategory === SigningAlgCategoryValues.ASYMMETRIC &&
+ !isDigitalSignatureAlg(decodedHeader.alg)
+ ) {
+ const errors: EncodingHeaderErrors = {
+ headerErrors: [
+ `Invalid Digital Signature algorithm. Only use Digital Signature "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ ],
+ signingErrors: [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ],
+ };
+
+ return err(errors);
+ }
+
+ return ok({
+ header: decodedHeader,
+ headerWarnings:
+ getValidatedHeaderResult.value.headerWarnings &&
+ getValidatedHeaderResult.value.headerWarnings.length > 0
+ ? getValidatedHeaderResult.value.headerWarnings
+ : null,
+ });
+ }
+
+ processPayload(params: { payload: string }): Result<
+ {
+ payload: DecodedJwtPayloadModel;
+ },
+ EncodingPayloadErrors
+ > {
+ const payloadParsingResult = parseStringIntoValidJsonObject(params.payload);
+
+ if (payloadParsingResult.isErr()) {
+ const errors: EncodingPayloadErrors = {
+ payloadErrors: [
+ "The payload must be a valid JSON object. [Learn more](https://datatracker.ietf.org/doc/html/rfc7515#section-4.1.1).",
+ payloadParsingResult.error,
+ ],
+ };
+
+ return err(errors);
+ }
+
+ return ok({
+ payload: payloadParsingResult.value as DecodedJwtPayloadModel,
+ });
+ }
+
+ async processSymmetricSecretKey(params: {
+ header: string;
+ payload: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ }): Promise<
+ Result<
+ {
+ jwt: string;
+ },
+ EncodingSymmetricSecretKeyErrors
+ >
+ > {
+ const processHeaderResult = this.processHeader({
+ signingAlgCategory: SigningAlgCategoryValues.SYMMETRIC,
+ header: params.header,
+ });
+
+ if (processHeaderResult.isErr()) {
+ const errors: EncodingSymmetricSecretKeyErrors = {
+ payloadErrors: null,
+ encodingErrors: null,
+ symmetricSecretKeyErrors: null,
+ ...processHeaderResult.error,
+ };
+
+ return err(errors);
+ }
+
+ const { header } = processHeaderResult.value;
+
+ const symmetricSecretKey = params.symmetricSecretKey;
+ const symmetricSecretKeyEncoding = params.symmetricSecretKeyEncoding;
+
+ if (
+ symmetricSecretKeyEncoding === EncodingValues.BASE64URL &&
+ !isValidBase64UrlString(symmetricSecretKey)
+ ) {
+ const errors: EncodingSymmetricSecretKeyErrors = {
+ headerErrors: null,
+ payloadErrors: null,
+ encodingErrors: null,
+ symmetricSecretKeyErrors: [
+ "Invalid base64url string. Use the Base64 encoding using the URL and filename-safe character set as defined in [Section 5 of RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648#section-5).",
+ ],
+ signingErrors: [
+ "Invalid base64url string. Use the Base64 encoding using the URL and filename-safe character set as defined in [Section 5 of RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648#section-5).",
+ ],
+ };
+
+ return err(errors);
+ }
+
+ const processPayloadResult = this.processPayload({
+ payload: params.payload,
+ });
+
+ if (processPayloadResult.isErr()) {
+ const errors: EncodingSymmetricSecretKeyErrors = {
+ headerErrors: null,
+ signingErrors: null,
+ encodingErrors: null,
+ symmetricSecretKeyErrors: null,
+ ...processPayloadResult.error,
+ };
+
+ return err(errors);
+ }
+
+ const { payload } = processPayloadResult.value;
+
+ const encodeJwtResult = await this.encodeJwt({
+ algType: SigningAlgCategoryValues.SYMMETRIC,
+ header,
+ payload,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding: symmetricSecretKeyEncoding,
+ });
+
+ if (encodeJwtResult.isErr()) {
+ const errors: EncodingSymmetricSecretKeyErrors = {
+ symmetricSecretKeyErrors: null,
+ ...encodeJwtResult.error,
+ };
+
+ return err(errors);
+ }
+
+ return ok({
+ jwt: encodeJwtResult.value.jwt.trim(),
+ });
+ }
+
+ async processAsymmetricPrivateKey(params: {
+ header: string;
+ payload: string;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ }): Promise> {
+ const processHeaderResult = this.processHeader({
+ signingAlgCategory: SigningAlgCategoryValues.ASYMMETRIC,
+ header: params.header,
+ });
+
+ if (processHeaderResult.isErr()) {
+ const errors: EncodingAsymmetricPrivateKeyErrors = {
+ payloadErrors: null,
+ encodingErrors: null,
+ ...processHeaderResult.error,
+ };
+
+ return err(errors);
+ }
+
+ const { header } = processHeaderResult.value;
+
+ const processPayloadResult = this.processPayload({
+ payload: params.payload,
+ });
+
+ if (processPayloadResult.isErr()) {
+ const errors: EncodingAsymmetricPrivateKeyErrors = {
+ headerErrors: null,
+ signingErrors: null,
+ encodingErrors: null,
+ ...processPayloadResult.error,
+ };
+
+ return err(errors);
+ }
+
+ const { payload } = processPayloadResult.value;
+
+ const asymmetricPrivateKey = params.asymmetricPrivateKey;
+ const asymmetricPrivateKeyFormat = params.asymmetricPrivateKeyFormat;
+
+ const encodeJwtResult = await this.encodeJwt({
+ algType: SigningAlgCategoryValues.ASYMMETRIC,
+ header,
+ payload,
+ asymmetricPrivateKey: asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat: asymmetricPrivateKeyFormat,
+ });
+
+ if (encodeJwtResult.isErr()) {
+ const errors: EncodingAsymmetricPrivateKeyErrors = {
+ ...encodeJwtResult.error,
+ };
+
+ return err(errors);
+ }
+
+ return ok({
+ jwt: encodeJwtResult.value.jwt.trim(),
+ });
+ }
+
+ async encodeJwt(
+ params:
+ | {
+ algType: SigningAlgCategoryValues.ANY;
+ header: DecodedJwtHeaderModel;
+ payload: DecodedJwtPayloadModel;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ }
+ | {
+ algType: SigningAlgCategoryValues.SYMMETRIC;
+ header: DecodedJwtHeaderModel;
+ payload: DecodedJwtPayloadModel;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ }
+ | {
+ algType: SigningAlgCategoryValues.ASYMMETRIC;
+ header: DecodedJwtHeaderModel;
+ payload: DecodedJwtPayloadModel;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ },
+ ): Promise<
+ Result<
+ {
+ jwt: string;
+ },
+ EncodingJwtErrors
+ >
+ > {
+ const algType = params.algType;
+ const header = params.header;
+ const payload = params.payload;
+
+ let encodeJWTResult: Result | null = null;
+
+ if (algType === SigningAlgCategoryValues.ANY) {
+ const symmetricSecretKey = params.symmetricSecretKey;
+ const symmetricSecretKeyEncoding = params.symmetricSecretKeyEncoding;
+ const asymmetricPrivateKey = params.asymmetricPrivateKey;
+ const asymmetricPrivateKeyFormat = params.asymmetricPrivateKeyFormat;
+
+ encodeJWTResult = isHmacAlg(header.alg)
+ ? await this.encodeJWTWithHmacAlg(
+ header,
+ payload,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ )
+ : isDigitalSignatureAlg(header.alg)
+ ? await this.encodeJWTWithDigitalSignatureAlg(
+ header,
+ payload,
+ asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat,
+ )
+ : null;
+ }
+
+ if (
+ algType === SigningAlgCategoryValues.SYMMETRIC &&
+ isHmacAlg(header.alg)
+ ) {
+ const symmetricSecretKey = params.symmetricSecretKey;
+ const symmetricSecretKeyEncoding = params.symmetricSecretKeyEncoding;
+
+ encodeJWTResult = await this.encodeJWTWithHmacAlg(
+ header,
+ payload,
+ symmetricSecretKey,
+ symmetricSecretKeyEncoding,
+ );
+ }
+
+ if (
+ algType === SigningAlgCategoryValues.ASYMMETRIC &&
+ isDigitalSignatureAlg(header.alg)
+ ) {
+ const asymmetricPrivateKey = params.asymmetricPrivateKey;
+ const asymmetricPrivateKeyFormat = params.asymmetricPrivateKeyFormat;
+
+ encodeJWTResult = await this.encodeJWTWithDigitalSignatureAlg(
+ header,
+ payload,
+ asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat,
+ );
+ }
+
+ if (!encodeJWTResult) {
+ const errors: EncodingJwtErrors = {
+ headerErrors: [
+ `Invalid cryptographic algorithm. Only use "alg" parameter values in the header as defined by [RFC 7518 (JSON Web Algorithms)](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1).`,
+ ],
+ signingErrors: [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ],
+ payloadErrors: null,
+ encodingErrors: null,
+ };
+
+ return err(errors);
+ }
+
+ if (encodeJWTResult.isErr()) {
+ switch (encodeJWTResult.error.input) {
+ case DebuggerInputValues.HEADER: {
+ const errors: EncodingJwtErrors = {
+ headerErrors: [encodeJWTResult.error.message],
+ signingErrors: [
+ "Fix any errors in the JWT header to enable editing this field.",
+ ],
+ payloadErrors: null,
+ encodingErrors: null,
+ };
+
+ return err(errors);
+ }
+ case DebuggerInputValues.PAYLOAD: {
+ const errors: EncodingJwtErrors = {
+ headerErrors: null,
+ signingErrors: null,
+ payloadErrors: [encodeJWTResult.error.message],
+ encodingErrors: null,
+ };
+
+ return err(errors);
+ }
+ case DebuggerInputValues.SECRET: {
+ const errors: EncodingJwtErrors = {
+ headerErrors: null,
+ signingErrors: [encodeJWTResult.error.message],
+ payloadErrors: null,
+ encodingErrors: null,
+ };
+
+ return err(errors);
+ }
+ case DebuggerInputValues.KEY: {
+ const errors: EncodingJwtErrors = {
+ headerErrors: null,
+ signingErrors: [encodeJWTResult.error.message],
+ payloadErrors: null,
+ encodingErrors: null,
+ };
+
+ return err(errors);
+ }
+ default: {
+ const errors: EncodingJwtErrors = {
+ headerErrors: null,
+ signingErrors: null,
+ payloadErrors: null,
+ encodingErrors: [encodeJWTResult.error.message],
+ };
+
+ return err(errors);
+ }
+ }
+ }
+
+ return ok({
+ jwt: encodeJWTResult.value,
+ });
+ }
+
+ async handleHeaderChange(params: {
+ header: string;
+ payload: string;
+ alg: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ jwt: "",
+ exampleAlg: "",
+ header: params.header,
+ headerErrors: null,
+ headerWarnings: null,
+ encodingWarnings: null,
+ signingErrors: null,
+ };
+
+ const processHeaderResult = this.processHeader({
+ signingAlgCategory: SigningAlgCategoryValues.ANY,
+ header: params.header,
+ });
+
+ if (processHeaderResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processHeaderResult.error,
+ };
+ }
+
+ const { header, headerWarnings } = processHeaderResult.value;
+
+ if (headerWarnings) {
+ stateUpdate.headerWarnings = headerWarnings;
+ }
+
+ stateUpdate.alg = header.alg;
+
+ /**
+ * We only need to parse and validate the payload for the encoding process,
+ * not before the parse and validate the header, which is the focus of this
+ * change handler.
+ */
+ const processPayloadResult = this.processPayload({
+ payload: params.payload,
+ });
+
+ if (processPayloadResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processPayloadResult.error,
+ };
+ }
+
+ const { payload } = processPayloadResult.value;
+
+ const encodeJwtResult = isNoneAlg(header.alg)
+ ? await this.encodeUnsecuredJWT(header, payload)
+ : await this.encodeJwt({
+ algType: SigningAlgCategoryValues.ANY,
+ header,
+ payload,
+ symmetricSecretKey: params.symmetricSecretKey,
+ symmetricSecretKeyEncoding: params.symmetricSecretKeyEncoding,
+ asymmetricPrivateKey: params.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat: params.asymmetricPrivateKeyFormat,
+ });
+
+ if (encodeJwtResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...encodeJwtResult.error,
+ };
+ }
+
+ if (isNoneAlg(header.alg)) {
+ stateUpdate.encodingWarnings = [
+ `This is an Unsecured JWT as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ ];
+ }
+
+ stateUpdate.jwt = encodeJwtResult.value.jwt.trim();
+
+ const hasHmacToDigitalSignatureAlgChange =
+ isHmacAlg(params.alg) && isDigitalSignatureAlg(header.alg);
+ const hasDigitalSignatureToHmacAlgChange =
+ isHmacAlg(header.alg) && isDigitalSignatureAlg(params.alg);
+
+ if (hasHmacToDigitalSignatureAlgChange) {
+ stateUpdate.controlledAsymmetricPrivateKey = {
+ id: new Date().valueOf(),
+ value: params.asymmetricPrivateKey,
+ format:
+ params.asymmetricPrivateKeyFormat || AsymmetricKeyFormatValues.PEM,
+ };
+
+ stateUpdate.signingErrors = null;
+ }
+
+ if (hasDigitalSignatureToHmacAlgChange) {
+ stateUpdate.controlledSymmetricSecretKey = {
+ id: new Date().valueOf(),
+ value: params.symmetricSecretKey,
+ encoding: params.symmetricSecretKeyEncoding || EncodingValues.UTF8,
+ };
+
+ stateUpdate.signingErrors = null;
+ }
+
+ stateUpdate.signingErrors = null;
+
+ return stateUpdate;
+ }
+
+ async handlePayloadChange(params: {
+ payload: string;
+ header: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ jwt: "",
+ exampleAlg: "",
+ payload: params.payload,
+ payloadErrors: null,
+ encodingWarnings: null,
+ signingErrors: null,
+ };
+
+ const processPayloadResult = this.processPayload({
+ payload: params.payload,
+ });
+
+ if (processPayloadResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processPayloadResult.error,
+ };
+ }
+
+ const { payload } = processPayloadResult.value;
+
+ /**
+ * We only need to parse and validate the header for the encoding process,
+ * not before the parse and validate the payload, which is the focus of this
+ * change handler.
+ */
+ const processHeaderResult = this.processHeader({
+ signingAlgCategory: SigningAlgCategoryValues.ANY,
+ header: params.header,
+ });
+
+ if (processHeaderResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processHeaderResult.error,
+ };
+ }
+
+ const { header } = processHeaderResult.value;
+
+ const encodeJwtResult = isNoneAlg(header.alg)
+ ? await this.encodeUnsecuredJWT(header, payload)
+ : await this.encodeJwt({
+ algType: SigningAlgCategoryValues.ANY,
+ header,
+ payload,
+ symmetricSecretKey: params.symmetricSecretKey,
+ symmetricSecretKeyEncoding: params.symmetricSecretKeyEncoding,
+ asymmetricPrivateKey: params.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat: params.asymmetricPrivateKeyFormat,
+ });
+
+ if (encodeJwtResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...encodeJwtResult.error,
+ };
+ }
+
+ if (isNoneAlg(header.alg)) {
+ stateUpdate.encodingWarnings = [
+ `This is an Unsecured JWT as defined by [Section 6 of RFC 7519](https://datatracker.ietf.org/doc/html/rfc7519#section-6).`,
+ ];
+ }
+
+ stateUpdate.jwt = encodeJwtResult.value.jwt.trim();
+
+ return stateUpdate;
+ }
+
+ async handleSymmetricSecretKeyChange(params: {
+ header: string;
+ payload: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ jwt: "",
+ exampleAlg: "",
+ symmetricSecretKey: params.symmetricSecretKey,
+ encodingWarnings: null,
+ signingErrors: null,
+ };
+
+ if (!params.symmetricSecretKey) {
+ stateUpdate.signingErrors = ["Secret must not be empty."];
+
+ return stateUpdate;
+ }
+
+ const processSymmetricSecretKeyResult =
+ await this.processSymmetricSecretKey({
+ header: params.header,
+ payload: params.payload,
+ symmetricSecretKey: params.symmetricSecretKey,
+ symmetricSecretKeyEncoding: params.symmetricSecretKeyEncoding,
+ });
+
+ if (processSymmetricSecretKeyResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processSymmetricSecretKeyResult.error,
+ };
+ }
+
+ stateUpdate.jwt = processSymmetricSecretKeyResult.value.jwt.trim();
+
+ return stateUpdate;
+ }
+
+ async handleSymmetricSecretKeyEncodingChange(params: {
+ header: string;
+ payload: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ jwt: "",
+ exampleAlg: "",
+ symmetricSecretKeyEncoding: params.symmetricSecretKeyEncoding,
+ encodingWarnings: null,
+ signingErrors: null,
+ };
+
+ const processSymmetricSecretKeyResult =
+ await this.processSymmetricSecretKey({
+ header: params.header,
+ payload: params.payload,
+ symmetricSecretKey: params.symmetricSecretKey,
+ symmetricSecretKeyEncoding: params.symmetricSecretKeyEncoding,
+ });
+
+ if (processSymmetricSecretKeyResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processSymmetricSecretKeyResult.error,
+ };
+ }
+
+ stateUpdate.jwt = processSymmetricSecretKeyResult.value.jwt.trim();
+
+ return stateUpdate;
+ }
+
+ async handleAsymmetricPrivateKeyChange(params: {
+ header: string;
+ payload: string;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ jwt: "",
+ exampleAlg: "",
+ asymmetricPrivateKey: params.asymmetricPrivateKey,
+ encodingWarnings: null,
+ signingErrors: null,
+ };
+
+ const processAsymmetricPrivateKeyResult =
+ await this.processAsymmetricPrivateKey({
+ header: params.header,
+ payload: params.payload,
+ asymmetricPrivateKey: params.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat: params.asymmetricPrivateKeyFormat,
+ });
+
+ if (processAsymmetricPrivateKeyResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processAsymmetricPrivateKeyResult.error,
+ };
+ }
+
+ stateUpdate.jwt = processAsymmetricPrivateKeyResult.value.jwt.trim();
+
+ return stateUpdate;
+ }
+
+ async handleAsymmetricPrivateKeyFormatChange(params: {
+ header: string;
+ payload: string;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ }): Promise> {
+ const stateUpdate: Partial = {
+ jwt: "",
+ exampleAlg: "",
+ asymmetricPrivateKeyFormat: params.asymmetricPrivateKeyFormat,
+ encodingWarnings: null,
+ signingErrors: null,
+ };
+
+ const processAsymmetricPrivateKeyResult =
+ await this.processAsymmetricPrivateKey({
+ header: params.header,
+ payload: params.payload,
+ asymmetricPrivateKey: params.asymmetricPrivateKey,
+ asymmetricPrivateKeyFormat: params.asymmetricPrivateKeyFormat,
+ });
+
+ if (processAsymmetricPrivateKeyResult.isErr()) {
+ return {
+ ...stateUpdate,
+ ...processAsymmetricPrivateKeyResult.error,
+ };
+ }
+
+ stateUpdate.jwt = processAsymmetricPrivateKeyResult.value.jwt.trim();
+
+ return stateUpdate;
+ }
+}
+
+export const TokenEncoderService = new _TokenEncoderService();
diff --git a/src/features/home/components/assets/assets.component.tsx b/src/features/home/components/assets/assets.component.tsx
new file mode 100644
index 00000000..e1ba6e3a
--- /dev/null
+++ b/src/features/home/components/assets/assets.component.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import React, { useCallback } from "react";
+import styles from "./assets.module.scss";
+import { clsx } from "clsx";
+import Image, { StaticImageData } from "next/image";
+import { DownloadIconComponent } from "@/features/common/assets/download-icon.component";
+import Link from "next/link";
+import { BoxComponent } from "@/features/common/components/box/box.component";
+import { JwtDictionaryModel } from "@/features/localization/models/jwt-dictionary.model";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
+import viewOnImg from "./view-on.png";
+import compatibleImg from "./jwt-compatible.png";
+import iconImg from "./jwt.icon.png";
+import iconWithLabelImg from "./jwt-label.icon.png";
+import { createUrlPath } from "@/libs/utils/path.utils";
+import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.config";
+import { Button } from "react-aria-components";
+
+interface DownloadButtonProps {
+ asset: StaticImageData;
+ filename: string;
+}
+
+const DownloadButton: React.FC = ({ asset, filename }) => {
+ const downloadSVG = useCallback(
+ (image: StaticImageData, filename: string) => {
+ const link = document.createElement("a");
+ link.href = image.src;
+ link.download = filename;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ },
+ [],
+ );
+
+ return (
+
+ );
+};
+
+type AssetsComponentProps = {
+ languageCode: string;
+ dictionary: JwtDictionaryModel;
+};
+
+export const AssetsComponent: React.FC = ({
+ languageCode,
+ dictionary,
+}) => {
+ const libraryLinkPath = createUrlPath([
+ languageCode === DEFAULT_LANGUAGE_CODE ? "" : languageCode,
+ dictionary.libraries.ctaButton.path
+ ? dictionary.libraries.ctaButton.path
+ : "",
+ ]);
+
+ return (
+
+
+ );
+};
diff --git a/src/features/home/components/assets/assets.module.scss b/src/features/home/components/assets/assets.module.scss
new file mode 100644
index 00000000..b4d0b408
--- /dev/null
+++ b/src/features/home/components/assets/assets.module.scss
@@ -0,0 +1,132 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.container {
+ @include Container;
+}
+
+.content {
+ @include InnerContentGrid;
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+ row-gap: 2rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ row-gap: unset;
+ }
+}
+
+.assets__column {
+ grid-column: span 6;
+ color: var(--color_fg_default);
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 4;
+ gap: 2rem;
+ }
+}
+
+.assets__title {
+ color: var(--color_fg_bold);
+ font-size: 1.5rem;
+ line-height: 2rem;
+ font-style: normal;
+ font-weight: 500;
+ letter-spacing: -0.5px;
+
+ @media #{$breakpoint-dimension-sm} {
+ }
+}
+
+.assets__description {
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+
+.asset__link {
+ width: fit-content;
+ display: flex;
+ height: 48px;
+ padding: 1rem 1rem;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+
+ border-radius: 6px;
+ background: var(--color_bg_button_primary);
+ color: var(--color_fg_on_button_primary);
+ border: 1px solid var(--color_border_button);
+
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.5rem;
+ letter-spacing: 0.32px;
+
+ &:focus-visible {
+ outline: solid 1px var(--color_border_focus);
+ outline-offset: 0.125rem;
+ border-radius: 0.125rem;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ margin-top: 40px;
+ }
+}
+
+.assets__content {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ gap: 2rem;
+ }
+}
+
+.card {
+ display: flex;
+ justify-content: space-between;
+ padding: 1.5rem 1rem;
+ align-items: center;
+ gap: 1.5rem;
+ flex: 1 0 0;
+ border-radius: 0.5rem;
+ border: 1px solid var(--color_border_bold);
+ background: var(--color_bg_layer_alternate);
+ cursor: pointer;
+ transition: border 0.24s ease-out;
+
+ svg {
+ path {
+ stroke: var(--color_fg_default);
+ }
+ }
+
+ &:hover {
+ border: 1px solid #fbfbfb;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ padding: 2rem 15px;
+ }
+}
+
+.downloadButton {
+ background: var(--color_bg_layer);
+ border-radius: 0.25rem;
+ outline: none;
+ border: none;
+
+ height: 2rem;
+ width: 2rem;
+
+ &:focus-visible {
+ outline: solid 1px var(--color_border_focus);
+ outline-offset: 0.125rem;
+ border-radius: 0.125rem;
+ }
+}
diff --git a/src/features/home/components/assets/jwt-compatible.png b/src/features/home/components/assets/jwt-compatible.png
new file mode 100644
index 00000000..26d1527e
Binary files /dev/null and b/src/features/home/components/assets/jwt-compatible.png differ
diff --git a/src/features/home/components/assets/jwt-label.icon.png b/src/features/home/components/assets/jwt-label.icon.png
new file mode 100644
index 00000000..7805556f
Binary files /dev/null and b/src/features/home/components/assets/jwt-label.icon.png differ
diff --git a/src/features/home/components/assets/jwt.icon.png b/src/features/home/components/assets/jwt.icon.png
new file mode 100644
index 00000000..ed709a08
Binary files /dev/null and b/src/features/home/components/assets/jwt.icon.png differ
diff --git a/src/features/home/components/assets/view-on.png b/src/features/home/components/assets/view-on.png
new file mode 100644
index 00000000..8e36bc10
Binary files /dev/null and b/src/features/home/components/assets/view-on.png differ
diff --git a/src/features/home/components/home-page/home-page.component.tsx b/src/features/home/components/home-page/home-page.component.tsx
new file mode 100644
index 00000000..ab9f907b
--- /dev/null
+++ b/src/features/home/components/home-page/home-page.component.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+import { HeroComponent } from "@/features/common/components/hero/hero.component";
+import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component";
+import {
+ getHomeDictionary,
+ getJwtDictionary,
+} from "@/features/localization/services/language-dictionary.service";
+import { AssetsComponent } from "@/features/home/components/assets/assets.component";
+import { EbookComponent } from "@/features/common/components/ebook/ebook.component";
+import { StructuredData } from "@/features/seo/components/structured-data.component";
+import { HeroModalStateValues } from "@/features/home/values/hero-modal-state.values";
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+import { DebuggerWidgetComponent } from "@/features/debugger/components/debugger-widget/debugger-widget.component";
+import { getAuth0Dictionary } from "@/features/localization/services/ui-language-dictionary.service";
+
+interface HomePageComponentProps {
+ languageCode: string;
+ decodedHeaderInitialTabId: string;
+ decodedPayloadInitialTabId: string;
+ decodedHeaderDescriptionVisibility: ClaimDescriptionVisibilityValues;
+ decodedPayloadDescriptionVisibility: ClaimDescriptionVisibilityValues;
+ jwtInfoState: HeroModalStateValues;
+ jwtWarningState: HeroModalStateValues;
+ // debuggerInitialMode: DebuggerModeValues;
+}
+
+export const HomePageComponent: React.FC = ({
+ languageCode,
+ decodedHeaderInitialTabId,
+ decodedPayloadInitialTabId,
+ decodedHeaderDescriptionVisibility,
+ decodedPayloadDescriptionVisibility,
+ jwtInfoState,
+ jwtWarningState,
+ // debuggerInitialMode,
+}) => {
+ const homeDictionary = getHomeDictionary(languageCode);
+ const auth0Dictionary = getAuth0Dictionary(languageCode);
+ const jwtDictionary = getJwtDictionary(languageCode);
+
+ return (
+ <>
+ = ({ copy }) => {
+ return (
+
+
+ );
+};
diff --git a/src/features/introduction/components/ebook-ad/ebook-ad.module.scss b/src/features/introduction/components/ebook-ad/ebook-ad.module.scss
new file mode 100644
index 00000000..bcb519a5
--- /dev/null
+++ b/src/features/introduction/components/ebook-ad/ebook-ad.module.scss
@@ -0,0 +1,30 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.content {
+ @include InnerContentFlex;
+ position: relative;
+ max-width: $article-max-width;
+
+ background: linear-gradient(290deg, #f4d -18.75%, #3f59e4 98.79%);
+
+ border-radius: 0.5rem;
+ padding: 1rem;
+ margin: 1rem auto 2rem auto;
+ color: $Neutral0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.copy {
+ font-weight: 400;
+
+ & strong {
+ font-weight: 500;
+ }
+
+ & a {
+ font-weight: 500;
+ text-decoration: underline;
+ }
+}
diff --git a/src/features/introduction/components/introduction-article/introduction-article.component.tsx b/src/features/introduction/components/introduction-article/introduction-article.component.tsx
new file mode 100644
index 00000000..1a59409c
--- /dev/null
+++ b/src/features/introduction/components/introduction-article/introduction-article.component.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import { getIntroductionContent } from "@/features/localization/services/ui-language-content.service";
+import { ArticleComponent } from "@/features/common/components/article/article.component";
+
+interface IntroductionArticleComponentProps {
+ languageCode: string;
+}
+
+export const IntroductionArticleComponent: React.FC<
+ IntroductionArticleComponentProps
+> = ({ languageCode }) => {
+ const { Component: Introduction } = getIntroductionContent({ languageCode });
+
+ return (
+
+
+ );
+};
diff --git a/src/features/introduction/components/introduction-hero/introduction-hero.component.tsx b/src/features/introduction/components/introduction-hero/introduction-hero.component.tsx
new file mode 100644
index 00000000..2415cf42
--- /dev/null
+++ b/src/features/introduction/components/introduction-hero/introduction-hero.component.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./introduction-hero.module.scss";
+import { BoxComponent } from "@/features/common/components/box/box.component";
+import { clsx } from "clsx";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
+import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model";
+
+interface IntroductionHeroComponentProps {
+ languageCode: string;
+ dictionary: IntroductionDictionaryModel["hero"];
+}
+
+export const IntroductionHeroComponent: React.FC<
+ IntroductionHeroComponentProps
+> = ({ languageCode, dictionary }) => {
+ return (
+
+
+ );
+};
diff --git a/src/features/introduction/components/introduction-hero/introduction-hero.module.scss b/src/features/introduction/components/introduction-hero/introduction-hero.module.scss
new file mode 100644
index 00000000..02baf3c4
--- /dev/null
+++ b/src/features/introduction/components/introduction-hero/introduction-hero.module.scss
@@ -0,0 +1,40 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.container {
+ @include Container;
+
+ background: var(--color_bg_page);
+ border-bottom: 1px solid var(--color_border_bold);
+}
+
+.content {
+ @include InnerContentFlex;
+ flex-direction: column;
+ align-items: center;
+
+ padding-top: 2.5rem;
+ padding-bottom: 2.5rem;
+
+ @media #{$breakpoint-dimension-xs} {
+ padding-top: 4.5rem;
+ padding-bottom: 4.5rem;
+ }
+}
+
+.title {
+ color: var(--color_fg_bold);
+ text-align: center;
+ font-size: 2rem;
+ line-height: 2.5rem;
+ font-weight: 400;
+ letter-spacing: -0.96px;
+
+ @media #{$breakpoint-dimension-xs} {
+ font-size: 2.5rem;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ font-size: 3rem;
+ }
+}
diff --git a/src/features/introduction/components/introduction-page/introduction-page.component.tsx b/src/features/introduction/components/introduction-page/introduction-page.component.tsx
new file mode 100644
index 00000000..7e4a65a4
--- /dev/null
+++ b/src/features/introduction/components/introduction-page/introduction-page.component.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { StructuredData } from "@/features/seo/components/structured-data.component";
+import { generateArticleStructuredData } from "@/features/seo/services/structured-data.service";
+import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component";
+import { getIntroductionDictionary } from "@/features/localization/services/language-dictionary.service";
+import { IntroductionArticleComponent } from "@/features/introduction/components/introduction-article/introduction-article.component";
+import { IntroductionHeroComponent } from "@/features/introduction/components/introduction-hero/introduction-hero.component";
+import { EbookAdComponent } from "@/features/introduction/components/ebook-ad/ebook-ad.component";
+import { getAuth0Dictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { getComponentDictionary } from "@/features/localization/services/component-dictionary.service";
+
+interface IntroductionPageComponentProps {
+ languageCode: string;
+}
+
+export const IntroductionPageComponent: React.FC<
+ IntroductionPageComponentProps
+> = ({ languageCode }) => {
+ const introductionDictionary = getIntroductionDictionary(languageCode);
+ const auth0Dictionary = getAuth0Dictionary(languageCode);
+ const componentDictionary = getComponentDictionary(languageCode);
+
+ return (
+ <>
+ RFC 7519 ) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the **HMAC** algorithm) or a public/private key pair using **RSA** or **ECDSA**.
+
+Although JWTs can be encrypted to also provide secrecy between parties, we will focus on *signed* tokens. Signed tokens can verify the *integrity* of the claims contained within it, while encrypted tokens *hide* those claims from other parties. When tokens are signed using public/private key pairs, the signature also certifies that only the party holding the private key is the one that signed it.
+
+## When should you use JSON Web Tokens?
+Here are some scenarios where JSON Web Tokens are useful:
+
+- **Authorization**: This is the most common scenario for using JWT. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token. Single Sign On is a feature that widely uses JWT nowadays because of its small overhead and its ability to be easily used across different domains.
+- **Information Exchange**: JSON Web Tokens are a good way of securely transmitting information between parties. Because JWTs can be signed—for example, using public/private key pairs—you can be sure the senders are who they say they are. Additionally, as the signature is calculated using the header and the payload, you can also verify that the content hasn't been tampered with.
+
+## What is the JSON Web Token structure?
+In its compact form, JSON Web Tokens consist of three parts separated by dots (`.`), which are:
+
+- Header
+- Payload
+- Signature
+
+Therefore, a JWT typically looks like the following:
+
+```
+xxxxx.yyyyy.zzzzz
+```
+
+Let's break down the different parts.
+
+### Header
+
+The header *typically* consists of two parts: the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.
+
+For example:
+
+```
+{
+ "alg": "HS256",
+ "typ": "JWT"
+}
+```
+
+Then, this JSON is **Base64Url** encoded to form the first part of the JWT.
+
+### Payload
+
+The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data.
+There are three types of claims: *registered*, *public*, and *private* claims.
+
+- **Registered claims** : These are a set of predefined claims which are not mandatory but recommended, to provide a set of useful, interoperable claims. Some of them are: **iss** (issuer), **exp** (expiration time), **sub** (subject), **aud** (audience), and [others](https://tools.ietf.org/html/rfc7519#section-4.1).
+> Notice that the claim names are only three characters long, as JWT is meant to be compact.
+- **Public claims** : These can be defined at will by those using JWTs. But to avoid collisions, they should be defined in the [IANA JSON Web Token Registry](https://www.iana.org/assignments/jwt/jwt.xhtml) or be defined as a URI that contains a collision-resistant namespace.
+- **Private claims** : These are the custom claims created to share information between parties that agree on using them and are neither *registered* or *public* claims.
+
+An example payload could be:
+
+```
+{
+ "sub": "1234567890",
+ "name": "John Doe",
+ "admin": true
+}
+```
+
+The payload is then **Base64Url** encoded to form the second part of the JSON Web Token.
+
+> Do note that for signed tokens, this information, though protected against tampering, is readable by anyone. Do not put secret information in the payload or header elements of a JWT unless it is encrypted.
+
+### Signature
+To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
+
+For example, if you want to use the HMAC SHA256 algorithm, the signature will be created in the following way:
+
+```
+HMACSHA256(
+ base64UrlEncode(header) + "." +
+ base64UrlEncode(payload),
+ secret)
+```
+
+The signature is used to verify the message wasn't changed along the way, and, in the case of tokens signed with a private key, it can also verify that the sender of the JWT is who it says it is.
+
+### Putting all together
+
+The output is three Base64-URL strings separated by dots that can be easily passed in HTML and HTTP environments, while being more compact when compared to XML-based standards such as SAML.
+
+The following shows a JWT that has the previous header and payload encoded, and it is signed with a secret.
+
+jwt.io Debugger to decode, verify, and generate JWTs.
+
+should not store sensitive session data in browser storage due to lack of security .
+
+Whenever the user wants to access a protected route or resource, the user agent should send the JWT, typically in the **Authorization** header using the **Bearer** schema. The content of the header should look like the following:
+
+```
+Authorization: Bearer
+```
+
+This can be, in certain cases, a stateless authorization mechanism. The server's protected routes will check for a valid JWT in the `Authorization` header, and if it's present, the user will be allowed to access protected resources. If the JWT contains the necessary data, the need to query the database for certain operations may be reduced, though this may not always be the case.
+
+Note that if you send JWT tokens through HTTP headers, you should try to prevent them from getting too big. Some servers don't accept more than 8 KB in headers. If you are trying to embed too much information in a JWT token, like by including all the user's permissions, you may need an alternative solution, like Auth0 Fine-Grained Authorization .
+
+If the token is sent in the `Authorization` header, Cross-Origin Resource Sharing (CORS) won't be an issue as it doesn't use cookies.
+
+The following diagram shows how a JWT is obtained and used to access APIs or resources:
+
+OpenID Connect compliant web application will go through the `/oauth/authorize` endpoint using the authorization code flow .
+2. When the authorization is granted, the authorization server returns an access token to the application.
+3. The application uses the access token to access a protected resource (like an API).
+
+Do note that with signed tokens, all the information contained within the token is exposed to users or other parties, even though they are unable to change it. This means you should not put secret information within the token.
+
+## Why should we use JSON Web Tokens?
+
+Let's talk about the benefits of **JSON Web Tokens (JWT)** when compared to **Simple Web Tokens (SWT)** and **Security Assertion Markup Language Tokens (SAML)**.
+
+As JSON is less verbose than XML, when it is encoded, its size is also smaller, making JWT more compact than SAML. This makes JWT a good choice to be passed in HTML and HTTP environments.
+
+Security-wise, SWT can only be symmetrically signed by a shared secret using the HMAC algorithm. However, JWT and SAML tokens can use a public/private key pair in the form of an X.509 certificate for signing. Signing XML with an XML Digital Signature without introducing obscure security holes is very difficult compared to the simplicity of signing a JSON.
+
+JSON parsers are common in most programming languages because they map directly to objects. Conversely, XML doesn't have a natural document-to-object mapping. This makes it easier to work with JWT than SAML assertions.
+
+Regarding usage, JWT is used at the Internet scale. This highlights the ease of client-side processing of the JSON Web token on multiple platforms, especially mobile.
+
+JSON Web Token landing page at Auth0.
+
+## Difference Between Validating and Verifying a JWT
+
+JSON Web Token (JWT) validation and verification are crucial for security, but they address slightly different aspects of JWT security: validation ensures the token is well-formed and contains enforceable claims; verification ensures the token is genuine and unmodified.
+
+Let's explore in more detail how validation and verification differ:
+
+**JWT validation** generally refers to checking the structure, format, and content of the JWT:
+
+- **Structure**: Ensuring the token has the standard three parts (header, payload, signature) separated by dots.
+- **Format**: Verifying that each part is correctly encoded (Base64URL) and that the payload contains expected claims.
+- **Content**: Checking if the claims within the payload are correct, such as expiration time (exp), issued at (iat), not before (nbf), among others, to ensure the token isn't expired, isn't used before its time, etc.
+
+**JWT verification**, on the other hand, involves confirming the authenticity and integrity of the token:
+
+- **Signature Verification**: This is the primary aspect of verification where the signature part of the JWT is checked against the header and payload. This is done using the algorithm specified in the header (like HMAC, RSA, or ECDSA) with a secret key or public key. If the signature doesn't match what's expected, the token might have been tampered with or is not from a trusted source.
+- **Issuer Verification**: Checking if the iss claim matches an expected issuer.
+- **Audience Check**: Ensuring the aud claim matches the expected audience.
+
+In practical terms:
+
+You validate a JWT to make sure the token makes sense, adheres to the expected standards, contains the right data.
+
+You verify a JWT to make sure the token hasn't been altered maliciously and comes from a trusted source.
+
+In many systems, these steps are often combined into what might be colloquially called "JWT verification" which encompasses both validation and verification for comprehensive security checks. Nonetheless, their distinction remains.
+
+
+## Difference Between Decoding and Encoding a JWT
+
+Encoding a JWT involves transforming the header and payload into a compact, URL-safe format. The header, which states the signing algorithm and token type, and the payload, which includes claims like subject, expiration, and issue time, are both converted to JSON then Base64URL encoded. These encoded parts are then concatenated with a dot, after which a signature is generated using the algorithm specified in the header with a secret or private key. This signature is also Base64URL encoded, resulting in the final JWT string that represents the token in a format suitable for transmission or storage.
+
+Decoding a JWT reverses this process by converting the Base64URL encoded header and payload back into JSON, allowing anyone to read these parts without needing a key. However, "decoding" in this context often extends to include verification of the token's signature. This verification step involves re-signing the decoded header and payload with the same algorithm and key used initially, then comparing this new signature with the one included in the JWT. If they match, it confirms the token's integrity and authenticity, ensuring it hasn't been tampered with since issuance.
diff --git a/src/features/introduction/docs/ja.introduction.mdx b/src/features/introduction/docs/ja.introduction.mdx
new file mode 100644
index 00000000..02e51cd0
--- /dev/null
+++ b/src/features/introduction/docs/ja.introduction.mdx
@@ -0,0 +1,168 @@
+import { MdxAnchorComponent } from "@/features/common/components/markdown/mdx-anchor.component";
+import { MarkdownImage } from "@/features/common/components/markdown/markdown-image";
+
+## JSON Web Tokenとは？
+
+JSON Web Token (JWT) は標準規格(RFC 7519 )で定義されています。この仕様は認証、認可の情報をJSON形式でシステム間で安全にやりとりする際に使用できる、コンパクトで自己完結型のフォーマットを定義しています。デジタル署名を付与することもできるため、検証可能で信頼がおけます。JWTへの署名には共通鍵を使用するHMACアルゴリズムあるいは、公開鍵/秘密鍵ペアを使用するRSAまたはECDSAアルゴリズムを使用できます。
+
+JWTは機密性を保つために暗号化することもできますが、ここでは 署名されたJWT に焦点を当てます。署名されたJWTは完全性を検証でき、暗号化されたトークンは内容を他者から隠すことができます。JWTが秘密鍵を用いて署名された場合、その署名は公開鍵を使うことで、秘密鍵を持つ当事者だけがそのJWTに署名した者であることが確認できます。
+
+## JSON Web Tokenはいつ使用すべきか？
+JSON Web Tokenが役立つシナリオをいくつかご紹介します。
+
+- **認証および認可**: JWTを使用する最も一般的な利用用途です。ユーザーがログインすると、その後の各リクエストにはJWTが含まれ、ユーザーはそのJWTで許可されたエンドポイント、リソースにアクセスできます。オーバーヘッドが小さく、異なるドメインのシステム間で簡単に使用できるため、シングルサインオンやSPAやモバイルアプリケーション、APIの呼び出しなどでJWTが使用されています。
+- **情報交換**: JSON Web Tokenは、システム間で認証や認可の情報を安全にやりとりする際に優れた形式です。JWTには署名できるため、例えば公開鍵/秘密鍵のペアを使用して、送信者が本人であることを確認できます。さらに、署名はヘッダーとペイロードを使って計算して作成されるため、コンテンツが改ざんされていないことも確認できます。
+
+## JSON Web Tokenの構成は？
+JSON Web Tokenはコンパクトな形態で、ドット（.）で区切られた以下の3つの部分で構成されます。
+
+- ヘッダー
+- ペイロード
+- 署名
+
+したがって、JWTは一般的に以下のように示されます。
+
+```
+xxxxx.yyyyy.zzzzz
+```
+
+これらの構成部分を見ていきましょう。
+
+### ヘッダー
+
+ヘッダーは通常、JWTであるタイプと、HMACとSHA256の組み合わせ(HS256)やRSAとSHA256の組み合わせ(RS256)などのハッシュアルゴリズムの2つの項目で構成されています。
+
+例：
+
+```
+{
+ "alg": "HS256",
+ "typ": "JWT"
+}
+```
+
+その後、このJSONはBase64Url形式でエンコードされ、JWTの最初の部分を形成します。
+
+### ペイロード
+
+2番目の部分は、クレームを含むペイロードです。クレームは、エンティティ (通常はユーザー) と追加のメタデータに関する情報です。
+クレームには予約済み、パブリック、プライベートの3種類があります。
+
+- **予約済みのクレーム** : 標準規格で定義されているクレームです。必須ではありませんが、相互運用可能なクレームを使用でき、利便性も高いため使用が推奨されています。その中には、**iss**（発行者）、**exp**（有効期限）、**sub**（サブジェクト）、**aud**（オーディエンス）、[その他](https://tools.ietf.org/html/rfc7519#section-4.1)のクレームなどがあります。
+> クレーム名がわずか3文字ですが、これはJWTがコンパクトであることを目的としているためです。
+- **パブリッククレーム** : JWTを使用するユーザーは、これを自由に定義できます。しかし、衝突を回避するには[IANA JSON Web Token (JWT) レジストリ](https://www.iana.org/assignments/jwt/jwt.xhtml)で登録するか、衝突に強い名前空間を含むURIとして定義する必要があります。
+- **プライベートクレーム** : これらのカスタムクレームは、その使用に同意したパーティ間での情報共有を可能にするものであり、予約済みのクレーム、あるいはパブリックのクレームではありません。
+
+以下はペイロードの例です。
+
+```
+{
+ "sub": "1234567890",
+ "name": "John Doe",
+ "admin": true
+}
+```
+
+その後、ペイロードは**Base64Url**形式でエンコードされ、JSON Web Tokenの2番目の部分を形成します。
+
+> 署名付きトークンの場合でも、改ざんを防いではいますが、この情報は誰でも読むことができることに注意してください。暗号化しない限り、JWTのペイロードやヘッダー要素に機密性のある情報を入れないようにしてください。
+
+### 署名
+署名部分を作成するには、エンコードされたヘッダー、エンコードされたペイロード、シークレット、ヘッダーで指定されたアルゴリズムを使用して署名を行います。
+
+たとえば、HMAC SHA256アルゴリズムを使用する場合、署名は次のように生成されます。
+
+```
+HMACSHA256(
+ base64UrlEncode(header) + "." +
+ base64UrlEncode(payload),
+ secret)
+```
+
+署名はメッセージが途中で変更されていないことを検証するために使用されます。秘密鍵で署名されたトークンは、JWTの送信元が正しくそのシステムであることを検証できます。
+
+### すべてを組み合わせる
+
+出力はドットで区切られた3つのBase64Url形式の文字列であり、HTMLやHTTP環境で簡単に使用できます。また、SAMLのようなXMLベースの標準と比べて、よりコンパクトです。
+
+以下は、先ほどのヘッダーとペイロードをエンコードし、シークレットで署名したJWTの例です。
+
+jwt.ioデバッガー を使用してJWTのデコード、検証、生成を実行できます。
+
+
+```
+
+これはステートレスな認証メカニズムになります。サーバーの保護されたエンドポイントは、`Authorization`ヘッダーに有効なJWTがあるかどうかを確認し、存在した場合には、ユーザーは保護されたリソースへのアクセスを許可されます。JWTにリクエストされた操作に必要なユーザーについてのデータが含まれていれば、データベースへの問い合わせを減らせる可能性があります。ただし、必ずしもそうなるとは限りません。
+
+JWTトークンをHTTPヘッダーで送信する場合は、トークンのサイズが大きくなりすぎないようにする必要があります。サーバーによっては、8KB以上のヘッダーを受け付けないものもあります。例えばユーザーの権限を管理する場合は、トークンに権限情報を集中させるのではなく、Auth0 Fine-Grained Authorization のようなソリューションの利用も検討できます。
+
+以下の図は、JWTが取得され、APIやリソースへのアクセスに使用される流れを示しています。
+
+OpenID Connect 準拠のウェブアプリケーションは、認可コードフロー を使って「/oauth/authorize」エンドポイントにアクセスします。
+2. 認可が行われると、認可コードがウェブアプリケーションに渡され、ウェブアプリケーションはこの認可コードを使用し「/oauth/token」エンドポイントに対してアクセストークンをリクエストします。認可サーバーはアクセストークンをアプリケーションに返します。
+3. アプリケーションはアクセストークンを使って（APIのような）保護されたリソースにアクセスします。
+
+署名付きトークンの場合、トークンに含まれるすべての情報は、ユーザーやアクセスを許可をしているサードパーティーに公開されます。その情報が変更されることはありませんが、トークンの中にユーザやサードパーティに知られたくないような機密情報を入れないようにご注意して下さい。
+
+## JSON Web Tokenを使用すべき理由とは？
+
+**JSON Web Token (JWT)** の利点について、**Simple Web Token (SWT)** および XML を使用する **Security Assertion Markup Language Token (SAML)** と比較してみましょう。
+
+JSONはXMLよりも冗長でないため、エンコード後のサイズも小さくなり、JWTはSAMLよりもコンパクトになります。このため、JWTはHTMLやHTTPの環境に適した選択肢となります。
+
+セキュリティ上の観点でいうと、SWTは共通鍵を使用するHMACアルゴリズムによってのみ署名できます。SAMLでは公開鍵/秘密鍵のペアを使用する複数のアルゴリズムから選択して署名できます。しかし、セキュリティホールを発生させずに、XMLデジタル署名を使用してXMLに署名することは、JWTへの署名のシンプルさに比べて非常に複雑です。
+
+JSONパーサーは、オブジェクトに直接マッピングできるため、ほとんどのプログラミング言語において一般的になっています。しかし、SAMLで使用されるXMLにはドキュメントからオブジェクトへの自然なマッピングはできません。そのため、JWTを使用する方が、SAMLよりも簡単です。
+
+利用実績についていうと、JWTはインターネット規模で使われています。これは複数のプラットフォーム、特にモバイルでのJWTのクライアント側処理の容易さを表しています。
+
+JSON Web Tokenランディングページ をご覧ください。
+
+## JWTのバリデーション（妥当性確認）とベリフィケーション（検証）の違い
+
+JSON Web Token（JWT）のバリデーション（妥当性確認）とベリフィケーション（検証）はセキュリティ上非常に重要ですが、JWTセキュリティの異なる側面に対応しています。バリデーションはトークンが適切に構成され、強制可能なクレームを含んでいることを確認します。ベリフィケーションはトークンが真正で、変更されていないことを確認します。
+
+バリデーションとベリフィケーションの違いについて、さらに詳しく見てみましょう。
+
+**JWTのバリデーション**とは一般的に、JWTの構造、フォーマット、およびコンテンツの確認を指します。
+
+- **構造**: トークンが標準の3つの部分（ヘッダー、ペイロード、署名）をドットで区切って構成されていることを確認します。
+- **フォーマット**: 各部分が正しくエンコード（Base64URL）されていること、およびペイロードが期待されるクレームを含んでいることを確認します。
+- **コンテンツ**: 有効期限（exp）、発行日時（iat）、有効期限以前の日時（nbf）など、ペイロード内のクレームが正しいかどうかを確認し、トークンが期限切れになっていないこと、有効期限以前に使用されていないことなどを確認します。
+
+一方、**JWTのベリフィケーション**では、トークンの真正性と完全性を検証します。
+
+- **署名の検証**: これは検証の主な側面であり、JWTの署名部分をヘッダーとペイロードと照合します。これは、秘密鍵または公開鍵を使用して、ヘッダーで指定されたアルゴリズム（HMAC、RSA、ECDSAなど）を使用して行われます。署名が期待されるものと一致しない場合、トークンが改ざんされているか、信頼できるソースからのものではない可能性があります。
+- **発行者検証**: issクレームが期待される発行者に一致しているかを検証します。
+- **オーディエンスチェック**: audクレームが期待されるオーディエンスに一致していることを検証します。
+
+実運用の観点:
+
+バリデーションでは、JWTが妥当であり、期待される標準に準拠し、正しいデータを含んでいることを確認します。
+
+ベリフィケーションでは、JWTが悪意を持って改ざんされていないこと、および信頼できるソースから発行されていることを検証します。
+
+多くのシステムでは、これらの手順は、包括的なセキュリティチェックにおける妥当性の確認と検証の両方を包含する「JWT検証」と呼ばれるものにまとめられることが多々ありますが、両者の区別は存在します。
+
+
+## JWTのデコーディングとエンコーディングの違い
+
+JWTのエンコーディングでは、ヘッダーとペイロードをコンパクトでURLに適した形式に変換します。署名アルゴリズムとトークンタイプを記載するヘッダーと、サブジェクト、有効期限、発行時間などのクレームを含むペイロードの両方をJSONに変換しBase64URLエンコードします。これらのエンコードされた部分は、ドット(.)で連結され、その後、ヘッダーで指定されたアルゴリズムを使用して、シークレットキーまたはプライベートキーで署名が生成されます。この署名もBase64URLエンコードされ、送信や保存に適した形式でトークンを表す最終的なJWT文字列が生成されます。
+
+JWTのデコーディングでは、このプロセスを逆に行い、Base64URLエンコードされたヘッダーとペイロードを再びJSONに変換します。この段階ではキーを必要とせずに誰でもヘッダーおよびペイロードの情報を読み取れます。しかし、この文脈における「デコーディング」は、多くの場合、トークンの署名検証を含んでいます。この検証（ベリフィケーション）ステップでは、エンコーディングに使用したのと同じアルゴリズムとキーを使用し、デコードされたヘッダーとペイロードを再度署名します。新しい署名を元々のJWTに含まれる署名と比較し、両者が一致することでトークンの完全性と真正性が確認され、発行後に改ざんされていないことが保証されます。
diff --git a/src/features/libraries/components/check-mark.component.tsx b/src/features/libraries/components/check-mark.component.tsx
new file mode 100644
index 00000000..9c2b96cd
--- /dev/null
+++ b/src/features/libraries/components/check-mark.component.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+type CheckMarkComponentProps = {};
+
+export const CheckMarkComponent: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/src/features/libraries/components/chevon-down-icon.component.tsx b/src/features/libraries/components/chevon-down-icon.component.tsx
new file mode 100644
index 00000000..5451d7ec
--- /dev/null
+++ b/src/features/libraries/components/chevon-down-icon.component.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+type CheckMarkComponentProps = {};
+
+export const ChevronDownIconComponent: React.FC<
+ CheckMarkComponentProps
+> = () => {
+ return (
+
+ );
+};
diff --git a/src/features/libraries/components/github-icon.component.tsx b/src/features/libraries/components/github-icon.component.tsx
new file mode 100644
index 00000000..d4b5b1b7
--- /dev/null
+++ b/src/features/libraries/components/github-icon.component.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+type CheckMarkComponentProps = {};
+
+export const GithubIconComponent: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/src/features/libraries/components/library-card/library-card..module.scss b/src/features/libraries/components/library-card/library-card..module.scss
new file mode 100644
index 00000000..b2972219
--- /dev/null
+++ b/src/features/libraries/components/library-card/library-card..module.scss
@@ -0,0 +1,160 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.container {
+ grid-column: span 1;
+ display: flex;
+ flex-direction: column;
+
+ border-radius: 1rem;
+ border: 1px solid var(--color_border_bold);
+ overflow: hidden;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem 1.5rem;
+ color: var(--color_fg_bold);
+
+ font-size: 1rem;
+ font-style: normal;
+ line-height: 1.25rem;
+
+ border-bottom: 1px solid var(--color_border_bold);
+ background: var(--color_bg_layer_alternate);
+}
+
+.logo {
+ border: 1px solid var(--color_border_bold);
+ border-radius: 50%;
+ padding: 0.25rem;
+ background: white;
+}
+
+.content {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ padding: 1.5rem;
+ border-bottom: 1px solid var(--color_border_bold);
+ background: var(--color_bg_layer_alternate);
+}
+
+.minVersion {
+ grid-column: 1 / -1;
+ background-color: var(--color_bg_state_caution_subtle);
+ color: var(--color_fg_on_state_caution_subtle);
+ padding: 0.5rem 1.5rem;
+ text-transform: uppercase;
+ font-size: 0.75rem;
+ letter-spacing: 0.2px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.minVersion__resourceLabel {
+ text-transform: none;
+ text-decoration: underline;
+ letter-spacing: 0;
+}
+
+.config,
+.algs {
+ display: flex;
+ flex-direction: column;
+ list-style-type: none;
+ gap: 0.75rem;
+
+ & li {
+ height: 1.5rem;
+
+ code {
+ padding: 1px 0.125rem;
+ border-radius: 0.125rem;
+ color: var(--color_code_dark_blue);
+ background-color: var(--color_bg_layer_bold);
+ font-size: 0.875rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 1.25rem; /* 142.857% */
+ }
+ }
+}
+
+.listItem {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--color_fg_default);
+}
+
+.metadata {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.25rem 1.5rem;
+
+ border-bottom: 1px solid var(--color_border_bold);
+ background: var(--color_bg_layer_alternate);
+
+ color: var(--color_fg_default);
+ font-size: 0.75rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 140%;
+ letter-spacing: 0.18px;
+
+ svg {
+ path {
+ fill: var(--color_fg_default);
+ }
+ }
+}
+
+.author {
+ display: flex;
+}
+
+.author__name {
+ display: flex;
+ align-items: center;
+ line-height: 0;
+ gap: 0.25rem;
+}
+
+.repo {
+ display: flex;
+ gap: 1rem;
+}
+
+.repo__stars {
+ display: flex;
+ align-items: center;
+ line-height: 0;
+ gap: 0.25rem;
+}
+
+.repo__url {
+ display: flex;
+ align-items: center;
+ line-height: 0;
+ gap: 0.25rem;
+}
+
+.command {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: 1.5rem;
+
+ background: var(--color_bg_code-editor);
+ color: var(--color_code_inverse);
+ text-wrap: wrap;
+ overflow: hidden;
+ word-break: break-word;
+
+ font-size: 0.75rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 1.25rem;
+}
diff --git a/src/features/libraries/components/library-card/library-card.component.tsx b/src/features/libraries/components/library-card/library-card.component.tsx
new file mode 100644
index 00000000..319bb988
--- /dev/null
+++ b/src/features/libraries/components/library-card/library-card.component.tsx
@@ -0,0 +1,247 @@
+import React from "react";
+import styles from "./library-card..module.scss";
+import { LibraryModel } from "@/features/libraries/models/library.model";
+import { CheckMarkComponent } from "@/features/libraries/components/check-mark.component";
+import { QuestionMarkComponent } from "@/features/libraries/components/question-mark.component";
+import { XMarkComponent } from "@/features/libraries/components/x-mark.component";
+import Image from "next/image";
+import { clsx } from "clsx";
+import { getLocalizedSecondaryFont, MonoFont } from "@/libs/theme/fonts";
+import ReactMarkdown from "react-markdown";
+import { UserIconComponent } from "@/features/libraries/components/user-icon.component";
+import { StarIconComponent } from "@/features/libraries/components/star-icon.component";
+import { GithubIconComponent } from "@/features/libraries/components/github-icon.component";
+import rehypeRaw from "rehype-raw";
+import { LibrariesDictionaryModel } from "@/features/localization/models/libraries-dictionary.model";
+import Link from "next/link";
+
+interface ConfigItemComponentProps {
+ isSupported: boolean | undefined;
+ label: string;
+ code?: string;
+}
+
+export const ConfigItemComponent: React.FC = ({
+ label,
+ isSupported,
+ code,
+}) => {
+ if (code) {
+ return (
+
+ {isSupported === undefined ? (
+
+ );
+ }
+
+ return (
+
+ {isSupported === undefined ? (
+
+ );
+};
+
+interface AlgItemComponentProps {
+ isSupported: boolean | undefined;
+ label: string;
+}
+
+export const AlgItemComponent: React.FC = ({
+ label,
+ isSupported,
+}) => {
+ return (
+
+ {isSupported === undefined ? (
+
+ );
+};
+
+interface LibraryCardComponentProps {
+ languageCode: string;
+ category: { name: string; image: string; bgColor: string };
+ library: LibraryModel;
+ dictionary: LibrariesDictionaryModel["result"];
+}
+
+export const LibraryCardComponent: React.FC = ({
+ languageCode,
+ category,
+ library,
+ dictionary,
+}) => {
+ const { name, image } = category;
+ const {
+ support,
+ installCommandMarkdown,
+ authorName,
+ authorUrl,
+ stars,
+ repoUrl,
+ minimumVersion,
+ } = library;
+
+ const command = installCommandMarkdown.join("
"); + + return ( + = ({
+ languageCode,
+ query,
+ categoryOptions,
+ dictionary,
+}) => {
+ const searchParams = useSearchParams();
+ const pathname = usePathname();
+ const { replace } = useRouter();
+
+ const handleSelection = (selection: string) => {
+ const params = new URLSearchParams(searchParams);
+
+ if (selection) {
+ params.set(LIBRARIES_FILTER_QUERY_PARAM_KEY, selection);
+ } else {
+ params.delete(LIBRARIES_FILTER_QUERY_PARAM_KEY);
+ }
+
+ replace(`${pathname}?${params.toString()}`);
+ };
+
+ const options = useMemo(() => {
+ return [
+ {
+ value: dictionary.filterPicker.defaultValue.value,
+ label: dictionary.filterPicker.defaultValue.label,
+ },
+ ...categoryOptions.map((categoryOption) => {
+ return {
+ value: categoryOption.id,
+ label: categoryOption.name,
+ };
+ }),
+ ];
+ }, [
+ categoryOptions,
+ dictionary.filterPicker.defaultValue.label,
+ dictionary.filterPicker.defaultValue.value,
+ ]);
+
+ return (
+
+
+ );
+};
diff --git a/src/features/libraries/components/library-hero/library-hero.module.scss b/src/features/libraries/components/library-hero/library-hero.module.scss
new file mode 100644
index 00000000..dbff04ba
--- /dev/null
+++ b/src/features/libraries/components/library-hero/library-hero.module.scss
@@ -0,0 +1,101 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.container {
+ @include Container;
+}
+
+.content {
+ @include InnerContentFlex;
+ flex-direction: column;
+ align-items: center;
+
+ padding-top: 2.5rem;
+ padding-bottom: 3.5rem;
+
+ @media #{$breakpoint-dimension-xs} {
+ padding-top: 3.5rem;
+ padding-bottom: 3.5rem;
+ }
+
+ @media #{$breakpoint-dimension-md} {
+ padding-top: 4.5rem;
+ padding-bottom: 4.5rem;
+ }
+}
+
+.hero {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ width: 100%;
+
+ @media #{$breakpoint-dimension-xs} {
+ gap: 1rem;
+ }
+
+ @media #{$breakpoint-dimension-md} {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.heroTitle {
+ color: var(--color_fg_bold);
+
+ font-size: 2rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 2.5rem;
+ letter-spacing: -0.8px;
+
+ @media #{$breakpoint-dimension-xs} {
+ font-size: 2.5rem;
+ line-height: 3rem;
+ }
+}
+
+.filter {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.label {
+ color: var(--color_fg_bold);
+ font-size: 1rem;
+ line-height: 1.5rem;
+ letter-spacing: 0.1px;
+}
+
+.select__wrapper {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+}
+
+.select {
+ display: flex;
+ width: 160px;
+ flex-direction: column;
+ gap: 0.75rem;
+
+ background: transparent;
+ color: var(--color_fg_bold);
+ font-variant-numeric: slashed-zero;
+ font-feature-settings:
+ "clig" off,
+ "liga" off;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ letter-spacing: 0.2px;
+
+ padding: 0.75rem 1rem;
+ align-items: center;
+ align-self: stretch;
+ border-radius: 0.25rem;
+
+ appearance: none;
+}
diff --git a/src/features/libraries/components/library-results/library-results..module.scss b/src/features/libraries/components/library-results/library-results..module.scss
new file mode 100644
index 00000000..c8273226
--- /dev/null
+++ b/src/features/libraries/components/library-results/library-results..module.scss
@@ -0,0 +1,26 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.content {
+ @include InnerContentGrid;
+
+ grid-row-gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.grid {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: 2rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ }
+
+ @media #{$breakpoint-dimension-lg} {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+ }
+}
diff --git a/src/features/libraries/components/library-results/library-results.component.tsx b/src/features/libraries/components/library-results/library-results.component.tsx
new file mode 100644
index 00000000..d49b20ce
--- /dev/null
+++ b/src/features/libraries/components/library-results/library-results.component.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useEffect } from "react";
+import styles from "./library-results..module.scss";
+import { BoxComponent } from "@/features/common/components/box/box.component";
+import { LibraryCardComponent } from "@/features/libraries/components/library-card/library-card.component";
+import { LibraryCategoryModel } from "@/features/libraries/models/library-category.model";
+import { useRouter } from "next/navigation";
+import { LibrariesDictionaryModel } from "@/features/localization/models/libraries-dictionary.model";
+
+interface ResultsComponentProps {
+ languageCode: string;
+ categories: LibraryCategoryModel[];
+ dictionary: LibrariesDictionaryModel;
+}
+
+export const LibraryResultsComponent: React.FC = ({
+ categories,
+ languageCode,
+ dictionary,
+}) => {
+ const router = useRouter();
+
+ useEffect(() => {
+ const hash = window.location.hash.substring(1);
+
+ if (!hash.includes("=")) {
+ return;
+ }
+
+ const segments = hash.split("=");
+
+ if (segments.length !== 2) {
+ return;
+ }
+ const currentUrl = window.location.href.split("#")[0];
+
+ if (!currentUrl) {
+ return;
+ }
+
+ const key = segments[0];
+ const value = segments[1];
+
+ const newUrl = `${currentUrl}?${key}=${value}`;
+
+ window.location.replace(newUrl);
+ }, [router]);
+
+ return (
+
+
+ );
+};
diff --git a/src/features/libraries/components/question-mark.component.tsx b/src/features/libraries/components/question-mark.component.tsx
new file mode 100644
index 00000000..9e27648e
--- /dev/null
+++ b/src/features/libraries/components/question-mark.component.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+type CheckMarkComponentProps = {};
+
+export const QuestionMarkComponent: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/src/features/libraries/components/star-icon.component.tsx b/src/features/libraries/components/star-icon.component.tsx
new file mode 100644
index 00000000..61314099
--- /dev/null
+++ b/src/features/libraries/components/star-icon.component.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+type CheckMarkComponentProps = {};
+
+export const StarIconComponent: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/src/features/libraries/components/user-icon.component.tsx b/src/features/libraries/components/user-icon.component.tsx
new file mode 100644
index 00000000..16f55fee
--- /dev/null
+++ b/src/features/libraries/components/user-icon.component.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+type CheckMarkComponentProps = {};
+
+export const UserIconComponent: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/src/features/libraries/components/x-mark.component.tsx b/src/features/libraries/components/x-mark.component.tsx
new file mode 100644
index 00000000..dfddcc80
--- /dev/null
+++ b/src/features/libraries/components/x-mark.component.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+type CheckMarkComponentProps = {};
+
+export const XMarkComponent: React.FC = () => {
+ return (
+
+ );
+};
diff --git a/src/features/libraries/models/library-category.model.ts b/src/features/libraries/models/library-category.model.ts
new file mode 100644
index 00000000..b7607819
--- /dev/null
+++ b/src/features/libraries/models/library-category.model.ts
@@ -0,0 +1,10 @@
+import { LibraryModel } from "@/features/libraries/models/library.model";
+
+export interface LibraryCategoryModel {
+ id: string;
+ name: string;
+ uniqueClass: string;
+ image: string;
+ bgColor: string;
+ libs: LibraryModel[];
+}
diff --git a/src/features/libraries/models/library-dictionary.model.ts b/src/features/libraries/models/library-dictionary.model.ts
new file mode 100644
index 00000000..31fb46c9
--- /dev/null
+++ b/src/features/libraries/models/library-dictionary.model.ts
@@ -0,0 +1,5 @@
+import { LibraryCategoryModel } from "@/features/libraries/models/library-category.model";
+
+export interface LibraryDictionaryModel {
+ [index: string]: LibraryCategoryModel;
+}
diff --git a/src/features/libraries/models/library.model.ts b/src/features/libraries/models/library.model.ts
new file mode 100644
index 00000000..28a09746
--- /dev/null
+++ b/src/features/libraries/models/library.model.ts
@@ -0,0 +1,36 @@
+export interface LibraryModel {
+ minimumVersion: string | null;
+ support: {
+ sign: boolean;
+ verify: boolean;
+ iss: boolean;
+ sub: boolean;
+ aud: boolean;
+ exp: boolean;
+ nbf: boolean;
+ iat: boolean;
+ jti: boolean;
+ typ?: boolean;
+ hs256: boolean;
+ hs384: boolean;
+ hs512: boolean;
+ rs256: boolean;
+ rs384: boolean;
+ rs512: boolean;
+ es256: boolean;
+ es384: boolean;
+ es512: boolean;
+ ps256?: boolean;
+ ps384?: boolean;
+ ps512?: boolean;
+ eddsa?: boolean;
+ es256k?: boolean;
+ };
+ authorUrl: string | null;
+ authorName: string;
+ gitHubRepoPath: string | null;
+ altRepoPath?: string;
+ repoUrl: string;
+ installCommandMarkdown: string[];
+ stars?: number | null;
+}
diff --git a/src/features/localization/dictionaries/common/en.ts b/src/features/localization/dictionaries/common/en.ts
new file mode 100644
index 00000000..c7f86e8a
--- /dev/null
+++ b/src/features/localization/dictionaries/common/en.ts
@@ -0,0 +1,19 @@
+import { CommonDictionaryModel } from "@/features/localization/models/common-dictionary.model";
+
+export const enCommonDictionary: CommonDictionaryModel = {
+ openGraph: {
+ siteName: "JSON Web Tokens - jwt.io",
+ locale: "en_US",
+ type: "website",
+ images: [
+ {
+ url: "/img/facebook-card.png",
+ width: 1145,
+ height: 601,
+ },
+ ],
+ },
+ alternates: {
+ canonical: "./",
+ },
+};
diff --git a/src/features/localization/dictionaries/common/ja.ts b/src/features/localization/dictionaries/common/ja.ts
new file mode 100644
index 00000000..0da37e1d
--- /dev/null
+++ b/src/features/localization/dictionaries/common/ja.ts
@@ -0,0 +1,19 @@
+import { CommonDictionaryModel } from "@/features/localization/models/common-dictionary.model";
+
+export const jaCommonDictionary: CommonDictionaryModel = {
+ openGraph: {
+ siteName: "JSON Web Tokens - jwt.io",
+ locale: "ja_JP",
+ type: "website",
+ images: [
+ {
+ url: "/img/ja.facebook-card.png",
+ width: 1145,
+ height: 601,
+ },
+ ],
+ },
+ alternates: {
+ canonical: "./",
+ },
+};
diff --git a/src/features/localization/dictionaries/home/en.ts b/src/features/localization/dictionaries/home/en.ts
new file mode 100644
index 00000000..8e437dbe
--- /dev/null
+++ b/src/features/localization/dictionaries/home/en.ts
@@ -0,0 +1,191 @@
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { sitePaths } from "@/features/seo/site-tree";
+
+export const enHomeDictionary: HomeDictionaryModel = {
+ metadata: {
+ title: "JSON Web Tokens - jwt.io",
+ description:
+ "JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS).",
+ keywords: [
+ "jwt",
+ "jwt payload",
+ "jwt header",
+ "jwt signature",
+ "json web token",
+ "jwt debugger",
+ "jwt encoder",
+ "jwt decoder",
+ "jwt verification",
+ ],
+ authors: [
+ {
+ name: "Auth0",
+ url: "auth0.com",
+ },
+ ],
+ images: ["/img/facebook-card.png"],
+ datePublished: "2024-11-30T09:00:00-08:00",
+ dateModified: "2024-11-30T09:00:00-08:00",
+ twitter: {
+ card: "summary_large_image",
+ creator: "@auth0",
+ title: "JWT.IO",
+ description:
+ "JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.",
+ images: "/img/twitter-card.png",
+ },
+ openGraph: {
+ type: "website",
+ title: "JWT.IO",
+ description:
+ "JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.",
+ locale: "en_US",
+ url: "https://jwt.io/",
+ images: {
+ url: "/img/facebook-card.png",
+ type: "image/png",
+ width: 1200,
+ height: 630,
+ },
+ },
+ },
+ hero: {
+ title: "JSON Web Token (JWT) Debugger",
+ description: null,
+ },
+ info: {
+ summary: "What is a JWT?",
+ description:
+ "Decode, verify, and generate JSON Web Tokens, which are an open, industry standard RFC 7519 method for representing claims securely between two parties.",
+ ctaButton: {
+ label: "Learn more about JWT",
+ path: sitePaths.introduction,
+ },
+ secondaryCtaButton: {
+ label: "See JWT libraries",
+ path: sitePaths.libraries,
+ },
+ resources: {
+ spec: {
+ name: "RFC 7519",
+ link: "https://tools.ietf.org/html/rfc7519",
+ },
+ },
+ },
+ warning: {
+ summary: "Warning about using JWTs",
+ title:
+ "For your protection, all JWT debugging and validation happens in the browser.",
+ description:
+ "Be careful where you paste or share JWTs as they can represent credentials that grant access to resources. This site does not store or transmit your JSON Web Tokens outside of the browser.",
+ },
+ decoder: {
+ title: "JWT Decoder",
+ compactTitle: "Decoder",
+ description:
+ "Paste a JWT below that you'd like to decode, validate, and verify.",
+ syncButton: {
+ label: "Sync with Encoder",
+ compactLabel: "Sync with Encoder",
+ },
+ exampleGenerator: {
+ label: "JWT example generator",
+ },
+ jwtEditor: {
+ headline: "Encoded value",
+ label: "JWT editor",
+ title: "JSON Web Token (JWT)",
+ compactTitle: "JWT",
+ successMessage: "Valid JWT",
+ },
+ decodedHeader: {
+ title: "Decoded Header",
+ tabs: {
+ json: {
+ label: "JSON",
+ },
+ claims: {
+ label: "Claims Table",
+ },
+ },
+ },
+ decodedPayload: {
+ title: "Decoded Payload",
+ tabs: {
+ json: {
+ label: "JSON",
+ },
+ claims: {
+ label: "Claims Table",
+ },
+ },
+ },
+ signatureVerification: {
+ title: "JWT Signature Verification",
+ subtitle: "(Optional)",
+ description: {
+ secret: "Enter the secret used to sign the JWT below:",
+ publicKey: "Enter the public key used to sign the JWT below:",
+ },
+ editor: {
+ title: { secret: "Secret", publicKey: "Public Key" },
+ successMessage: {
+ secret: "Valid secret",
+ publicKey: "Valid public key",
+ },
+ placeholder: {
+ secret: "Valid secret",
+ publicKey:
+ "Public Key in SPKI, PKCS #1, X.509 Certificate, or JWK string format.",
+ },
+ },
+ },
+ },
+ encoder: {
+ title: "JWT Encoder",
+ compactTitle: "Encoder",
+ description: "Fill in the fields below to generate a signed JWT.",
+ syncButton: {
+ label: "Sync with Decoder",
+ compactLabel: "Sync with Decoder",
+ },
+ unsyncButton: {
+ label: "Unsync",
+ compactLabel: "Unsync",
+ },
+ exampleGenerator: {
+ label: "Header, payload, and signature example generator",
+ },
+ headerEditor: {
+ title: "Header: Algorithm & Token Type",
+ compactTitle: "Header",
+ successMessage: "Valid header",
+ },
+ payloadEditor: {
+ title: "Payload: Data",
+ compactTitle: "Payload",
+ successMessage: "Valid payload",
+ },
+ signatureEditor: {
+ title: {
+ secret: "Sign JWT: Secret",
+ privateKey: "Sign JWT: Private Key",
+ },
+ compactTitle: {
+ secret: "Sign JWT",
+ privateKey: "Sign JWT",
+ },
+ successMessage: {
+ secret: "Valid secret",
+ privateKey: "Valid private key",
+ },
+ placeholder: {
+ privateKey:
+ "Private Key in PKCS #8, PKCS #1, or JWK string format. The key never leaves your browser.",
+ },
+ },
+ encodedJwt: {
+ title: "JSON Web Token",
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/home/ja.ts b/src/features/localization/dictionaries/home/ja.ts
new file mode 100644
index 00000000..d75fe505
--- /dev/null
+++ b/src/features/localization/dictionaries/home/ja.ts
@@ -0,0 +1,191 @@
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { sitePaths } from "@/features/seo/site-tree";
+
+export const jaHomeDictionary: HomeDictionaryModel = {
+ metadata: {
+ title: "JSON Web Tokens - jwt.io",
+ description:
+ "JSON Web Token（JWT）は、2つの当事者間でクレームを伝達するための、コンパクトでURLセーフな形式です。JWT内のクレームは、JSONオブジェクトとしてエンコードされ、JSON Web Signature（JWS）を使用してデジタル署名されます。",
+ keywords: [
+ "jwt",
+ "jwt payload",
+ "jwt header",
+ "jwt signature",
+ "json web token",
+ "jwt debugger",
+ "jwt encoder",
+ "jwt decoder",
+ "jwt verification",
+ ],
+ authors: [
+ {
+ name: "Auth0",
+ url: "auth0.com",
+ },
+ ],
+ images: ["/img/ja.facebook-card.png"],
+ datePublished: "2024-11-30T09:00:00-08:00",
+ dateModified: "2024-11-30T09:00:00-08:00",
+ twitter: {
+ card: "summary_large_image",
+ creator: "@auth0",
+ title: "JWT.IO",
+ description:
+ "JSON Web Tokenは、2つの当事者間でクレームを安全に表現するための、オープンな業界標準（RFC 7519）です。",
+ images: "/img/ja.twitter-card.png",
+ },
+ openGraph: {
+ type: "website",
+ title: "JWT.IO",
+ description:
+ "JSON Web Tokenは、2つの当事者間でクレームを安全に表現するための、オープンな業界標準（RFC 7519）です。",
+ locale: "ja_JP",
+ url: "https://jwt.io/",
+ images: {
+ url: "/img/ja.facebook-card.png",
+ type: "image/png",
+ width: 1200,
+ height: 630,
+ },
+ },
+ },
+ hero: {
+ title: "JSON Web Token（JWT）デバッガー",
+ description: null,
+ },
+ info: {
+ summary: "JWTとは？",
+ description:
+ "JSON Web Tokenをデコード、検証、生成します。JSON Web Tokenは、2つの当事者間でクレームを安全に表現するための、オープンな業界標準（RFC 7519）です。",
+ ctaButton: {
+ label: "JWTの詳細情報",
+ path: sitePaths.introduction,
+ },
+ secondaryCtaButton: {
+ label: "JWTライブラリを見る",
+ path: sitePaths.libraries,
+ },
+ resources: {
+ spec: {
+ name: "RFC 7519",
+ link: "https://tools.ietf.org/html/rfc7519",
+ },
+ },
+ },
+ warning: {
+ summary: "JWTを使用する際の注意事項",
+ title:
+ "セキュリティを確保するため、すべてのJWTのデバッグと検証はブラウザ内で行われます。",
+ description:
+ "JWTはリソースへのアクセス権を示す認証情報として機能する可能性があるため、貼り付けや共有を行う際には十分注意してください。このサイトでは、JSON Web Tokenをブラウザの外部に保存したり送信したりすることはありません。",
+ },
+ decoder: {
+ title: "JWTデコーダー",
+ compactTitle: "デコーダー",
+ description: "デコード、確認、検証を行うJWTを以下に貼り付けてください.",
+ syncButton: {
+ label: "エンコーダーと同期",
+ compactLabel: "エンコーダーと同期",
+ },
+ exampleGenerator: {
+ label: "JWTサンプルジェネレーター",
+ },
+ jwtEditor: {
+ headline: "エンコードされた値 ",
+ label: "JWTエディター",
+ title: "JSON Web Token (JWT)",
+ compactTitle: "JWT",
+ successMessage: "有効なJWT",
+ },
+ decodedHeader: {
+ title: "デコードされたヘッダー",
+ tabs: {
+ json: {
+ label: "JSON",
+ },
+ claims: {
+ label: "クレームの表",
+ },
+ },
+ },
+ decodedPayload: {
+ title: "デコードされたペイロード",
+ tabs: {
+ json: {
+ label: "JSON",
+ },
+ claims: {
+ label: "クレームの表",
+ },
+ },
+ },
+ signatureVerification: {
+ title: "JWT署名の検証",
+ subtitle: "（オプション）",
+ description: {
+ secret: "以下にJWTの署名に使用されたシークレットを入力します。",
+ publicKey: "以下にJWTの署名に使用された公開鍵を入力します。",
+ },
+ editor: {
+ title: { secret: "シークレット", publicKey: "公開鍵" },
+ successMessage: {
+ secret: "有効なシークレット",
+ publicKey: "有効な公開鍵",
+ },
+ placeholder: {
+ secret: "有効なシークレット",
+ publicKey:
+ "SPKI、PKCS #1、X.509証明書、またはJWK文字列形式の公開鍵。",
+ },
+ },
+ },
+ },
+ encoder: {
+ title: "JWTエンコーダー",
+ compactTitle: "エンコーダー",
+ description:
+ "署名されたJWTを生成するために以下のフィールドを入力してください。",
+ syncButton: {
+ label: "デコーダーと同期",
+ compactLabel: "デコーダーと同期",
+ },
+ unsyncButton: {
+ label: "同期を解除",
+ compactLabel: "同期を解除",
+ },
+ exampleGenerator: {
+ label: "ヘッダー、ペイロード、署名サンプルジェネレーター",
+ },
+ headerEditor: {
+ title: "ヘッダー：アルゴリズムとトークンタイプ",
+ compactTitle: "ヘッダー",
+ successMessage: "有効なヘッダー",
+ },
+ payloadEditor: {
+ title: "ペイロード：データ",
+ compactTitle: "ペイロード",
+ successMessage: "有効なペイロード",
+ },
+ signatureEditor: {
+ title: {
+ secret: "JWTに署名：シークレット",
+ privateKey: "JWTに署名：秘密鍵",
+ },
+ compactTitle: {
+ secret: "JWTに署名",
+ privateKey: "JWTに署名",
+ },
+ successMessage: {
+ secret: "有効なシークレット",
+ privateKey: "有効な秘密鍵",
+ },
+ placeholder: {
+ privateKey:
+ "PKCS #8、PKCS #1、またはJWK文字列形式での秘密鍵。鍵がブラウザから外部に送信されることはありません。",
+ },
+ },
+ encodedJwt: {
+ title: "JSON Web Token",
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/images/en.tsx b/src/features/localization/dictionaries/images/en.tsx
new file mode 100644
index 00000000..3c571f8d
--- /dev/null
+++ b/src/features/localization/dictionaries/images/en.tsx
@@ -0,0 +1,20 @@
+import auth0Logo from "@/features/common/assets/auth0-logo.png";
+import jwtLogo from "@/features/common/assets/jwt-flower.png";
+import { ImagesDictionaryModel } from "@/features/localization/models/images-dictionary.model";
+
+export const enImagesDictionary: ImagesDictionaryModel = {
+ logos: {
+ site: {
+ src: jwtLogo.src,
+ alt: "A token that resembles a flower with petals of a different color.",
+ width: jwtLogo.width,
+ height: jwtLogo.height,
+ },
+ auth0: {
+ src: auth0Logo.src,
+ alt: "This logo has the word “Auth0” and a shield on its left side. The shield has a four-pointed star inside, which spans across its surface.",
+ width: auth0Logo.width,
+ height: auth0Logo.height,
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/images/ja.tsx b/src/features/localization/dictionaries/images/ja.tsx
new file mode 100644
index 00000000..112f37b3
--- /dev/null
+++ b/src/features/localization/dictionaries/images/ja.tsx
@@ -0,0 +1,20 @@
+import auth0Logo from "@/features/common/assets/auth0-logo.png";
+import jwtLogo from "@/features/common/assets/jwt-flower.png";
+import { ImagesDictionaryModel } from "@/features/localization/models/images-dictionary.model";
+
+export const jaImagesDictionary: ImagesDictionaryModel = {
+ logos: {
+ site: {
+ src: jwtLogo.src,
+ alt: "異なる色の花びらを持つ花に似たトークン。",
+ width: jwtLogo.width,
+ height: jwtLogo.height,
+ },
+ auth0: {
+ src: auth0Logo.src,
+ alt: "“Auth0”ロゴ。盾の中央から四方八方に伸びる星が描かれている。",
+ width: auth0Logo.width,
+ height: auth0Logo.height,
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/introduction/en.ts b/src/features/localization/dictionaries/introduction/en.ts
new file mode 100644
index 00000000..41aab194
--- /dev/null
+++ b/src/features/localization/dictionaries/introduction/en.ts
@@ -0,0 +1,47 @@
+import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model";
+
+export const enIntroductionDictionary: IntroductionDictionaryModel = {
+ metadata: {
+ title: "JSON Web Token Introduction - jwt.io",
+ description:
+ "Learn about JSON Web Tokens, what are they, how they work, when and why you should use them.",
+ authors: [
+ {
+ name: "Auth0",
+ url: "auth0.com",
+ },
+ ],
+ images: ["/img/facebook-card.png"],
+ keywords: ["json web token", "jwt", "rfc 7519", "security"],
+ datePublished: "2024-11-30T09:00:00-08:00",
+ dateModified: "2024-11-30T09:00:00-08:00",
+ // TODO: Current site has also: meta(name='canonical', content='https://auth0.com/learn/json-web-tokens/') Verify with SEO team if that's still needed in any way
+ twitter: {
+ card: "summary_large_image",
+ creator: "@auth0",
+ title: "JWT.IO - JSON Web Tokens Introduction",
+ description:
+ "Learn about JSON Web Tokens, what are they, how they work, when and why you should use them.",
+ images: "/img/twitter-card.png",
+ },
+ openGraph: {
+ type: "website",
+ title: "JWT.IO - JSON Web Tokens Introduction",
+ description:
+ "Learn about JSON Web Tokens, what are they, how they work, when and why you should use them.",
+ locale: "en_US",
+ url: "https://jwt.io/introduction",
+ images: {
+ url: "/img/facebook-card.png",
+ type: "image/png",
+ width: 1200,
+ height: 630,
+ },
+ },
+ },
+ hero: {
+ title: "Introduction to JSON Web Tokens",
+ description:
+ "Learn about JSON Web Tokens, what are they, how they work, when and why you should use them.",
+ },
+};
diff --git a/src/features/localization/dictionaries/introduction/ja.ts b/src/features/localization/dictionaries/introduction/ja.ts
new file mode 100644
index 00000000..816173f3
--- /dev/null
+++ b/src/features/localization/dictionaries/introduction/ja.ts
@@ -0,0 +1,47 @@
+import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model";
+
+export const jaIntroductionDictionary: IntroductionDictionaryModel = {
+ metadata: {
+ title: "JSON Web Tokenの概要 - jwt.io",
+ description:
+ "JSON Web Tokenとは何か、どのように機能するのか、いつ、なぜ使用する必要があるのかについて学びましょう。",
+ authors: [
+ {
+ name: "Auth0",
+ url: "auth0.com",
+ },
+ ],
+ images: ["/img/ja.facebook-card.png"],
+ keywords: ["json web token", "jwt", "rfc 7519", "security"],
+ datePublished: "2024-11-30T09:00:00-08:00",
+ dateModified: "2024-11-30T09:00:00-08:00",
+ // TODO: Current site has also: meta(name='canonical', content='https://auth0.com/learn/json-web-tokens/') Verify with SEO team if that's still needed in any way
+ twitter: {
+ card: "summary_large_image",
+ creator: "@auth0",
+ title: "JWT.IO - JSON Web Tokenの概要",
+ description:
+ "JSON Web Tokenとは何か、どのように機能するのか、いつ、なぜ使用する必要があるのかについて学びましょう。",
+ images: "/img/ja.twitter-card.png",
+ },
+ openGraph: {
+ type: "website",
+ title: "JWT.IO - JSON Web Tokenの概要",
+ description:
+ "JSON Web Tokenとは何か、どのように機能するのか、いつ、なぜ使用する必要があるのかについて学びましょう。",
+ locale: "ja_JP",
+ url: "https://jwt.io/introduction",
+ images: {
+ url: "/img/ja.facebook-card.png",
+ type: "image/png",
+ width: 1200,
+ height: 630,
+ },
+ },
+ },
+ hero: {
+ title: "JSON Web Tokenの概要",
+ description:
+ "JSON Web Tokenとは何か、どのように機能するのか、いつ、なぜ使用する必要があるのかについて学びましょう。",
+ },
+};
diff --git a/src/features/localization/dictionaries/jwt/en.ts b/src/features/localization/dictionaries/jwt/en.ts
new file mode 100644
index 00000000..2d5ea8b5
--- /dev/null
+++ b/src/features/localization/dictionaries/jwt/en.ts
@@ -0,0 +1,49 @@
+import { JwtDictionaryModel } from "@/features/localization/models/jwt-dictionary.model";
+
+export const enJwtDictionary: JwtDictionaryModel = {
+ libraries: {
+ title: "Looking for a JWT library?",
+ description:
+ "Head on over to our libraries page to find a JWT library in your favorite language.",
+ ctaButton: {
+ label: "See all libraries",
+ path: "/libraries",
+ },
+ },
+ assets: {
+ badges: {
+ title: "Badges",
+ images: {
+ viewOn: {
+ src: "/img/badge.svg",
+ alt: "View on JWT.io badge logo",
+ height: 36,
+ width: 138,
+ },
+ compatible: {
+ src: "/img/badge-compatible.svg",
+ alt: "JWT compatible badge logo",
+ height: 36,
+ width: 144,
+ },
+ },
+ },
+ logotype: {
+ title: "Logotype",
+ images: {
+ icon: {
+ src: "/img/icon.svg",
+ alt: "JWT logo mark icon",
+ width: 36,
+ height: 36,
+ },
+ iconWithLabel: {
+ src: "/img/logo-asset.svg",
+ alt: "JWT logo",
+ width: 72,
+ height: 36,
+ },
+ },
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/jwt/ja.ts b/src/features/localization/dictionaries/jwt/ja.ts
new file mode 100644
index 00000000..a0706b34
--- /dev/null
+++ b/src/features/localization/dictionaries/jwt/ja.ts
@@ -0,0 +1,50 @@
+import { JwtDictionaryModel } from "@/features/localization/models/jwt-dictionary.model";
+import { sitePaths } from "@/features/seo/site-tree";
+
+export const jaJwtDictionary: JwtDictionaryModel = {
+ libraries: {
+ title: "JWTライブラリをお探しですか？",
+ description:
+ "ライブラリページにアクセスして、お好きな言語のJWTライブラリを見つけてください。",
+ ctaButton: {
+ label: "すべてのライブラリ",
+ path: sitePaths.libraries,
+ },
+ },
+ assets: {
+ badges: {
+ title: "バッジ",
+ images: {
+ viewOn: {
+ src: "/img/badge.svg",
+ alt: "「View on JWT.io」バッジロゴ ",
+ height: 36,
+ width: 138,
+ },
+ compatible: {
+ src: "/img/badge-compatible.svg",
+ alt: "「JWT compatible」バッジロゴ",
+ height: 36,
+ width: 144,
+ },
+ },
+ },
+ logotype: {
+ title: "ロゴタイプ",
+ images: {
+ icon: {
+ src: "/img/icon.svg",
+ alt: "JWTロゴマークアイコン",
+ width: 36,
+ height: 36,
+ },
+ iconWithLabel: {
+ src: "/img/logo-asset.svg",
+ alt: "JWTロゴ",
+ width: 72,
+ height: 36,
+ },
+ },
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/layout/en.tsx b/src/features/localization/dictionaries/layout/en.tsx
new file mode 100644
index 00000000..d42a90d6
--- /dev/null
+++ b/src/features/localization/dictionaries/layout/en.tsx
@@ -0,0 +1,194 @@
+import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
+import { sitePaths } from "@/features/seo/site-tree";
+import { BASE_URL } from "@/libs/config/project.constants";
+import { ThemePickerCodeValues } from "@/features/common/values/theme.values";
+
+const withJapanese = process.env.NEXT_PUBLIC_WITH_JAPANESE === "enabled";
+
+export const enLayoutDictionary: LayoutDictionaryModel = {
+ ribbon: {
+ cta: {
+ title: "Developer Day is coming to your screen",
+ description: "(Join us)",
+ link: {
+ url: "https://a0.to/devday25-rsvp",
+ icon: {
+ label: "Arrow pointing northeast",
+ },
+ },
+ },
+ themePicker: {
+ button: {
+ ariaLabel: "Select page theme",
+ },
+ list: {
+ ariaLabel: "List of page themes",
+ },
+ options: [
+ {
+ code: ThemePickerCodeValues.SYSTEM,
+ label: "System",
+ },
+ {
+ code: ThemePickerCodeValues.DARK,
+ label: "Dark",
+ },
+ {
+ code: ThemePickerCodeValues.LIGHT,
+ label: "Light",
+ },
+ ],
+ },
+ languagePicker: {
+ button: {
+ ariaLabel: "Select page language",
+ },
+ list: {
+ ariaLabel: "list of page languages",
+ },
+ options: [
+ {
+ code: "en",
+ label: "English",
+ },
+ ],
+ },
+ },
+ header: {
+ links: [
+ {
+ label: "Debugger",
+ path: sitePaths.home,
+ },
+ {
+ label: "Introduction",
+ path: sitePaths.introduction,
+ },
+ {
+ label: "Libraries",
+ path: sitePaths.libraries,
+ },
+ {
+ label: "Ask",
+ path: sitePaths.ask,
+ isExternal: true,
+ },
+ ],
+ labels: {
+ close: "Close menu",
+ open: "Open menu",
+ },
+ },
+ footer: {
+ site: {
+ url: BASE_URL,
+ label: "JWT Debugger",
+ },
+ copyright: `Copyright © ${new Date().getFullYear()} Okta. All rights reserved.`,
+ resources: {
+ title: "PRESENTED BY AUTH0",
+ links: [
+ {
+ label: "Passkeys Playground",
+ path: "https://learnpasskeys.io/",
+ },
+ {
+ label: "WebAuthn Playground",
+ path: "https://webauthn.me/",
+ },
+ {
+ label: "OIDC Playground",
+ path: "https://openidconnect.net/",
+ },
+ {
+ label: "SAML Tool",
+ path: "https://samltool.io/",
+ },
+ ],
+ },
+ legal: {
+ title: "LEGAL",
+ links: [
+ {
+ label: "Privacy Policy",
+ path: "https://www.okta.com/privacy-policy/",
+ },
+ {
+ label: "Security",
+ path: "https://trust.okta.com/",
+ },
+ ],
+ modalTriggers: [
+ {
+ text: "Your Privacy Choices",
+ icon: {
+ url: "https://cdn.auth0.com/website/footer/ccpa.svg",
+ alt: "A button that resembles a pill is divided into two pieces: on the right side, there’s an X mark; on the left side, there’s a checkmark.",
+ },
+ },
+ ],
+ },
+ social: {
+ title: "SOCIAL",
+ links: {
+ youtube: {
+ label: "YouTube",
+ path: "https://www.youtube.com/oktadev",
+ },
+ facebook: {
+ label: "Facebook",
+ path: "https://www.facebook.com/Okta/",
+ },
+ twitter: {
+ label: "Twitter",
+ path: "https://x.com/auth0",
+ },
+ linkedin: {
+ label: "LinkedIn",
+ path: "https://www.linkedin.com/company/oktadev/",
+ },
+ },
+ },
+ modal: {
+ title: "Your Privacy Choices",
+ content:
+ "Depending on your state of residence, including if you are a California resident, you have the right to opt out of certain sharing of personal information with third-party ad partners. We may share personal information with third-party ad partners, such as through cookies or by providing lists of email addresses for potential customers, so that we can reach them across the web with relevant ads.",
+ list: [
+ {
+ id: "cookies",
+ },
+ {
+ id: "email",
+ },
+ ],
+ },
+ },
+ errors: {
+ notFound: {
+ message: "Sorry, the page that you were looking for doesn't exist.",
+ link: {
+ path: "/",
+ label: "Go home",
+ },
+ },
+ unexpectedError: {
+ message: "Sorry, an error occurred.",
+ actions: {
+ tryAgain: {
+ label: "Try again",
+ },
+ report: {
+ label: "Report this error",
+ path: "https://community.auth0.com/new-topic?category=jwt&tags=issue,jwt&title=%5BIssue%5D%20&body=%28Please%20report%20any%20issue%20that%20you%20may%20have%20encountered%20while%20using%20the%20JWT%20Debugger%20site.%20To%20delete%20this%20post%20draft%2C%20click%20the%20Close%20button%20below%20and%20then%20click%20Discard.%29",
+ },
+ },
+ },
+ },
+};
+
+if (withJapanese) {
+ enLayoutDictionary.ribbon.languagePicker.options.push({
+ label: "日本語",
+ code: "ja",
+ });
+}
diff --git a/src/features/localization/dictionaries/layout/ja.tsx b/src/features/localization/dictionaries/layout/ja.tsx
new file mode 100644
index 00000000..13c951fc
--- /dev/null
+++ b/src/features/localization/dictionaries/layout/ja.tsx
@@ -0,0 +1,194 @@
+import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
+import { sitePaths } from "@/features/seo/site-tree";
+import { BASE_URL } from "@/libs/config/project.constants";
+import { ThemePickerCodeValues } from "@/features/common/values/theme.values";
+
+const withJapanese = process.env.NEXT_PUBLIC_WITH_JAPANESE === "enabled";
+
+export const jaLayoutDictionary: LayoutDictionaryModel = {
+ ribbon: {
+ cta: {
+ title: "jwt.io v2ベータバージョン:",
+ description: "フィードバックをお寄せください。",
+ link: {
+ url: "https://a0.to/jwt-io-feedback-ja",
+ icon: {
+ label: "北東を指す矢",
+ },
+ },
+ },
+ themePicker: {
+ button: {
+ ariaLabel: "ページのテーマを選択してください",
+ },
+ list: {
+ ariaLabel: "ページテーマの一覧",
+ },
+ options: [
+ {
+ code: ThemePickerCodeValues.SYSTEM,
+ label: "自動",
+ },
+ {
+ code: ThemePickerCodeValues.DARK,
+ label: "ダーク",
+ },
+ {
+ code: ThemePickerCodeValues.LIGHT,
+ label: "ライト",
+ },
+ ],
+ },
+ languagePicker: {
+ button: {
+ ariaLabel: "ページの言語を選択してください",
+ },
+ list: {
+ ariaLabel: "ページ言語の一覧",
+ },
+ options: [
+ {
+ code: "en",
+ label: "English",
+ },
+ ],
+ },
+ },
+ header: {
+ links: [
+ {
+ label: "デバッガー",
+ path: sitePaths.home,
+ },
+ {
+ label: "JWTの概要",
+ path: sitePaths.introduction,
+ },
+ {
+ label: "ライブラリ",
+ path: sitePaths.libraries,
+ },
+ {
+ label: "コミュニティ",
+ path: sitePaths.ask,
+ isExternal: true,
+ },
+ ],
+ labels: {
+ close: "メニューを閉じる",
+ open: "メニューと開く",
+ },
+ },
+ footer: {
+ site: {
+ url: BASE_URL,
+ label: "JWTデバッガー",
+ },
+ copyright: `Copyright © ${new Date().getFullYear()} Okta. 全て rights reserved.`,
+ resources: {
+ title: "Auth0が運営する姉妹サイト",
+ links: [
+ {
+ label: "Passkeys Playground",
+ path: "https://learnpasskeys.io/ja",
+ },
+ {
+ label: "WebAuthn Playground",
+ path: "https://webauthn.me/",
+ },
+ {
+ label: "OIDC Playground",
+ path: "https://openidconnect.net/",
+ },
+ {
+ label: "SAMLツール",
+ path: "https://samltool.io/",
+ },
+ ],
+ },
+ legal: {
+ title: "リーガル",
+ links: [
+ {
+ label: "プライバシーポリシー",
+ path: "https://www.okta.com/privacy-policy/",
+ },
+ {
+ label: "セキュリティ",
+ path: "https://trust.okta.com/",
+ },
+ ],
+ modalTriggers: [
+ {
+ text: "Your Privacy Choices",
+ icon: {
+ url: "https://cdn.auth0.com/website/footer/ccpa.svg",
+ alt: "薬の錠剤を模したボタンは2つに分かれており、右側にはXマーク、左側にはチェックマークがある。",
+ },
+ },
+ ],
+ },
+ social: {
+ title: "ソーシャル",
+ links: {
+ youtube: {
+ label: "YouTube",
+ path: "https://www.youtube.com/oktadev",
+ },
+ facebook: {
+ label: "Facebook",
+ path: "https://www.facebook.com/Okta/",
+ },
+ twitter: {
+ label: "Twitter",
+ path: "https://x.com/auth0_jp",
+ },
+ linkedin: {
+ label: "LinkedIn",
+ path: "https://www.linkedin.com/company/oktadev/",
+ },
+ },
+ },
+ modal: {
+ title: "Your Privacy Choices",
+ content:
+ "Depending on your state of residence, including if you are a California resident, you have the right to opt out of certain sharing of personal information with third-party ad partners. We may share personal information with third-party ad partners, such as through cookies or by providing lists of email addresses for potential customers, so that we can reach them across the web with relevant ads.",
+ list: [
+ {
+ id: "cookies",
+ },
+ {
+ id: "email",
+ },
+ ],
+ },
+ },
+ errors: {
+ notFound: {
+ message: "申し訳ございませんが、お探しのページは存在しません。",
+ link: {
+ path: "/",
+ label: "ホームへ ",
+ },
+ },
+ unexpectedError: {
+ message: "申し訳ございませんが、エラーが発生しました。",
+ actions: {
+ tryAgain: {
+ label: "もう一度入力してください",
+ },
+ report: {
+ label: "問題を報告する",
+ path: "https://community.auth0.com/new-topic?category=jwt&tags=issue,jwt&title=%5BIssue%5D%20&body=%28Please%20report%20any%20issue%20that%20you%20may%20have%20encountered%20while%20using%20the%20JWT%20Debugger%20site.%20To%20delete%20this%20post%20draft%2C%20click%20the%20Close%20button%20below%20and%20then%20click%20Discard.%29",
+ },
+ },
+ },
+ },
+};
+
+if (withJapanese) {
+ jaLayoutDictionary.ribbon.languagePicker.options.push({
+ label: "日本語",
+ code: "ja",
+ });
+}
diff --git a/src/features/localization/dictionaries/libraries/en.ts b/src/features/localization/dictionaries/libraries/en.ts
new file mode 100644
index 00000000..3535bada
--- /dev/null
+++ b/src/features/localization/dictionaries/libraries/en.ts
@@ -0,0 +1,68 @@
+import { LibrariesDictionaryModel } from "@/features/localization/models/libraries-dictionary.model";
+
+export const enLibrariesDictionary: LibrariesDictionaryModel = {
+ metadata: {
+ title: "JSON Web Token Libraries - jwt.io",
+ description:
+ "Find an overview of libraries that help you work with JSON Web Tokens in your favorite language.",
+ authors: [
+ {
+ name: "Auth0",
+ url: "auth0.com",
+ },
+ ],
+ images: ["/img/facebook-card.png"],
+ keywords: [
+ "json web token libraries",
+ "jwt libraries",
+ "jwt encoder libraries",
+ "jwt decoder libraries",
+ "jwt verification libraries",
+ ],
+ datePublished: "2024-11-30T09:00:00-08:00",
+ dateModified: "2024-11-30T09:00:00-08:00",
+ // TODO: Current site has also: meta(name='canonical', content='https://auth0.com/learn/json-web-tokens/') Verify with SEO team if that's still needed in any way
+ twitter: {
+ card: "summary_large_image",
+ creator: "@auth0",
+ title: "JWT.IO - JSON Web Tokens Libraries",
+ description:
+ "Find an overview of libraries that help you work with JSON Web Tokens in your favorite language.",
+ images: "/img/twitter-card.png",
+ },
+ openGraph: {
+ type: "website",
+ title: "JWT.IO - JSON Web Tokens Libraries",
+ description:
+ "Find an overview of libraries that help you work with JSON Web Tokens in your favorite language.",
+ locale: "en_US",
+ url: "https://jwt.io/libraries",
+ images: {
+ url: "/img/facebook-card.png",
+ type: "image/png",
+ width: 1200,
+ height: 630,
+ },
+ },
+ },
+ title: "Libraries for Token Signing/Verification",
+ filterPicker: {
+ label: "Filter by",
+ defaultValue: {
+ label: "All",
+ value: "all",
+ },
+ },
+ result: {
+ viewRepo: {
+ label: "View repo",
+ },
+ minimumVersion: {
+ label: "Minimum version",
+ resource: {
+ label: "Learn more",
+ url: "https://auth0.com/blog/critical-vulnerabilities-in-json-web-token-libraries/",
+ },
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/libraries/ja.ts b/src/features/localization/dictionaries/libraries/ja.ts
new file mode 100644
index 00000000..62916fa4
--- /dev/null
+++ b/src/features/localization/dictionaries/libraries/ja.ts
@@ -0,0 +1,68 @@
+import { LibrariesDictionaryModel } from "@/features/localization/models/libraries-dictionary.model";
+
+export const jaLibrariesDictionary: LibrariesDictionaryModel = {
+ metadata: {
+ title: "JSON Web Tokenライブラリ - jwt.io",
+ description:
+ "JSON Web Tokenの操作に役立つライブラリの概要を、お好きな言語でご覧いただけます。",
+ authors: [
+ {
+ name: "Auth0",
+ url: "auth0.com",
+ },
+ ],
+ images: ["/img/ja.facebook-card.png"],
+ keywords: [
+ "json web token libraries",
+ "jwt libraries",
+ "jwt encoder libraries",
+ "jwt decoder libraries",
+ "jwt verification libraries",
+ ],
+ datePublished: "2024-11-30T09:00:00-08:00",
+ dateModified: "2024-11-30T09:00:00-08:00",
+ // TODO: Current site has also: meta(name='canonical', content='https://auth0.com/learn/json-web-tokens/') Verify with SEO team if that's still needed in any way
+ twitter: {
+ card: "summary_large_image",
+ creator: "@auth0",
+ title: "JWT.IO - JSWON Web Tokensライブラリー",
+ description:
+ "JSON Web Tokenの操作に役立つライブラリの概要を、お好きな言語でご覧いただけます。",
+ images: "/img/ja.twitter-card.png",
+ },
+ openGraph: {
+ type: "website",
+ title: "JWT.IO - JSWON Web Tokensライブラリー",
+ description:
+ "JSON Web Tokenの操作に役立つライブラリの概要を、お好きな言語でご覧いただけます。",
+ locale: "ja_JP",
+ url: "https://jwt.io/libraries",
+ images: {
+ url: "/img/ja.facebook-card.png",
+ type: "image/png",
+ width: 1200,
+ height: 630,
+ },
+ },
+ },
+ title: "トークン署名/検証用ライブラリ",
+ filterPicker: {
+ label: "絞り込み",
+ defaultValue: {
+ label: "全て",
+ value: "全て",
+ },
+ },
+ result: {
+ viewRepo: {
+ label: "リポジトリを表示",
+ },
+ minimumVersion: {
+ label: "最小バージョン",
+ resource: {
+ label: "詳細",
+ url: "https://auth0.com/blog/critical-vulnerabilities-in-json-web-token-libraries/",
+ },
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/auth0/en.tsx b/src/features/localization/dictionaries/ui/auth0/en.tsx
new file mode 100644
index 00000000..826b653b
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/auth0/en.tsx
@@ -0,0 +1,28 @@
+import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
+import { AUTH0_SIGNUP_URL } from "@/libs/config/project-paths.constants";
+import { EBOOK_URL } from "@/libs/config/project.constants";
+
+export const enAuth0Dictionary: Auth0DictionaryModel = {
+ banner: {
+ title: "Get Started with JSON Web Tokens",
+ description:
+ "Securely implement authentication with JWTs using Auth0 on any stack and any device in less than 10 minutes.",
+ image: {
+ url: "/images/en.login-box.svg",
+ alt: "a preview of what Auth0 Universal Login looks like, featuring options to log in with a username, a social connection like Google, or a passkey.",
+ },
+ ctaButton: {
+ path: AUTH0_SIGNUP_URL,
+ label: "Create a free account",
+ },
+ },
+ ebook: {
+ title: "Get the JWT Handbook",
+ description:
+ "Learn how JWT came to be and what problems it was designed to tackle. Download it today for free.",
+ ctaButton: {
+ label: "Download Ebook",
+ url: EBOOK_URL,
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/auth0/ja.tsx b/src/features/localization/dictionaries/ui/auth0/ja.tsx
new file mode 100644
index 00000000..ed7378e6
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/auth0/ja.tsx
@@ -0,0 +1,28 @@
+import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
+import { AUTH0_SIGNUP_URL_JA } from "@/libs/config/project-paths.constants";
+import { EBOOK_URL_JA } from "@/libs/config/project.constants";
+
+export const jaAuth0Dictionary: Auth0DictionaryModel = {
+ banner: {
+ title: "JSON Web Tokenの使用を開始",
+ description:
+ "どのスタックやデバイスでも、Auth0でJWTを使った安全な認証を10分以内で実装できます。",
+ image: {
+ url: "/images/en.login-box.svg",
+ alt: "a preview of what Auth0 Universal Login looks like, featuring options to log in with a username, a social connection like Google, or a passkey.",
+ },
+ ctaButton: {
+ path: AUTH0_SIGNUP_URL_JA,
+ label: "無料アカウントを作成 ",
+ },
+ },
+ ebook: {
+ title: "JWTハンドブックを入手",
+ description:
+ "JWTがどのように誕生し、どのような問題を解決するのかについて学びましょう。今すぐ無料でダウンロードできます。",
+ ctaButton: {
+ label: "eBookをダウンロード",
+ url: EBOOK_URL_JA,
+ },
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/buttons/en.tsx b/src/features/localization/dictionaries/ui/buttons/en.tsx
new file mode 100644
index 00000000..5579fc49
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/buttons/en.tsx
@@ -0,0 +1,30 @@
+import { ButtonsUiDictionaryModel } from "@/features/localization/models/ui/buttons-ui-dictionary.model";
+
+export const enButtonsUiDictionary: ButtonsUiDictionaryModel = {
+ clearButton: {
+ label: "Clear",
+ },
+ syncButton: {
+ label: "Sync",
+ },
+ copyButton: {
+ idle: {
+ label: "Copy",
+ },
+ done: {
+ label: "Copied",
+ },
+ },
+ hideDetailsButton: {
+ label: "Hide Details",
+ },
+ showDetailsButton: {
+ label: "Show Details",
+ },
+ minimizeButton: {
+ label: "Minimize",
+ },
+ maximizeButton: {
+ label: "Maximize",
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/buttons/ja.tsx b/src/features/localization/dictionaries/ui/buttons/ja.tsx
new file mode 100644
index 00000000..47d3c436
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/buttons/ja.tsx
@@ -0,0 +1,30 @@
+import { ButtonsUiDictionaryModel } from "@/features/localization/models/ui/buttons-ui-dictionary.model";
+
+export const jaButtonsUiDictionary: ButtonsUiDictionaryModel = {
+ clearButton: {
+ label: "クリア",
+ },
+ syncButton: {
+ label: "同期",
+ },
+ copyButton: {
+ idle: {
+ label: "コピー",
+ },
+ done: {
+ label: "コピーされました",
+ },
+ },
+ hideDetailsButton: {
+ label: "詳細を隠す",
+ },
+ showDetailsButton: {
+ label: "詳細を表示する",
+ },
+ minimizeButton: {
+ label: "最小化",
+ },
+ maximizeButton: {
+ label: "最大化",
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/components/en.tsx b/src/features/localization/dictionaries/ui/components/en.tsx
new file mode 100644
index 00000000..da4146e9
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/components/en.tsx
@@ -0,0 +1,16 @@
+import { EBOOK_URL } from "@/libs/config/project.constants";
+import Link from "next/link";
+import React from "react";
+import { ComponentDictionaryModel } from "@/features/localization/models/component-dictionary.model";
+
+export const enComponentDictionary: ComponentDictionaryModel = {
+ ebookAd: (
+ <>
+ Level up! Get the{" "}
+
+ JWT Handbook for free
+ {" "}
+ and learn JWTs in depth!
+
+ ),
+};
diff --git a/src/features/localization/dictionaries/ui/components/ja.tsx b/src/features/localization/dictionaries/ui/components/ja.tsx
new file mode 100644
index 00000000..9bd60967
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/components/ja.tsx
@@ -0,0 +1,16 @@
+import { EBOOK_URL_JA } from "@/libs/config/project.constants";
+import Link from "next/link";
+import React from "react";
+import { ComponentDictionaryModel } from "@/features/localization/models/component-dictionary.model";
+
+export const jaComponentDictionary: ComponentDictionaryModel = {
+ ebookAd: (
+ <>
+ レベルアップ！
+
+ JWTハンドブックを無料で入手
+
+ して、JWTへの理解を深めましょう！
+
+ ),
+};
diff --git a/src/features/localization/dictionaries/ui/links/en.tsx b/src/features/localization/dictionaries/ui/links/en.tsx
new file mode 100644
index 00000000..2f227811
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/links/en.tsx
@@ -0,0 +1,12 @@
+import { LinksUiDictionaryModel } from "@/features/localization/models/ui/links-ui-dictionary.model";
+
+export const enLinksUiDictionary: LinksUiDictionaryModel = {
+ feedback: {
+ label: "Share feedback",
+ path: "https://community.auth0.com/new-topic?category=jwt&tags=feedback,jwt&title=%5BFeedback%5D%20&body=%28Please%20share%20any%20feedback%20that%20you%20may%20have%20from%20using%20the%20JWT%20Debugger%20site.%20To%20delete%20this%20post%20draft%2C%20click%20the%20Close%20button%20below%20and%20then%20click%20Discard.%29",
+ },
+ issue: {
+ label: "Report issue",
+ path: "https://community.auth0.com/new-topic?category=jwt&tags=issue,jwt&title=%5BIssue%5D%20&body=%28Please%20report%20any%20issue%20that%20you%20may%20have%20encountered%20while%20using%20the%20JWT%20Debugger%20site.%20To%20delete%20this%20post%20draft%2C%20click%20the%20Close%20button%20below%20and%20then%20click%20Discard.%29",
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/links/ja.tsx b/src/features/localization/dictionaries/ui/links/ja.tsx
new file mode 100644
index 00000000..f44c04c2
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/links/ja.tsx
@@ -0,0 +1,12 @@
+import { LinksUiDictionaryModel } from "@/features/localization/models/ui/links-ui-dictionary.model";
+
+export const jaLinksUiDictionary: LinksUiDictionaryModel = {
+ feedback: {
+ label: "フィードバックを共有する",
+ path: "https://community.auth0.com/new-topic?category=jwt&tags=feedback,jwt&title=%5BFeedback%5D%20&body=%28Please%20share%20any%20feedback%20that%20you%20may%20have%20from%20using%20the%20JWT%20Debugger%20site.%20To%20delete%20this%20post%20draft%2C%20click%20the%20Close%20button%20below%20and%20then%20click%20Discard.%29",
+ },
+ issue: {
+ label: "問題を報告する",
+ path: "https://community.auth0.com/new-topic?category=jwt&tags=issue,jwt&title=%5BIssue%5D%20&body=%28Please%20report%20any%20issue%20that%20you%20may%20have%20encountered%20while%20using%20the%20JWT%20Debugger%20site.%20To%20delete%20this%20post%20draft%2C%20click%20the%20Close%20button%20below%20and%20then%20click%20Discard.%29",
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/modals/en.tsx b/src/features/localization/dictionaries/ui/modals/en.tsx
new file mode 100644
index 00000000..0b169ca1
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/modals/en.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import styles from "@/features/localization/dictionaries/ui/modals/footer.module.scss";
+import { ModalsUiDictionaryModel } from "@/features/localization/models/ui/modals-ui-dictionary.model";
+
+const CookiesModal: React.FC = () => {
+ return (
+ <>
+ If you wish to opt out of this sharing of your personal data in connection
+ with cookies, please update your{" "}
+
+ .
+
+ );
+};
+
+const EmailModal: React.FC = () => {
+ return (
+ <>
+ If you wish to opt out of email-based sharing, provide your email address
+ at{" "}
+
+ this link
+
+ .
+
+ );
+};
+
+export const enModalsDictionary: ModalsUiDictionaryModel = {
+ cookies: {
+ Modal: CookiesModal,
+ },
+ email: {
+ Modal: EmailModal,
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/modals/footer.module.scss b/src/features/localization/dictionaries/ui/modals/footer.module.scss
new file mode 100644
index 00000000..75083425
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/modals/footer.module.scss
@@ -0,0 +1,24 @@
+.modalButton {
+ background: transparent;
+ column-gap: inherit;
+ border: none;
+ padding: 0;
+ margin: 0;
+ text-decoration: underline;
+ color: var(--color_fg_link_primary);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 400;
+ cursor: pointer;
+}
+
+.modalLink {
+ background: transparent;
+ column-gap: inherit;
+ border: none;
+ padding: 0;
+ margin: 0;
+ text-decoration: underline;
+ color: var(--color_fg_link_primary);
+ cursor: pointer;
+}
diff --git a/src/features/localization/dictionaries/ui/modals/ja.tsx b/src/features/localization/dictionaries/ui/modals/ja.tsx
new file mode 100644
index 00000000..2cc73ae2
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/modals/ja.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import styles from "@/features/localization/dictionaries/ui/modals/footer.module.scss";
+import { ModalsUiDictionaryModel } from "@/features/localization/models/ui/modals-ui-dictionary.model";
+
+const CookiesModal: React.FC = () => {
+ return (
+ <>
+ If you wish to opt out of this sharing of your personal data in connection
+ with cookies, please update your{" "}
+
+ .
+
+ );
+};
+
+const EmailModal: React.FC = () => {
+ return (
+ <>
+ If you wish to opt out of email-based sharing, provide your email address
+ at{" "}
+
+ this link
+
+ .
+
+ );
+};
+
+export const jaModalsDictionary: ModalsUiDictionaryModel = {
+ cookies: {
+ Modal: CookiesModal,
+ },
+ email: {
+ Modal: EmailModal,
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/pickers/en.tsx b/src/features/localization/dictionaries/ui/pickers/en.tsx
new file mode 100644
index 00000000..b2b4f6b7
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/pickers/en.tsx
@@ -0,0 +1,27 @@
+import { PickersUiDictionaryModel } from "@/features/localization/models/ui/pickers-ui-dictionary.model";
+
+export const enPickersUiDictionary: PickersUiDictionaryModel = {
+ algPicker: {
+ label: "Algorithm",
+ compactLabel: "Alg",
+ description: "Generate a JWT",
+ },
+ exampleAlgPicker: {
+ label: "Generate example",
+ compactLabel: "Alg",
+ defaultValue: "Select a signing algorithm",
+ description: "Generate a JWT",
+ closeButton: {
+ label: "Close signing algorithm list",
+ },
+ },
+ encodingFormatPicker: {
+ label: "Encoding Format",
+ },
+ publicKeyFormatPicker: {
+ label: "Public Key Format",
+ },
+ privateKeyFormatPicker: {
+ label: "Private Key Format",
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/pickers/ja.tsx b/src/features/localization/dictionaries/ui/pickers/ja.tsx
new file mode 100644
index 00000000..b756f47d
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/pickers/ja.tsx
@@ -0,0 +1,27 @@
+import { PickersUiDictionaryModel } from "@/features/localization/models/ui/pickers-ui-dictionary.model";
+
+export const jaPickersUiDictionary: PickersUiDictionaryModel = {
+ algPicker: {
+ label: "アルゴリズム",
+ compactLabel: "Alg",
+ description: "JWTを生成",
+ },
+ exampleAlgPicker: {
+ label: "サンプルを生成",
+ compactLabel: "Alg",
+ defaultValue: "署名アルゴリズムを選択",
+ description: "JWTを生成",
+ closeButton: {
+ label: "署名アルゴリズムのリストを閉じる",
+ },
+ },
+ encodingFormatPicker: {
+ label: "エンコード形式",
+ },
+ publicKeyFormatPicker: {
+ label: "公開鍵の形式",
+ },
+ privateKeyFormatPicker: {
+ label: "秘密鍵の形式",
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/warnings/en.tsx b/src/features/localization/dictionaries/ui/warnings/en.tsx
new file mode 100644
index 00000000..99c31797
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/warnings/en.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { WarningsUiDictionaryModel } from "@/features/localization/models/ui/warnings-ui-dictionary.model";
+
+const CookiesModal: React.FC = () => {
+ return (
+
+ Use a hash {
+ button: {
+ ariaLabel: string;
+ };
+ list: {
+ ariaLabel: string;
+ };
+ options: T[];
+}
+
+export interface LayoutDictionaryModel {
+ ribbon: {
+ cta: {
+ title: string;
+ description: string;
+ link: {
+ url: string;
+ icon: {
+ label: string;
+ };
+ };
+ };
+ themePicker: RibbonPickerModel;
+ languagePicker: RibbonPickerModel;
+ };
+ header: {
+ links: LinkMetadataModel[];
+ labels: {
+ close: string;
+ open: string;
+ };
+ };
+ footer: {
+ site: {
+ url: string;
+ label: string;
+ };
+ copyright: string;
+ resources: {
+ title: string;
+ links: LinkMetadataModel[];
+ };
+ legal: {
+ title: string;
+ links: LinkMetadataModel[];
+ modalTriggers: {
+ text: string;
+ icon?: ImageMetadataModel;
+ }[];
+ };
+ social: {
+ title: string;
+ links: {
+ youtube: LinkMetadataModel;
+ facebook: LinkMetadataModel;
+ twitter: LinkMetadataModel;
+ linkedin: LinkMetadataModel;
+ };
+ };
+ modal: {
+ title: string;
+ content: string;
+ list: {
+ id: string;
+ }[];
+ };
+ };
+ errors: {
+ notFound: {
+ message: string;
+ link: LinkMetadataModel;
+ };
+ unexpectedError: {
+ message: string;
+ actions: {
+ tryAgain: {
+ label: string;
+ };
+ report: LinkMetadataModel;
+ };
+ };
+ };
+}
diff --git a/src/features/localization/models/libraries-dictionary.model.ts b/src/features/localization/models/libraries-dictionary.model.ts
new file mode 100644
index 00000000..e4ce99cd
--- /dev/null
+++ b/src/features/localization/models/libraries-dictionary.model.ts
@@ -0,0 +1,25 @@
+import { PageMetadataModel } from "@/features/common/models/page-metadata.model";
+
+export interface LibrariesDictionaryModel {
+ metadata: PageMetadataModel;
+ title: string;
+ filterPicker: {
+ label: string;
+ defaultValue: {
+ label: string;
+ value: string;
+ };
+ };
+ result: {
+ viewRepo: {
+ label: string;
+ };
+ minimumVersion: {
+ label: string;
+ resource: {
+ label: string;
+ url: string;
+ };
+ };
+ };
+}
diff --git a/src/features/localization/models/ui/buttons-ui-dictionary.model.ts b/src/features/localization/models/ui/buttons-ui-dictionary.model.ts
new file mode 100644
index 00000000..3c008660
--- /dev/null
+++ b/src/features/localization/models/ui/buttons-ui-dictionary.model.ts
@@ -0,0 +1,28 @@
+export interface ButtonsUiDictionaryModel {
+ clearButton: {
+ label: string;
+ };
+ syncButton: {
+ label: string;
+ };
+ copyButton: {
+ idle: {
+ label: string;
+ };
+ done: {
+ label: string;
+ };
+ };
+ hideDetailsButton: {
+ label: string;
+ };
+ showDetailsButton: {
+ label: string;
+ };
+ minimizeButton: {
+ label: string;
+ };
+ maximizeButton: {
+ label: string;
+ };
+}
diff --git a/src/features/localization/models/ui/links-ui-dictionary.model.ts b/src/features/localization/models/ui/links-ui-dictionary.model.ts
new file mode 100644
index 00000000..c1d73abe
--- /dev/null
+++ b/src/features/localization/models/ui/links-ui-dictionary.model.ts
@@ -0,0 +1,6 @@
+import { LinkMetadataModel } from "@/features/common/models/link-metadata.model";
+
+export interface LinksUiDictionaryModel {
+ feedback: LinkMetadataModel;
+ issue: LinkMetadataModel;
+}
diff --git a/src/features/localization/models/ui/modals-ui-dictionary.model.ts b/src/features/localization/models/ui/modals-ui-dictionary.model.ts
new file mode 100644
index 00000000..ec5cc6ec
--- /dev/null
+++ b/src/features/localization/models/ui/modals-ui-dictionary.model.ts
@@ -0,0 +1,13 @@
+import React from "react";
+
+export interface ModalsUiDictionaryModel {
+ [index: string]: {
+ Modal: React.FC;
+ };
+ cookies: {
+ Modal: React.FC;
+ };
+ email: {
+ Modal: React.FC;
+ };
+}
diff --git a/src/features/localization/models/ui/pickers-ui-dictionary.model.ts b/src/features/localization/models/ui/pickers-ui-dictionary.model.ts
new file mode 100644
index 00000000..f57138bc
--- /dev/null
+++ b/src/features/localization/models/ui/pickers-ui-dictionary.model.ts
@@ -0,0 +1,25 @@
+export interface PickersUiDictionaryModel {
+ algPicker: {
+ label: string;
+ compactLabel: string;
+ description: string;
+ };
+ exampleAlgPicker: {
+ label: string;
+ compactLabel: string;
+ defaultValue: string;
+ description: string;
+ closeButton: {
+ label: string;
+ };
+ };
+ encodingFormatPicker: {
+ label: string;
+ };
+ publicKeyFormatPicker: {
+ label: string;
+ };
+ privateKeyFormatPicker: {
+ label: string;
+ };
+}
diff --git a/src/features/localization/models/ui/warnings-ui-dictionary.model.ts b/src/features/localization/models/ui/warnings-ui-dictionary.model.ts
new file mode 100644
index 00000000..f868ea5f
--- /dev/null
+++ b/src/features/localization/models/ui/warnings-ui-dictionary.model.ts
@@ -0,0 +1,10 @@
+import React from "react";
+
+export interface WarningsUiDictionaryModel {
+ [index: string]: {
+ Modal: React.FC;
+ };
+ useHash: {
+ Modal: React.FC;
+ };
+}
diff --git a/src/features/localization/services/app-language.service.ts b/src/features/localization/services/app-language.service.ts
new file mode 100644
index 00000000..262a740f
--- /dev/null
+++ b/src/features/localization/services/app-language.service.ts
@@ -0,0 +1,31 @@
+import "server-only";
+
+import Negotiator from "negotiator";
+import { cookies, headers } from "next/headers";
+import { match } from "@formatjs/intl-localematcher";
+import {
+ DEFAULT_LANGUAGE_CODE,
+ LANGUAGE_CODES,
+ PREFERRED_LANGUAGE_COOKIE_KEY,
+} from "@/features/localization/localization.config";
+
+export const getLanguageCodeFromHeaders = (): string => {
+ const preferredLanguageCookie = cookies().get(PREFERRED_LANGUAGE_COOKIE_KEY);
+
+ if (preferredLanguageCookie) {
+ const preferredLanguage = preferredLanguageCookie.value;
+ const isSupportedLanguage = LANGUAGE_CODES.includes(preferredLanguage);
+
+ return isSupportedLanguage ? preferredLanguage : DEFAULT_LANGUAGE_CODE;
+ }
+
+ try {
+ const languages = new Negotiator({
+ headers: Object.fromEntries(headers()),
+ }).languages();
+
+ return match(languages, LANGUAGE_CODES, DEFAULT_LANGUAGE_CODE);
+ } catch (e) {
+ return DEFAULT_LANGUAGE_CODE;
+ }
+};
diff --git a/src/features/localization/services/component-dictionary.service.tsx b/src/features/localization/services/component-dictionary.service.tsx
new file mode 100644
index 00000000..04c584a1
--- /dev/null
+++ b/src/features/localization/services/component-dictionary.service.tsx
@@ -0,0 +1,25 @@
+import { ComponentDictionaryModel } from "@/features/localization/models/component-dictionary.model";
+import { enComponentDictionary } from "@/features/localization/dictionaries/ui/components/en";
+import { jaComponentDictionary } from "@/features/localization/dictionaries/ui/components/ja";
+import { enModalsDictionary } from "@/features/localization/dictionaries/ui/modals/en";
+import { jaModalsDictionary } from "@/features/localization/dictionaries/ui/modals/ja";
+import { ModalsUiDictionaryModel } from "@/features/localization/models/ui/modals-ui-dictionary.model";
+
+const componentDictionaries: {
+ [index: string]: ComponentDictionaryModel;
+} = {
+ en: enComponentDictionary,
+ ja: jaComponentDictionary,
+};
+
+const modalUiDictionaries: {
+ [index: string]: ModalsUiDictionaryModel;
+} = {
+ en: enModalsDictionary,
+ ja: jaModalsDictionary,
+};
+
+export const getComponentDictionary = (language: string) =>
+ componentDictionaries[language];
+export const getModalsUiDictionary = (language: string) =>
+ modalUiDictionaries[language];
diff --git a/src/features/localization/services/images-dictionary.service.tsx b/src/features/localization/services/images-dictionary.service.tsx
new file mode 100644
index 00000000..acd51002
--- /dev/null
+++ b/src/features/localization/services/images-dictionary.service.tsx
@@ -0,0 +1,13 @@
+import { ImagesDictionaryModel } from "@/features/localization/models/images-dictionary.model";
+import { enImagesDictionary } from "@/features/localization/dictionaries/images/en";
+import { jaImagesDictionary } from "@/features/localization/dictionaries/images/ja";
+
+const imagesDictionaries: {
+ [index: string]: ImagesDictionaryModel;
+} = {
+ en: enImagesDictionary,
+ ja: jaImagesDictionary,
+};
+
+export const getImageDictionary = (language: string) =>
+ imagesDictionaries[language];
diff --git a/src/features/localization/services/language-dictionary.service.ts b/src/features/localization/services/language-dictionary.service.ts
new file mode 100644
index 00000000..c8f05be9
--- /dev/null
+++ b/src/features/localization/services/language-dictionary.service.ts
@@ -0,0 +1,67 @@
+import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
+import { CommonDictionaryModel } from "@/features/localization/models/common-dictionary.model";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model";
+
+import { enLayoutDictionary } from "../dictionaries/layout/en";
+import { jaLayoutDictionary } from "@/features/localization/dictionaries/layout/ja";
+import { enCommonDictionary } from "@/features/localization/dictionaries/common/en";
+import { jaCommonDictionary } from "@/features/localization/dictionaries/common/ja";
+import { enHomeDictionary } from "@/features/localization/dictionaries/home/en";
+import { jaHomeDictionary } from "@/features/localization/dictionaries/home/ja";
+import { enIntroductionDictionary } from "@/features/localization/dictionaries/introduction/en";
+import { jaIntroductionDictionary } from "@/features/localization/dictionaries/introduction/ja";
+import { JwtDictionaryModel } from "@/features/localization/models/jwt-dictionary.model";
+import { jaJwtDictionary } from "@/features/localization/dictionaries/jwt/ja";
+import { enJwtDictionary } from "@/features/localization/dictionaries/jwt/en";
+import { LibrariesDictionaryModel } from "@/features/localization/models/libraries-dictionary.model";
+import { enLibrariesDictionary } from "@/features/localization/dictionaries/libraries/en";
+import { jaLibrariesDictionary } from "@/features/localization/dictionaries/libraries/ja";
+
+const commonDictionaries: { [index: string]: CommonDictionaryModel } = {
+ en: enCommonDictionary,
+ ja: jaCommonDictionary,
+};
+
+const layoutDictionaries: { [index: string]: LayoutDictionaryModel } = {
+ en: enLayoutDictionary,
+ ja: jaLayoutDictionary,
+};
+
+const homeDictionaries: { [index: string]: HomeDictionaryModel } = {
+ en: enHomeDictionary,
+ ja: jaHomeDictionary,
+};
+
+const jwtDictionaries: {
+ [index: string]: JwtDictionaryModel;
+} = {
+ en: enJwtDictionary,
+ ja: jaJwtDictionary,
+};
+
+const introductionDictionaries: {
+ [index: string]: IntroductionDictionaryModel;
+} = {
+ en: enIntroductionDictionary,
+ ja: jaIntroductionDictionary,
+};
+
+const librariesDictionaries: {
+ [index: string]: LibrariesDictionaryModel;
+} = {
+ en: enLibrariesDictionary,
+ ja: jaLibrariesDictionary,
+};
+
+export const getCommonDictionary = (language: string) =>
+ commonDictionaries[language];
+export const getLayoutDictionary = (language: string) =>
+ layoutDictionaries[language];
+export const getHomeDictionary = (language: string) =>
+ homeDictionaries[language];
+export const getJwtDictionary = (language: string) => jwtDictionaries[language];
+export const getIntroductionDictionary = (language: string) =>
+ introductionDictionaries[language];
+export const getLibrariesDictionary = (language: string) =>
+ librariesDictionaries[language];
diff --git a/src/features/localization/services/ui-language-content.service.tsx b/src/features/localization/services/ui-language-content.service.tsx
new file mode 100644
index 00000000..a9c806b8
--- /dev/null
+++ b/src/features/localization/services/ui-language-content.service.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+
+import EnIntroduction from "@/features/introduction/docs/en.introduction.mdx";
+import JaIntroduction from "@/features/introduction/docs/ja.introduction.mdx";
+
+interface GetIntroductionContentParams {
+ languageCode: string;
+}
+
+interface GetIntroductionContentResult {
+ Component: React.FC;
+}
+
+export const getIntroductionContent = (
+ params: GetIntroductionContentParams,
+): GetIntroductionContentResult => {
+ const { languageCode } = params;
+
+ if (languageCode === "ja") {
+ return {
+ Component: JaIntroduction,
+ };
+ }
+
+ return {
+ Component: EnIntroduction,
+ };
+};
diff --git a/src/features/localization/services/ui-language-dictionary.service.tsx b/src/features/localization/services/ui-language-dictionary.service.tsx
new file mode 100644
index 00000000..f6758085
--- /dev/null
+++ b/src/features/localization/services/ui-language-dictionary.service.tsx
@@ -0,0 +1,59 @@
+import { WarningsUiDictionaryModel } from "@/features/localization/models/ui/warnings-ui-dictionary.model";
+import { enWarningsDictionary } from "@/features/localization/dictionaries/ui/warnings/en";
+import { jaWarningsDictionary } from "@/features/localization/dictionaries/ui/warnings/ja";
+import { ButtonsUiDictionaryModel } from "@/features/localization/models/ui/buttons-ui-dictionary.model";
+import { enButtonsUiDictionary } from "@/features/localization/dictionaries/ui/buttons/en";
+import { jaButtonsUiDictionary } from "@/features/localization/dictionaries/ui/buttons/ja";
+import { PickersUiDictionaryModel } from "@/features/localization/models/ui/pickers-ui-dictionary.model";
+import { enPickersUiDictionary } from "@/features/localization/dictionaries/ui/pickers/en";
+import { jaPickersUiDictionary } from "@/features/localization/dictionaries/ui/pickers/ja";
+import { enAuth0Dictionary } from "@/features/localization/dictionaries/ui/auth0/en";
+import { jaAuth0Dictionary } from "@/features/localization/dictionaries/ui/auth0/ja";
+import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
+import { LinksUiDictionaryModel } from "@/features/localization/models/ui/links-ui-dictionary.model";
+import { enLinksUiDictionary } from "@/features/localization/dictionaries/ui/links/en";
+import { jaLinksUiDictionary } from "@/features/localization/dictionaries/ui/links/ja";
+
+const warningsUiDictionaries: {
+ [index: string]: WarningsUiDictionaryModel;
+} = {
+ en: enWarningsDictionary,
+ ja: jaWarningsDictionary,
+};
+
+const buttonsUiDictionaries: {
+ [index: string]: ButtonsUiDictionaryModel;
+} = {
+ en: enButtonsUiDictionary,
+ ja: jaButtonsUiDictionary,
+};
+
+const linksUiDictionaries: {
+ [index: string]: LinksUiDictionaryModel;
+} = {
+ en: enLinksUiDictionary,
+ ja: jaLinksUiDictionary,
+};
+
+const pickersUiDictionaries: {
+ [index: string]: PickersUiDictionaryModel;
+} = {
+ en: enPickersUiDictionary,
+ ja: jaPickersUiDictionary,
+};
+
+const auth0Dictionaries: { [index: string]: Auth0DictionaryModel } = {
+ en: enAuth0Dictionary,
+ ja: jaAuth0Dictionary,
+};
+
+export const getWarningsUiDictionary = (language: string) =>
+ warningsUiDictionaries[language];
+export const getButtonsUiDictionary = (language: string) =>
+ buttonsUiDictionaries[language];
+export const getLinksUiDictionary = (language: string) =>
+ linksUiDictionaries[language];
+export const getPickersUiDictionary = (language: string) =>
+ pickersUiDictionaries[language];
+export const getAuth0Dictionary = (language: string) =>
+ auth0Dictionaries[language];
diff --git a/src/features/localization/services/ui-language.utils.ts b/src/features/localization/services/ui-language.utils.ts
new file mode 100644
index 00000000..958077db
--- /dev/null
+++ b/src/features/localization/services/ui-language.utils.ts
@@ -0,0 +1,98 @@
+"use client";
+
+import {
+ DEFAULT_LANGUAGE_CODE,
+ LANGUAGE_CODES,
+ PREFERRED_LANGUAGE_COOKIE_KEY,
+} from "@/features/localization/localization.config";
+import { createUrlPath, getPathnameSegments } from "@/libs/utils/path.utils";
+import Cookies from "js-cookie";
+
+export async function savePreferredLanguage(languageCode: string) {
+ const isSupportedLanguage = LANGUAGE_CODES.includes(languageCode);
+
+ if (!isSupportedLanguage) {
+ return;
+ }
+
+ const preferredLanguageCookie = Cookies.get(PREFERRED_LANGUAGE_COOKIE_KEY);
+
+ const pathname = window.location.pathname;
+ const pathnameSegments = getPathnameSegments(pathname);
+
+ const pathnameHasLanguage = LANGUAGE_CODES.some(
+ (language) =>
+ pathname.startsWith(`/${language}/`) || pathname === `/${language}`,
+ );
+
+ /**
+ * pathname: /ja/resources
+ * languageCode: en
+ *
+ * Redirect /ja/resources to /resources
+ */
+ if (pathnameHasLanguage && languageCode === DEFAULT_LANGUAGE_CODE) {
+ pathnameSegments.shift();
+
+ Cookies.set(PREFERRED_LANGUAGE_COOKIE_KEY, languageCode, {
+ secure: true,
+ });
+
+ window.location.replace(createUrlPath([...pathnameSegments]));
+
+ return;
+ }
+
+ /**
+ * pathname: /ja/resources
+ * languageCode: ja | fr | de | etc.
+ *
+ * Redirect /ja/resources to /fr/resources,
+ * if language in path is different from language selected
+ */
+ if (pathnameHasLanguage && languageCode !== DEFAULT_LANGUAGE_CODE) {
+ const languagePathSegment = pathnameSegments.shift();
+
+ if (languageCode === languagePathSegment) {
+ return;
+ }
+
+ window.location.replace(createUrlPath([languageCode, ...pathnameSegments]));
+
+ return;
+ }
+
+ /**
+ * pathname: /resources
+ * languageCode: en
+ *
+ * Don't redirect.
+ */
+ if (!pathnameHasLanguage && languageCode === DEFAULT_LANGUAGE_CODE) {
+ if (!preferredLanguageCookie) {
+ Cookies.set(PREFERRED_LANGUAGE_COOKIE_KEY, languageCode, {
+ secure: true,
+ });
+ }
+
+ return;
+ }
+
+ /**
+ * pathname: /resources
+ * languageCode: languageCode: ja | fr | de | etc.
+ *
+ * Redirect /resources to /ja/resources
+ */
+ if (!pathnameHasLanguage && languageCode !== DEFAULT_LANGUAGE_CODE) {
+ Cookies.set(PREFERRED_LANGUAGE_COOKIE_KEY, languageCode, {
+ secure: true,
+ });
+
+ window.location.replace(createUrlPath([languageCode, ...pathnameSegments]));
+
+ return;
+ }
+
+ return;
+}
diff --git a/src/features/localization/services/ui-localization.service.ts b/src/features/localization/services/ui-localization.service.ts
new file mode 100644
index 00000000..45e4599a
--- /dev/null
+++ b/src/features/localization/services/ui-localization.service.ts
@@ -0,0 +1,26 @@
+"use client";
+
+import {
+ DEFAULT_LANGUAGE_CODE,
+ LANGUAGE_CODES,
+} from "@/features/localization/localization.config";
+
+class _UiLocalizationService {
+ private _language = DEFAULT_LANGUAGE_CODE;
+
+ get language() {
+ return this._language;
+ }
+
+ init(language: string) {
+ if (this.isSupportedLanguage(language)) {
+ this._language = language;
+ }
+ }
+
+ isSupportedLanguage(language: string) {
+ return LANGUAGE_CODES.includes(language);
+ }
+}
+
+export const UiLocalizationService = new _UiLocalizationService();
diff --git a/src/features/seo/components/structured-data.component.tsx b/src/features/seo/components/structured-data.component.tsx
new file mode 100644
index 00000000..f6923c61
--- /dev/null
+++ b/src/features/seo/components/structured-data.component.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { ArticleStructuredDataModel } from "@/features/seo/models/article-structured-data.model";
+import { BreadcrumbStructuredDataModel } from "@/features/seo/models/breadcrumb-structured-data.model";
+import { HowToStructuredDataModel } from "@/features/seo/models/how-to-structured-data.model";
+import { WebsiteStructuredDataModel } from "@/features/seo/models/website-structured-data.model";
+
+interface StructuredDataProps {
+ data:
+ | ArticleStructuredDataModel
+ | BreadcrumbStructuredDataModel
+ | HowToStructuredDataModel
+ | Array<
+ | ArticleStructuredDataModel
+ | BreadcrumbStructuredDataModel
+ | HowToStructuredDataModel
+ | WebsiteStructuredDataModel
+ >;
+}
+
+export const StructuredData: React.FC = ({ data }) => {
+ return (
+
+ );
+};
diff --git a/src/features/seo/models/article-metadata.model.ts b/src/features/seo/models/article-metadata.model.ts
new file mode 100644
index 00000000..6f14b80e
--- /dev/null
+++ b/src/features/seo/models/article-metadata.model.ts
@@ -0,0 +1,8 @@
+export interface ArticleMetadataModel {
+ title: string;
+ description: string;
+ authors: { name: string; url: string }[];
+ datePublished: string;
+ dateModified: string;
+ images?: string[];
+}
diff --git a/src/features/seo/models/article-structured-data.model.ts b/src/features/seo/models/article-structured-data.model.ts
new file mode 100644
index 00000000..1d67ffbf
--- /dev/null
+++ b/src/features/seo/models/article-structured-data.model.ts
@@ -0,0 +1,3 @@
+import { TechArticle, WithContext } from "schema-dts";
+
+export type ArticleStructuredDataModel = WithContext;
diff --git a/src/features/seo/models/breadcrumb-metadata.model.ts b/src/features/seo/models/breadcrumb-metadata.model.ts
new file mode 100644
index 00000000..201f1de6
--- /dev/null
+++ b/src/features/seo/models/breadcrumb-metadata.model.ts
@@ -0,0 +1,7 @@
+export interface BreadcrumbMetadataModel {
+ itemList: {
+ position: number;
+ name: string;
+ item: string;
+ }[];
+}
diff --git a/src/features/seo/models/breadcrumb-structured-data.model.ts b/src/features/seo/models/breadcrumb-structured-data.model.ts
new file mode 100644
index 00000000..4eb8fc65
--- /dev/null
+++ b/src/features/seo/models/breadcrumb-structured-data.model.ts
@@ -0,0 +1,3 @@
+import { BreadcrumbList, WithContext } from "schema-dts";
+
+export type BreadcrumbStructuredDataModel = WithContext;
diff --git a/src/features/seo/models/how-to-metadata.model.ts b/src/features/seo/models/how-to-metadata.model.ts
new file mode 100644
index 00000000..7c6ab461
--- /dev/null
+++ b/src/features/seo/models/how-to-metadata.model.ts
@@ -0,0 +1,9 @@
+export interface HowToMetadataModel {
+ title: string;
+ description: string;
+ steps: {
+ title: string;
+ description: string;
+ }[];
+ totalTime: string;
+}
diff --git a/src/features/seo/models/how-to-structured-data.model.ts b/src/features/seo/models/how-to-structured-data.model.ts
new file mode 100644
index 00000000..3838ce34
--- /dev/null
+++ b/src/features/seo/models/how-to-structured-data.model.ts
@@ -0,0 +1,3 @@
+import { HowTo, WithContext } from "schema-dts";
+
+export type HowToStructuredDataModel = WithContext;
diff --git a/src/features/seo/models/site-tree.model.ts b/src/features/seo/models/site-tree.model.ts
new file mode 100644
index 00000000..42a3c177
--- /dev/null
+++ b/src/features/seo/models/site-tree.model.ts
@@ -0,0 +1,21 @@
+export interface SiteTreeSectionModel {
+ urlPath: string;
+ id: string;
+ displayName: string;
+ sections: {
+ [index: string]: SiteTreeSectionModel;
+ };
+}
+
+export interface SiteTreeModel {
+ originUrl: string;
+ root: {
+ urlPath: string;
+ id: string;
+ displayName: string;
+ sections: {
+ introduction: SiteTreeSectionModel;
+ libraries: SiteTreeSectionModel;
+ };
+ };
+}
diff --git a/src/features/seo/models/website-structured-data.model.ts b/src/features/seo/models/website-structured-data.model.ts
new file mode 100644
index 00000000..430a5ea2
--- /dev/null
+++ b/src/features/seo/models/website-structured-data.model.ts
@@ -0,0 +1,3 @@
+import { WebSite, WithContext } from "schema-dts";
+
+export type WebsiteStructuredDataModel = WithContext;
diff --git a/src/features/seo/services/structured-data.service.ts b/src/features/seo/services/structured-data.service.ts
new file mode 100644
index 00000000..976bf50f
--- /dev/null
+++ b/src/features/seo/services/structured-data.service.ts
@@ -0,0 +1,75 @@
+import { ArticleStructuredDataModel } from "@/features/seo/models/article-structured-data.model";
+import { ArticleMetadataModel } from "@/features/seo/models/article-metadata.model";
+import { HowToStructuredDataModel } from "@/features/seo/models/how-to-structured-data.model";
+import { HowToMetadataModel } from "@/features/seo/models/how-to-metadata.model";
+import { HowToStep, ListItem } from "schema-dts";
+import { BreadcrumbMetadataModel } from "@/features/seo/models/breadcrumb-metadata.model";
+import { BreadcrumbStructuredDataModel } from "@/features/seo/models/breadcrumb-structured-data.model";
+import { siteTree } from "@/features/seo/site-tree";
+import { createUrlPath } from "@/libs/utils/path.utils";
+
+export const generateArticleStructuredData = (
+ article: ArticleMetadataModel,
+): ArticleStructuredDataModel => {
+ return {
+ "@context": "https://schema.org/",
+ "@type": "TechArticle",
+ headline: article.title,
+ name: article.title,
+ description: article.description,
+ author: article.authors.map((author) => {
+ return {
+ "@type": "Person",
+ name: author.name,
+ url: author.url,
+ };
+ }),
+ image: article.images,
+ datePublished: article.datePublished,
+ dateModified: article.dateModified,
+ };
+};
+
+export const generateHowToStructuredData = (
+ howTo: HowToMetadataModel,
+): HowToStructuredDataModel => {
+ const steps: HowToStep[] = howTo.steps.map((step) => {
+ return {
+ "@type": "HowToStep",
+ name: step.title,
+ text: step.description,
+ };
+ });
+
+ return {
+ "@context": "https://schema.org/",
+ "@type": "HowTo",
+ name: howTo.title,
+ totalTime: howTo.totalTime,
+ description: howTo.description,
+ step: steps,
+ };
+};
+
+export const createBreadcrumbListItem = (segments: string[]) => {
+ return siteTree.originUrl + createUrlPath(segments);
+};
+
+export const generateBreadcrumbStructuredData = (
+ metadata: BreadcrumbMetadataModel,
+): BreadcrumbStructuredDataModel => {
+ const itemList: ListItem[] = metadata.itemList.map((listItem) => {
+ return {
+ "@type": "ListItem",
+ position: listItem.position,
+ name: listItem.name,
+ item: listItem.item,
+ };
+ });
+
+ return {
+ "@context": "https://schema.org/",
+ "@type": "BreadcrumbList",
+ itemListElement: itemList,
+ };
+};
diff --git a/src/features/seo/site-tree.ts b/src/features/seo/site-tree.ts
new file mode 100644
index 00000000..97c74417
--- /dev/null
+++ b/src/features/seo/site-tree.ts
@@ -0,0 +1,36 @@
+import { SiteTreeModel } from "@/features/seo/models/site-tree.model";
+import { createUrlPath } from "@/libs/utils/path.utils";
+import { BASE_URL } from "@/libs/config/project.constants";
+
+export const originUrl = `${BASE_URL}`;
+
+export const siteTree: SiteTreeModel = {
+ originUrl: originUrl,
+ root: {
+ urlPath: "",
+ id: "root",
+ displayName: "JWT Debugger",
+ sections: {
+ introduction: {
+ urlPath: "introduction",
+ id: "introduction",
+ displayName: "JWT Introduction",
+ sections: {},
+ },
+ libraries: {
+ urlPath: "libraries",
+ id: "libraries",
+ displayName: "JWT Libraries",
+ sections: {},
+ },
+ },
+ },
+};
+
+export const sitePaths = {
+ root: createUrlPath([siteTree.root.urlPath]),
+ home: createUrlPath([siteTree.root.urlPath]),
+ introduction: createUrlPath([siteTree.root.sections.introduction.urlPath]),
+ libraries: createUrlPath([siteTree.root.sections.libraries.urlPath]),
+ ask: "https://community.auth0.com/c/jwt/8",
+};
diff --git a/src/features/themes/services/theme.client.utils.ts b/src/features/themes/services/theme.client.utils.ts
new file mode 100644
index 00000000..df92c9fb
--- /dev/null
+++ b/src/features/themes/services/theme.client.utils.ts
@@ -0,0 +1,96 @@
+"use client";
+
+import { PREFERRED_THEME_COOKIE_KEY } from "@/features/themes/theme.config";
+import Cookies from "js-cookie";
+import { getLayoutDictionary } from "@/features/localization/services/language-dictionary.service";
+import { ThemeModel } from "@/features/common/models/theme.model";
+import {
+ ThemeCookieValues,
+ ThemePickerCodeValues,
+} from "@/features/common/values/theme.values";
+import {
+ getSanitizedThemeCookieValue,
+ getSanitizedThemePickerCodeValue,
+} from "@/features/themes/services/theme.utils";
+
+export async function savePreferredThemeInCookie(
+ selectedThemePickerCode: ThemePickerCodeValues,
+ languageCode: string,
+): Promise {
+ const sanitizedThemePickerCodeValue = getSanitizedThemePickerCodeValue(
+ selectedThemePickerCode,
+ );
+
+ if (!sanitizedThemePickerCodeValue) {
+ return null;
+ }
+
+ const preferredThemeCookie = Cookies.get(PREFERRED_THEME_COOKIE_KEY);
+
+ if (
+ preferredThemeCookie &&
+ preferredThemeCookie === sanitizedThemePickerCodeValue
+ ) {
+ return null;
+ }
+
+ if (sanitizedThemePickerCodeValue === ThemePickerCodeValues.SYSTEM) {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+ if (mediaQuery.matches) {
+ Cookies.set(PREFERRED_THEME_COOKIE_KEY, ThemeCookieValues.SYSTEM_DARK, {
+ secure: true,
+ });
+ document.body.setAttribute("data-theme", ThemeCookieValues.SYSTEM_DARK);
+ document.documentElement.setAttribute(
+ "data-theme",
+ ThemeCookieValues.SYSTEM_DARK,
+ );
+
+ const dictionary = getLayoutDictionary(languageCode);
+
+ return dictionary.ribbon.themePicker.options.filter(
+ (element) => element.code === selectedThemePickerCode,
+ )[0];
+ }
+
+ Cookies.set(PREFERRED_THEME_COOKIE_KEY, ThemeCookieValues.SYSTEM_LIGHT, {
+ secure: true,
+ });
+ document.body.setAttribute("data-theme", ThemeCookieValues.SYSTEM_LIGHT);
+ document.documentElement.setAttribute(
+ "data-theme",
+ ThemeCookieValues.SYSTEM_LIGHT,
+ );
+
+ const dictionary = getLayoutDictionary(languageCode);
+
+ return dictionary.ribbon.themePicker.options.filter(
+ (element) => element.code === selectedThemePickerCode,
+ )[0];
+ }
+
+ const sanitizedThemeCookieValue = getSanitizedThemeCookieValue(
+ selectedThemePickerCode,
+ );
+
+ if (!sanitizedThemeCookieValue) {
+ return null;
+ }
+
+ Cookies.set(PREFERRED_THEME_COOKIE_KEY, sanitizedThemeCookieValue, {
+ secure: true,
+ });
+
+ document.body.setAttribute("data-theme", sanitizedThemeCookieValue);
+ document.documentElement.setAttribute(
+ "data-theme",
+ sanitizedThemeCookieValue,
+ );
+
+ const dictionary = getLayoutDictionary(languageCode);
+
+ return dictionary.ribbon.themePicker.options.filter(
+ (element) => element.code === sanitizedThemePickerCodeValue,
+ )[0];
+}
diff --git a/src/features/themes/services/theme.service.ts b/src/features/themes/services/theme.service.ts
new file mode 100644
index 00000000..cbb5d749
--- /dev/null
+++ b/src/features/themes/services/theme.service.ts
@@ -0,0 +1,24 @@
+import "server-only";
+
+import { cookies } from "next/headers";
+import { PREFERRED_THEME_COOKIE_KEY } from "@/features/themes/theme.config";
+import { getSanitizedThemeCookieValue } from "@/features/themes/services/theme.utils";
+import { ThemeCookieValues } from "@/features/common/values/theme.values";
+
+export const getThemeCodeFromCookies = (): ThemeCookieValues => {
+ const preferredThemeCookie = cookies().get(PREFERRED_THEME_COOKIE_KEY);
+
+ if (!preferredThemeCookie) {
+ return ThemeCookieValues.SYSTEM_DARK;
+ }
+
+ const sanitizedThemeValue = getSanitizedThemeCookieValue(
+ preferredThemeCookie.value,
+ );
+
+ if (!sanitizedThemeValue) {
+ return ThemeCookieValues.SYSTEM_DARK;
+ }
+
+ return sanitizedThemeValue;
+};
diff --git a/src/features/themes/services/theme.utils.ts b/src/features/themes/services/theme.utils.ts
new file mode 100644
index 00000000..e75f12eb
--- /dev/null
+++ b/src/features/themes/services/theme.utils.ts
@@ -0,0 +1,39 @@
+import {
+ ThemeCookieValues,
+ ThemePickerCodeValues,
+} from "@/features/common/values/theme.values";
+
+export const isSystemThemePreference = (value: string) =>
+ value.startsWith(ThemePickerCodeValues.SYSTEM);
+
+export const isLightThemePreference = (value: string) =>
+ value === ThemePickerCodeValues.LIGHT;
+
+export const getSanitizedThemeCookieValue = (
+ value: string | null,
+): ThemeCookieValues | null => {
+ if (
+ value === ThemeCookieValues.LIGHT ||
+ value === ThemeCookieValues.DARK ||
+ value === ThemeCookieValues.SYSTEM_LIGHT ||
+ value === ThemeCookieValues.SYSTEM_DARK
+ ) {
+ return value;
+ }
+
+ return null;
+};
+
+export const getSanitizedThemePickerCodeValue = (
+ value: string | null,
+): ThemePickerCodeValues | null => {
+ if (
+ value === ThemePickerCodeValues.LIGHT ||
+ value === ThemePickerCodeValues.DARK ||
+ value === ThemePickerCodeValues.SYSTEM
+ ) {
+ return value;
+ }
+
+ return null;
+};
diff --git a/src/features/themes/theme.config.ts b/src/features/themes/theme.config.ts
new file mode 100644
index 00000000..f44ab39d
--- /dev/null
+++ b/src/features/themes/theme.config.ts
@@ -0,0 +1,4 @@
+import { ThemeCookieValues } from "@/features/common/values/theme.values";
+
+export const DEFAULT_THEME_VALUE = ThemeCookieValues.SYSTEM_DARK;
+export const PREFERRED_THEME_COOKIE_KEY = "preferred_theme";
diff --git a/src/libs/config/project-paths.constants.ts b/src/libs/config/project-paths.constants.ts
new file mode 100644
index 00000000..5963a042
--- /dev/null
+++ b/src/libs/config/project-paths.constants.ts
@@ -0,0 +1,10 @@
+import { join } from "path";
+
+export const AUTH0_SIGNUP_URL =
+ "https://auth0.com/signup/?utm_source=jwt.io&utm_medium=microsites&utm_campaign=devn_signup";
+export const AUTH0_SIGNUP_URL_JA =
+ "https://auth0.com/jp/signup/?utm_source=jwtio&utm_medium=microsites&utm_campaign=devn-signups";
+
+export const DATA_DIR = "data";
+export const SRC_DIR = "src";
+export const DATA_PATH = join(process.cwd(), SRC_DIR, DATA_DIR);
diff --git a/src/libs/config/project.constants.ts b/src/libs/config/project.constants.ts
new file mode 100644
index 00000000..e5cad71b
--- /dev/null
+++ b/src/libs/config/project.constants.ts
@@ -0,0 +1,16 @@
+export const BASE_URL = "https://jwt.io/";
+export const LIBRARIES_FILTER_QUERY_PARAM_KEY = "filter";
+export const LIBRARIES_FILTER_DEFAULT_VALUE = "all";
+export enum SupportedTokenHashParamValues {
+ TOKEN = "token",
+ ACCESS_TOKEN = "access_token",
+ ID_TOKEN = "id_token",
+ VALUE = "value",
+}
+export const WARNING_PARAM_KEY = "warning";
+export const WARNING_PARAM_VALUE = "use_hash";
+
+export const EBOOK_URL =
+ "https://auth0.com/resources/ebooks/jwt-handbook/?utm_source=jwtio&utm_medium=banner&utm_campaign=jwt-handbook";
+export const EBOOK_URL_JA =
+ "https://auth0.com/resources/ebooks/jp-jwt-handbook/?utm_source=jwtio&utm_medium=banner&utm_campaign=jp-jwt-handbook";
diff --git a/src/libs/metadata/metadata.service.ts b/src/libs/metadata/metadata.service.ts
new file mode 100644
index 00000000..7f394560
--- /dev/null
+++ b/src/libs/metadata/metadata.service.ts
@@ -0,0 +1,43 @@
+import "server-only";
+
+import { Metadata } from "next";
+import { PageMetadataModel } from "@/features/common/models/page-metadata.model";
+import { getCommonDictionary } from "@/features/localization/services/language-dictionary.service";
+import { BASE_URL } from "@/libs/config/project.constants";
+import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.config";
+
+interface GeneratePageMetadataParams {
+ languageCode: string;
+ metadata: PageMetadataModel;
+ pagePath: string;
+ canonical?: string;
+}
+
+export async function generatePageMetadata(
+ params: GeneratePageMetadataParams,
+): Promise {
+ const { languageCode, metadata, pagePath, canonical } = params;
+
+ const commonDictionary = getCommonDictionary(languageCode);
+
+ const baseUrl =
+ languageCode === DEFAULT_LANGUAGE_CODE
+ ? BASE_URL
+ : new URL(languageCode, BASE_URL);
+
+ const url = new URL(pagePath, baseUrl);
+
+ return {
+ ...metadata,
+ alternates: {
+ ...commonDictionary.alternates,
+ canonical: canonical || commonDictionary.alternates.canonical,
+ },
+ openGraph: {
+ ...commonDictionary.openGraph,
+ title: metadata.title,
+ description: metadata.description,
+ url: url,
+ },
+ };
+}
diff --git a/src/libs/testing/data-testid.dictionary.ts b/src/libs/testing/data-testid.dictionary.ts
new file mode 100644
index 00000000..5285be6f
--- /dev/null
+++ b/src/libs/testing/data-testid.dictionary.ts
@@ -0,0 +1,190 @@
+export const dataTestidDictionary = {
+ decoder: {
+ id: "decoder",
+ jwtEditor: {
+ id: "decoder__jwtEditor",
+ statusBar: {
+ success: {
+ id: "decoder__jwtEditor___statusBar__success",
+ },
+ warning: {
+ id: "decoder__jwtEditor___statusBar__warning",
+ },
+ error: {
+ id: "decoder__jwtEditor___statusBar__error",
+ },
+ },
+ notificationBar: {
+ id: "decoder__jwtEditor___notificationBar",
+ success: {
+ id: "decoder__jwtEditor___notificationBar__success",
+ },
+ warning: {
+ id: "decoder__jwtEditor___notificationBar__warning",
+ },
+ error: {
+ id: "decoder__jwtEditor___notificationBar__error",
+ },
+ },
+ },
+ decodedHeader: {
+ id: "decoder__header",
+ json: {
+ id: "decoder__header__json",
+ },
+ table: {
+ id: "decoder__header__table",
+ },
+ },
+ decodedPayload: {
+ id: "decoder__payload",
+ json: {
+ id: "decoder__payload__json",
+ },
+ table: {
+ id: "decoder__payload__table",
+ },
+ },
+ secretKeyEditor: {
+ id: "decoder__secretKeyEditor",
+ statusBar: {
+ success: {
+ id: "decoder__secretKeyEditor___statusBar__success",
+ },
+ warning: {
+ id: "decoder__secretKeyEditor___statusBar__warning",
+ },
+ error: {
+ id: "decoder__secretKeyEditor___statusBar__error",
+ },
+ },
+ notificationBar: {
+ id: "decoder__secretKeyEditor___notificationBar",
+ success: {
+ id: "decoder__secretKeyEditor___notificationBar__success",
+ },
+ warning: {
+ id: "decoder__secretKeyEditor___notificationBar__warning",
+ },
+ error: {
+ id: "decoder__secretKeyEditor___notificationBar__error",
+ },
+ },
+ },
+ },
+ encoder: {
+ id: "encoder",
+ headerEditor: {
+ id: "encoder__headerEditor",
+ statusBar: {
+ success: {
+ id: "encoder__headerEditor___statusBar__success",
+ },
+ warning: {
+ id: "encoder__headerEditor___statusBar__warning",
+ },
+ error: {
+ id: "encoder__headerEditor___statusBar__error",
+ },
+ },
+ notificationBar: {
+ success: {
+ id: "encoder__headerEditor___notificationBar__success",
+ },
+ warning: {
+ id: "encoder__headerEditor___notificationBar__warning",
+ },
+ error: {
+ id: "encoder__headerEditor___notificationBar__error",
+ },
+ },
+ },
+ payloadEditor: {
+ id: "encoder__payloadEditor",
+ statusBar: {
+ success: {
+ id: "encoder__payloadEditor___statusBar__success",
+ },
+ warning: {
+ id: "encoder__payloadEditor___statusBar__warning",
+ },
+ error: {
+ id: "encoder__payloadEditor___statusBar__error",
+ },
+ },
+ notificationBar: {
+ success: {
+ id: "encoder__payloadEditor___notificationBar__success",
+ },
+ warning: {
+ id: "encoder__payloadEditor___notificationBar__warning",
+ },
+ error: {
+ id: "encoder__payloadEditor___notificationBar__error",
+ },
+ },
+ },
+ secretKeyEditor: {
+ id: "encoder__secretKeyEditor",
+ statusBar: {
+ success: {
+ id: "encoder__secretKeyEditor___statusBar__success",
+ },
+ warning: {
+ id: "encoder__secretKeyEditor___statusBar__warning",
+ },
+ error: {
+ id: "encoder__secretKeyEditor___statusBar__error",
+ },
+ },
+ notificationBar: {
+ success: {
+ id: "encoder__secretKeyEditor___notificationBar__success",
+ },
+ warning: {
+ id: "encoder__secretKeyEditor___notificationBar__warning",
+ },
+ error: {
+ id: "encoder__secretKeyEditor___notificationBar__error",
+ },
+ },
+ },
+ jwt: {
+ id: "encoder__jwt",
+ statusBar: {
+ success: {
+ id: "encoder__jwt___statusBar__success",
+ },
+ warning: {
+ id: "encoder__jwt___statusBar__warning",
+ },
+ error: {
+ id: "encoder__jwt___statusBar__error",
+ },
+ },
+ notificationBar: {
+ success: {
+ id: "encoder__jwt___notificationBar__success",
+ },
+ warning: {
+ id: "encoder__jwt___notificationBar__warning",
+ },
+ error: {
+ id: "encoder__jwt___notificationBar__error",
+ },
+ },
+ },
+ },
+ feedback: {
+ id: "debugger-feedback",
+ },
+ debugger: {
+ id: "debugger-widget",
+ decoderTab: {
+ id: "decoder-tab",
+ },
+ encoderTab: {
+ id: "encoder-tab",
+ },
+ },
+};
diff --git a/src/libs/theme/fonts.tsx b/src/libs/theme/fonts.tsx
new file mode 100644
index 00000000..3c705c14
--- /dev/null
+++ b/src/libs/theme/fonts.tsx
@@ -0,0 +1,64 @@
+import localFont from "next/font/local";
+import { Inter, Roboto_Mono } from "next/font/google";
+
+export const PrimaryFont = Inter({
+ style: ["normal"],
+ weight: ["400", "500", "600"],
+ subsets: ["latin", "latin-ext"],
+ variable: "--font-primary",
+});
+
+export const SecondaryFont = localFont({
+ src: [
+ {
+ path: "./fonts/Aeonik-Regular.woff2",
+ weight: "400",
+ style: "normal",
+ },
+ {
+ path: "./fonts/Aeonik-Medium.woff2",
+ weight: "500",
+ style: "normal",
+ },
+ {
+ path: "./fonts/Aeonik-Bold.woff2",
+ weight: "600",
+ style: "normal",
+ },
+ ],
+ variable: "--font-secondary",
+});
+
+export const MonoFont = Roboto_Mono({
+ style: ["normal"],
+ weight: ["400", "500", "600"],
+ subsets: ["latin", "latin-ext"],
+ variable: "--font-mono",
+});
+
+export const JapaneseFont = localFont({
+ src: [
+ {
+ path: "./fonts/NotoSansJP-Regular.otf",
+ weight: "400",
+ style: "normal",
+ },
+ {
+ path: "./fonts/NotoSansJP-Medium.otf",
+ weight: "500",
+ style: "normal",
+ },
+ {
+ path: "./fonts/NotoSansJP-Bold.otf",
+ weight: "600",
+ style: "normal",
+ },
+ ],
+ variable: "--font-japanese",
+});
+
+export const getLocalizedSecondaryFont = (language: string) =>
+ language === "ja" ? JapaneseFont.className : SecondaryFont.className;
+
+export const getLocalizedPrimaryFont = (language: string) =>
+ language === "ja" ? JapaneseFont.className : PrimaryFont.className;
diff --git a/src/libs/theme/fonts/Aeonik-Bold.otf b/src/libs/theme/fonts/Aeonik-Bold.otf
new file mode 100755
index 00000000..b962d72f
Binary files /dev/null and b/src/libs/theme/fonts/Aeonik-Bold.otf differ
diff --git a/src/libs/theme/fonts/Aeonik-Bold.woff2 b/src/libs/theme/fonts/Aeonik-Bold.woff2
new file mode 100644
index 00000000..650c0d1a
Binary files /dev/null and b/src/libs/theme/fonts/Aeonik-Bold.woff2 differ
diff --git a/src/libs/theme/fonts/Aeonik-Medium.otf b/src/libs/theme/fonts/Aeonik-Medium.otf
new file mode 100644
index 00000000..6a7ad2b6
Binary files /dev/null and b/src/libs/theme/fonts/Aeonik-Medium.otf differ
diff --git a/src/libs/theme/fonts/Aeonik-Medium.woff2 b/src/libs/theme/fonts/Aeonik-Medium.woff2
new file mode 100644
index 00000000..74b34e6c
Binary files /dev/null and b/src/libs/theme/fonts/Aeonik-Medium.woff2 differ
diff --git a/src/libs/theme/fonts/Aeonik-Regular.otf b/src/libs/theme/fonts/Aeonik-Regular.otf
new file mode 100755
index 00000000..562257bc
Binary files /dev/null and b/src/libs/theme/fonts/Aeonik-Regular.otf differ
diff --git a/src/libs/theme/fonts/Aeonik-Regular.woff2 b/src/libs/theme/fonts/Aeonik-Regular.woff2
new file mode 100644
index 00000000..9dfd8b6e
Binary files /dev/null and b/src/libs/theme/fonts/Aeonik-Regular.woff2 differ
diff --git a/src/libs/theme/fonts/AeonikMono-Medium.woff2 b/src/libs/theme/fonts/AeonikMono-Medium.woff2
new file mode 100644
index 00000000..a98b326e
Binary files /dev/null and b/src/libs/theme/fonts/AeonikMono-Medium.woff2 differ
diff --git a/src/libs/theme/fonts/NotoSansJP-Bold.otf b/src/libs/theme/fonts/NotoSansJP-Bold.otf
new file mode 100755
index 00000000..e5b538d1
Binary files /dev/null and b/src/libs/theme/fonts/NotoSansJP-Bold.otf differ
diff --git a/src/libs/theme/fonts/NotoSansJP-Medium.otf b/src/libs/theme/fonts/NotoSansJP-Medium.otf
new file mode 100755
index 00000000..ee727321
Binary files /dev/null and b/src/libs/theme/fonts/NotoSansJP-Medium.otf differ
diff --git a/src/libs/theme/fonts/NotoSansJP-Regular.otf b/src/libs/theme/fonts/NotoSansJP-Regular.otf
new file mode 100755
index 00000000..776427dc
Binary files /dev/null and b/src/libs/theme/fonts/NotoSansJP-Regular.otf differ
diff --git a/src/libs/theme/styles/_mixins.scss b/src/libs/theme/styles/_mixins.scss
new file mode 100644
index 00000000..1767cd41
--- /dev/null
+++ b/src/libs/theme/styles/_mixins.scss
@@ -0,0 +1,56 @@
+@use "@/libs/theme/styles/variables" as *;
+
+@mixin Container {
+ width: 100%;
+}
+
+@mixin ExtendedGrid {
+ width: 100%;
+ max-width: $extended-grid-max-width;
+ margin: 0 auto;
+}
+
+@mixin InnerContentGrid {
+ display: grid;
+ grid-template-columns: repeat($breakpoint-columns-xxs, minmax(0, 1fr));
+ column-gap: $breakpoint-gutter-xxs;
+ width: calc(100% - ($breakpoint-outer-margin-xxs * 2));
+ max-width: $inner-content-grid-max-width;
+ margin: 0 auto;
+
+ @media #{$breakpoint-dimension-sm} {
+ width: calc(100% - ($breakpoint-outer-margin-sm * 2));
+ grid-template-columns: repeat($breakpoint-columns-sm, minmax(0, 1fr));
+ }
+
+ @media #{$breakpoint-dimension-lg} {
+ width: calc(100% - ($breakpoint-outer-margin-lg * 2));
+ }
+
+ @media #{$breakpoint-dimension-xl} {
+ column-gap: $breakpoint-gutter-xl;
+ }
+}
+
+@mixin InnerContentFlex {
+ display: flex;
+ width: calc(100% - ($breakpoint-outer-margin-xxs * 2));
+ max-width: $inner-content-grid-max-width;
+ margin: 0 auto;
+
+ @media #{$breakpoint-dimension-sm} {
+ width: calc(100% - ($breakpoint-outer-margin-sm * 2));
+ }
+
+ @media #{$breakpoint-dimension-lg} {
+ width: calc(100% - ($breakpoint-outer-margin-lg * 2));
+ }
+}
+
+@mixin LocaleLineHeight($locale, $font-size) {
+ @if $locale == "ja" {
+ line-height: #{$font-size + 0.875rem};
+ } @else {
+ line-height: #{$font-size + 0.5rem};
+ }
+}
diff --git a/src/libs/theme/styles/_variables.scss b/src/libs/theme/styles/_variables.scss
new file mode 100644
index 00000000..e5a0bd15
--- /dev/null
+++ b/src/libs/theme/styles/_variables.scss
@@ -0,0 +1,280 @@
+$origin: "only screen and (min-width: 0px)";
+$xxSmall: "only screen and (min-width: 376px)";
+$xSmall: "only screen and (min-width: 380px)";
+$small: "only screen and (min-width: 540px)";
+$desktop: "only screen and (min-width: 1090px)";
+$tablet720: "only screen and (min-width: 720px)";
+$tablet740: "only screen and (min-width: 740px)";
+$tablet760: "only screen and (min-width: 760px)";
+$largerTablet: "only screen and (min-width: 820px)";
+$largeTablet: "only screen and (min-width: 640px)";
+$tablet: "only screen and (min-width: 478px)";
+
+$breakpoint-dimension-xxs: "only screen and (min-width: 360px)";
+$breakpoint-dimension-xs: "only screen and (min-width: 576px)";
+$breakpoint-dimension-sm: "only screen and (min-width: 768px)";
+$breakpoint-dimension-md: "only screen and (min-width: 992px)";
+$breakpoint-dimension-lg: "only screen and (min-width: 1200px)";
+$breakpoint-dimension-xl: "only screen and (min-width: 1400px)";
+
+$breakpoint-dimension-xs-plus: "only screen and (min-width: 400px)";
+$breakpoint-dimension-xs-430: "only screen and (min-width: 430px)";
+$breakpoint-dimension-sm-extra: "only screen and (min-width: 640px)";
+
+$breakpoint-columns-xxs: 6;
+$breakpoint-columns-xs: 6;
+$breakpoint-columns-sm: 12;
+$breakpoint-columns-md: 12;
+$breakpoint-columns-lg: 12;
+$breakpoint-columns-xl: 12;
+
+$breakpoint-gutter-xxs: 1rem;
+$breakpoint-gutter-xs: 1rem;
+$breakpoint-gutter-sm: 1rem;
+$breakpoint-gutter-md: 1rem;
+$breakpoint-gutter-lg: 1rem;
+$breakpoint-gutter-xl: 2rem;
+
+$breakpoint-outer-margin-xxs: 1rem;
+$breakpoint-outer-margin-xs: 1rem;
+$breakpoint-outer-margin-sm: 2rem;
+$breakpoint-outer-margin-md: 2rem;
+$breakpoint-outer-margin-lg: 64px;
+$breakpoint-outer-margin-xl: 64px;
+
+$page-min-width: 360px;
+$inner-content-grid-max-width: 1312px;
+$extended-grid-max-width: 1536px;
+
+$gray-50: #111;
+$gray-75: #2a2a2a;
+$gray-100: #1d1d1d;
+$gray-200: #303030;
+$gray-300: #4b4b4b;
+$gray-400: #6a6a6a;
+$gray-500: #8d8d8d;
+$gray-600: #b0b0b0;
+$gray-700: #d0d0d0;
+$gray-800: #ebebeb;
+$gray-900: #ffffff;
+
+$functional-gray-0: #ffffff;
+$functional-gray-50: #fbfbfb;
+$functional-gray-100: #f6f6f6;
+$functional-gray-150: #f1f1f1;
+$functional-gray-200: #e5e5e5;
+$functional-gray-250: #d7d7d7;
+$functional-gray-300: #c5c5c5;
+$functional-gray-350: #b9b9b9;
+$functional-gray-400: #ababab;
+$functional-gray-450: #8e8e8e;
+$functional-gray-500: #808080;
+$functional-gray-550: #686868;
+$functional-gray-600: #555555;
+$functional-gray-650: #3e3e3e;
+$functional-gray-700: #383838;
+$functional-gray-750: #2a2a2a;
+$functional-gray-800: #242424;
+$functional-gray-850: #1e1e1e;
+$functional-gray-900: #171717;
+$functional-gray-950: #111111;
+$functional-gray-1000: #000000;
+
+$indigo: #635dff;
+$indigo-100: #1a1d61;
+$indigo-200: #23277d;
+$indigo-300: #2e329e;
+$indigo-400: #3a3fbd;
+$indigo-500: #494ed8;
+$indigo-600: #5a60eb;
+$indigo-700: #6e73f6;
+$indigo-800: #8488fd;
+$indigo-900: #999dff;
+$indigo-1000: #aeb1ff;
+$indigo-1100: #c2c4ff;
+$indigo-1200: #d4d5ff;
+$indigo-1300: #e3e4ff;
+
+$Neutral0: #ffffff;
+$Neutral1: #f1f2f3;
+$Neutral2: #e9eaec;
+$Neutral3: #cdd0d5;
+$Neutral4: #9ea4ae;
+$Neutral5: #6b7380;
+$Neutral6: #4a5059;
+$Neutral7: #151619;
+$Charcoal: #1c1c1c;
+$Charcoal2: #191919;
+$Black: "#000";
+
+$green: #48e7ca;
+$Blue300: #3f59e4;
+
+$pink: #f4d;
+
+$Teal200: #b1e4de;
+$Teal300: #7dcfc2;
+$Teal400: #4cb7a3;
+$Teal600: #096256;
+
+$grey: #d8d8d8;
+
+$gradient-text: linear-gradient(
+ 47deg,
+ #4cb7a3 2.88%,
+ #3f59e4 51.63%,
+ #7549f2 96.1%
+ ),
+ #c4c4c4;
+
+$gradient-button: linear-gradient(
+ 49deg,
+ #4cb7a3 2.88%,
+ #3f59e4 51.63%,
+ #7549f2 96.1%
+);
+
+$gradient-speaker-card: linear-gradient(
+ 47deg,
+ #4016a0 2.88%,
+ #3f59e4 51.63%,
+ #4cb7a3 96.1%
+);
+
+$gradient-app-card---resting: linear-gradient(
+ 180deg,
+ #191919 3.56%,
+ #4016a0 42.85%,
+ #3f59e4 67.69%
+);
+
+$ribbon-height: 2.5rem;
+$ribbon-height-mobile: 2.5rem;
+$navbar-height: 3rem;
+$navbar-height-mobile: 3rem;
+$main-nav-height: calc($ribbon-height + $navbar-height);
+$main-nav-height-mobile: calc($ribbon-height-mobile + $navbar-height-mobile);
+
+$workflows-navbar-height: 3rem;
+
+$rails-sm: 1rem;
+$rails-md: 1.5rem;
+$rails-lg: 64px;
+
+$wrapper-width-lg: 1280px;
+$wrapper-width-sm: 768px;
+
+$article-max-width: 776px;
+
+$surface-surface-primary: #111;
+$surface-surface-secondary: #1e1e1e;
+$neutrals-functional-300: #555;
+$neutrals-light-100-snow: #fffefa;
+
+$blue-100-cloud: #b6caff;
+$secondary-warm-200-tangerine: #e27133;
+
+$action-button-animation-length: 0.48s;
+
+$white: #ffffff;
+$black: #000000;
+
+$carbon: #191919;
+$slate: #6b665f;
+$gravel: #afaba1;
+
+$sand: #e8dcc7;
+$cream: #f6f1e7;
+$snow: #fffefa;
+$quiet-snow: rgb(255, 254, 250);
+
+$cobalt: #1a31a9;
+$sky: #3f59e4;
+$cloud: #b6c9ff;
+
+$ocean: #096256;
+$seafoam: #4cb7a3;
+$turquoise: #b1e4de;
+
+$clay: #763101;
+$tangerine: #e27133;
+$melon: #f2ac84;
+
+$eggplant: #4016a0;
+$violet: #7549f2;
+$lilac: #b49bfc;
+
+$forest: #0f5c34;
+$emerald: #149750;
+$pistachio: #8fc88a;
+
+$walnut: #744e00;
+$goldenrod: #ef9b05;
+$wheat: #f4d594;
+
+$agenda-item-seafoam: $seafoam;
+$agenda-item-indigo: $lilac;
+$agenda-item-melon: $melon;
+
+$sidebar-width: 15rem;
+
+$mid-animation-time: 0.12s;
+
+$livestream-speaker-image-frame: 3.25rem;
+$livestream-speaker-image: 3rem;
+
+$panel-delimiter-opacity: 0.32;
+
+$link-resting-color: #99a7f1;
+
+$color_bg_page: $functional-gray-950;
+$color_bg_layer: "";
+$color_bg_backdrop: "";
+
+$color_fg_default: $functional-gray-200;
+
+$color_fg_disabled: "";
+$color_fg_link_primary: "";
+$color_fg_link_primary_hover: "";
+$color_fg_link_primary_pressed: "";
+$color_fg_link: $functional-gray-50;
+$color_fg_link_hover: $functional-gray-50;
+$color_fg_selected: $functional-gray-50;
+$color_border_selected: $functional-gray-50;
+$color_border_default: $gray-75;
+
+$color_bg_button_primary: $Blue300;
+$color_fg_on_button_primary: $functional-gray-50;
+$color_bg_button_primary_gradient: linear-gradient(
+ 120deg,
+ #191919 -29.78%,
+ #4016a0 11.61%,
+ #3f59e4 100.07%
+);
+
+html[data-theme="light"],
+html[data-theme="system-light"] {
+ $color_bg_page: $functional-gray-950;
+ $color_bg_layer: "";
+ $color_bg_backdrop: "";
+
+ $color_fg_default: $functional-gray-200;
+ $color_fg_disabled: "";
+ $color_fg_link_primary: "";
+ $color_fg_link_primary_hover: "";
+ $color_fg_link_primary_pressed: "";
+ $color_fg_link: $functional-gray-50;
+ $color_fg_link_hover: $functional-gray-50;
+ $color_fg_selected: $functional-gray-50;
+ $color_border_selected: $functional-gray-50;
+ $color_border_default: $gray-75;
+
+ $color_bg_button_primary: $Blue300;
+ $color_fg_on_button_primary: $functional-gray-50;
+ $color_bg_button_primary_gradient: linear-gradient(
+ 120deg,
+ #191919 -29.78%,
+ #4016a0 11.61%,
+ #3f59e4 100.07%
+ );
+}
diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss
new file mode 100644
index 00000000..051ef32b
--- /dev/null
+++ b/src/libs/theme/styles/globals.scss
@@ -0,0 +1,689 @@
+@use "@/libs/theme/styles/variables" as *;
+
+:root {
+ --functional-gray-0: #ffffff;
+ --functional-gray-50: #fbfbfb;
+ --functional-gray-100: #f6f6f6;
+ --functional-gray-150: #f1f1f1;
+ --functional-gray-200: #e5e5e5;
+ --functional-gray-250: #d7d7d7;
+ --functional-gray-300: #c5c5c5;
+ --functional-gray-350: #b9b9b9;
+ --functional-gray-400: #ababab;
+ --functional-gray-450: #8e8e8e;
+ --functional-gray-500: #808080;
+ --functional-gray-550: #686868;
+ --functional-gray-600: #555555;
+ --functional-gray-650: #3e3e3e;
+ --functional-gray-700: #383838;
+ --functional-gray-750: #2a2a2a;
+ --functional-gray-800: #242424;
+ --functional-gray-850: #1e1e1e;
+ --functional-gray-900: #171717;
+ --functional-gray-950: #111111;
+ --functional-gray-1000: #000000;
+
+ --charcoal2: #191919;
+
+ --eggplant: #4016a0;
+ --violet: #7549f2;
+ --lilac: #b49bfc;
+
+ --cobalt: #1a31a9;
+ --sky: #3f59e4;
+ --cloud: #b6c9ff;
+
+ --ocean: #096256;
+ --seafoam: #4cb7a3;
+ --turquoise: #b1e4de;
+
+ --clay: #763101;
+ --tangerine: #e27133;
+ --melon: #f2ac84;
+}
+
+:root {
+ --color_bg_page: var(--functional-gray-950);
+ --color_fg_bold: var(--functional-gray-50);
+ --color_fg_default: var(--functional-gray-200);
+ --color_fg_link_primary: var(--cloud);
+
+ --color_bg_app_bar: rgba(17, 17, 17, 0.66);
+ --color_bg_app_bar_plain: rgba(17, 17, 17);
+
+ --color_fg_link: var(--functional-gray-50);
+ --color_fg_link_hover: var(--functional-gray-50);
+ --color_fg_link_pressed: var(--functional-gray-50);
+
+ --color_fg_selected: #99a7f1;
+ --color_border_selected: #99a7f1;
+ --color_border_focus: #99a7f1;
+
+ --color_bg_auth0-cta: linear-gradient(251deg, #1e1e1e 2.29%, #191919 87.03%);
+
+ --color_bg_layer: var(--functional-gray-950);
+ --color_bg_layer_bold: var(--functional-gray-700);
+ --color_bg_layer_boldest: var(--functional-gray-50);
+ --color_bg_layer_alternate: var(--functional-gray-850);
+ --color_bg_layer_alternate-bold: var(--functional-gray-800);
+ --color_bg_layer_elevated: var(--functional-gray-900);
+
+ --color_bg_layer_highlight1: var(--ocean);
+ --color_bg_layer_highlight2: var(--cobalt);
+ --color_bg_layer_highlight3: var(--eggplant);
+ --color_bg_layer_highlight4: #f1b99b;
+
+ --color_code_blue: #3f59e4;
+ --color_code_blue2: #7487eb;
+ --color_code_blue3: #7487eb;
+ --color_code_dark_blue: #fafbfe;
+ --color_code_dark_blue2: #b9c3f5;
+ --color_code_purple: #ccbcfa;
+ --color_code_orange: #f1b99b;
+ --color_code_inverse: #fefaf8;
+ --color_code_teal: #3b8d7e;
+ --color_code_dark_teal: #8ed2c5;
+ --color_code_dark_neutral: #808080;
+
+ --color_border_default: var(--functional-gray-750);
+ --color_border_bold: var(--functional-gray-700);
+ --color_border_inverse_static: var(--functional-gray-550);
+
+ --color_bg_disabled: var(--functional-gray-800);
+ --color_fg_disabled: var(--functional-gray-500);
+
+ --color_bg_input: var(--functional-gray-950);
+ --color_fg_input_placeholder: var(--functional-gray-500);
+ --color_border_input: var(--functional-gray-500);
+ --color_border_input_hover: var(--functional-gray-400);
+ --color_border_input_disabled: var(--functional-gray-700);
+
+ --color_fg_on_button: var(--functional-gray-50);
+ --color_fg_on_button_subtle: var(--functional-gray-300);
+ --color_fg_on_button_primary: var(--functional-gray-0);
+ --color_bg_button: var(--functional-gray-950);
+ --color_bg_button_hover: var(--functional-gray-800);
+ --color_bg_button_pressed: var(--functional-gray-750);
+ --color_bg_button_primary: var(--sky);
+ --color_bg_button_primary_hover: #3449ba;
+ --color_bg_button_primary_pressed: #263588;
+ --color_bg_button_disabled: var(--functional-gray-750);
+ --color_fg_on_button_disabled: #808080;
+ --color_border_button: var(--functional-gray-700);
+ --color_border_button_outline: var(--functional-gray-50);
+ --color_fg_on_button_outline: var(--functional-gray-50);
+
+ --color_fg_code: #8ed2c5;
+ --color_bg_code-editor: #000;
+
+ --color_bg_state_success: #10783f;
+ --color_fg_on_state_success: #fff;
+ --color_fg_on_state_success_subtle: #98d2b2;
+ --color_bg_state_success_subtle: #062a16;
+ --color_border_state_success: #67bc8e;
+
+ --color_fg_strong: #99a7f1;
+
+ --color_bg_state_danger_subtle: #46110e;
+ --color_fg_on_state_danger_subtle: #f0b7b4;
+ --color_border_state_danger: #e89590;
+
+ --color_bg_state_info_subtle: #161f50;
+ --color_fg_on_state_info_subtle: #b9c3f5;
+ --color_border_state_info: #99a7f1;
+
+ --color_bg_state_caution: #f8d626;
+ --color_bg_state_caution_subtle: #292406;
+ --color_border_state_caution: #c5aa1f;
+ --color_fg_on_state_caution: #000000;
+ --color_fg_on_state_caution_subtle: #e3c423;
+
+ --color_jwt_header: #6dc993;
+ --color_jwt_payload: #e5e5e5;
+ --color_jwt_signature: #8c9bef;
+ --color_jwt_dot: #ff69e4;
+
+ --color_bg_scrollbar: #6b7380;
+}
+
+html[data-theme="light"],
+html[data-theme="system-light"] {
+ --color_jwt_header: #096256;
+ --color_jwt_payload: #383838;
+ --color_jwt_signature: #2c3ea0;
+ --color_jwt_dot: #cc36b1;
+
+ --color_bg_state_info_subtle: #eef0fd;
+ --color_fg_on_state_info_subtle: #263588;
+ --color_border_state_info: #3f59e4;
+
+ --color_bg_state_danger_subtle: #fbeeed;
+ --color_fg_on_state_danger_subtle: #761c17;
+ --color_border_state_danger: #c32f26;
+
+ --color_bg_state_caution: #f8d626;
+ --color_bg_state_caution_subtle: #fef2b3;
+ --color_border_state_caution: #786713;
+ --color_fg_on_state_caution: #000000;
+ --color_fg_on_state_caution_subtle: #473d0b;
+
+ --color_fg_strong: #3f59e4;
+
+ --color_bg_state_success: #10783f;
+ --color_fg_on_state_success: #fff;
+ --color_fg_on_state_success_subtle: #094726;
+ --color_bg_state_success_subtle: #e6f4ec;
+ --color_border_state_success: #10783f;
+
+ --color_fg_code: #3b8d7e;
+ --color_bg_code-editor: #fff;
+
+ --color_fg_on_button: var(--charcoal2);
+ --color_fg_on_button_subtle: var(--functional-gray-600);
+ --color_fg_on_button_primary: var(--functional-gray-0);
+ --color_bg_button: var(--functional-gray-0);
+ --color_bg_button_hover: var(--functional-gray-150);
+ --color_bg_button_pressed: #e8e8e8;
+ --color_bg_button_primary: var(--sky);
+ --color_bg_button_primary_hover: #3449ba;
+ --color_bg_button_primary_pressed: #263588;
+ --color_bg_button_disabled: #e8e8e8;
+ --color_fg_on_button_disabled: #808080;
+ --color_border_button: var(--functional-gray-250);
+ --color_border_button_outline: var(--functional-gray-550);
+ --color_fg_on_button_outline: var(--charcoal2);
+
+ --color_bg_page: var(--functional-gray-0);
+ --color_fg_bold: var(--charcoal2);
+ --color_fg_default: var(--functional-gray-650);
+ --color_fg_link_primary: var(--sky);
+
+ --color_bg_app_bar: rgba(241, 241, 241, 0.66);
+ --color_bg_app_bar_plain: rgba(241, 241, 241);
+
+ --color_fg_link: var(--charcoal2);
+ --color_fg_link_hover: var(--charcoal2);
+ --color_fg_link_pressed: var(--charcoal2);
+
+ --color_fg_selected: #3f59e4;
+ --color_border_selected: #3f59e4;
+ --color_border_focus: #3f59e4;
+
+ --color_bg_auth0-cta: var(--functional-gray-150);
+
+ --color_bg_layer: var(--functional-gray-0);
+ --color_bg_layer_bold: var(--functional-gray-250);
+ --color_bg_layer_boldest: var(--charcoal2);
+ --color_bg_layer_alternate: var(--functional-gray-100);
+ --color_bg_layer_alternate-bold: var(--functional-gray-150);
+ --color_bg_layer_elevated: var(--functional-gray-0);
+
+ --color_bg_layer_highlight1: var(--seafoam);
+ --color_bg_layer_highlight2: var(--sky);
+ --color_bg_layer_highlight3: var(--violet);
+ --color_bg_layer_highlight4: #a35125;
+
+ --color_border_default: #e8e8e8;
+ --color_border_bold: var(--functional-gray-250);
+ --color_border_inverse_static: var(--functional-gray-550);
+
+ --color_bg_disabled: var(--functional-gray-150);
+
+ --color_fg_disabled: var(--functional-gray-500);
+
+ --color_bg_input: var(--functional-gray-0);
+ --color_fg_input_placeholder: var(--functional-gray-500);
+ --color_border_input: var(--functional-gray-450);
+ --color_border_input_hover: var(--functional-gray-550);
+ --color_border_input_disabled: var(--functional-gray-250);
+
+ --color_code_blue: #3f59e4;
+ --color_code_blue2: #7487eb;
+ --color_code_blue3: #7487eb;
+ --color_code_dark_blue: #10163a;
+ --color_code_dark_blue2: #263588;
+ --color_code_purple: #9979f5;
+ --color_code_orange: #a35125;
+ --color_code_inverse: #291409;
+ --color_code_teal: #3b8d7e;
+ --color_code_dark_teal: #419d8c;
+ --color_code_dark_neutral: #808080;
+
+ --color_bg_scrollbar: #6b7380;
+}
+
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ outline: none;
+ text-decoration: none;
+ font-weight: 400;
+}
+
+html,
+body {
+ height: 100%;
+ width: 100%;
+ font-weight: 400;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+:focus-visible {
+ outline: none;
+}
+
+html {
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ background-color: var(--color_bg_page);
+ scrollbar-gutter: stable;
+}
+
+body {
+ font-feature-settings: "zero";
+ -webkit-font-smoothing: antialiased;
+
+ overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
+ background-color: var(--color_bg_page);
+ collapse: var(--color_fg_default);
+}
+
+code {
+ font-family: var(--font-mono), monospace;
+}
+
+.mobile-scroll-lock {
+ overflow: hidden;
+ margin-right: 20rem;
+}
+
+@media #{$breakpoint-dimension-sm} {
+ .mobile-scroll-lock {
+ overflow: unset;
+ margin-right: unset;
+ }
+}
+
+.ace_header {
+ color: var(--color_jwt_header);
+}
+
+.ace_payload {
+ color: var(--color_jwt_payload);
+}
+
+.ace_signature {
+ color: var(--color_jwt_signature);
+}
+
+.ace_text {
+ color: var(--color_fg_bold);
+}
+
+.ace_dot {
+ color: var(--color_jwt_dot);
+}
+
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: var(--color_fg_default);
+ background: none;
+ text-shadow: 0 1px white;
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+ font-size: 1em;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+@media print {
+ code[class*="language-"],
+ pre[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: 0.5em 0;
+ overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: 0.1em;
+ border-radius: 0.3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: var(--color_code_dark_blue);
+}
+
+.token.namespace {
+ opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: var(--color_code_orange);
+}
+
+.token.boolean {
+ color: var(--color_fg_code);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: var(--color_code_dark_blue);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: var(--color_bg_layer_highlight4);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #07a;
+}
+
+.token.function,
+.token.class-name {
+ color: #dd4a68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+// START: Debugger Picker
+
+$picker-width-sm: 3.25rem;
+$picker-list-width-sm: 4.75rem;
+$picker-list-offset-sm: calc(($picker-list-width-sm - $picker-width-sm) / 2);
+
+$picker-width-md: 3.25rem;
+$picker-list-width-md: 7rem;
+$picker-list-offset-md: calc(($picker-list-width-md - $picker-width-md) / 2);
+
+$picker-width-lg: 5rem;
+$picker-list-width-lg: 7rem;
+$picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
+
+.react-select-placeholder {
+ flex-shrink: 0 !important;
+ background: transparent;
+ color: var(--color_fg_bold);
+ font-family: var(--font-primary), monospace !important;
+ border: 1px solid var(--color_border_button) !important;
+ min-width: 6.125rem;
+ height: 1.75rem;
+ border-radius: 0.25rem;
+}
+
+.react-select-container {
+ flex-shrink: 0 !important;
+ background: transparent;
+ color: var(--color_fg_bold);
+ font-family: var(--font-primary), monospace !important;
+ height: 2rem !important;
+}
+
+.react-select__control {
+ background-color: transparent !important;
+ border-color: var(--color_border_button) !important;
+ height: 100% !important;
+ border: 1px solid var(--color_border_inverse_static) !important;
+}
+
+.react-select__control--is-focused {
+ border-color: var(--color_border_focus) !important;
+ box-shadow: 0 0 0 1px var(--color_border_focus) !important;
+}
+
+.react-select__value-container {
+ height: 100% !important;
+ padding: 0;
+ margin: 0;
+ font-size: 0.8125rem;
+ line-height: 1.3125rem;
+ font-family: var(--font-primary), monospace !important;
+ color: var(--color_fg_default) !important;
+}
+
+.react-select__single-value {
+ font-family: var(--font-primary), monospace !important;
+ color: var(--color_fg_bold) !important;
+}
+
+.react-select__indicators {
+ height: 100% !important;
+}
+
+.react-select__menu {
+ background-color: var(--color_bg_layer_alternate-bold) !important;
+ color: var(--color_fg_bold) !important;
+ border: 1px solid var(--color_border_bold) !important;
+ font-size: 0.875rem !important;
+ font-family: var(--font-primary), monospace !important;
+ width: max-content !important;
+ min-width: 100% !important;
+}
+
+.react-select__menu-portal {
+}
+
+.react-select__menu-list {
+ font-family: var(--font-primary), monospace !important;
+ padding: 0 !important;
+
+ &::-webkit-scrollbar {
+ width: 0.75rem;
+ height: 0.75rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 2rem transparent;
+ cursor: pointer !important;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border: 0.25rem solid transparent;
+ background-clip: padding-box;
+ border-radius: 9999px;
+ background-color: var(--color_bg_scrollbar);
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+}
+
+.react-select__option {
+ display: flex !important;
+ align-items: center !important;
+ color: var(--color_fg_default) !important;
+ position: relative !important;
+ height: 2.5rem !important;
+ border-bottom: 1px solid var(--color_border_bold) !important;
+ padding: 0.25rem 1rem !important;
+ background-color: transparent !important;
+ font-family: var(--font-primary), monospace !important;
+
+ gap: 0.5rem !important;
+ font-size: 0.8125rem !important;
+ line-height: 1.3125rem !important;
+ letter-spacing: -0.05px !important;
+
+ &:last-child {
+ border-bottom: unset;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.react-select__option--is-selected {
+ color: var(--color_fg_bold) !important;
+ font-weight: 500;
+
+ &:before {
+ position: absolute;
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ left: calc((1rem - (0.375rem) / 2) / 2);
+ //top: calc((2.5rem - (0.375rem) / 2) / 2);
+ top: 50%;
+ transform: translateY(-50%);
+ height: 0.375rem;
+ width: 0.375rem;
+ background-color: var(--color_fg_selected);
+ border-radius: 50%;
+ }
+}
+
+.react-select__option--is-disabled {
+ color: var(--color_fg_bold) !important;
+ font-weight: 500;
+ opacity: 0.32;
+ cursor: not-allowed !important;
+}
+
+.react-select__placeholder {
+ color: var(--color_fg_bold) !important;
+ letter-spacing: 0 !important;
+ font-size: 0.875rem !important;
+}
+
+// END: Debugger Picker
+
+.npm__react-simple-code-editor__textarea {
+ &:empty {
+ -webkit-text-fill-color: inherit !important;
+ }
+
+ &:focus-visible {
+ outline: 1px solid var(--color_border_focus) !important;
+ outline-offset: -1px !important;
+ z-index: 1 !important;
+ border-radius: 0 0 0.5rem 0.5rem;
+ }
+
+ /**
+ * Hack to apply on some CSS on IE10 and IE11
+ */
+ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ /**
+ * IE doesn't support '-webkit-text-fill-color'
+ * So we use 'color: transparent' to make the text transparent on IE
+ * Unlike other browsers, it doesn't affect caret color in IE
+ */
+ color: transparent !important;
+
+ &::selection {
+ background-color: #accef7 !important;
+ color: transparent !important;
+ }
+ }
+}
+
+.react-aria-ModalOverlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: var(--visual-viewport-height);
+ background-color: rgba(0, 0, 0, 0.48);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+
+ padding: 1rem;
+
+ backdrop-filter: blur(3rem);
+
+ cursor: pointer;
+
+ overflow: hidden;
+}
diff --git a/src/libs/utils/path.utils.ts b/src/libs/utils/path.utils.ts
new file mode 100644
index 00000000..4ebb3e85
--- /dev/null
+++ b/src/libs/utils/path.utils.ts
@@ -0,0 +1,35 @@
+import { LANGUAGE_CODES } from "@/features/localization/localization.config";
+
+export const createUrlPath = (segments: string[]) => {
+ if (!segments) {
+ return "/";
+ }
+
+ const pathSegments: string[] = [];
+
+ segments.forEach((segment) => {
+ if (!segment) {
+ return;
+ }
+
+ const paths = segment.split("/");
+
+ paths.forEach((path) => {
+ if (path) {
+ pathSegments.push(path);
+ }
+ });
+ });
+
+ return "/" + pathSegments.join("/");
+};
+
+export const getPathnameSegments = (
+ pathname: string | null | undefined,
+): string[] => {
+ return pathname ? pathname.split("/").filter((segment) => segment) : ["/"];
+};
+
+export const isSupportedLanguage = (language: string) => {
+ return LANGUAGE_CODES.includes(language);
+};
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 00000000..5d321396
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,165 @@
+import { match } from "@formatjs/intl-localematcher";
+import Negotiator from "negotiator";
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import {
+ DEFAULT_LANGUAGE_CODE,
+ LANGUAGE_CODES,
+ PREFERRED_LANGUAGE_COOKIE_KEY,
+} from "@/features/localization/localization.config";
+import { createUrlPath, isSupportedLanguage } from "@/libs/utils/path.utils";
+import dictionary from "@/data/libraries-next.json";
+
+export function middleware(request: NextRequest) {
+ const { pathname } = request.nextUrl;
+
+ const isDefaultLanguageCodeInPathname =
+ pathname.startsWith(`/${DEFAULT_LANGUAGE_CODE}/`) ||
+ pathname === `/${DEFAULT_LANGUAGE_CODE}`;
+
+ if (isDefaultLanguageCodeInPathname) {
+ request.nextUrl.pathname = createUrlPath([
+ pathname.replace(`/${DEFAULT_LANGUAGE_CODE}`, ""),
+ ]);
+
+ return NextResponse.redirect(request.nextUrl);
+ }
+
+ const isLanguageCodeInPathname = LANGUAGE_CODES.some(
+ (languageCode) =>
+ pathname.startsWith(`/${languageCode}/`) ||
+ pathname === `/${languageCode}`,
+ );
+
+ if (isLanguageCodeInPathname) {
+ return;
+ }
+
+ const tokenParam =
+ request.nextUrl.searchParams.get("token") ||
+ request.nextUrl.searchParams.get("id_token") ||
+ request.nextUrl.searchParams.get("access_token") ||
+ request.nextUrl.searchParams.get("value");
+ const isHomePage = pathname === "/";
+
+ if (tokenParam && isHomePage) {
+ request.nextUrl.searchParams.delete("token");
+ request.nextUrl.searchParams.delete("id_token");
+ request.nextUrl.searchParams.delete("access_token");
+ request.nextUrl.searchParams.delete("value");
+
+ request.nextUrl.searchParams.append("warning", "use_hash");
+
+ request.nextUrl.hash = `token=${tokenParam}`;
+
+ return NextResponse.redirect(request.nextUrl);
+ }
+
+ const libraryFilter = request.nextUrl.searchParams.get("language");
+ const isLibrariesPage = pathname === "/libraries";
+
+ if (libraryFilter && isLibrariesPage) {
+ const adjustedLibraryFilter = libraryFilter.replaceAll(" ", "+");
+
+ const categoryOptions = Object.values(dictionary).map((library) => ({
+ id: library.id,
+ name: library.name,
+ uniqueClass: library.uniqueClass,
+ }));
+
+ categoryOptions.forEach((categoryOption) => {
+ const { id, uniqueClass, name } = categoryOption;
+
+ if (
+ adjustedLibraryFilter.toLowerCase() ===
+ uniqueClass.toLocaleLowerCase() &&
+ id !== uniqueClass.toLocaleLowerCase()
+ ) {
+ request.nextUrl.searchParams.delete("language");
+ request.nextUrl.searchParams.append("filter", id);
+
+ return;
+ }
+
+ if (
+ adjustedLibraryFilter.toLowerCase() === name.toLocaleLowerCase() &&
+ id !== name.toLocaleLowerCase()
+ ) {
+ request.nextUrl.searchParams.delete("language");
+ request.nextUrl.searchParams.append("filter", id);
+
+ return;
+ }
+
+ if (adjustedLibraryFilter.toLowerCase() === id) {
+ request.nextUrl.searchParams.delete("language");
+ request.nextUrl.searchParams.append("filter", id);
+
+ return;
+ }
+ });
+
+ return NextResponse.redirect(request.nextUrl);
+ }
+
+ const preferredLanguageCookie = request.cookies.get(
+ PREFERRED_LANGUAGE_COOKIE_KEY,
+ );
+
+ if (preferredLanguageCookie) {
+ const languageFromCookie = preferredLanguageCookie.value;
+ const shouldRenderDefaultLanguageContent =
+ !isSupportedLanguage(languageFromCookie) ||
+ languageFromCookie === DEFAULT_LANGUAGE_CODE;
+
+ if (shouldRenderDefaultLanguageContent) {
+ request.nextUrl.pathname = `/${DEFAULT_LANGUAGE_CODE}${pathname}`;
+
+ return NextResponse.rewrite(request.nextUrl, { request });
+ }
+
+ request.nextUrl.pathname = createUrlPath([languageFromCookie, pathname]);
+
+ return NextResponse.redirect(request.nextUrl);
+ }
+
+ try {
+ const languagesFromRequestHeaders = new Negotiator({
+ headers: Object.fromEntries(request.headers),
+ }).languages();
+
+ const languageFromRequestHeader = match(
+ languagesFromRequestHeaders,
+ LANGUAGE_CODES,
+ DEFAULT_LANGUAGE_CODE,
+ );
+
+ const shouldRenderAltLanguageContent =
+ isSupportedLanguage(languageFromRequestHeader) &&
+ languageFromRequestHeader !== DEFAULT_LANGUAGE_CODE;
+
+ if (shouldRenderAltLanguageContent) {
+ request.nextUrl.pathname = createUrlPath([
+ languageFromRequestHeader,
+ pathname,
+ ]);
+
+ return NextResponse.redirect(request.nextUrl);
+ }
+
+ request.nextUrl.pathname = createUrlPath([DEFAULT_LANGUAGE_CODE, pathname]);
+
+ return NextResponse.rewrite(request.nextUrl, { request });
+ } catch (e) {
+ request.nextUrl.pathname = createUrlPath([DEFAULT_LANGUAGE_CODE, pathname]);
+
+ return NextResponse.rewrite(request.nextUrl, { request });
+ }
+}
+
+export const config = {
+ matcher: [
+ "/((?!api/|favicon.ico|sitemap.xml|robots.txt|google30e29a6679a06e08.html|manifest.webmanifest|_next/static|_next/image|diagrams/|icons/|images/|img/|apple-icon/|icon/).*)",
+ "/",
+ ],
+};
diff --git a/src/scripts/generate-library-data.ts b/src/scripts/generate-library-data.ts
new file mode 100644
index 00000000..bf8e3238
--- /dev/null
+++ b/src/scripts/generate-library-data.ts
@@ -0,0 +1,203 @@
+import { Octokit } from "octokit";
+import { join } from "path";
+import { createAppAuth } from "@octokit/auth-app";
+import { err, ok, Result } from "neverthrow";
+
+import "dotenv/config";
+import { writeFileSync } from "node:fs";
+import { LibraryCategoryModel } from "@/features/libraries/models/library-category.model";
+import { safeDecodeBase64url } from "@/features/common/services/utils";
+
+// TODO: we need to update this with the repository that's going to be public with only the JSON files
+const owner = "auth0-developer-hub";
+const repository = "jsonwebtoken.github.io";
+const branch = "chore/update-footer-links";
+
+const octokit = new Octokit({
+ authStrategy: createAppAuth,
+ auth: {
+ appId: process.env.GITHUB_APP_ID,
+ privateKey: process.env.GITHUB_APP_PRIVATE_KEY,
+ installationId: process.env.GITHUB_INSTALLATION_ID,
+ },
+});
+
+function numericCompare(a: string, b: string): number {
+ const lhs = parseInt(a, 10);
+ const rhs = parseInt(b, 10);
+
+ return lhs - rhs;
+}
+
+async function authenticateGitHubApp(): Promise> {
+ try {
+ await octokit.rest.apps.getAuthenticated();
+
+ return ok(true);
+ } catch (error) {
+ console.error(error);
+
+ return err("Something went wrong when authenticating the GitHub App");
+ }
+}
+
+async function getLanguageJsonFilePaths(): Promise> {
+ const path = "views/website/libraries";
+
+ const response = await octokit.rest.repos.getContent({
+ owner: owner,
+ repo: repository,
+ ref: branch,
+ path: path,
+ });
+
+ const { data } = response;
+
+ if (!Array.isArray(data)) {
+ return err("Unable to get language JSON file paths.");
+ }
+
+ return ok(
+ data.filter((file) => file.name.endsWith(".json")).map((file) => file.path),
+ );
+}
+
+async function getContentLanguage(
+ filePath: string,
+): Promise> {
+ const contentResponse = await octokit.rest.repos.getContent({
+ owner: owner,
+ repo: repository,
+ ref: branch,
+ path: filePath,
+ });
+
+ const { data } = contentResponse;
+
+ if (Array.isArray(data)) {
+ return err(`Invalid content response`);
+ }
+
+ if (data.type !== "file") {
+ return err(`Invalid data type in content response`);
+ }
+
+ const { content } = data;
+
+ const safeDecodeBase64urlResult = safeDecodeBase64url(http://github.com/content);
+
+ if (safeDecodeBase64urlResult.isErr()) {
+ return err(safeDecodeBase64urlResult.error);
+ }
+
+ const decodedContentData = safeDecodeBase64urlResult.value;
+
+ return ok(JSON.parse(decodedContentData));
+}
+
+async function getCategories(): Promise<
+ Result
+> {
+ const getLanguageJsonFilePathsResult = await getLanguageJsonFilePaths();
+
+ if (getLanguageJsonFilePathsResult.isErr()) {
+ return err(getLanguageJsonFilePathsResult.error);
+ }
+
+ const filePaths = getLanguageJsonFilePathsResult.value.sort(numericCompare);
+
+ const categories: LibraryCategoryModel[] = [];
+
+ for (let i = 0; i < filePaths.length; i++) {
+ const filePath = filePaths[i];
+
+ const result = await getContentLanguage(filePath);
+
+ if (result.isErr()) {
+ return err(`No language data available for path: ${filePath}`);
+ }
+
+ categories.push(result.value);
+ }
+
+ categories.sort((a: LibraryCategoryModel, b: LibraryCategoryModel) => {
+ const nameA = a.name.toUpperCase(); // ignore upper and lowercase
+ const nameB = b.name.toUpperCase(); // ignore upper and lowercase
+
+ if (nameA < nameB) {
+ return -1;
+ }
+ if (nameA > nameB) {
+ return 1;
+ }
+
+ return 0;
+ });
+
+ return ok(categories);
+}
+
+async function aggregateLibraryStars() {
+ const isAuthenticated = await authenticateGitHubApp();
+
+ if (isAuthenticated.isOk()) {
+ const getCategoriesResult = await getCategories();
+
+ if (getCategoriesResult.isErr()) {
+ console.error(getCategoriesResult.error);
+
+ return;
+ }
+
+ const categories = getCategoriesResult.value;
+
+ for (let i = 0; i < categories.length; i++) {
+ const category = categories[i];
+
+ if (!category) {
+ continue;
+ }
+
+ for (let j = 0; j < category.libs.length; j++) {
+ const lib = category.libs[j];
+
+ if (!lib) {
+ continue;
+ }
+
+ const { gitHubRepoPath } = lib;
+
+ if (!gitHubRepoPath) {
+ continue;
+ }
+
+ const [owner, repo] = gitHubRepoPath.split("/");
+
+ const response = await octokit.rest.repos.get({ owner, repo });
+
+ lib.stars = response.data.stargazers_count;
+ }
+ }
+
+ const dictionary: { [index: string]: LibraryCategoryModel } = {};
+
+ for (let i = 0; i < categories.length; i++) {
+ const category = categories[i];
+
+ if (dictionary[category.name]) {
+ continue;
+ }
+
+ dictionary[category.name] = category;
+ }
+
+ writeFileSync(
+ join(process.cwd(), "src", "data", "libraries.json"),
+ JSON.stringify(dictionary, null, 2),
+ );
+ }
+}
+
+(async () => {
+ await aggregateLibraryStars();
+})();
diff --git a/src/scripts/generate-test-jwts.ts b/src/scripts/generate-test-jwts.ts
new file mode 100644
index 00000000..a7c1c40b
--- /dev/null
+++ b/src/scripts/generate-test-jwts.ts
@@ -0,0 +1,317 @@
+import { DefaultTokensValues } from "@/features/common/values/default-tokens.values";
+import {
+ generateKeyPairSync,
+ JsonWebKeyInput,
+ PrivateKeyInput,
+ randomBytes,
+} from "crypto";
+import {
+ getAlgSize,
+ isDigitalSignatureAlg,
+ isHmacAlg,
+ isNoneAlg,
+} from "@/features/common/services/jwt.service";
+import { customAlphabet } from "nanoid";
+import {
+ CompactJWSHeaderParameters,
+ CompactSign,
+ exportJWK,
+ KeyLike,
+ UnsecuredJWT,
+} from "jose";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import { writeFileSync } from "node:fs";
+import { join } from "path";
+import { getAlgName } from "@/features/common/services/utils";
+import { createPrivateKey } from "node:crypto";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import {
+ JwtDictionaryEntryModel,
+ JwtSignedWithDigitalModel,
+ JwtSignedWithHmacModel,
+ UnsecuredJwtModel,
+} from "../../e2e/e2e.models";
+
+const jwtDictionary: {
+ byAlgorithm: {
+ [index: string]:
+ | UnsecuredJwtModel
+ | JwtSignedWithHmacModel
+ | JwtSignedWithDigitalModel;
+ };
+} = {
+ byAlgorithm: {},
+};
+
+const alphabet =
+ "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+
+const algs = Object.keys(DefaultTokensValues);
+
+function createJwtWithPrivateKey(
+ header: CompactJWSHeaderParameters,
+ payload: object,
+ key: PrivateKeyInput | string | Buffer | JsonWebKeyInput,
+): Promise {
+ const jwsPayload = JSON.stringify(payload); // Convert payload to JSON string
+
+ const privateKey = createPrivateKey(key);
+
+ return new CompactSign(new TextEncoder().encode(jwsPayload))
+ .setProtectedHeader(header)
+ .sign(privateKey);
+}
+
+async function createJWT({
+ header,
+ payload,
+ secret,
+}: {
+ header: CompactJWSHeaderParameters;
+ payload: object;
+ secret: Uint8Array | KeyLike;
+}): Promise {
+ try {
+ const jwsPayload = JSON.stringify(payload);
+
+ return await new CompactSign(new TextEncoder().encode(jwsPayload))
+ .setProtectedHeader(header)
+ .sign(secret);
+ } catch (error) {
+ console.error("Failed to create JWT:", error);
+ throw error;
+ }
+}
+
+function generateBase64urlSecret(length: number) {
+ if (length < 1) throw new Error("Length must be a positive integer");
+
+ const secretBytes = randomBytes(length);
+
+ return secretBytes.toString("base64url").replace(/=+$/, "");
+}
+
+function generateUtf8Secret(length: number) {
+ if (length < 1) throw new Error("Length must be a positive integer");
+
+ return customAlphabet(alphabet, length)();
+}
+
+interface KeyPair {
+ publicKey: string;
+ privateKey: string;
+ publicJWK: any;
+ privateJWK: any;
+}
+
+async function generateKeys(algorithm: string): Promise {
+ let keyPair;
+
+ if (algorithm === "RS256") {
+ keyPair = generateKeyPairSync("rsa", { modulusLength: 2048 });
+ }
+ if (algorithm === "RS384") {
+ keyPair = generateKeyPairSync("rsa", { modulusLength: 3072 });
+ }
+ if (algorithm === "RS512") {
+ keyPair = generateKeyPairSync("rsa", { modulusLength: 4096 });
+ }
+ if (algorithm === "ES256") {
+ keyPair = generateKeyPairSync("ec", { namedCurve: "P-256" });
+ }
+ if (algorithm === "ES384") {
+ keyPair = generateKeyPairSync("ec", { namedCurve: "P-384" });
+ }
+ if (algorithm === "ES512") {
+ keyPair = generateKeyPairSync("ec", { namedCurve: "P-521" });
+ }
+ if (algorithm === "ES256K") {
+ // Support for ES256K
+ keyPair = generateKeyPairSync("ec", { namedCurve: "secp256k1" });
+ }
+ if (algorithm === "PS256") {
+ keyPair = generateKeyPairSync("rsa", { modulusLength: 2048 });
+ }
+ if (algorithm === "PS384") {
+ keyPair = generateKeyPairSync("rsa", { modulusLength: 3072 });
+ }
+ if (algorithm === "PS512") {
+ keyPair = generateKeyPairSync("rsa", { modulusLength: 4096 });
+ }
+ if (algorithm === "Ed25519") {
+ keyPair = generateKeyPairSync("ed25519");
+ }
+ if (algorithm === "Ed448") {
+ // Support for Ed448
+ keyPair = generateKeyPairSync("ed448");
+ }
+
+ if (!keyPair) {
+ throw new Error(`Unsupported algorithm: ${algorithm}`);
+ }
+
+ const publicJWK = await exportJWK(keyPair.publicKey);
+ const privateJWK = await exportJWK(keyPair.privateKey);
+
+ const publicKeyPEM = keyPair.publicKey
+ .export({ type: "spki", format: "pem" })
+ .toString();
+ const privateKeyPEM = keyPair.privateKey
+ .export({ type: "pkcs8", format: "pem" })
+ .toString();
+
+ return {
+ publicKey: publicKeyPEM,
+ privateKey: privateKeyPEM,
+ publicJWK,
+ privateJWK,
+ };
+}
+
+(async function () {
+ for (let i = 0; i < algs.length; i++) {
+ const alg = algs[i];
+ const cleanAlg = getAlgName(alg);
+
+ const header = {
+ alg: cleanAlg,
+ type: "JWT",
+ };
+
+ const payload = {
+ name: "Eric Arthur Blair",
+ given_name: "Eric",
+ middle_name: "Arthur",
+ family_name: "Blair",
+ nickname: "George Orwell",
+ preferred_username: "Orwell",
+ profile: "https://en.wikipedia.org/wiki/George_Orwell",
+ picture:
+ "https://upload.wikimedia.org/wikipedia/commons/7/7e/George_Orwell_press_photo.jpg",
+ website:
+ "https://www.orwellfoundation.com/the-orwell-foundation/orwell/books-by-orwell/",
+ birthdate: -2099242800,
+ locale: "en-GB",
+ updated_at: 441781200,
+ zoneinfo: "Europe/London",
+ };
+
+ if (isNoneAlg(alg)) {
+ const header = {
+ alg: alg,
+ };
+
+ const unsecureJwt = new UnsecuredJWT(payload).encode();
+
+ jwtDictionary.byAlgorithm[alg] = {
+ type: "unsecured",
+ header: JSON.stringify(header, null, 2).trim(),
+ payload: JSON.stringify(payload, null, 2).trim(),
+ jwt: unsecureJwt.trim(),
+ } as JwtDictionaryEntryModel;
+
+ continue;
+ }
+
+ if (isHmacAlg(alg)) {
+ const getAlgSizeResult = getAlgSize(alg);
+
+ if (getAlgSizeResult.isErr()) {
+ console.error(`${alg} algorithm does not have a size.`);
+
+ continue;
+ }
+
+ const { size: algSize } = getAlgSizeResult.value;
+
+ const base64urlSecret = generateBase64urlSecret(algSize / 8);
+ const utf8Secret = generateUtf8Secret(algSize / 8);
+
+ const decoder = new TextEncoder();
+
+ const jwtWithSymmetricUtf8EncodedSecret = await createJWT({
+ header,
+ payload,
+ secret: decoder.encode(
+ Buffer.from(utf8Secret, "utf-8").toString("binary"),
+ ),
+ });
+
+ const jwtWithSymmetricBase64urlEncodedSecret = await createJWT({
+ header,
+ payload,
+ secret: Buffer.from(base64urlSecret, "base64url"),
+ });
+
+ jwtDictionary.byAlgorithm[alg] = {
+ type: "hmac",
+ withUtf8Secret: {
+ header: JSON.stringify(header, null, 2).trim(),
+ payload: JSON.stringify(payload, null, 2).trim(),
+ secret: utf8Secret.trim(),
+ secretEncoding: EncodingValues.UTF8,
+ jwt: jwtWithSymmetricUtf8EncodedSecret.trim(),
+ },
+ withBase64urlSecret: {
+ header: JSON.stringify(header, null, 2).trim(),
+ payload: JSON.stringify(payload, null, 2).trim(),
+ secret: base64urlSecret.trim(),
+ secretEncoding: EncodingValues.BASE64URL,
+ jwt: jwtWithSymmetricBase64urlEncodedSecret.trim(),
+ },
+ } as JwtDictionaryEntryModel;
+ }
+
+ if (isDigitalSignatureAlg(cleanAlg)) {
+ const { privateKey, privateJWK, publicKey, publicJWK } =
+ await generateKeys(alg);
+
+ const jwtWithPemPrivateKey = await createJwtWithPrivateKey(
+ header,
+ payload,
+ {
+ key: privateKey,
+ type: "pkcs8",
+ format: "pem",
+ },
+ );
+
+ const jwtWithJwkPrivateKey = await createJwtWithPrivateKey(
+ header,
+ payload,
+ {
+ key: privateJWK,
+ format: "jwk",
+ },
+ );
+
+ jwtDictionary.byAlgorithm[alg] = {
+ type: "digital",
+ withPemKey: {
+ header: JSON.stringify(header, null, 2).trim(),
+ payload: JSON.stringify(payload, null, 2).trim(),
+ publicKey: publicKey.trim(),
+ publicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ privateKey: privateKey.trim(),
+ privateKeyFormat: AsymmetricKeyFormatValues.PEM,
+ jwt: jwtWithPemPrivateKey.trim(),
+ },
+ withJwkKey: {
+ header: JSON.stringify(header, null, 2).trim(),
+ payload: JSON.stringify(payload, null, 2).trim(),
+ publicKey: publicJWK,
+ publicKeyFormat: AsymmetricKeyFormatValues.JWK,
+ privateKey: privateJWK,
+ privateKeyFormat: AsymmetricKeyFormatValues.JWK,
+ jwt: jwtWithJwkPrivateKey.trim(),
+ },
+ } as JwtDictionaryEntryModel;
+ }
+ }
+
+ writeFileSync(
+ join(".", "jwt.json"),
+ JSON.stringify(jwtDictionary, null, 2),
+ "utf8",
+ );
+})();
diff --git a/stylus/app.styl b/stylus/app.styl
deleted file mode 100644
index bd3597a9..00000000
--- a/stylus/app.styl
+++ /dev/null
@@ -1,1140 +0,0 @@
-@import 'http://github.com/mixins'
-@import 'http://github.com/codemirror'
-@import 'http://github.com/flip-clock'
-@import 'http://github.com/highlight'
-
-/*
- * Webfont
- */
-
-
-font-url(http://github.com/file)
- return '../../fonts/' + file
-
-webfont(family, file, weight = 'normal')
- @font-face
- font-family family
- src url(http://github.com/font-url(file%20+%20'.eot'))
- src url(http://github.com/font-url(file%20+%20'.eot?#iefix')) format('embedded-opentype'),
- url(http://github.com/font-url(file%20+%20'.woff')) format('woff'),
- url(http://github.com/font-url(file%20+%20'.ttf')) format('truetype'),
- url(http://github.com/font-url(file%20+%20'.svg#'+%20family)) format('svg')
- font-weight weight
- font-style normal
-
-webfont('DINCondensedBold', 'DINCondensedBold', 'normal')
-
-/*
- * Principal style
- */
-
-html
- position relative
- min-height 100%
-
- h1, h2, h3, h4, h5
- -webkit-font-smoothing antialiased
- -moz-font-smoothing antialiased
-
-body
- font-family: 'Whitney SSm A', 'Whitney SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-pre,
-code
- padding 0
- margin 0
- font-family 'Roboto Mono', Menlo
-
-code
- font-size 80%
-
-a
- color: darken(#00b9f1, 20%)
- transition: all .3s ease;
- &:hover
- color: darken(#00b9f1, 50%)
-
-.container
- width 100%
- max-width 1200px
- padding 0 15px
- margin auto
- overflow hidden
- +breakpoint("desktop")
- overflow visible
-
-section
- padding 30px 0
- +breakpoint("tablet")
- padding 60px 0
- h1
- color black
- text-align center
- margin 0 0 30px
- font-weight normal
- +breakpoint("tablet")
- font-size 38px
-
-body
- &.menu-mobile
- .banner-jwt
- padding-top 122px!important
-
-// navbar
-
-.navbar
- background black
- margin 0
- border-radius 0
- border 0
- text-align center
- +breakpoint("tablet")
- width 100%
- height 80px
- border-bottom 1px solid rgba(#4A4A4A,.6)
- position fixed
- top 0
- z-index 100
- +breakpoint("desktop")
- height 100px
-
- .container
- position relative
-
- .top-mobile
- border-bottom 1px solid rgba(#4A4A4A,.6)
- clearfix()
- margin 0 -15px
- +breakpoint("tablet")
- border none
- margin 0
-
- .menu-trigger
- height 10px
- width 23px
- padding-top 7px
- cursor pointer
- float right
- margin 23px 15px 0 0
- float right
- span, span:before, span:after
- background white
- width 100%
- height 2px
- display block
- transition(.3s ease-out)
- backface-visibility hidden
- span
- position relative
- &:before, &:after
- content ""
- position absolute
- &:before
- top -7px
- &:after
- top 7px
- +breakpoint("tablet")
- display none
-
- &.active
- span
- background transparent
- &:before
- transform(translate(0, 7px) rotate(-45deg))
- &:after
- transform(translate(0, -7px) rotate(45deg))
-
-
- .brand
- display inline-block
- float left
- padding 20px 0 20px 15px
- +breakpoint("tablet")
- float none
- position absolute
- left 15px
- top 20px
- padding 0
- .icon
- display none
- +breakpoint("tablet")
- display inline-block
- width 40px
- height 40px
- opacity 0
- transform(scale(0))
- +breakpoint("desktop")
- width 60px
- height 60px
- .logo
- width 60px
- +breakpoint("tablet")
- width 80px
- height 25px
- display inline-block
- vertical-align top
- margin-top 7px
- transition(.3s ease-in-out)
- transform(translateX(-40px))
- +breakpoint("desktop")
- width 100px
- height 32px
- margin-top 14px
- transform(translateX(-60px))
-
- nav.menu
- display none
- min-width: 300px;
- +breakpoint("tablet")
- display inline-block
- a
- background none
- color #9B9B9B
- padding 0 15px
- display block
- text-decoration none
- &:hover
- +breakpoint("tablet")
- color rgba(white,.8)
- &.active
- color white
- +breakpoint("tablet")
- display inline-block
- line-height 5.7
- +breakpoint("desktop")
- line-height 7
-
- .social
- display none
- +breakpoint("tablet")
- display inline-block
- position absolute
- right 15px
- top 28px
- +breakpoint("desktop")
- top 38px
-
- a
- margin-left 10px
- img
- height 24px
-
- .supported
- display none
-
- &.fixed
- .brand
- .icon
- +breakpoint("tablet")
- transition(.3s ease-in)
- opacity 1
- transform(scale(1))
- .logo
- +breakpoint("tablet")
- transform(translateX(10px))
- +breakpoint("desktop")
- transform(translateX(20px))
-
- &.open
- background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.9)));
- background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.9) 100%);
- background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.9) 100%);
- background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.9) 100%);
- background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.9) 100%);
-
-
- position fixed
- width 100vw
- height 100vh
- z-index 100
- .container
- padding 0
- height 100vh
-
- .top-mobile
- margin 0
-
- nav.menu
- position absolute
- top 50%
- left 50%
- transform(translate(-50%,-50%))
- display block
- a
- color white
- font-size 30px
- margin 10% 0
-
- .supported
- display block
- width 100%
- padding 21px 0
- color white
- position absolute
- bottom 0
- border-top 1px solid rgba(#4A4A4A,.6)
- text-decoration none
- img
- margin-left 5px
-
-
-// banner-jwt
-
-.banner-jwt
- background black
- text-align center
- -webkit-backface-visibility hidden
- backface-visibility hidden
- transform(translateZ(0))
- +breakpoint("tablet")
- padding 140px 0 60px
- +breakpoint("desktop")
- padding 150px 0 60px
-
- h1
- color white
- margin 25px 0 0
- +breakpoint("tablet")
- font-size 34px
- +breakpoint("desktop")
- font-size 40px
-
- p
- color white
- a
- color #00b9f1
-
- p
- font-size 20px
- color white
- +breakpoint("tablet")
- line-height 1.4
- font-size 24px
- +breakpoint("desktop")
- font-size 30px
-
- a
- font-weight bold
- text-decoration none
-
- .logo
- display inline-block
- img
- width 70px
- display block
- +breakpoint("desktop")
- width 80px
-
-.update-site
- background: #e3e5e7
- padding: 14px 20px;
- font-size: 13px;
- text-align: center;
- color: darken(#e3e5e7, 70%)
- .paper
- margin-right: 4px;
- display: inline-block
- position: relative;
- bottom: -2px;
- font-size: 15px;
- opacity: .5
- height: 14px;
- width: 16px;
- span
- display: none
- +breakpoint("tablet")
- display: inline-block
-
-
- a
- text-decoration: none;
- font-weight: bold
- display: block;
- margin-top: 10px;
- +breakpoint("tablet")
- display: inline-block
- margin-top: 0;
- margin-left: 4px;
- svg
- fill: darken(#00b9f1, 20%)
- height: 14px;
- width: 12px;
- margin-bottom: -3px;
-
- &:hover svg
- fill: darken(#00b9f1, 50%)
-
-
-// debugger-jwt
-
-.jwt-select
- display inline-block
- position relative
- select
- background white
- width 100px
- height 38px
- font-size 12px
- padding 0 10px
- border 1px solid #D8D8D8
- border-radius 3px
- -webkit-appearance none
- -moz-appearance none
- appearance none
- outline 0
- &::-ms-expand
- display none
- &:after
- background url(http://github.com/img/bg_arrow_select.svg) no-repeat
- width 8px
- height 6px
- content ''
- display inline-block
- position absolute
- top 16px
- right 10px
-
-.jwt-playground
- .algorithm
- text-align center
- span
- font-weight bold
- text-transform uppercase
- font-size 12px
- vertical-align middle
- .jwt-select
- margin-left 10px
-
- .algorithm-code
- margin-top 35px
- .tab-nav
- grid(2, 0, '.tab-link')
- margin-bottom 20px
-
- .tab-link
- text-align center
- +breakpoint("tablet")
- text-align left
- &:nth-child(2)
- +breakpoint("tablet")
- padding-left 15px
- &.current
- border-bottom 6px solid #FB015B
- +breakpoint("tablet")
- border none
- a
- font-size 24px
- color black
- text-decoration none
- display block
- cursor default
- padding-bottom 5px
- +breakpoint("tablet")
- font-size 28px
- padding-bottom 0
- small
- font-size 10px
- color #979797
- text-transform uppercase
- margin-left 10px
- display none
- +breakpoint("desktop")
- display inline-block
-
- .tab-content
- +breakpoint("tablet")
- grid(2, 30px, '.box-content')
-
- .box-content
- height 0
- overflow hidden
- +breakpoint("tablet")
- height auto
- &.current
- height auto
-
- .input, .output
- border 1px solid rgba(#9B9B9B,.5)
- border-radius 3px
-
- .input
- padding 10px
- overflow scroll
- +breakpoint("tablet")
- padding 20px
- // &[data-alg="HS256"]
- // min-height 550px
- // &[data-alg="RS256"]
- // min-height 719px
-
- .jwt-explained
- .text-line
- margin 0
- font-size 12px
- color black
- clearfix()
- border-top 1px solid rgba(#9B9B9B,.5)
- border-bottom 1px solid rgba(#9B9B9B,.5)
- line-height 2.5
- padding 0 10px
- span
- color #979797
- margin-left 5px
- display none
- +breakpoint("desktop")
- display inline-block
- a
- float right
-
- &.jwt-header
- .text-line
- border-top none
-
- .CodeMirror-wrap
- padding 20px
-
- .pre-encode
- border none
- padding 20px
- line-height 1.8
- input, textarea
- border 1px solid #D0D2D3
- border-radius 3px
- textarea
- width 100%
- max-width 266px
- resize none
- &.error
- background-color #ffc0cb
-
- .validation-status
- text-transform capitalize
- color white
- text-align center
- border-radius 3px
- padding 10px 0
- margin-top 30px
- font-size 20px
- +breakpoint("tablet")
- font-size 30px
- &.valid-token
- background-color #00B9F1
- &.invalid-token
- background-color red
- i
- font-size 18px
- vertical-align bottom
- display inline-block
- margin-right 5px
- +breakpoint("tablet")
- font-size 24px
-
-
-// libraries-jwt
-
-.libraries-jwt
- background-color #e3e5e7
-
- @media (max-width: 767px)
- padding-bottom 0
-
- .title-header
- clearfix()
- text-align center
- +breakpoint("tablet")
- text-align left
- h1
- display inline-block
- +breakpoint("tablet")
- float left
- .filter
- display inline-block
- +breakpoint("tablet")
- float right
-
- .filter
- margin-bottom 30px
- +breakpoint("tablet")
- margin-top 8px
- margin-bottom 0
- span
- font-weight bold
- text-transform uppercase
- font-size 12px
- vertical-align middle
- .jwt-select
- margin-left 10px
-
- .warning
- background-color #FFFCD2
- font-size 11px
- color #4A4A4A
- text-align center
- padding 10px
- margin 0 -15px
- line-height 1.8
- color: darken(#FFFCD2, 80%)
- +breakpoint("tablet")
- font-size 14px
- margin 0 0 30px
- border-radius 3px
- padding 20px 0
- a
- color: darken(#FFFCD2, 80%)
- font-weight bold
- margin-left 5px
- svg
- height: 14px;
- width: 14px;
- fill: darken(#FFFCD2, 80%)
- margin-bottom: -2px;
- .libraries-sv
- margin 0 -15px
-
- @media (max-width: 767px)
- height auto!important
-
- +breakpoint("tablet")
- grid(2, 30px, 'article')
- margin 0
- +breakpoint("desktop")
- grid(3, 30px, 'article')
-
- article
- width 100%
-
- @media (max-width: 767px)
- position relative!important
- top auto!important
- left auto!important
-
- +breakpoint("tablet")
- margin-bottom 30px
- &:nth-child(2n+1)
- clear both
-
- +breakpoint("desktop")
- &:nth-child(2n+1)
- clear none
- &:nth-child(3n+1)
- clear both
-
- &.jwt-net
- .panel-heading h3
- background-color #2AA8E5
- &.jwt-python
- .panel-heading h3
- background-color #377EF0
- &.jwt-clojure
- .panel-heading h3
- background-color #5881d8
- &.jwt-node
- .panel-heading h3
- background-color #8AC244
- &.jwt-java
- .panel-heading h3
- background-color #E76F00
- &.jwt-js
- .panel-heading h3
- background-color #EFC825
- &.jwt-php
- .panel-heading h3
- background-color #777BB4
- &.jwt-ruby
- .panel-heading h3
- background-color #AA1100
- &.jwt-elixir
- .panel-heading h3
- background-color #4E2A8E
- &.jwt-go
- .panel-heading h3
- background-color #47B6C4
- &.jwt-haskell
- .panel-heading h3
- background-color #666
- &.jwt-rust
- .panel-heading h3
- background-color #814626
- &.jwt-lua
- .panel-heading h3
- background-color #000080
- &.jwt-scala
- .panel-heading h3
- background-color #EA2D2E
- &.jwt-d
- .panel-heading h3
- background-color #B44137
- &.jwt-q
- .panel-heading h3
- background-color #666
- &.jwt-c
- .panel-heading h3
- background-color #5180D2
- &.jwt-delphi
- .panel-heading h3
- background-color #E31C23
- &.jwt-perl
- .panel-heading h3
- background-color #3B477A
-
-
- .panel-heading
- img
- float left
- width 45px
- height: 45px;
- margin 10px
- +breakpoint("tablet")
- float none
- display block
- margin 0 auto -45px
- width 90px
- height: 90px;
- h3
- font-size 18px
- color white
- margin 0
- padding 20px 20px 20px 70px
- +breakpoint("tablet")
- padding 20px
- border-radius 3px 3px 0 0
-
- .panel-body
- grid(2, 0, '.column')
- background-color white
- padding 37px 20px 20px
-
- p
- font-size 18px
- margin 10px 0
- code
- background-color #f9f2f4
- color #c7254e
- i
- vertical-align middle
- margin-right 5px
- font-size 20px
- &.icon-budicon-500
- color #7ED321
- &.icon-budicon-501
- color #F0586A
-
- &.mversion
- padding-top 0
-
- .version
- background-color #FFFCD2
- color darken(#FFFCD2, 80%)
- font-size 12px
- text-align center
- padding 10px
- text-transform uppercase
- p
- margin 0
- a
- color rgba(black,.5)
- img
- width 13px
- margin 2px 0 0 5px
- color white
- vertical-align top
-
- .author-info
- background-color white
- clearfix()
- padding 20px
- border-top 1px solid rgba(#979797,.3)
- font-size 16px
- color #4A4A4A
-
- .maintainer
- float left
- font-size 12px
- line-height 1.5
- i
- vertical-align middle
- margin-right 2px
- font-size 17px
- height 25px
- display inline-block
- a
- color #4A4A4A
- text-decoration none
- .stars
- margin-left 15px
-
- .repository
- float right
- i
- height 24px
- display inline-block
- font-size 20px
- vertical-align middle
- margin-right 5px
- a
- font-size 12px
- color #4A4A4A
- text-decoration none
-
- .panel-footer
- background-color black
- border-radius 0 0 3px 3px
- padding 20px
- code
- font-size 12px
- color white
- a
- color white
- text-decoration none
-
- [data-content]
- +breakpoint("tablet")
- max-height 100%!important
- overflow visible!important
-
-
-// sources
-
-.sources
- background-color #222
- .columns
- +breakpoint("tablet")
- grid(3, 30px, '.column')
-
- .column
- margin-bottom 20px
- text-align center
- +breakpoint("tablet")
- margin-bottom 0
-
- h2
- font-size 30px
- color white
- text-align center
- margin 0
- font-weight normal
-
- .logotype
- img
- height 40px
-
- .hold
- min-height 70px
- margin-top 40px
- a
- text-decoration none
-
- .text-hold
- background-color #000
- color white
- text-align left
- padding 10px 15px
- border-radius 3px
- width 100%
- max-width 340px
- display inline-block
- font-size: 13px;
- a
- float right
- color white
- font-size 18px
- text-decoration none
- margin-top: 4px;
- p
- margin 0
- white-space nowrap
- text-overflow ellipsis
- overflow hidden
- line-height: 30px;
- font-family: "Roboto Mono", "Menlo"
-
- .tshirt
- text-align center
- h2
- margin-bottom 20px
- img
- max-width 180px
- width 100%
- display inline-block
- +breakpoint("tablet")
- max-width 227px
- a
- background-color #00B9F1
- color white
- max-width 180px
- margin 20px auto 0
- font-size 16px
- font-weight bold
- text-transform uppercase
- border-radius 3px
- padding 15px
- text-align center
- text-decoration none
- display block
- +breakpoint("tablet")
- max-width 270px
-
-
-// tokens-created
-
-.tokens-created
- background-color black
- text-align center
- color white
- font-size 20px
- line-height 1.8
- padding 30px 0
- +breakpoint("tablet")
- padding 60px 0
- font-size 26px
-
- img
- margin-bottom 35px
-
- p
- max-width 875px
- margin 5px auto
-
-.btn, a.btn
- transition(background-color 0.2s ease)
- text-transform uppercase
- letter-spacing 2px
- font-weight bold
- border 1px solid #d0d2d3
- line-height 30px
- padding 15px 30px
- font-size 15px
- border-radius 3px
- text-decoration none
- display inline-block
- margin-top 30px
- &.btn-success
- background-color #eb5424
- color white
- border-color transparent
- &:hover
- background-color darken(#eb5424, 30%)
- color white
-
-.btn, a.btn
- &.btn-lg
- background-color #D63AFF
- color white
- border none
-
- .token
- margin-top 35px
- h5
- font-size 14px
- font-weight normal
- margin 0 0 10px 0;
- color: #999;
- letter-spacing: 1px;
-
-
-// plain-text
-
-.video-content
- padding-bottom 0
-
- .container
- max-width 630px
-
- .intro-video
- width 100%
- margin 0 auto
- display block
- +breakpoint("tablet")
- width 600px
- height 375px
-
-.plain-text
- .container
- max-width 630px
-
- h1
- font-size 25px
- font-weight 300
- color #333
- margin-top 10px
- line-height 1.3
- +breakpoint("mobile-landscape")
- font-size 40px
-
- & > h1, & > hr
- display none
-
- h2, h3, h4, h5, h6
- &.anchor-heading
- position relative
-
- .anchor
- display none
- +breakpoint("tablet")
- position absolute
- top 0
- left -25px
- visibility hidden
- &:hover
- +breakpoint("tablet")
- .anchor
- visibility visible
-
- h2, h3, h4
- font-weight 700
- color #333
- line-height 1.3
-
- h2
- font-size 20px
- margin-top 40px
- &:first-child
- margin-top 0
-
- h3
- font-size 16px
-
- h4, h5, h6
- font-size 13px
- text-transform uppercase
- letter-spacing 1px
-
- p, ul li
- color #5c666f
- font-size 16px
- line-height 2
- strong
- color #333
- code
- border-radius 4px
- font-size 90%
- padding 3px 8px
- background-color #F7F7F7
-
- blockquote
- background-color lighten(#F7F7F7, 55%)
- padding 60px 30px
- border-radius 3px
- margin 30px 0
- text-align center
- border none
-
- p
- margin 0
- font-size 12px
- +breakpoint("tablet")
- font-size 16px
-
- em
- font-size 18px
- line-height 1.5
- +breakpoint("tablet")
- font-size 25px
-
- strong
- display block
- margin-top 15px
- color rgba(#333,.5)
- text-transform uppercase
-
- sup
- font-size 90%
-
- img
- max-width 100%
-
- table
- border-collapse collapse
- width 100%
- margin 20px 0 30px
-
- thead tr th
- font-family Helvetica, Arial, sans-serif
- font-weight bold
- text-align center
- font-size 13px
-
- td, th
- border 1px solid #E0E0E0
- padding 0.5rem
- text-align left
-
- tbody tr:nth-child(odd)
- background rgba(#eee,.5)
-
- pre
- display block
- font-size 13px
- line-height 1.42857143
- color #333
- word-break break-all
- background-color #f5f5f5
- border-radius 4px
- margin-bottom 30px
-
- pre code
- font-size inherit
- border none
- border-radius 0
-
-// go-tool
-
-.go-tool
- text-align center
- border-top 1px solid #DDD
- p
- font-size 15px
- display inline-block
- text-transform uppercase
- +breakpoint("tablet")
- margin-right 20px
- .btn.btn-success
- background-color #D63AFF
- margin 0
- &:hover
- background-color darken(#D63AFF, 30%)
-
-
-// footer
-
-footer
- background-color black
- border-top 1px solid rgba(#979797,.4)
- padding 20px 0
- text-align center
- +breakpoint("tablet")
- text-align left
- padding 60px 0
-
- .columns
- color white
- font-size 14px
- +breakpoint("tablet")
- grid(3, 0, '.column')
-
- .column
- margin 15px 0
- +breakpoint("tablet")
- margin 0
-
- a
- color white
- img
- margin-left 5px
-
- .pull-request
- +breakpoint("tablet")
- text-align center
- font-size 16px
- span
- display block
- +breakpoint("desktop")
- display inline-block
- a
- color #00B9F1
- margin-left 5px
-
- .social-counter
- +breakpoint("tablet")
- text-align right
diff --git a/stylus/codemirror.styl b/stylus/codemirror.styl
deleted file mode 100644
index bd452ab8..00000000
--- a/stylus/codemirror.styl
+++ /dev/null
@@ -1,39 +0,0 @@
-.CodeMirror
- zoom 1
- font-family 'Roboto Mono', Menlo
- outline none
- height auto
- *
- outline none
- box-shadow none
-
-.jwt-playground .input
- &.error
- background pink
- .CodeMirror
- font-size 20px
- line-height 30px
- .cm-jwt-dot
- color black
- .cm-jwt-header
- color #FB015B
- .cm-jwt-payload
- color #D63AFF
- .cm-jwt-signature
- color #00B9F1
-
-.jwt-playground .output .jwt-explained pre
- font-size 14px
- line-height 1.5
-
-.jwt-playground .output .jwt-header
- .text-line a, .CodeMirror *
- color #FB015B
-
-.jwt-playground .output .jwt-payload
- .text-line a, .CodeMirror *
- color #D63AFF
-
-.jwt-playground .output .jwt-signature
- .text-line a, pre
- color #00B9F1
\ No newline at end of file
diff --git a/stylus/flip-clock.styl b/stylus/flip-clock.styl
deleted file mode 100644
index 34342d08..00000000
--- a/stylus/flip-clock.styl
+++ /dev/null
@@ -1,488 +0,0 @@
-.flip-clock-wrapper
- font-family 'DINCondensedBold'
- -webkit-user-select none
- text-align center
- position relative
- width 100%
- margin 0
- -ms-transform scale(.8)
- -webkit-transform scale(.8)
- transform scale(.8)
- +breakpoint("desktop")
- -ms-transform none
- -webkit-transform none
- transform none
- *
- -webkit-box-sizing border-box
- -moz-box-sizing border-box
- -ms-box-sizing border-box
- -o-box-sizing border-box
- box-sizing border-box
- -webkit-backface-visibility hidden
- -moz-backface-visibility hidden
- -ms-backface-visibility hidden
- -o-backface-visibility hidden
- backface-visibility hidden
- a
- cursor pointer
- text-decoration none
- color #ccc
- &:hover
- color #fff
- ul
- padding 0
- margin 0
- list-style none
- position relative
- float none
- display inline-block
- margin 1px
- width 31px
- height 50px
- font-size 80px
- font-weight bold
- line-height 87px
- border-radius 2px
- background #000
- &:nth-last-child(3n+1)
- margin-right 8px
- +breakpoint("desktop")
- width 40px
- height 66px
- line-height 66px
- li
- z-index 1
- position absolute
- left 0
- top 0
- width 100%
- height 100%
- line-height 64px
- .pc &
- line-height 56px
- text-decoration none !important
- +breakpoint("desktop")
- line-height 86px
- .pc &
- line-height 70px
- &:first-child
- z-index 2
- a
- display block
- height 100%
- -webkit-perspective 200px
- -moz-perspective 200px
- perspective 200px
- margin 0 !important
- overflow visible !important
- cursor default !important
- div
- z-index 1
- position absolute
- left 0
- width 100%
- height 50%
- font-size 80px
- overflow hidden
- outline 1px solid transparent
- .shadow
- position absolute
- width 100%
- height 100%
- z-index 2
- &.up
- -webkit-transform-origin 50% 100%
- -moz-transform-origin 50% 100%
- -ms-transform-origin 50% 100%
- -o-transform-origin 50% 100%
- transform-origin 50% 100%
- top 0
- &:after
- content ""
- position absolute
- top 44px
- left 0
- z-index 5
- width 100%
- height 3px
- background-color #000
- background-color rgba(0, 0, 0, 0.4)
- div
- &.inn
- top 0
- &.down
- -webkit-transform-origin 50% 0
- -moz-transform-origin 50% 0
- -ms-transform-origin 50% 0
- -o-transform-origin 50% 0
- transform-origin 50% 0
- bottom 0
- border-bottom-left-radius 6px
- border-bottom-right-radius 6px
- div
- &.inn
- bottom 0
- div
- &.inn
- font-family 'DINCondensedBold'
- position absolute
- left 0
- z-index 1
- width 100%
- height 200%
- color #ccc
- text-shadow 0 1px 2px #000
- text-align center
- background-color #333
- border-radius 6px
- font-size 46px
- +breakpoint("desktop")
- font-size 60px
- &.flip-clock-active
- z-index 3
- &.play
- li
- &.flip-clock-before
- z-index 3
- .up
- z-index 2
- -webkit-animation turn2 0.5s linear both
- -moz-animation turn2 0.5s linear both
- animation turn2 0.5s linear both
- .shadow
- background -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%)
- background -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black))
- background linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%
- background -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%)
- background -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%)
- background linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%
- -webkit-animation show 0.5s linear both
- -moz-animation show 0.5s linear both
- animation show 0.5s linear both
- .down
- .shadow
- background -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%)
- background -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)))
- background linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%
- background -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%)
- background -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%)
- background linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%
- -webkit-animation show 0.5s linear both
- -moz-animation show 0.5s linear both
- animation show 0.5s linear both
- &.flip-clock-active
- -webkit-animation asd 0.5s 0.5s linear both
- -moz-animation asd 0.5s 0.5s linear both
- animation asd 0.5s 0.5s linear both
- z-index 5
- .down
- z-index 2
- -webkit-animation turn 0.5s 0.5s linear both
- -moz-animation turn 0.5s 0.5s linear both
- animation turn 0.5s 0.5s linear both
- .shadow
- background -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%)
- background -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)))
- background linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%
- background -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%)
- background -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%)
- background linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%
- -webkit-animation hide 0.5s 0.3s linear both
- -moz-animation hide 0.5s 0.3s linear both
- animation hide 0.5s 0.2s linear both
- .up
- .shadow
- background -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%)
- background -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black))
- background linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%
- background -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%)
- background -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%)
- background linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%
- -webkit-animation hide 0.5s 0.3s linear both
- -moz-animation hide 0.5s 0.3s linear both
- animation hide 0.5s 0.3s linear both
- li
- padding 0
- margin 0
- list-style none
- &.clearfix
- *zoom 1
- &:after
- clear both
- &:after
- clear both
- .flip
- box-shadow 0 2px 5px rgba(0, 0, 0, 0.7)
-
-.flip-clock-wrapper.clearfix:before,
-.flip-clock-wrapper.clearfix:after
- content " "
- display table
-
-.flip-clock-meridium
- background none !important
- box-shadow 0 0 0 !important
- font-size 36px !important
- a
- color #313333
-
-.flip-clock-wrapper:before,
-.flip-clock-wrapper:after
- content " "
- display table
-
-
-.flip-clock-divider
- float left
- display inline-block
- position relative
- width 20px
- height 100px
- &:first-child
- width 0
- .flip-clock-label
- position absolute
- top -1.5em
- right -86px
- color black
- text-shadow none
- &.minutes
- .flip-clock-label
- right -88px
- &.seconds
- .flip-clock-label
- right -91px
-
-.flip-clock-dot
- display block
- background #323434
- width 10px
- height 10px
- position absolute
- border-radius 50%
- box-shadow 0 0 5px rgba(0, 0, 0, 0.5)
- left 5px
- &.top
- top 30px
- &.bottom
- bottom 30px
-
-
-
-
-@-webkit-keyframes asd {
- 0% {
- z-index: 2;
- }
-
- 20% {
- z-index: 4;
- }
-
- 100% {
- z-index: 4;
- }
-}
-
-@-moz-keyframes asd {
- 0% {
- z-index: 2;
- }
-
- 20% {
- z-index: 4;
- }
-
- 100% {
- z-index: 4;
- }
-}
-
-@-o-keyframes asd {
- 0% {
- z-index: 2;
- }
-
- 20% {
- z-index: 4;
- }
-
- 100% {
- z-index: 4;
- }
-}
-
-@keyframes asd {
- 0% {
- z-index: 2;
- }
-
- 20% {
- z-index: 4;
- }
-
- 100% {
- z-index: 4;
- }
-}
-
-@-webkit-keyframes turn {
- 0% {
- -webkit-transform: rotateX(90deg);
- }
-
- 100% {
- -webkit-transform: rotateX(0deg);
- }
-}
-
-@-moz-keyframes turn {
- 0% {
- -moz-transform: rotateX(90deg);
- }
-
- 100% {
- -moz-transform: rotateX(0deg);
- }
-}
-
-@-o-keyframes turn {
- 0% {
- -o-transform: rotateX(90deg);
- }
-
- 100% {
- -o-transform: rotateX(0deg);
- }
-}
-
-@keyframes turn {
- 0% {
- transform: rotateX(90deg);
- }
-
- 100% {
- transform: rotateX(0deg);
- }
-}
-
-@-webkit-keyframes turn2 {
- 0% {
- -webkit-transform: rotateX(0deg);
- }
-
- 100% {
- -webkit-transform: rotateX(-90deg);
- }
-}
-
-@-moz-keyframes turn2 {
- 0% {
- -moz-transform: rotateX(0deg);
- }
-
- 100% {
- -moz-transform: rotateX(-90deg);
- }
-}
-
-@-o-keyframes turn2 {
- 0% {
- -o-transform: rotateX(0deg);
- }
-
- 100% {
- -o-transform: rotateX(-90deg);
- }
-}
-
-@keyframes turn2 {
- 0% {
- transform: rotateX(0deg);
- }
-
- 100% {
- transform: rotateX(-90deg);
- }
-}
-
-
-@-webkit-keyframes show {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@-moz-keyframes show {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@-o-keyframes show {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes show {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@-webkit-keyframes hide {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-@-moz-keyframes hide {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-@-o-keyframes hide {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-@keyframes hide {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
\ No newline at end of file
diff --git a/stylus/highlight.styl b/stylus/highlight.styl
deleted file mode 100755
index 2039a5f3..00000000
--- a/stylus/highlight.styl
+++ /dev/null
@@ -1,142 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:0.5em;background:#f0f0f0;-webkit-text-size-adjust:none}.hljs,.hljs-subst,.hljs-tag .hljs-title,.nginx .hljs-title{color:black}.hljs-string,.hljs-title,.hljs-constant,.hljs-parent,.hljs-tag .hljs-value,.hljs-rule .hljs-value,.hljs-preprocessor,.hljs-pragma,.hljs-name,.haml .hljs-symbol,.ruby .hljs-symbol,.ruby .hljs-symbol .hljs-string,.hljs-template_tag,.django .hljs-variable,.smalltalk .hljs-class,.hljs-addition,.hljs-flow,.hljs-stream,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-command,.tex .hljs-special,.erlang_repl .hljs-function_or_atom,.asciidoc .hljs-header,.markdown .hljs-header,.coffeescript .hljs-attribute,.tp .hljs-variable{color:#800}.smartquote,.hljs-comment,.hljs-annotation,.diff .hljs-header,.hljs-chunk,.asciidoc .hljs-blockquote,.markdown .hljs-blockquote{color:#888}.hljs-number,.hljs-date,.hljs-regexp,.hljs-literal,.hljs-hexcolor,.smalltalk .hljs-symbol,.smalltalk .hljs-char,.go .hljs-constant,.hljs-change,.lasso .hljs-variable,.makefile .hljs-variable,.asciidoc .hljs-bullet,.markdown .hljs-bullet,.asciidoc .hljs-link_url,.markdown .hljs-link_url{color:#080}.hljs-label,.ruby .hljs-string,.hljs-decorator,.hljs-filter .hljs-argument,.hljs-localvars,.hljs-array,.hljs-attr_selector,.hljs-important,.hljs-pseudo,.hljs-pi,.haml .hljs-bullet,.hljs-doctype,.hljs-deletion,.hljs-envvar,.hljs-shebang,.apache .hljs-sqbracket,.nginx .hljs-built_in,.tex .hljs-formula,.erlang_repl .hljs-reserved,.hljs-prompt,.asciidoc .hljs-link_label,.markdown .hljs-link_label,.vhdl .hljs-attribute,.clojure .hljs-attribute,.asciidoc .hljs-attribute,.lasso .hljs-attribute,.coffeescript .hljs-property,.hljs-phony{color:#88f}.hljs-keyword,.hljs-id,.hljs-title,.hljs-built_in,.css .hljs-tag,.hljs-doctag,.smalltalk .hljs-class,.hljs-winutils,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.hljs-type,.hljs-typename,.tex .hljs-command,.asciidoc .hljs-strong,.markdown .hljs-strong,.hljs-request,.hljs-status,.tp .hljs-data,.tp .hljs-io{font-weight:bold}.asciidoc .hljs-emphasis,.markdown .hljs-emphasis,.tp .hljs-units{font-style:italic}.nginx .hljs-built_in{font-weight:normal}
-
-.main-content
- pre
- padding 0
- word-wrap normal
-
-pre
- word-wrap normal
- position relative
-
- code.hljs
- background-color #2F383D
- white-space pre
- padding 15px
- color white
-
- code.hljs-line-numbers.hljs-line-numbers
- background-color darken(#2F383D, 10%)
- border-right 1px solid rgba(#5C666F,.1)
- text-align right
- color rgba(255, 255, 255, 0.4)
- -webkit-touch-callout none
- -webkit-user-select none
- -khtml-user-select none
- -moz-user-select none
- -ms-user-select none
- user-select none
-
-.hljs
- .subst,
- .lisp .title,
- .clojure .built_in,
- .nginx .title
- color color_oil
-
- .string,
- .title,
- .constant,
- .parent,
- .tag .value,
- .rules .value,
- .rules .value .number,
- .preprocessor,
- .ruby .symbol,
- .ruby .symbol .string,
- .aggregate,
- .template_tag,
- .django .variable,
- .smalltalk .class,
- .addition,
- .flow,
- .stream,
- .bash .variable,
- .apache .tag,
- .apache .cbracket,
- .tex .command,
- .tex .special,
- .erlang_repl .function_or_atom,
- .markdown .header
- color #00FBCA // green
-
- .comment,
- .annotation,
- .template_comment,
- .diff .header,
- .chunk,
- .markdown .blockquote
- color #899FAB // oil light
-
- .number,
- .title,
- .date,
- .regexp,
- .literal,
- .smalltalk .symbol,
- .smalltalk .char,
- .go .constant,
- .change,
- .markdown .bullet,
- .markdown .link_url
- color #42C7F4 // blue light
-
- .label,
- .tag,
- .javadoc,
- .ruby .string,
- .decorator,
- .filter .argument,
- .localvars,
- .array,
- .attr_selector,
- .important,
- .pseudo,
- .pi,
- .doctype,
- .deletion,
- .envvar,
- .shebang,
- .apache .sqbracket,
- .nginx .built_in,
- .tex .formula,
- .erlang_repl .reserved,
- .prompt,
- .markdown .link_label,
- .vhdl .attribute,
- .clojure .attribute,
- .coffeescript .property
- color #FFA0E7 // pink
-
-
- .id,
- .phpdoc,
- .built_in,
- .aggregate,
- .css .tag,
- .javadoctag,
- .phpdoc,
- .yardoctag,
- .smalltalk .class,
- .winutils,
- .bash .variable,
- .apache .tag,
- .go .typename,
- .tex .command,
- .markdown .strong,
- .request,
- .status,
- .tag .title,
- .keyword
- color #FF9A56 // orange
-
- .coffeescript .javascript,
- .javascript .xml,
- .tex .formula,
- .xml .javascript,
- .xml .vbscript,
- .xml .css,
- .xml .cdata
- opacity: 1;
-
-
diff --git a/stylus/mixins.styl b/stylus/mixins.styl
deleted file mode 100644
index 5709c355..00000000
--- a/stylus/mixins.styl
+++ /dev/null
@@ -1,58 +0,0 @@
-clearfix()
- &:after
- clear: both
-
- &:after, &:before
- content: ""
- display: table
-
- *zoom: 1
-
-breakpoint(point = "min-width", value = 0)
- if point == "mobile"
- @media (min-width: 320px)
- {block}
-
- else if point == "mobile-landscape"
- @media (min-width: 568px)
- {block}
-
- else if point == "tablet"
- @media (min-width: 768px)
- {block}
-
- else if point == "desktop"
- @media (min-width: 992px)
- {block}
-
- else if point == "desktop-big"
- @media (min-width: 1280px)
- {block}
-
- else if point == "retina-only"
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
- {block}
-
- else
- @media (point: value)
- {block}
-
-grid(cols = 1, gutter = 0, childs = ".item")
- clearfix()
- width: auto
- margin-right: -(gutter)
-
- {childs}
- float: left
- width: (100% / cols)
- padding-right: gutter
- background-clip: content-box
- box-sizing border-box
-
-transition(arguments)
- -webkit-transition: arguments
- transition: arguments
-
-transform(arguments)
- -webkit-transform: arguments
- transform: arguments
\ No newline at end of file
diff --git a/test/test.js b/test/test.js
deleted file mode 100644
index d50e99d1..00000000
--- a/test/test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-describe('jwt library wrapper (jwt.js)', function () {
- // TODO Add RS256 tests
- it('should fail on invalid data', function () {
- var result = window.verify('hello', 'bye', false);
- expect(result.error).not.to.be(null);
- expect(result.result).to.be('');
- });
- it('should verify using ascii secret', function () {
- var result = window.verify('HS256', 'eyJhbGciOiJIUzI1NiIsImN0eSI6IkpXVCJ9.eyJhZ2UiOjIxfQ.8nqb61Mdqdama9pZQz07HiIySY6FZC9UjHMKHg6zhjw', 'secret', false);
- expect(result.error).to.be.equal(null);
- expect(result.result).to.be(true);
- });
- it('should verify using bas64 encoded secret', function () {
- var jwt = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL2F1dGgwLmF1dGgwLmNvbS8iLCJzdWIiOiJhdXRoMHw1MjdhYzIxOWQ1ZWFjYzE4ZDQwMDAwMDUiLCJhdWQiOiJhRkd2RFRvNTVHT3RkRVlyb1Fsa3RBMkFHNU1rVDY2SCIsImV4cCI6MTM5NDY5OTg5MiwiaWF0IjoxMzk0NjYzODkyfQ.kEdt5CChBWdPytkGv10mb3tqe6CEcpCQ_DLnEgq69p8';
- var secret = '3GdpH_8Ty1Sx_laCRwyUaSl7ddb6xfpR-352SZPFdPKdZ1S8KGtDYbiNMG3Wt61X';
- var result = window.verify('HS256', jwt, secret, true);
- expect(result.error).to.be.equal(null);
- expect(result.result).to.be(true);
- });
- it('should decode with two underscores', function () {
- var result = window.decode('eyI_IjoiYWE_In0');
- expect(result.error).to.be.equal(null);
- expect(result.result).to.be('{\n "?": "aa?"\n}');
- });
-});
diff --git a/test/test_harness.html b/test/test_harness.html
deleted file mode 100644
index 8b881f5f..00000000
--- a/test/test_harness.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-
-
- Mocha Tests
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/.gitkeep b/tests/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/tests/jwt.service.test.ts b/tests/jwt.service.test.ts
new file mode 100644
index 00000000..6b3a30c2
--- /dev/null
+++ b/tests/jwt.service.test.ts
@@ -0,0 +1,221 @@
+import { describe, expect, test } from "vitest";
+import { DefaultTokensValues } from "@/features/common/values/default-tokens.values";
+import { validateJwtFormat } from "@/features/common/services/jwt.service";
+import { JwtTypeValues } from "@/features/common/values/jwt-type.values";
+
+describe("validateJwtFormat", () => {
+ const tokenHS256 = DefaultTokensValues.hs256.token;
+ const tokenHS384 = DefaultTokensValues.hs384.token;
+ const tokenHS512 = DefaultTokensValues.hs512.token;
+ const tokenRS256 = DefaultTokensValues.rs256.token;
+ const tokenRS384 = DefaultTokensValues.rs384.token;
+ const tokenRS512 = DefaultTokensValues.rs512.token;
+ const unsecured =
+ "eyJhbGciOiJub25lIn0.eyJpc3MiOiJqb2UiLA0KICJleHAiOjEzMDA4MTkzODAsDQogImh0dHA6Ly9leGFtcGxlLmNvbS9pc19yb290Ijp0cnVlfQ.";
+
+ const invalidToken1 = "a.b.c";
+ const invalidToken2 = "a.b";
+ const invalidToken3 = "a.";
+ const invalidToken4 = "a";
+ const invalidToken5 = "";
+ const invalidToken6 = "abc.123.@@@";
+ const invalidToken7 =
+ "eyJhbGciOiJIUzI1NiJ9.dGVzdA.Yysa_W8n99vc_zcHxetNl4qo8gNx1qZu63I0H5UTYAI";
+ const invalidToken8 =
+ "eyJhbGciOiJIUzI1N9.dGVzdA.Yysa_W8n99vc_zcHxetNl4qo8gNx1qZu63I0H5UTYAI";
+ const invalidToken9 =
+ "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c.abc";
+
+ test("input is a valid JWT", () => {
+ const result1 = validateJwtFormat(tokenHS256);
+ expect(result1.isErr()).toBe(false);
+ expect(result1.isOk()).toBe(true);
+ result1.map((value) =>
+ expect(value).toStrictEqual({
+ signingAlgorithm: "HS256",
+ type: JwtTypeValues.MACed,
+ encoded: {
+ token:
+ "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
+ header: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
+ payload:
+ "eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ",
+ signature: "SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
+ },
+ decoded: {
+ header: {
+ alg: "HS256",
+ typ: "JWT",
+ },
+ payload: {
+ sub: "1234567890",
+ name: "John Doe",
+ iat: 1516239022,
+ },
+ },
+ }),
+ );
+
+ // const result2 = validateJwtFormat(tokenHS384);
+ // expect(result2.isErr()).toBe(false);
+ // expect(result2.isOk()).toBe(true);
+ // result2.map((value) => expect(value).toBe(tokenHS384));
+ //
+ // const result3 = validateJwtFormat(tokenHS512);
+ // expect(result3.isErr()).toBe(false);
+ // expect(result3.isOk()).toBe(true);
+ // result3.map((value) => expect(value).toBe(tokenHS512));
+ //
+ const result4 = validateJwtFormat(tokenRS256);
+ expect(result4.isErr()).toBe(false);
+ expect(result4.isOk()).toBe(true);
+ result4.map((value) =>
+ expect(value).toStrictEqual({
+ signingAlgorithm: "RS256",
+ type: JwtTypeValues.DigitallySigned,
+ encoded: {
+ token:
+ "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.NHVaYe26MbtOYhSKkoKYdFVomg4i8ZJd8_-RU8VNbftc4TSMb4bXP3l3YlNWACwyXPGffz5aXHc6lty1Y2t4SWRqGteragsVdZufDn5BlnJl9pdR_kdVFUsra2rWKEofkZeIC4yWytE58sMIihvo9H1ScmmVwBcQP6XETqYd0aSHp1gOa9RdUPDvoXQ5oqygTqVtxaDr6wUFKrKItgBMzWIdNZ6y7O9E0DhEPTbE9rfBo6KTFsHAZnMg4k68CDp2woYIaXbmYTWcvbzIuHO7_37GT79XdIwkm95QJ7hYC9RiwrV7mesbY4PAahERJawntho0my942XheVLmGwLMBkQ",
+ header: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9",
+ payload:
+ "eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0",
+ signature:
+ "NHVaYe26MbtOYhSKkoKYdFVomg4i8ZJd8_-RU8VNbftc4TSMb4bXP3l3YlNWACwyXPGffz5aXHc6lty1Y2t4SWRqGteragsVdZufDn5BlnJl9pdR_kdVFUsra2rWKEofkZeIC4yWytE58sMIihvo9H1ScmmVwBcQP6XETqYd0aSHp1gOa9RdUPDvoXQ5oqygTqVtxaDr6wUFKrKItgBMzWIdNZ6y7O9E0DhEPTbE9rfBo6KTFsHAZnMg4k68CDp2woYIaXbmYTWcvbzIuHO7_37GT79XdIwkm95QJ7hYC9RiwrV7mesbY4PAahERJawntho0my942XheVLmGwLMBkQ",
+ },
+ decoded: {
+ header: {
+ alg: "RS256",
+ typ: "JWT",
+ },
+ payload: {
+ sub: "1234567890",
+ name: "John Doe",
+ admin: true,
+ iat: 1516239022,
+ },
+ },
+ }),
+ );
+
+ // const result5 = validateJwtFormat(tokenRS384);
+ // expect(result5.isErr()).toBe(false);
+ // expect(result5.isOk()).toBe(true);
+ // result5.map((value) => expect(value).toBe(tokenRS384));
+ //
+ // const result6 = validateJwtFormat(tokenRS512);
+ // expect(result6.isErr()).toBe(false);
+ // expect(result6.isOk()).toBe(true);
+ // result6.map((value) => expect(value).toBe(tokenRS512));
+ //
+ const result7 = validateJwtFormat(unsecured);
+ expect(result7.isErr()).toBe(false);
+ expect(result7.isOk()).toBe(true);
+ result7.map((value) =>
+ expect(value).toStrictEqual({
+ signingAlgorithm: "none",
+ type: JwtTypeValues.Unsecured,
+ encoded: {
+ token:
+ "eyJhbGciOiJub25lIn0.eyJpc3MiOiJqb2UiLA0KICJleHAiOjEzMDA4MTkzODAsDQogImh0dHA6Ly9leGFtcGxlLmNvbS9pc19yb290Ijp0cnVlfQ.",
+ header: "eyJhbGciOiJub25lIn0",
+ payload:
+ "eyJpc3MiOiJqb2UiLA0KICJleHAiOjEzMDA4MTkzODAsDQogImh0dHA6Ly9leGFtcGxlLmNvbS9pc19yb290Ijp0cnVlfQ",
+ signature: "",
+ },
+ decoded: {
+ header: {
+ alg: "none",
+ },
+ payload: {
+ iss: "joe",
+ exp: 1300819380,
+ "http://example.com/is_root": true,
+ },
+ },
+ }),
+ );
+ });
+
+ test("input is not a valid JWT", () => {
+ const result1 = validateJwtFormat(invalidToken1);
+ expect(result1.isErr()).toBe(true);
+ expect(result1.isOk()).toBe(false);
+ result1.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "The first segment, the JWT header, and the second segment, the JWT payload, must represent a completely valid JSON object conforming to RFC 7159.",
+ ]),
+ );
+
+ const result2 = validateJwtFormat(invalidToken2);
+ expect(result2.isErr()).toBe(true);
+ expect(result2.isOk()).toBe(false);
+ result2.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "The first segment, the JWT header, and the second segment, the JWT payload, must represent a completely valid JSON object conforming to RFC 7159.",
+ ]),
+ );
+
+ const result3 = validateJwtFormat(invalidToken3);
+ expect(result3.isErr()).toBe(true);
+ expect(result3.isOk()).toBe(false);
+ result3.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "The second (payload) segment cannot be an empty string.",
+ ]),
+ );
+
+ const result4 = validateJwtFormat(invalidToken4);
+ expect(result4.isErr()).toBe(true);
+ expect(result4.isOk()).toBe(false);
+ result4.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "The JWT must contain at least one period ('.') character. Source: https://datatracker.ietf.org/doc/html/rfc7519#section-7.2",
+ ]),
+ );
+
+ const result5 = validateJwtFormat(invalidToken5);
+ expect(result5.isErr()).toBe(true);
+ expect(result5.isOk()).toBe(false);
+ result5.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "The JWT must contain at least one period ('.') character. Source: https://datatracker.ietf.org/doc/html/rfc7519#section-7.2",
+ ]),
+ );
+
+ const result6 = validateJwtFormat(invalidToken6);
+ expect(result6.isErr()).toBe(true);
+ expect(result6.isOk()).toBe(false);
+ result6.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "Each JWT segment must be a base64url-encoded. The third (signature) segment isn't.",
+ ]),
+ );
+
+ const result7 = validateJwtFormat(invalidToken7);
+ expect(result7.isErr()).toBe(true);
+ expect(result7.isOk()).toBe(false);
+ result7.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "The second segment, the JWT payload, must represent a completely valid JSON object conforming to RFC 7159.",
+ ]),
+ );
+
+ const result8 = validateJwtFormat(invalidToken8);
+ expect(result8.isErr()).toBe(true);
+ expect(result8.isOk()).toBe(false);
+ result8.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "The first segment, the JWT header, and the second segment, the JWT payload, must represent a completely valid JSON object conforming to RFC 7159.",
+ ]),
+ );
+
+ const result9 = validateJwtFormat(invalidToken9);
+ expect(result9.isErr()).toBe(true);
+ expect(result9.isOk()).toBe(false);
+ result9.mapErr((error) =>
+ expect(error).toStrictEqual([
+ "This tool only supports a JWT that uses the JWS Compact Serialization, which must have three base64url-encoded segments separated by two period ('.') characters. Source: https://datatracker.ietf.org/doc/html/rfc7516#section-9",
+ ]),
+ );
+ });
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..b1701cf6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "noUncheckedIndexedAccess": false,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "resolvePackageJsonImports": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/vendor/codemirror/.bower.json b/vendor/codemirror/.bower.json
deleted file mode 100644
index 2f3ba026..00000000
--- a/vendor/codemirror/.bower.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "name": "CodeMirror",
- "main": [
- "lib/codemirror.js",
- "lib/codemirror.css"
- ],
- "ignore": [
- "**/.*",
- "node_modules",
- "components",
- "bin",
- "demo",
- "doc",
- "test",
- "index.html",
- "package.json"
- ],
- "homepage": "https://github.com/marijnh/CodeMirror",
- "version": "4.0.1",
- "_release": "4.0.1",
- "_resolution": {
- "type": "version",
- "tag": "4.0.1",
- "commit": "5dee39fa4f6447f1f3359f254795325ed282eb8e"
- },
- "_source": "https://github.com/marijnh/CodeMirror.git",
- "_target": "4.0.1",
- "_originalSource": "https://github.com/marijnh/CodeMirror.git"
-}
\ No newline at end of file
diff --git a/vendor/codemirror/AUTHORS b/vendor/codemirror/AUTHORS
deleted file mode 100644
index 464249d7..00000000
--- a/vendor/codemirror/AUTHORS
+++ /dev/null
@@ -1,333 +0,0 @@
-List of CodeMirror contributors. Updated before every release.
-
-4r2r
-Aaron Brooks
-Abe Fettig
-Adam Ahmed
-Adam King
-adanlobato
-Adán Lobato
-Adrian Aichner
-aeroson
-Ahmad Amireh
-Ahmad M. Zawawi
-ahoward
-Akeksandr Motsjonov
-Alberto González Palomo
-Alberto Pose
-Albert Xing
-Alexander Pavlov
-Alexander Schepanovski
-Alexander Solovyov
-alexey-k
-Alex Piggott
-Amsul
-Amy
-Ananya Sen
-anaran
-AndersMad
-Anderson Mesquita
-Andre von Houck
-Andrey Lushnikov
-Andy Joslin
-Andy Kimball
-Andy Li
-angelozerr
-angelo.zerr@gmail.com
-Ankit Ahuja
-Ansel Santosa
-Anthony Grimes
-Anton Kovalyov
-areos
-AtomicPages LLC
-Atul Bhouraskar
-Aurelian Oancea
-Bastian Müller
-benbro
-Beni Cherniavsky-Paskin
-Benjamin DeCoste
-Ben Keen
-Bernhard Sirlinger
-Billy Moon
-binny
-B Krishna Chaitanya
-Blaine G
-boomyjee
-borawjm
-Brandon Frohs
-Brandon Wamboldt
-Brett Zamir
-Brian Sletten
-Bruce Mitchener
-Chandra Sekhar Pydi
-Charles Skelton
-Chris Coyier
-Chris Granger
-Chris Houseknecht
-Chris Morgan
-Christopher Brown
-ciaranj
-CodeAnimal
-ComFreek
-Curtis Gagliardi
-dagsta
-Dan Heberden
-Daniel, Dao Quang Minh
-Daniel Faust
-Daniel Huigens
-Daniel KJ
-Daniel Neel
-Daniel Parnell
-Danny Yoo
-Darius Roberts
-David Mignot
-David Pathakjee
-deebugger
-Deep Thought
-domagoj412
-Dominator008
-Domizio Demichelis
-Drew Bratcher
-Drew Hintz
-Drew Khoury
-Dror BG
-duralog
-eborden
-edsharp
-ekhaled
-Enam Mijbah Noor
-Eric Allam
-eustas
-Fabien O'Carroll
-Fabio Zendhi Nagao
-Fauntleroy
-fbuchinger
-feizhang365
-Felipe Lalanne
-Felix Raab
-Filip Noetzel
-flack
-ForbesLindesay
-Forbes Lindesay
-Ford_Lawnmower
-Frank Wiegand
-Gabriel Horner
-Gabriel Nahmias
-galambalazs
-Gautam Mehta
-Glenn Jorde
-Glenn Ruehle
-Golevka
-Gordon Smith
-Grant Skinner
-greengiant
-Guillaume Massé
-Guillaume Massé
-Hans Engel
-Hardest
-Hasan Karahan
-hitsthings
-Hocdoc
-Ian Beck
-Ian Dickinson
-Ian Wehrman
-Ian Wetherbee
-Ice White
-ICHIKAWA, Yuji
-ilvalle
-Ingo Richter
-Irakli Gozalishvili
-Ivan Kurnosov
-Jacob Lee
-Jakob Miland
-Jakub Vrana
-James Campos
-James Thorne
-Jamie Hill
-Jan Jongboom
-jankeromnes
-Jan Keromnes
-Jan Odvarko
-Jan T. Sott
-Jason
-Jason Grout
-Jason Johnston
-Jason San Jose
-Jason Siefken
-Jean Boussier
-jeffkenton
-Jeff Pickhardt
-jem (graphite)
-Jochen Berger
-Johan Ask
-John Connor
-John Lees-Miller
-John Snelson
-John Van Der Loo
-Jonathan Malmaud
-jongalloway
-Jon Malmaud
-Joost-Wim Boekesteijn
-Joseph Pecoraro
-Joshua Newman
-jots
-jsoojeon
-Juan Benavides Romero
-Jucovschi Constantin
-Juho Vuori
-jwallers@gmail.com
-kaniga
-Ken Newman
-Ken Rockot
-Kevin Sawicki
-Klaus Silveira
-Koh Zi Han, Cliff
-komakino
-Konstantin Lopuhin
-koops
-ks-ifware
-kubelsmieci
-Lanny
-Laszlo Vidacs
-leaf corcoran
-Leonya Khachaturov
-Liam Newman
-LM
-Lorenzo Stoakes
-Luciano Longo
-lynschinzer
-Maksim Lin
-Maksym Taran
-Malay Majithia
-Manuel Rego Casasnovas
-Marat Dreizin
-Marco Aurélio
-Marco Munizaga
-Marijn Haverbeke
-Mario Pietsch
-Mark Lentczner
-Marko Bonaci
-Martin Balek
-Martín Gaitán
-Martin Hasoň
-Mason Malone
-Mateusz Paprocki
-mats cronqvist
-Matthew Beale
-Matthias BUSSONNIER
-Matt McDonald
-Matt Pass
-Matt Sacks
-Maximilian Hils
-Maxim Kraev
-Max Kirsch
-mbarkhau
-Metatheos
-Micah Dubinko
-Michael Lehenbauer
-Michael Zhou
-Mighty Guava
-Miguel Castillo
-Mike
-Mike Brevoort
-Mike Diaz
-Mike Ivanov
-Mike Kadin
-MinRK
-Miraculix87
-misfo
-mloginov
-mps
-mtaran-google
-Narciso Jaramillo
-Nathan Williams
-ndr
-nerbert
-nextrevision
-nguillaumin
-Ng Zhi An
-Nicholas Bollweg
-Niels van Groningen
-Nikita Beloglazov
-Nikita Vasilyev
-Nikolay Kostov
-nlwillia
-pablo
-Page
-Patil Arpith
-Patrick Strawderman
-Paul Garvin
-Paul Ivanov
-Pavel Feldman
-Pavel Strashkin
-Paweł Bartkiewicz
-peteguhl
-peterkroon
-Peter Kroon
-prasanthj
-Prasanth J
-Rahul
-Randy Edmunds
-Rasmus Erik Voel Jensen
-Richard Z.H. Wang
-robertop23
-Robert Plummer
-Ruslan Osmanov
-Ryan Prior
-sabaca
-Samuel Ainsworth
-sandeepshetty
-santec
-Sascha Peilicke
-satchmorun
-sathyamoorthi
-SCLINIC\jdecker
-Sebastian Zaha
-shaund
-shaun gilchrist
-Shawn A
-sheopory
-Shiv Deepak
-Shmuel Englard
-soliton4
-sonson
-spastorelli
-Stanislav Oaserele
-Stas Kobzar
-Stefan Borsje
-Steffen Beyer
-Steve O'Hara
-stoskov
-Taha Jahangir
-Tarmil
-tfjgeorge
-Thaddee Tyl
-think
-Thomas Dvornik
-Thomas Schmid
-Tim Baumann
-Timothy Farrell
-Timothy Hatcher
-TobiasBg
-Tomas-A
-Tomas Varaneckas
-Tom Erik Støwer
-Tom MacWright
-Tony Jian
-Travis Heppe
-Triangle717
-twifkak
-Vestimir Markov
-vf
-Volker Mische
-wenli
-Wesley Wiser
-William Jamieson
-Wojtek Ptak
-Xavier Mendez
-YNH Webdev
-Yunchi Luo
-Yuvi Panda
-Zachary Dremann
-zziuni
-魏鹏刚
diff --git a/vendor/codemirror/CONTRIBUTING.md b/vendor/codemirror/CONTRIBUTING.md
deleted file mode 100644
index 8938f620..00000000
--- a/vendor/codemirror/CONTRIBUTING.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# How to contribute
-
-- [Getting help](#getting-help-)
-- [Submitting bug reports](#submitting-bug-reports-)
-- [Contributing code](#contributing-code-)
-
-## Getting help
-
-Community discussion, questions, and informal bug reporting is done on the
-[CodeMirror Google group](http://groups.google.com/group/codemirror).
-
-## Submitting bug reports
-
-The preferred way to report bugs is to use the
-[GitHub issue tracker](http://github.com/marijnh/CodeMirror/issues). Before
-reporting a bug, read these pointers.
-
-**Note:** The issue tracker is for *bugs*, not requests for help. Questions
-should be asked on the
-[CodeMirror Google group](http://groups.google.com/group/codemirror) instead.
-
-### Reporting bugs effectively
-
-- CodeMirror is maintained by volunteers. They don't owe you anything, so be
- polite. Reports with an indignant or belligerent tone tend to be moved to the
- bottom of the pile.
-
-- Include information about **the browser in which the problem occurred**. Even
- if you tested several browsers, and the problem occurred in all of them,
- mention this fact in the bug report. Also include browser version numbers and
- the operating system that you're on.
-
-- Mention which release of CodeMirror you're using. Preferably, try also with
- the current development snapshot, to ensure the problem has not already been
- fixed.
-
-- Mention very precisely what went wrong. "X is broken" is not a good bug
- report. What did you expect to happen? What happened instead? Describe the
- exact steps a maintainer has to take to make the problem occur. We can not
- fix something that we can not observe.
-
-- If the problem can not be reproduced in any of the demos included in the
- CodeMirror distribution, please provide an HTML document that demonstrates
- the problem. The best way to do this is to go to
- [jsbin.com](http://jsbin.com/ihunin/edit), enter it there, press save, and
- include the resulting link in your bug report.
-
-## Contributing code
-
-- Make sure you have a [GitHub Account](https://github.com/signup/free)
-- Fork [CodeMirror](https://github.com/marijnh/CodeMirror/)
- ([how to fork a repo](https://help.github.com/articles/fork-a-repo))
-- Make your changes
-- If your changes are easy to test or likely to regress, add tests.
- Tests for the core go into `test/test.js`, some modes have their own
- test suite under `mode/XXX/test.js`. Feel free to add new test
- suites to modes that don't have one yet (be sure to link the new
- tests into `test/index.html`).
-- Follow the general code style of the rest of the project (see
- below). Run `bin/lint` to verify that the linter is happy.
-- Make sure all tests pass. Visit `test/index.html` in your browser to
- run them.
-- Submit a pull request
-([how to create a pull request](https://help.github.com/articles/fork-a-repo))
-
-### Coding standards
-
-- 2 spaces per indentation level, no tabs.
-- Include semicolons after statements.
-- Note that the linter (`bin/lint`) which is run after each commit
- complains about unused variables and functions. Prefix their names
- with an underscore to muffle it.
diff --git a/vendor/codemirror/LICENSE b/vendor/codemirror/LICENSE
deleted file mode 100644
index 442d11cd..00000000
--- a/vendor/codemirror/LICENSE
+++ /dev/null
@@ -1,19 +0,0 @@
-Copyright (C) 2013 by Marijn Haverbeke and others
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/vendor/codemirror/README.md b/vendor/codemirror/README.md
deleted file mode 100644
index 61f6b645..00000000
--- a/vendor/codemirror/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# CodeMirror
-[](http://travis-ci.org/marijnh/CodeMirror)
-[](http://badge.fury.io/js/codemirror)
-
-CodeMirror is a JavaScript component that provides a code editor in
-the browser. When a mode is available for the language you are coding
-in, it will color your code, and optionally help with indentation.
-
-The project page is http://codemirror.net
-The manual is at http://codemirror.net/doc/manual.html
-The contributing guidelines are in [CONTRIBUTING.md](https://github.com/marijnh/CodeMirror/blob/master/CONTRIBUTING.md)
diff --git a/vendor/codemirror/addon/comment/comment.js b/vendor/codemirror/addon/comment/comment.js
deleted file mode 100644
index 1eb9a05c..00000000
--- a/vendor/codemirror/addon/comment/comment.js
+++ /dev/null
@@ -1,169 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- var noOptions = {};
- var nonWS = /[^\s\u00a0]/;
- var Pos = CodeMirror.Pos;
-
- function firstNonWS(str) {
- var found = str.search(nonWS);
- return found == -1 ? 0 : found;
- }
-
- CodeMirror.commands.toggleComment = function(cm) {
- var minLine = Infinity, ranges = cm.listSelections(), mode = null;
- for (var i = ranges.length - 1; i >= 0; i--) {
- var from = ranges[i].from(), to = ranges[i].to();
- if (from.line >= minLine) continue;
- if (to.line >= minLine) to = Pos(minLine, 0);
- minLine = from.line;
- if (mode == null) {
- if (cm.uncomment(from, to)) mode = "un";
- else { cm.lineComment(from, to); mode = "line"; }
- } else if (mode == "un") {
- cm.uncomment(from, to);
- } else {
- cm.lineComment(from, to);
- }
- }
- };
-
- CodeMirror.defineExtension("lineComment", function(from, to, options) {
- if (!options) options = noOptions;
- var self = this, mode = self.getModeAt(from);
- var commentString = options.lineComment || mode.lineComment;
- if (!commentString) {
- if (options.blockCommentStart || mode.blockCommentStart) {
- options.fullLines = true;
- self.blockComment(from, to, options);
- }
- return;
- }
- var firstLine = self.getLine(from.line);
- if (firstLine == null) return;
- var end = Math.min(to.ch != 0 || to.line == from.line ? to.line + 1 : to.line, self.lastLine() + 1);
- var pad = options.padding == null ? " " : options.padding;
- var blankLines = options.commentBlankLines || from.line == to.line;
-
- self.operation(function() {
- if (options.indent) {
- var baseString = firstLine.slice(0, firstNonWS(firstLine));
- for (var i = from.line; i < end; ++i) {
- var line = self.getLine(i), cut = baseString.length;
- if (!blankLines && !nonWS.test(line)) continue;
- if (line.slice(0, cut) != baseString) cut = firstNonWS(line);
- self.replaceRange(baseString + commentString + pad, Pos(i, 0), Pos(i, cut));
- }
- } else {
- for (var i = from.line; i < end; ++i) {
- if (blankLines || nonWS.test(self.getLine(i)))
- self.replaceRange(commentString + pad, Pos(i, 0));
- }
- }
- });
- });
-
- CodeMirror.defineExtension("blockComment", function(from, to, options) {
- if (!options) options = noOptions;
- var self = this, mode = self.getModeAt(from);
- var startString = options.blockCommentStart || mode.blockCommentStart;
- var endString = options.blockCommentEnd || mode.blockCommentEnd;
- if (!startString || !endString) {
- if ((options.lineComment || mode.lineComment) && options.fullLines != false)
- self.lineComment(from, to, options);
- return;
- }
-
- var end = Math.min(to.line, self.lastLine());
- if (end != from.line && to.ch == 0 && nonWS.test(self.getLine(end))) --end;
-
- var pad = options.padding == null ? " " : options.padding;
- if (from.line > end) return;
-
- self.operation(function() {
- if (options.fullLines != false) {
- var lastLineHasText = nonWS.test(self.getLine(end));
- self.replaceRange(pad + endString, Pos(end));
- self.replaceRange(startString + pad, Pos(from.line, 0));
- var lead = options.blockCommentLead || mode.blockCommentLead;
- if (lead != null) for (var i = from.line + 1; i <= end; ++i)
- if (i != end || lastLineHasText)
- self.replaceRange(lead + pad, Pos(i, 0));
- } else {
- self.replaceRange(endString, to);
- self.replaceRange(startString, from);
- }
- });
- });
-
- CodeMirror.defineExtension("uncomment", function(from, to, options) {
- if (!options) options = noOptions;
- var self = this, mode = self.getModeAt(from);
- var end = Math.min(to.line, self.lastLine()), start = Math.min(from.line, end);
-
- // Try finding line comments
- var lineString = options.lineComment || mode.lineComment, lines = [];
- var pad = options.padding == null ? " " : options.padding, didSomething;
- lineComment: {
- if (!lineString) break lineComment;
- for (var i = start; i <= end; ++i) {
- var line = self.getLine(i);
- var found = line.indexOf(lineString);
- if (found > -1 && !/comment/.test(self.getTokenTypeAt(Pos(i, found + 1)))) found = -1;
- if (found == -1 && (i != end || i == start) && nonWS.test(line)) break lineComment;
- if (found > -1 && nonWS.test(line.slice(0, found))) break lineComment;
- lines.push(line);
- }
- self.operation(function() {
- for (var i = start; i <= end; ++i) {
- var line = lines[i - start];
- var pos = line.indexOf(lineString), endPos = pos + lineString.length;
- if (pos < 0) continue;
- if (line.slice(endPos, endPos + pad.length) == pad) endPos += pad.length;
- didSomething = true;
- self.replaceRange("", Pos(i, pos), Pos(i, endPos));
- }
- });
- if (didSomething) return true;
- }
-
- // Try block comments
- var startString = options.blockCommentStart || mode.blockCommentStart;
- var endString = options.blockCommentEnd || mode.blockCommentEnd;
- if (!startString || !endString) return false;
- var lead = options.blockCommentLead || mode.blockCommentLead;
- var startLine = self.getLine(start), endLine = end == start ? startLine : self.getLine(end);
- var open = startLine.indexOf(startString), close = endLine.lastIndexOf(endString);
- if (close == -1 && start != end) {
- endLine = self.getLine(--end);
- close = endLine.lastIndexOf(endString);
- }
- if (open == -1 || close == -1 ||
- !/comment/.test(self.getTokenTypeAt(Pos(start, open + 1))) ||
- !/comment/.test(self.getTokenTypeAt(Pos(end, close + 1))))
- return false;
-
- self.operation(function() {
- self.replaceRange("", Pos(end, close - (pad && endLine.slice(close - pad.length, close) == pad ? pad.length : 0)),
- Pos(end, close + endString.length));
- var openEnd = open + startString.length;
- if (pad && startLine.slice(openEnd, openEnd + pad.length) == pad) openEnd += pad.length;
- self.replaceRange("", Pos(start, open), Pos(start, openEnd));
- if (lead) for (var i = start + 1; i <= end; ++i) {
- var line = self.getLine(i), found = line.indexOf(lead);
- if (found == -1 || nonWS.test(line.slice(0, found))) continue;
- var foundEnd = found + lead.length;
- if (pad && line.slice(foundEnd, foundEnd + pad.length) == pad) foundEnd += pad.length;
- self.replaceRange("", Pos(i, found), Pos(i, foundEnd));
- }
- });
- return true;
- });
-});
diff --git a/vendor/codemirror/addon/comment/continuecomment.js b/vendor/codemirror/addon/comment/continuecomment.js
deleted file mode 100644
index 42277267..00000000
--- a/vendor/codemirror/addon/comment/continuecomment.js
+++ /dev/null
@@ -1,82 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- var modes = ["clike", "css", "javascript"];
-
- for (var i = 0; i < modes.length; ++i)
- CodeMirror.extendMode(modes[i], {blockCommentContinue: " * "});
-
- function continueComment(cm) {
- if (cm.getOption("disableInput")) return CodeMirror.Pass;
- var ranges = cm.listSelections(), mode, inserts = [];
- for (var i = 0; i < ranges.length; i++) {
- var pos = ranges[i].head, token = cm.getTokenAt(pos);
- if (token.type != "comment") return CodeMirror.Pass;
- var modeHere = CodeMirror.innerMode(cm.getMode(), token.state).mode;
- if (!mode) mode = modeHere;
- else if (mode != modeHere) return CodeMirror.Pass;
-
- var insert = null;
- if (mode.blockCommentStart && mode.blockCommentContinue) {
- var end = token.string.indexOf(mode.blockCommentEnd);
- var full = cm.getRange(CodeMirror.Pos(pos.line, 0), CodeMirror.Pos(pos.line, token.end)), found;
- if (end != -1 && end == token.string.length - mode.blockCommentEnd.length && pos.ch >= end) {
- // Comment ended, don't continue it
- } else if (token.string.indexOf(mode.blockCommentStart) == 0) {
- insert = full.slice(0, token.start);
- if (!/^\s*$/.test(insert)) {
- insert = "";
- for (var j = 0; j < token.start; ++j) insert += " ";
- }
- } else if ((found = full.indexOf(mode.blockCommentContinue)) != -1 &&
- found + mode.blockCommentContinue.length > token.start &&
- /^\s*$/.test(full.slice(0, found))) {
- insert = full.slice(0, found);
- }
- if (insert != null) insert += mode.blockCommentContinue;
- }
- if (insert == null && mode.lineComment && continueLineCommentEnabled(cm)) {
- var line = cm.getLine(pos.line), found = line.indexOf(mode.lineComment);
- if (found > -1) {
- insert = line.slice(0, found);
- if (/\S/.test(insert)) insert = null;
- else insert += mode.lineComment + line.slice(found + mode.lineComment.length).match(/^\s*/)[0];
- }
- }
- if (insert == null) return CodeMirror.Pass;
- inserts[i] = "\n" + insert;
- }
-
- cm.operation(function() {
- for (var i = ranges.length - 1; i >= 0; i--)
- cm.replaceRange(inserts[i], ranges[i].from(), ranges[i].to(), "+insert");
- });
- }
-
- function continueLineCommentEnabled(cm) {
- var opt = cm.getOption("continueComments");
- if (opt && typeof opt == "object")
- return opt.continueLineComment !== false;
- return true;
- }
-
- CodeMirror.defineOption("continueComments", null, function(cm, val, prev) {
- if (prev && prev != CodeMirror.Init)
- cm.removeKeyMap("continueComment");
- if (val) {
- var key = "Enter";
- if (typeof val == "string")
- key = val;
- else if (typeof val == "object" && val.key)
- key = val.key;
- var map = {name: "continueComment"};
- map[key] = continueComment;
- cm.addKeyMap(map);
- }
- });
-});
diff --git a/vendor/codemirror/addon/dialog/dialog.css b/vendor/codemirror/addon/dialog/dialog.css
deleted file mode 100644
index 2e7c0fc9..00000000
--- a/vendor/codemirror/addon/dialog/dialog.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.CodeMirror-dialog {
- position: absolute;
- left: 0; right: 0;
- background: white;
- z-index: 15;
- padding: .1em .8em;
- overflow: hidden;
- color: #333;
-}
-
-.CodeMirror-dialog-top {
- border-bottom: 1px solid #eee;
- top: 0;
-}
-
-.CodeMirror-dialog-bottom {
- border-top: 1px solid #eee;
- bottom: 0;
-}
-
-.CodeMirror-dialog input {
- border: none;
- outline: none;
- background: transparent;
- width: 20em;
- color: inherit;
- font-family: monospace;
-}
-
-.CodeMirror-dialog button {
- font-size: 70%;
-}
diff --git a/vendor/codemirror/addon/dialog/dialog.js b/vendor/codemirror/addon/dialog/dialog.js
deleted file mode 100644
index 586b7370..00000000
--- a/vendor/codemirror/addon/dialog/dialog.js
+++ /dev/null
@@ -1,130 +0,0 @@
-// Open simple dialogs on top of an editor. Relies on dialog.css.
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- function dialogDiv(cm, template, bottom) {
- var wrap = cm.getWrapperElement();
- var dialog;
- dialog = wrap.appendChild(document.createElement("div"));
- if (bottom) {
- dialog.className = "CodeMirror-dialog CodeMirror-dialog-bottom";
- } else {
- dialog.className = "CodeMirror-dialog CodeMirror-dialog-top";
- }
- if (typeof template == "string") {
- dialog.innerHTML = template;
- } else { // Assuming it's a detached DOM element.
- dialog.appendChild(template);
- }
- return dialog;
- }
-
- function closeNotification(cm, newVal) {
- if (cm.state.currentNotificationClose)
- cm.state.currentNotificationClose();
- cm.state.currentNotificationClose = newVal;
- }
-
- CodeMirror.defineExtension("openDialog", function(template, callback, options) {
- closeNotification(this, null);
- var dialog = dialogDiv(this, template, options && options.bottom);
- var closed = false, me = this;
- function close() {
- if (closed) return;
- closed = true;
- dialog.parentNode.removeChild(dialog);
- }
- var inp = dialog.getElementsByTagName("input")[0], button;
- if (inp) {
- if (options && options.value) inp.value = options.value;
- CodeMirror.on(inp, "keydown", function(e) {
- if (options && options.onKeyDown && options.onKeyDown(e, inp.value, close)) { return; }
- if (e.keyCode == 13 || e.keyCode == 27) {
- inp.blur();
- CodeMirror.e_stop(e);
- close();
- me.focus();
- if (e.keyCode == 13) callback(inp.value);
- }
- });
- if (options && options.onKeyUp) {
- CodeMirror.on(inp, "keyup", function(e) {options.onKeyUp(e, inp.value, close);});
- }
- if (options && options.value) inp.value = options.value;
- inp.focus();
- CodeMirror.on(inp, "blur", close);
- } else if (button = dialog.getElementsByTagName("button")[0]) {
- CodeMirror.on(button, "click", function() {
- close();
- me.focus();
- });
- button.focus();
- CodeMirror.on(button, "blur", close);
- }
- return close;
- });
-
- CodeMirror.defineExtension("openConfirm", function(template, callbacks, options) {
- closeNotification(this, null);
- var dialog = dialogDiv(this, template, options && options.bottom);
- var buttons = dialog.getElementsByTagName("button");
- var closed = false, me = this, blurring = 1;
- function close() {
- if (closed) return;
- closed = true;
- dialog.parentNode.removeChild(dialog);
- me.focus();
- }
- buttons[0].focus();
- for (var i = 0; i < buttons.length; ++i) {
- var b = buttons[i];
- (function(callback) {
- CodeMirror.on(b, "click", function(e) {
- CodeMirror.e_preventDefault(e);
- close();
- if (callback) callback(me);
- });
- })(callbacks[i]);
- CodeMirror.on(b, "blur", function() {
- --blurring;
- setTimeout(function() { if (blurring <= 0) close(); }, 200);
- });
- CodeMirror.on(b, "focus", function() { ++blurring; });
- }
- });
-
- /*
- * openNotification
- * Opens a notification, that can be closed with an optional timer
- * (default 5000ms timer) and always closes on click.
- *
- * If a notification is opened while another is opened, it will close the
- * currently opened one and open the new one immediately.
- */
- CodeMirror.defineExtension("openNotification", function(template, options) {
- closeNotification(this, close);
- var dialog = dialogDiv(this, template, options && options.bottom);
- var duration = options && (options.duration === undefined ? 5000 : options.duration);
- var closed = false, doneTimer;
-
- function close() {
- if (closed) return;
- closed = true;
- clearTimeout(doneTimer);
- dialog.parentNode.removeChild(dialog);
- }
-
- CodeMirror.on(dialog, 'click', function(e) {
- CodeMirror.e_preventDefault(e);
- close();
- });
- if (duration)
- doneTimer = setTimeout(close, options.duration);
- });
-});
diff --git a/vendor/codemirror/addon/display/fullscreen.css b/vendor/codemirror/addon/display/fullscreen.css
deleted file mode 100644
index 437acd89..00000000
--- a/vendor/codemirror/addon/display/fullscreen.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.CodeMirror-fullscreen {
- position: fixed;
- top: 0; left: 0; right: 0; bottom: 0;
- height: auto;
- z-index: 9;
-}
diff --git a/vendor/codemirror/addon/display/fullscreen.js b/vendor/codemirror/addon/display/fullscreen.js
deleted file mode 100644
index e39c6e16..00000000
--- a/vendor/codemirror/addon/display/fullscreen.js
+++ /dev/null
@@ -1,38 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- CodeMirror.defineOption("fullScreen", false, function(cm, val, old) {
- if (old == CodeMirror.Init) old = false;
- if (!old == !val) return;
- if (val) setFullscreen(cm);
- else setNormal(cm);
- });
-
- function setFullscreen(cm) {
- var wrap = cm.getWrapperElement();
- cm.state.fullScreenRestore = {scrollTop: window.pageYOffset, scrollLeft: window.pageXOffset,
- width: wrap.style.width, height: wrap.style.height};
- wrap.style.width = "";
- wrap.style.height = "auto";
- wrap.className += " CodeMirror-fullscreen";
- document.documentElement.style.overflow = "hidden";
- cm.refresh();
- }
-
- function setNormal(cm) {
- var wrap = cm.getWrapperElement();
- wrap.className = wrap.className.replace(/\s*CodeMirror-fullscreen\b/, "");
- document.documentElement.style.overflow = "";
- var info = cm.state.fullScreenRestore;
- wrap.style.width = info.width; wrap.style.height = info.height;
- window.scrollTo(info.scrollLeft, info.scrollTop);
- cm.refresh();
- }
-});
diff --git a/vendor/codemirror/addon/display/placeholder.js b/vendor/codemirror/addon/display/placeholder.js
deleted file mode 100644
index 0fdc9b0d..00000000
--- a/vendor/codemirror/addon/display/placeholder.js
+++ /dev/null
@@ -1,55 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
- var prev = old && old != CodeMirror.Init;
- if (val && !prev) {
- cm.on("blur", onBlur);
- cm.on("change", onChange);
- onChange(cm);
- } else if (!val && prev) {
- cm.off("blur", onBlur);
- cm.off("change", onChange);
- clearPlaceholder(cm);
- var wrapper = cm.getWrapperElement();
- wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
- }
-
- if (val && !cm.hasFocus()) onBlur(cm);
- });
-
- function clearPlaceholder(cm) {
- if (cm.state.placeholder) {
- cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
- cm.state.placeholder = null;
- }
- }
- function setPlaceholder(cm) {
- clearPlaceholder(cm);
- var elt = cm.state.placeholder = document.createElement("pre");
- elt.style.cssText = "height: 0; overflow: visible";
- elt.className = "CodeMirror-placeholder";
- elt.appendChild(document.createTextNode(cm.getOption("placeholder")));
- cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
- }
-
- function onBlur(cm) {
- if (isEmpty(cm)) setPlaceholder(cm);
- }
- function onChange(cm) {
- var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
- wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
-
- if (empty) setPlaceholder(cm);
- else clearPlaceholder(cm);
- }
-
- function isEmpty(cm) {
- return (cm.lineCount() === 1) && (cm.getLine(0) === "");
- }
-});
diff --git a/vendor/codemirror/addon/display/rulers.js b/vendor/codemirror/addon/display/rulers.js
deleted file mode 100644
index eb0ff06e..00000000
--- a/vendor/codemirror/addon/display/rulers.js
+++ /dev/null
@@ -1,54 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- CodeMirror.defineOption("rulers", false, function(cm, val, old) {
- if (old && old != CodeMirror.Init) {
- clearRulers(cm);
- cm.off("refresh", refreshRulers);
- }
- if (val && val.length) {
- setRulers(cm);
- cm.on("refresh", refreshRulers);
- }
- });
-
- function clearRulers(cm) {
- for (var i = cm.display.lineSpace.childNodes.length - 1; i >= 0; i--) {
- var node = cm.display.lineSpace.childNodes[i];
- if (/(^|\s)CodeMirror-ruler($|\s)/.test(node.className))
- node.parentNode.removeChild(node);
- }
- }
-
- function setRulers(cm) {
- var val = cm.getOption("rulers");
- var cw = cm.defaultCharWidth();
- var left = cm.charCoords(CodeMirror.Pos(cm.firstLine(), 0), "div").left;
- var bot = -cm.display.scroller.offsetHeight;
- for (var i = 0; i < val.length; i++) {
- var elt = document.createElement("div");
- var col, cls = null;
- if (typeof val[i] == "number") {
- col = val[i];
- } else {
- col = val[i].column;
- cls = val[i].className;
- }
- elt.className = "CodeMirror-ruler" + (cls ? " " + cls : "");
- elt.style.cssText = "left: " + (left + col * cw) + "px; top: -50px; bottom: " + bot + "px";
- cm.display.lineSpace.insertBefore(elt, cm.display.cursorDiv);
- }
- }
-
- function refreshRulers(cm) {
- clearRulers(cm);
- setRulers(cm);
- }
-});
diff --git a/vendor/codemirror/addon/edit/closebrackets.js b/vendor/codemirror/addon/edit/closebrackets.js
deleted file mode 100644
index f48ad881..00000000
--- a/vendor/codemirror/addon/edit/closebrackets.js
+++ /dev/null
@@ -1,123 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- var DEFAULT_BRACKETS = "()[]{}''\"\"";
- var DEFAULT_EXPLODE_ON_ENTER = "[]{}";
- var SPACE_CHAR_REGEX = /\s/;
-
- CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
- if (old != CodeMirror.Init && old)
- cm.removeKeyMap("autoCloseBrackets");
- if (!val) return;
- var pairs = DEFAULT_BRACKETS, explode = DEFAULT_EXPLODE_ON_ENTER;
- if (typeof val == "string") pairs = val;
- else if (typeof val == "object") {
- if (val.pairs != null) pairs = val.pairs;
- if (val.explode != null) explode = val.explode;
- }
- var map = buildKeymap(pairs);
- if (explode) map.Enter = buildExplodeHandler(explode);
- cm.addKeyMap(map);
- });
-
- function charsAround(cm, pos) {
- var str = cm.getRange(CodeMirror.Pos(pos.line, pos.ch - 1),
- CodeMirror.Pos(pos.line, pos.ch + 1));
- return str.length == 2 ? str : null;
- }
-
- function buildKeymap(pairs) {
- var map = {
- name : "autoCloseBrackets",
- Backspace: function(cm) {
- if (cm.getOption("disableInput")) return CodeMirror.Pass;
- var ranges = cm.listSelections();
- for (var i = 0; i < ranges.length; i++) {
- if (!ranges[i].empty()) return CodeMirror.Pass;
- var around = charsAround(cm, ranges[i].head);
- if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
- }
- for (var i = ranges.length - 1; i >= 0; i--) {
- var cur = ranges[i].head;
- cm.replaceRange("", CodeMirror.Pos(cur.line, cur.ch - 1), CodeMirror.Pos(cur.line, cur.ch + 1));
- }
- }
- };
- var closingBrackets = "";
- for (var i = 0; i < pairs.length; i += 2) (function(left, right) {
- if (left != right) closingBrackets += right;
- map["'" + left + "'"] = function(cm) {
- if (cm.getOption("disableInput")) return CodeMirror.Pass;
- var ranges = cm.listSelections(), type, next;
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i], cur = range.head, curType;
- if (left == "'" && cm.getTokenTypeAt(cur) == "comment")
- return CodeMirror.Pass;
- var next = cm.getRange(cur, CodeMirror.Pos(cur.line, cur.ch + 1));
- if (!range.empty())
- curType = "surround";
- else if (left == right && next == right)
- curType = "skip";
- else if (left == right && CodeMirror.isWordChar(next))
- return CodeMirror.Pass;
- else if (cm.getLine(cur.line).length == cur.ch || closingBrackets.indexOf(next) >= 0 || SPACE_CHAR_REGEX.test(next))
- curType = "both";
- else
- return CodeMirror.Pass;
- if (!type) type = curType;
- else if (type != curType) return CodeMirror.Pass;
- }
-
- if (type == "skip") {
- cm.execCommand("goCharRight");
- } else if (type == "surround") {
- var sels = cm.getSelections();
- for (var i = 0; i < sels.length; i++)
- sels[i] = left + sels[i] + right;
- cm.replaceSelections(sels, "around");
- } else if (type == "both") {
- cm.replaceSelection(left + right, null);
- cm.execCommand("goCharLeft");
- }
- };
- if (left != right) map["'" + right + "'"] = function(cm) {
- var ranges = cm.listSelections();
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i];
- if (!range.empty() ||
- cm.getRange(range.head, CodeMirror.Pos(range.head.line, range.head.ch + 1)) != right)
- return CodeMirror.Pass;
- }
- cm.execCommand("goCharRight");
- };
- })(pairs.charAt(i), pairs.charAt(i + 1));
- return map;
- }
-
- function buildExplodeHandler(pairs) {
- return function(cm) {
- if (cm.getOption("disableInput")) return CodeMirror.Pass;
- var ranges = cm.listSelections();
- for (var i = 0; i < ranges.length; i++) {
- if (!ranges[i].empty()) return CodeMirror.Pass;
- var around = charsAround(cm, ranges[i].head);
- if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
- }
- cm.operation(function() {
- cm.replaceSelection("\n\n", null);
- cm.execCommand("goCharLeft");
- ranges = cm.listSelections();
- for (var i = 0; i < ranges.length; i++) {
- var line = ranges[i].head.line;
- cm.indentLine(line, null, true);
- cm.indentLine(line + 1, null, true);
- }
- });
- };
- }
-});
diff --git a/vendor/codemirror/addon/edit/closetag.js b/vendor/codemirror/addon/edit/closetag.js
deleted file mode 100644
index c7c0701b..00000000
--- a/vendor/codemirror/addon/edit/closetag.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * Tag-closer extension for CodeMirror.
- *
- * This extension adds an "autoCloseTags" option that can be set to
- * either true to get the default behavior, or an object to further
- * configure its behavior.
- *
- * These are supported options:
- *
- * `whenClosing` (default true)
- * Whether to autoclose when the '/' of a closing tag is typed.
- * `whenOpening` (default true)
- * Whether to autoclose the tag when the final '>' of an opening
- * tag is typed.
- * `dontCloseTags` (default is empty tags for HTML, none for XML)
- * An array of tag names that should not be autoclosed.
- * `indentTags` (default is block tags for HTML, none for XML)
- * An array of tag names that should, when opened, cause a
- * blank line to be added inside the tag, and the blank line and
- * closing line to be indented.
- *
- * See demos/closetag.html for a usage example.
- */
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"), require("../fold/xml-fold"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror", "../fold/xml-fold"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- CodeMirror.defineOption("autoCloseTags", false, function(cm, val, old) {
- if (old != CodeMirror.Init && old)
- cm.removeKeyMap("autoCloseTags");
- if (!val) return;
- var map = {name: "autoCloseTags"};
- if (typeof val != "object" || val.whenClosing)
- map["'/'"] = function(cm) { return autoCloseSlash(cm); };
- if (typeof val != "object" || val.whenOpening)
- map["'>'"] = function(cm) { return autoCloseGT(cm); };
- cm.addKeyMap(map);
- });
-
- var htmlDontClose = ["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param",
- "source", "track", "wbr"];
- var htmlIndent = ["applet", "blockquote", "body", "button", "div", "dl", "fieldset", "form", "frameset", "h1", "h2", "h3", "h4",
- "h5", "h6", "head", "html", "iframe", "layer", "legend", "object", "ol", "p", "select", "table", "ul"];
-
- function autoCloseGT(cm) {
- if (cm.getOption("disableInput")) return CodeMirror.Pass;
- var ranges = cm.listSelections(), replacements = [];
- for (var i = 0; i < ranges.length; i++) {
- if (!ranges[i].empty()) return CodeMirror.Pass;
- var pos = ranges[i].head, tok = cm.getTokenAt(pos);
- var inner = CodeMirror.innerMode(cm.getMode(), tok.state), state = inner.state;
- if (inner.mode.name != "xml" || !state.tagName) return CodeMirror.Pass;
- var opt = cm.getOption("autoCloseTags"), html = inner.mode.configuration == "html";
- var dontCloseTags = (typeof opt == "object" && opt.dontCloseTags) || (html && htmlDontClose);
- var indentTags = (typeof opt == "object" && opt.indentTags) || (html && htmlIndent);
-
- var tagName = state.tagName;
- if (tok.end > pos.ch) tagName = tagName.slice(0, tagName.length - tok.end + pos.ch);
- var lowerTagName = tagName.toLowerCase();
- // Don't process the '>' at the end of an end-tag or self-closing tag
- if (!tagName ||
- tok.type == "string" && (tok.end != pos.ch || !/[\"\']/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1) ||
- tok.type == "tag" && state.type == "closeTag" ||
- tok.string.indexOf("/") == (tok.string.length - 1) || // match something like c);v++){for(var n=-v+r;n<=v-t;n+=2){var l=g+n,m;m=n==-v||n!=v&&j[l-1]d)t+=2;else if(s>e)r+=2;else if(q&&(l=g+k-n,0<=l&&l=
-u)return this.diff_bisectSplit_(a,b,m,s,c)}}for(n=-v+p;n<=v-w;n+=2){l=g+n;u=n==-v||n!=v&&i[l-1]d)w+=2;else if(m>e)p+=2;else if(!q&&(l=g+k-n,0<=l&&(l=u)))return this.diff_bisectSplit_(a,b,m,s,c)}}return[[-1,a],[1,b]]};
-diff_match_patch.prototype.diff_bisectSplit_=function(a,b,c,d,e){var f=a.substring(0,c),g=b.substring(0,d);a=a.substring(c);b=b.substring(d);f=this.diff_main(f,g,!1,e);e=this.diff_main(a,b,!1,e);return f.concat(e)};
-diff_match_patch.prototype.diff_linesToChars_=function(a,b){function c(a){for(var b="",c=0,f=-1,g=d.length;fd?a=a.substring(c-d):c=a.length?[h,j,n,l,g]:null}if(0>=this.Diff_Timeout)return null;
-var d=a.length>b.length?a:b,e=a.length>b.length?b:a;if(4>d.length||2*e.lengthd[4].length?g:d:d:g;var j;a.length>b.length?(g=h[0],d=h[1],e=h[2],j=h[3]):(e=h[0],j=h[1],g=h[2],d=h[3]);h=h[4];return[g,d,e,j,h]};
-diff_match_patch.prototype.diff_cleanupSemantic=function(a){for(var b=!1,c=[],d=0,e=null,f=0,g=0,h=0,j=0,i=0;f=e){if(d>=b.length/2||d>=c.length/2)a.splice(f,0,[0,c.substring(0,d)]),a[f-1][1]=b.substring(0,b.length-d),a[f+1][1]=c.substring(d),f++}else if(e>=b.length/2||e>=c.length/2)a.splice(f,0,[0,b.substring(0,e)]),a[f-1][0]=1,a[f-1][1]=c.substring(0,c.length-e),a[f+1][0]=-1,a[f+1][1]=b.substring(e),f++;f++}f++}};
-diff_match_patch.prototype.diff_cleanupSemanticLossless=function(a){function b(a,b){if(!a||!b)return 6;var c=a.charAt(a.length-1),d=b.charAt(0),e=c.match(diff_match_patch.nonAlphaNumericRegex_),f=d.match(diff_match_patch.nonAlphaNumericRegex_),g=e&&c.match(diff_match_patch.whitespaceRegex_),h=f&&d.match(diff_match_patch.whitespaceRegex_),c=g&&c.match(diff_match_patch.linebreakRegex_),d=h&&d.match(diff_match_patch.linebreakRegex_),i=c&&a.match(diff_match_patch.blanklineEndRegex_),j=d&&b.match(diff_match_patch.blanklineStartRegex_);
-return i||j?5:c||d?4:e&&!g&&h?3:g||h?2:e||f?1:0}for(var c=1;c=i&&(i=k,g=d,h=e,j=f)}a[c-1][1]!=g&&(g?a[c-1][1]=g:(a.splice(c-1,1),c--),a[c][1]=
-h,j?a[c+1][1]=j:(a.splice(c+1,1),c--))}c++}};diff_match_patch.nonAlphaNumericRegex_=/[^a-zA-Z0-9]/;diff_match_patch.whitespaceRegex_=/\s/;diff_match_patch.linebreakRegex_=/[\r\n]/;diff_match_patch.blanklineEndRegex_=/\n\r?\n$/;diff_match_patch.blanklineStartRegex_=/^\r?\n\r?\n/;
-diff_match_patch.prototype.diff_cleanupEfficiency=function(a){for(var b=!1,c=[],d=0,e=null,f=0,g=!1,h=!1,j=!1,i=!1;fb)break;e=c;f=d}return a.length!=g&&-1===a[g][0]?f:f+(b-e)};
-diff_match_patch.prototype.diff_prettyHtml=function(a){for(var b=[],c=/&/g,d=//g,f=/\n/g,g=0;g");switch(h){case 1:b[g]=''+j+"";break;case -1:b[g]=''+j+"";break;case 0:b[g]=""+j+""}}return b.join("")};
-diff_match_patch.prototype.diff_text1=function(a){for(var b=[],c=0;cthis.Match_MaxBits)throw Error("Pattern too long for this browser.");var e=this.match_alphabet_(b),f=this,g=this.Match_Threshold,h=a.indexOf(b,c);-1!=h&&(g=Math.min(d(0,h),g),h=a.lastIndexOf(b,c+b.length),-1!=h&&(g=Math.min(d(0,h),g)));for(var j=1<=i;p--){var w=e[a.charAt(p-1)];k[p]=0===t?(k[p+1]<<1|1)&w:(k[p+1]<<1|1)&w|((r[p+1]|r[p])<<1|1)|r[p+1];if(k[p]&j&&(w=d(t,p-1),w<=g))if(g=w,h=p-1,h>c)i=Math.max(1,2*c-h);else break}if(d(t+1,c)>g)break;r=k}return h};
-diff_match_patch.prototype.match_alphabet_=function(a){for(var b={},c=0;c=2*this.Patch_Margin&&
-e&&(this.patch_addContext_(a,h),c.push(a),a=new diff_match_patch.patch_obj,e=0,h=d,f=g)}1!==i&&(f+=k.length);-1!==i&&(g+=k.length)}e&&(this.patch_addContext_(a,h),c.push(a));return c};diff_match_patch.prototype.patch_deepCopy=function(a){for(var b=[],c=0;cthis.Match_MaxBits){if(j=this.match_main(b,h.substring(0,this.Match_MaxBits),g),-1!=j&&(i=this.match_main(b,h.substring(h.length-this.Match_MaxBits),g+h.length-this.Match_MaxBits),-1==i||j>=i))j=-1}else j=this.match_main(b,h,g);
-if(-1==j)e[f]=!1,d-=a[f].length2-a[f].length1;else if(e[f]=!0,d=j-g,g=-1==i?b.substring(j,j+h.length):b.substring(j,i+this.Match_MaxBits),h==g)b=b.substring(0,j)+this.diff_text2(a[f].diffs)+b.substring(j+h.length);else if(g=this.diff_main(h,g,!1),h.length>this.Match_MaxBits&&this.diff_levenshtein(g)/h.length>this.Patch_DeleteThreshold)e[f]=!1;else{this.diff_cleanupSemanticLossless(g);for(var h=0,k,i=0;ie[0][1].length){var f=b-e[0][1].length;e[0][1]=c.substring(e[0][1].length)+e[0][1];d.start1-=f;d.start2-=f;d.length1+=f;d.length2+=f}d=a[a.length-1];e=d.diffs;0==e.length||0!=e[e.length-1][0]?(e.push([0,
-c]),d.length1+=b,d.length2+=b):b>e[e.length-1][1].length&&(f=b-e[e.length-1][1].length,e[e.length-1][1]+=c.substring(0,f),d.length1+=f,d.length2+=f);return c};
-diff_match_patch.prototype.patch_splitMax=function(a){for(var b=this.Match_MaxBits,c=0;c2*b?(h.length1+=i.length,e+=i.length,j=!1,h.diffs.push([g,i]),d.diffs.shift()):(i=i.substring(0,b-h.length1-this.Patch_Margin),h.length1+=i.length,e+=i.length,0===g?(h.length2+=i.length,f+=i.length):j=!1,h.diffs.push([g,i]),i==d.diffs[0][1]?d.diffs.shift():d.diffs[0][1]=d.diffs[0][1].substring(i.length))}g=this.diff_text2(h.diffs);g=g.substring(g.length-this.Patch_Margin);i=this.diff_text1(d.diffs).substring(0,this.Patch_Margin);""!==i&&
-(h.length1+=i.length,h.length2+=i.length,0!==h.diffs.length&&0===h.diffs[h.diffs.length-1][0]?h.diffs[h.diffs.length-1][1]+=i:h.diffs.push([0,i]));j||a.splice(++c,0,h)}}};diff_match_patch.prototype.patch_toText=function(a){for(var b=[],c=0;c now) return false;
-
- var sInfo = editor.getScrollInfo(), halfScreen = .5 * sInfo.clientHeight, midY = sInfo.top + halfScreen;
- var mid = editor.lineAtHeight(midY, "local");
- var around = chunkBoundariesAround(dv.diff, mid, type == DIFF_INSERT);
- var off = getOffsets(editor, type == DIFF_INSERT ? around.edit : around.orig);
- var offOther = getOffsets(other, type == DIFF_INSERT ? around.orig : around.edit);
- var ratio = (midY - off.top) / (off.bot - off.top);
- var targetPos = (offOther.top - halfScreen) + ratio * (offOther.bot - offOther.top);
-
- var botDist, mix;
- // Some careful tweaking to make sure no space is left out of view
- // when scrolling to top or bottom.
- if (targetPos > sInfo.top && (mix = sInfo.top / halfScreen) < 1) {
- targetPos = targetPos * mix + sInfo.top * (1 - mix);
- } else if ((botDist = sInfo.height - sInfo.clientHeight - sInfo.top) < halfScreen) {
- var otherInfo = other.getScrollInfo();
- var botDistOther = otherInfo.height - otherInfo.clientHeight - targetPos;
- if (botDistOther > botDist && (mix = botDist / halfScreen) < 1)
- targetPos = targetPos * mix + (otherInfo.height - otherInfo.clientHeight - botDist) * (1 - mix);
- }
-
- other.scrollTo(sInfo.left, targetPos);
- other.state.scrollSetAt = now;
- other.state.scrollSetBy = dv;
- return true;
- }
-
- function getOffsets(editor, around) {
- var bot = around.after;
- if (bot == null) bot = editor.lastLine() + 1;
- return {top: editor.heightAtLine(around.before || 0, "local"),
- bot: editor.heightAtLine(bot, "local")};
- }
-
- function setScrollLock(dv, val, action) {
- dv.lockScroll = val;
- if (val && action != false) syncScroll(dv, DIFF_INSERT) && drawConnectors(dv);
- dv.lockButton.innerHTML = val ? "\u21db\u21da" : "\u21db \u21da";
- }
-
- // Updating the marks for editor content
-
- function clearMarks(editor, arr, classes) {
- for (var i = 0; i < arr.length; ++i) {
- var mark = arr[i];
- if (mark instanceof CodeMirror.TextMarker) {
- mark.clear();
- } else {
- editor.removeLineClass(mark, "background", classes.chunk);
- editor.removeLineClass(mark, "background", classes.start);
- editor.removeLineClass(mark, "background", classes.end);
- }
- }
- arr.length = 0;
- }
-
- // FIXME maybe add a margin around viewport to prevent too many updates
- function updateMarks(editor, diff, state, type, classes) {
- var vp = editor.getViewport();
- editor.operation(function() {
- if (state.from == state.to || vp.from - state.to > 20 || state.from - vp.to > 20) {
- clearMarks(editor, state.marked, classes);
- markChanges(editor, diff, type, state.marked, vp.from, vp.to, classes);
- state.from = vp.from; state.to = vp.to;
- } else {
- if (vp.from < state.from) {
- markChanges(editor, diff, type, state.marked, vp.from, state.from, classes);
- state.from = vp.from;
- }
- if (vp.to > state.to) {
- markChanges(editor, diff, type, state.marked, state.to, vp.to, classes);
- state.to = vp.to;
- }
- }
- });
- }
-
- function markChanges(editor, diff, type, marks, from, to, classes) {
- var pos = Pos(0, 0);
- var top = Pos(from, 0), bot = editor.clipPos(Pos(to - 1));
- var cls = type == DIFF_DELETE ? classes.del : classes.insert;
- function markChunk(start, end) {
- var bfrom = Math.max(from, start), bto = Math.min(to, end);
- for (var i = bfrom; i < bto; ++i) {
- var line = editor.addLineClass(i, "background", classes.chunk);
- if (i == start) editor.addLineClass(line, "background", classes.start);
- if (i == end - 1) editor.addLineClass(line, "background", classes.end);
- marks.push(line);
- }
- // When the chunk is empty, make sure a horizontal line shows up
- if (start == end && bfrom == end && bto == end) {
- if (bfrom)
- marks.push(editor.addLineClass(bfrom - 1, "background", classes.end));
- else
- marks.push(editor.addLineClass(bfrom, "background", classes.start));
- }
- }
-
- var chunkStart = 0;
- for (var i = 0; i < diff.length; ++i) {
- var part = diff[i], tp = part[0], str = part[1];
- if (tp == DIFF_EQUAL) {
- var cleanFrom = pos.line + (startOfLineClean(diff, i) ? 0 : 1);
- moveOver(pos, str);
- var cleanTo = pos.line + (endOfLineClean(diff, i) ? 1 : 0);
- if (cleanTo > cleanFrom) {
- if (i) markChunk(chunkStart, cleanFrom);
- chunkStart = cleanTo;
- }
- } else {
- if (tp == type) {
- var end = moveOver(pos, str, true);
- var a = posMax(top, pos), b = posMin(bot, end);
- if (!posEq(a, b))
- marks.push(editor.markText(a, b, {className: cls}));
- pos = end;
- }
- }
- }
- if (chunkStart <= pos.line) markChunk(chunkStart, pos.line + 1);
- }
-
- // Updating the gap between editor and original
-
- function drawConnectors(dv) {
- if (!dv.showDifferences) return;
-
- if (dv.svg) {
- clear(dv.svg);
- var w = dv.gap.offsetWidth;
- attrs(dv.svg, "width", w, "height", dv.gap.offsetHeight);
- }
- clear(dv.copyButtons);
-
- var flip = dv.type == "left";
- var vpEdit = dv.edit.getViewport(), vpOrig = dv.orig.getViewport();
- var sTopEdit = dv.edit.getScrollInfo().top, sTopOrig = dv.orig.getScrollInfo().top;
- iterateChunks(dv.diff, function(topOrig, botOrig, topEdit, botEdit) {
- if (topEdit > vpEdit.to || botEdit < vpEdit.from ||
- topOrig > vpOrig.to || botOrig < vpOrig.from)
- return;
- var topLpx = dv.orig.heightAtLine(topOrig, "local") - sTopOrig, top = topLpx;
- if (dv.svg) {
- var topRpx = dv.edit.heightAtLine(topEdit, "local") - sTopEdit;
- if (flip) { var tmp = topLpx; topLpx = topRpx; topRpx = tmp; }
- var botLpx = dv.orig.heightAtLine(botOrig, "local") - sTopOrig;
- var botRpx = dv.edit.heightAtLine(botEdit, "local") - sTopEdit;
- if (flip) { var tmp = botLpx; botLpx = botRpx; botRpx = tmp; }
- var curveTop = " C " + w/2 + " " + topRpx + " " + w/2 + " " + topLpx + " " + (w + 2) + " " + topLpx;
- var curveBot = " C " + w/2 + " " + botLpx + " " + w/2 + " " + botRpx + " -1 " + botRpx;
- attrs(dv.svg.appendChild(document.createElementNS(svgNS, "path")),
- "d", "M -1 " + topRpx + curveTop + " L " + (w + 2) + " " + botLpx + curveBot + " z",
- "class", dv.classes.connect);
- }
- var copy = dv.copyButtons.appendChild(elt("div", dv.type == "left" ? "\u21dd" : "\u21dc",
- "CodeMirror-merge-copy"));
- copy.title = "Revert chunk";
- copy.chunk = {topEdit: topEdit, botEdit: botEdit, topOrig: topOrig, botOrig: botOrig};
- copy.style.top = top + "px";
- });
- }
-
- function copyChunk(dv, chunk) {
- if (dv.diffOutOfDate) return;
- dv.edit.replaceRange(dv.orig.getRange(Pos(chunk.topOrig, 0), Pos(chunk.botOrig, 0)),
- Pos(chunk.topEdit, 0), Pos(chunk.botEdit, 0));
- }
-
- // Merge view, containing 0, 1, or 2 diff views.
-
- var MergeView = CodeMirror.MergeView = function(node, options) {
- if (!(this instanceof MergeView)) return new MergeView(node, options);
-
- var origLeft = options.origLeft, origRight = options.origRight == null ? options.orig : options.origRight;
- var hasLeft = origLeft != null, hasRight = origRight != null;
- var panes = 1 + (hasLeft ? 1 : 0) + (hasRight ? 1 : 0);
- var wrap = [], left = this.left = null, right = this.right = null;
-
- if (hasLeft) {
- left = this.left = new DiffView(this, "left");
- var leftPane = elt("div", null, "CodeMirror-merge-pane");
- wrap.push(leftPane);
- wrap.push(buildGap(left));
- }
-
- var editPane = elt("div", null, "CodeMirror-merge-pane");
- wrap.push(editPane);
-
- if (hasRight) {
- right = this.right = new DiffView(this, "right");
- wrap.push(buildGap(right));
- var rightPane = elt("div", null, "CodeMirror-merge-pane");
- wrap.push(rightPane);
- }
-
- (hasRight ? rightPane : editPane).className += " CodeMirror-merge-pane-rightmost";
-
- wrap.push(elt("div", null, null, "height: 0; clear: both;"));
- var wrapElt = this.wrap = node.appendChild(elt("div", wrap, "CodeMirror-merge CodeMirror-merge-" + panes + "pane"));
- this.edit = CodeMirror(editPane, copyObj(options));
-
- if (left) left.init(leftPane, origLeft, options);
- if (right) right.init(rightPane, origRight, options);
-
- var onResize = function() {
- if (left) drawConnectors(left);
- if (right) drawConnectors(right);
- };
- CodeMirror.on(window, "resize", onResize);
- var resizeInterval = setInterval(function() {
- for (var p = wrapElt.parentNode; p && p != document.body; p = p.parentNode) {}
- if (!p) { clearInterval(resizeInterval); CodeMirror.off(window, "resize", onResize); }
- }, 5000);
- };
-
- function buildGap(dv) {
- var lock = dv.lockButton = elt("div", null, "CodeMirror-merge-scrolllock");
- lock.title = "Toggle locked scrolling";
- var lockWrap = elt("div", [lock], "CodeMirror-merge-scrolllock-wrap");
- CodeMirror.on(lock, "click", function() { setScrollLock(dv, !dv.lockScroll); });
- dv.copyButtons = elt("div", null, "CodeMirror-merge-copybuttons-" + dv.type);
- CodeMirror.on(dv.copyButtons, "click", function(e) {
- var node = e.target || e.srcElement;
- if (node.chunk) copyChunk(dv, node.chunk);
- });
- var gapElts = [dv.copyButtons, lockWrap];
- var svg = document.createElementNS && document.createElementNS(svgNS, "svg");
- if (svg && !svg.createSVGRect) svg = null;
- dv.svg = svg;
- if (svg) gapElts.push(svg);
-
- return dv.gap = elt("div", gapElts, "CodeMirror-merge-gap");
- }
-
- MergeView.prototype = {
- constuctor: MergeView,
- editor: function() { return this.edit; },
- rightOriginal: function() { return this.right && this.right.orig; },
- leftOriginal: function() { return this.left && this.left.orig; },
- setShowDifferences: function(val) {
- if (this.right) this.right.setShowDifferences(val);
- if (this.left) this.left.setShowDifferences(val);
- },
- rightChunks: function() {
- return this.right && getChunks(this.right.diff);
- },
- leftChunks: function() {
- return this.left && getChunks(this.left.diff);
- }
- };
-
- function asString(obj) {
- if (typeof obj == "string") return obj;
- else return obj.getValue();
- }
-
- // Operations on diffs
-
- var dmp = new diff_match_patch();
- function getDiff(a, b) {
- var diff = dmp.diff_main(a, b);
- dmp.diff_cleanupSemantic(diff);
- // The library sometimes leaves in empty parts, which confuse the algorithm
- for (var i = 0; i < diff.length; ++i) {
- var part = diff[i];
- if (!part[1]) {
- diff.splice(i--, 1);
- } else if (i && diff[i - 1][0] == part[0]) {
- diff.splice(i--, 1);
- diff[i][1] += part[1];
- }
- }
- return diff;
- }
-
- function iterateChunks(diff, f) {
- var startEdit = 0, startOrig = 0;
- var edit = Pos(0, 0), orig = Pos(0, 0);
- for (var i = 0; i < diff.length; ++i) {
- var part = diff[i], tp = part[0];
- if (tp == DIFF_EQUAL) {
- var startOff = startOfLineClean(diff, i) ? 0 : 1;
- var cleanFromEdit = edit.line + startOff, cleanFromOrig = orig.line + startOff;
- moveOver(edit, part[1], null, orig);
- var endOff = endOfLineClean(diff, i) ? 1 : 0;
- var cleanToEdit = edit.line + endOff, cleanToOrig = orig.line + endOff;
- if (cleanToEdit > cleanFromEdit) {
- if (i) f(startOrig, cleanFromOrig, startEdit, cleanFromEdit);
- startEdit = cleanToEdit; startOrig = cleanToOrig;
- }
- } else {
- moveOver(tp == DIFF_INSERT ? edit : orig, part[1]);
- }
- }
- if (startEdit <= edit.line || startOrig <= orig.line)
- f(startOrig, orig.line + 1, startEdit, edit.line + 1);
- }
-
- function getChunks(diff) {
- var collect = [];
- iterateChunks(diff, function(topOrig, botOrig, topEdit, botEdit) {
- collect.push({origFrom: topOrig, origTo: botOrig,
- editFrom: topEdit, editTo: botEdit});
- });
- return collect;
- }
-
- function endOfLineClean(diff, i) {
- if (i == diff.length - 1) return true;
- var next = diff[i + 1][1];
- if (next.length == 1 || next.charCodeAt(0) != 10) return false;
- if (i == diff.length - 2) return true;
- next = diff[i + 2][1];
- return next.length > 1 && next.charCodeAt(0) == 10;
- }
-
- function startOfLineClean(diff, i) {
- if (i == 0) return true;
- var last = diff[i - 1][1];
- if (last.charCodeAt(last.length - 1) != 10) return false;
- if (i == 1) return true;
- last = diff[i - 2][1];
- return last.charCodeAt(last.length - 1) == 10;
- }
-
- function chunkBoundariesAround(diff, n, nInEdit) {
- var beforeE, afterE, beforeO, afterO;
- iterateChunks(diff, function(fromOrig, toOrig, fromEdit, toEdit) {
- var fromLocal = nInEdit ? fromEdit : fromOrig;
- var toLocal = nInEdit ? toEdit : toOrig;
- if (afterE == null) {
- if (fromLocal > n) { afterE = fromEdit; afterO = fromOrig; }
- else if (toLocal > n) { afterE = toEdit; afterO = toOrig; }
- }
- if (toLocal <= n) { beforeE = toEdit; beforeO = toOrig; }
- else if (fromLocal <= n) { beforeE = fromEdit; beforeO = fromOrig; }
- });
- return {edit: {before: beforeE, after: afterE}, orig: {before: beforeO, after: afterO}};
- }
-
- // General utilities
-
- function elt(tag, content, className, style) {
- var e = document.createElement(tag);
- if (className) e.className = className;
- if (style) e.style.cssText = style;
- if (typeof content == "string") e.appendChild(document.createTextNode(content));
- else if (content) for (var i = 0; i < content.length; ++i) e.appendChild(content[i]);
- return e;
- }
-
- function clear(node) {
- for (var count = node.childNodes.length; count > 0; --count)
- node.removeChild(node.firstChild);
- }
-
- function attrs(elt) {
- for (var i = 1; i < arguments.length; i += 2)
- elt.setAttribute(arguments[i], arguments[i+1]);
- }
-
- function copyObj(obj, target) {
- if (!target) target = {};
- for (var prop in obj) if (obj.hasOwnProperty(prop)) target[prop] = obj[prop];
- return target;
- }
-
- function moveOver(pos, str, copy, other) {
- var out = copy ? Pos(pos.line, pos.ch) : pos, at = 0;
- for (;;) {
- var nl = str.indexOf("\n", at);
- if (nl == -1) break;
- ++out.line;
- if (other) ++other.line;
- at = nl + 1;
- }
- out.ch = (at ? 0 : out.ch) + (str.length - at);
- if (other) other.ch = (at ? 0 : other.ch) + (str.length - at);
- return out;
- }
-
- function posMin(a, b) { return (a.line - b.line || a.ch - b.ch) < 0 ? a : b; }
- function posMax(a, b) { return (a.line - b.line || a.ch - b.ch) > 0 ? a : b; }
- function posEq(a, b) { return a.line == b.line && a.ch == b.ch; }
-});
diff --git a/vendor/codemirror/addon/mode/loadmode.js b/vendor/codemirror/addon/mode/loadmode.js
deleted file mode 100644
index e08c2813..00000000
--- a/vendor/codemirror/addon/mode/loadmode.js
+++ /dev/null
@@ -1,58 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- if (!CodeMirror.modeURL) CodeMirror.modeURL = "../mode/%N/%N.js";
-
- var loading = {};
- function splitCallback(cont, n) {
- var countDown = n;
- return function() { if (--countDown == 0) cont(); };
- }
- function ensureDeps(mode, cont) {
- var deps = CodeMirror.modes[mode].dependencies;
- if (!deps) return cont();
- var missing = [];
- for (var i = 0; i < deps.length; ++i) {
- if (!CodeMirror.modes.hasOwnProperty(deps[i]))
- missing.push(deps[i]);
- }
- if (!missing.length) return cont();
- var split = splitCallback(cont, missing.length);
- for (var i = 0; i < missing.length; ++i)
- CodeMirror.requireMode(missing[i], split);
- }
-
- CodeMirror.requireMode = function(mode, cont) {
- if (typeof mode != "string") mode = mode.name;
- if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont);
- if (loading.hasOwnProperty(mode)) return loading[mode].push(cont);
-
- var script = document.createElement("script");
- script.src = CodeMirror.modeURL.replace(/%N/g, mode);
- var others = document.getElementsByTagName("script")[0];
- others.parentNode.insertBefore(script, others);
- var list = loading[mode] = [cont];
- var count = 0, poll = setInterval(function() {
- if (++count > 100) return clearInterval(poll);
- if (CodeMirror.modes.hasOwnProperty(mode)) {
- clearInterval(poll);
- loading[mode] = null;
- ensureDeps(mode, function() {
- for (var i = 0; i < list.length; ++i) list[i]();
- });
- }
- }, 200);
- };
-
- CodeMirror.autoLoadMode = function(instance, mode) {
- if (!CodeMirror.modes.hasOwnProperty(mode))
- CodeMirror.requireMode(mode, function() {
- instance.setOption("mode", instance.getOption("mode"));
- });
- };
-});
diff --git a/vendor/codemirror/addon/mode/multiplex.js b/vendor/codemirror/addon/mode/multiplex.js
deleted file mode 100644
index 07385c35..00000000
--- a/vendor/codemirror/addon/mode/multiplex.js
+++ /dev/null
@@ -1,115 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-CodeMirror.multiplexingMode = function(outer /*, others */) {
- // Others should be {open, close, mode [, delimStyle] [, innerStyle]} objects
- var others = Array.prototype.slice.call(arguments, 1);
- var n_others = others.length;
-
- function indexOf(string, pattern, from) {
- if (typeof pattern == "string") return string.indexOf(pattern, from);
- var m = pattern.exec(from ? string.slice(from) : string);
- return m ? m.index + from : -1;
- }
-
- return {
- startState: function() {
- return {
- outer: CodeMirror.startState(outer),
- innerActive: null,
- inner: null
- };
- },
-
- copyState: function(state) {
- return {
- outer: CodeMirror.copyState(outer, state.outer),
- innerActive: state.innerActive,
- inner: state.innerActive && CodeMirror.copyState(state.innerActive.mode, state.inner)
- };
- },
-
- token: function(stream, state) {
- if (!state.innerActive) {
- var cutOff = Infinity, oldContent = stream.string;
- for (var i = 0; i < n_others; ++i) {
- var other = others[i];
- var found = indexOf(oldContent, other.open, stream.pos);
- if (found == stream.pos) {
- stream.match(other.open);
- state.innerActive = other;
- state.inner = CodeMirror.startState(other.mode, outer.indent ? outer.indent(state.outer, "") : 0);
- return other.delimStyle;
- } else if (found != -1 && found < cutOff) {
- cutOff = found;
- }
- }
- if (cutOff != Infinity) stream.string = oldContent.slice(0, cutOff);
- var outerToken = outer.token(stream, state.outer);
- if (cutOff != Infinity) stream.string = oldContent;
- return outerToken;
- } else {
- var curInner = state.innerActive, oldContent = stream.string;
- if (!curInner.close && stream.sol()) {
- state.innerActive = state.inner = null;
- return this.token(stream, state);
- }
- var found = curInner.close ? indexOf(oldContent, curInner.close, stream.pos) : -1;
- if (found == stream.pos) {
- stream.match(curInner.close);
- state.innerActive = state.inner = null;
- return curInner.delimStyle;
- }
- if (found > -1) stream.string = oldContent.slice(0, found);
- var innerToken = curInner.mode.token(stream, state.inner);
- if (found > -1) stream.string = oldContent;
-
- if (curInner.innerStyle) {
- if (innerToken) innerToken = innerToken + ' ' + curInner.innerStyle;
- else innerToken = curInner.innerStyle;
- }
-
- return innerToken;
- }
- },
-
- indent: function(state, textAfter) {
- var mode = state.innerActive ? state.innerActive.mode : outer;
- if (!mode.indent) return CodeMirror.Pass;
- return mode.indent(state.innerActive ? state.inner : state.outer, textAfter);
- },
-
- blankLine: function(state) {
- var mode = state.innerActive ? state.innerActive.mode : outer;
- if (mode.blankLine) {
- mode.blankLine(state.innerActive ? state.inner : state.outer);
- }
- if (!state.innerActive) {
- for (var i = 0; i < n_others; ++i) {
- var other = others[i];
- if (other.open === "\n") {
- state.innerActive = other;
- state.inner = CodeMirror.startState(other.mode, mode.indent ? mode.indent(state.outer, "") : 0);
- }
- }
- } else if (state.innerActive.close === "\n") {
- state.innerActive = state.inner = null;
- }
- },
-
- electricChars: outer.electricChars,
-
- innerMode: function(state) {
- return state.inner ? {state: state.inner, mode: state.innerActive.mode} : {state: state.outer, mode: outer};
- }
- };
-};
-
-});
diff --git a/vendor/codemirror/addon/mode/multiplex_test.js b/vendor/codemirror/addon/mode/multiplex_test.js
deleted file mode 100644
index c0656357..00000000
--- a/vendor/codemirror/addon/mode/multiplex_test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-(function() {
- CodeMirror.defineMode("markdown_with_stex", function(){
- var inner = CodeMirror.getMode({}, "stex");
- var outer = CodeMirror.getMode({}, "markdown");
-
- var innerOptions = {
- open: '$',
- close: '$',
- mode: inner,
- delimStyle: 'delim',
- innerStyle: 'inner'
- };
-
- return CodeMirror.multiplexingMode(outer, innerOptions);
- });
-
- var mode = CodeMirror.getMode({}, "markdown_with_stex");
-
- function MT(name) {
- test.mode(
- name,
- mode,
- Array.prototype.slice.call(arguments, 1),
- 'multiplexing');
- }
-
- MT(
- "stexInsideMarkdown",
- "[strong **Equation:**] [delim $][inner&tag \\pi][delim $]");
-})();
diff --git a/vendor/codemirror/addon/mode/overlay.js b/vendor/codemirror/addon/mode/overlay.js
deleted file mode 100644
index 6f556a13..00000000
--- a/vendor/codemirror/addon/mode/overlay.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// Utility function that allows modes to be combined. The mode given
-// as the base argument takes care of most of the normal mode
-// functionality, but a second (typically simple) mode is used, which
-// can override the style of text. Both modes get to parse all of the
-// text, but when both assign a non-null style to a piece of code, the
-// overlay wins, unless the combine argument was true, in which case
-// the styles are combined.
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-CodeMirror.overlayMode = function(base, overlay, combine) {
- return {
- startState: function() {
- return {
- base: CodeMirror.startState(base),
- overlay: CodeMirror.startState(overlay),
- basePos: 0, baseCur: null,
- overlayPos: 0, overlayCur: null
- };
- },
- copyState: function(state) {
- return {
- base: CodeMirror.copyState(base, state.base),
- overlay: CodeMirror.copyState(overlay, state.overlay),
- basePos: state.basePos, baseCur: null,
- overlayPos: state.overlayPos, overlayCur: null
- };
- },
-
- token: function(stream, state) {
- if (stream.start == state.basePos) {
- state.baseCur = base.token(stream, state.base);
- state.basePos = stream.pos;
- }
- if (stream.start == state.overlayPos) {
- stream.pos = stream.start;
- state.overlayCur = overlay.token(stream, state.overlay);
- state.overlayPos = stream.pos;
- }
- stream.pos = Math.min(state.basePos, state.overlayPos);
- if (stream.eol()) state.basePos = state.overlayPos = 0;
-
- if (state.overlayCur == null) return state.baseCur;
- if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur;
- else return state.overlayCur;
- },
-
- indent: base.indent && function(state, textAfter) {
- return base.indent(state.base, textAfter);
- },
- electricChars: base.electricChars,
-
- innerMode: function(state) { return {state: state.base, mode: base}; },
-
- blankLine: function(state) {
- if (base.blankLine) base.blankLine(state.base);
- if (overlay.blankLine) overlay.blankLine(state.overlay);
- }
- };
-};
-
-});
diff --git a/vendor/codemirror/addon/runmode/colorize.js b/vendor/codemirror/addon/runmode/colorize.js
deleted file mode 100644
index 0f9530b1..00000000
--- a/vendor/codemirror/addon/runmode/colorize.js
+++ /dev/null
@@ -1,37 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"), require("./runmode"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror", "./runmode"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- var isBlock = /^(p|li|div|h\\d|pre|blockquote|td)$/;
-
- function textContent(node, out) {
- if (node.nodeType == 3) return out.push(node.nodeValue);
- for (var ch = node.firstChild; ch; ch = ch.nextSibling) {
- textContent(ch, out);
- if (isBlock.test(node.nodeType)) out.push("\n");
- }
- }
-
- CodeMirror.colorize = function(collection, defaultMode) {
- if (!collection) collection = document.body.getElementsByTagName("pre");
-
- for (var i = 0; i < collection.length; ++i) {
- var node = collection[i];
- var mode = node.getAttribute("data-lang") || defaultMode;
- if (!mode) continue;
-
- var text = [];
- textContent(node, text);
- node.innerHTML = "";
- CodeMirror.runMode(text.join(""), mode, node);
-
- node.className += " cm-s-default";
- }
- };
-});
diff --git a/vendor/codemirror/addon/runmode/runmode-standalone.js b/vendor/codemirror/addon/runmode/runmode-standalone.js
deleted file mode 100644
index eaa2b8f2..00000000
--- a/vendor/codemirror/addon/runmode/runmode-standalone.js
+++ /dev/null
@@ -1,149 +0,0 @@
-window.CodeMirror = {};
-
-(function() {
-"use strict";
-
-function splitLines(string){ return string.split(/\r?\n|\r/); };
-
-function StringStream(string) {
- this.pos = this.start = 0;
- this.string = string;
- this.lineStart = 0;
-}
-StringStream.prototype = {
- eol: function() {return this.pos >= this.string.length;},
- sol: function() {return this.pos == 0;},
- peek: function() {return this.string.charAt(this.pos) || null;},
- next: function() {
- if (this.pos < this.string.length)
- return this.string.charAt(this.pos++);
- },
- eat: function(match) {
- var ch = this.string.charAt(this.pos);
- if (typeof match == "string") var ok = ch == match;
- else var ok = ch && (match.test ? match.test(ch) : match(ch));
- if (ok) {++this.pos; return ch;}
- },
- eatWhile: function(match) {
- var start = this.pos;
- while (this.eat(match)){}
- return this.pos > start;
- },
- eatSpace: function() {
- var start = this.pos;
- while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
- return this.pos > start;
- },
- skipToEnd: function() {this.pos = this.string.length;},
- skipTo: function(ch) {
- var found = this.string.indexOf(ch, this.pos);
- if (found > -1) {this.pos = found; return true;}
- },
- backUp: function(n) {this.pos -= n;},
- column: function() {return this.start - this.lineStart;},
- indentation: function() {return 0;},
- match: function(pattern, consume, caseInsensitive) {
- if (typeof pattern == "string") {
- var cased = function(str) {return caseInsensitive ? str.toLowerCase() : str;};
- var substr = this.string.substr(this.pos, pattern.length);
- if (cased(substr) == cased(pattern)) {
- if (consume !== false) this.pos += pattern.length;
- return true;
- }
- } else {
- var match = this.string.slice(this.pos).match(pattern);
- if (match && match.index > 0) return null;
- if (match && consume !== false) this.pos += match[0].length;
- return match;
- }
- },
- current: function(){return this.string.slice(this.start, this.pos);},
- hideFirstChars: function(n, inner) {
- this.lineStart += n;
- try { return inner(); }
- finally { this.lineStart -= n; }
- }
-};
-CodeMirror.StringStream = StringStream;
-
-CodeMirror.startState = function (mode, a1, a2) {
- return mode.startState ? mode.startState(a1, a2) : true;
-};
-
-var modes = CodeMirror.modes = {}, mimeModes = CodeMirror.mimeModes = {};
-CodeMirror.defineMode = function (name, mode) { modes[name] = mode; };
-CodeMirror.defineMIME = function (mime, spec) { mimeModes[mime] = spec; };
-CodeMirror.resolveMode = function(spec) {
- if (typeof spec == "string" && mimeModes.hasOwnProperty(spec)) {
- spec = mimeModes[spec];
- } else if (spec && typeof spec.name == "string" && mimeModes.hasOwnProperty(spec.name)) {
- spec = mimeModes[spec.name];
- }
- if (typeof spec == "string") return {name: spec};
- else return spec || {name: "null"};
-};
-CodeMirror.getMode = function (options, spec) {
- spec = CodeMirror.resolveMode(spec);
- var mfactory = modes[spec.name];
- if (!mfactory) throw new Error("Unknown mode: " + spec);
- return mfactory(options, spec);
-};
-CodeMirror.registerHelper = CodeMirror.registerGlobalHelper = Math.min;
-CodeMirror.defineMode("null", function() {
- return {token: function(stream) {stream.skipToEnd();}};
-});
-CodeMirror.defineMIME("text/plain", "null");
-
-CodeMirror.runMode = function (string, modespec, callback, options) {
- var mode = CodeMirror.getMode({ indentUnit: 2 }, modespec);
-
- if (callback.nodeType == 1) {
- var tabSize = (options && options.tabSize) || 4;
- var node = callback, col = 0;
- node.innerHTML = "";
- callback = function (text, style) {
- if (text == "\n") {
- node.appendChild(document.createElement("br"));
- col = 0;
- return;
- }
- var content = "";
- // replace tabs
- for (var pos = 0; ;) {
- var idx = text.indexOf("\t", pos);
- if (idx == -1) {
- content += text.slice(pos);
- col += text.length - pos;
- break;
- } else {
- col += idx - pos;
- content += text.slice(pos, idx);
- var size = tabSize - col % tabSize;
- col += size;
- for (var i = 0; i < size; ++i) content += " ";
- pos = idx + 1;
- }
- }
-
- if (style) {
- var sp = node.appendChild(document.createElement("span"));
- sp.className = "cm-" + style.replace(/ +/g, " cm-");
- sp.appendChild(document.createTextNode(content));
- } else {
- node.appendChild(document.createTextNode(content));
- }
- };
- }
-
- var lines = splitLines(string), state = (options && options.state) || CodeMirror.startState(mode);
- for (var i = 0, e = lines.length; i < e; ++i) {
- if (i) callback("\n");
- var stream = new CodeMirror.StringStream(lines[i]);
- while (!stream.eol()) {
- var style = mode.token(stream, state);
- callback(stream.current(), style, i, stream.start, state);
- stream.start = stream.pos;
- }
- }
-};
-})();
diff --git a/vendor/codemirror/addon/runmode/runmode.js b/vendor/codemirror/addon/runmode/runmode.js
deleted file mode 100644
index 351840e0..00000000
--- a/vendor/codemirror/addon/runmode/runmode.js
+++ /dev/null
@@ -1,68 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-CodeMirror.runMode = function(string, modespec, callback, options) {
- var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
- var ie = /MSIE \d/.test(navigator.userAgent);
- var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
-
- if (callback.nodeType == 1) {
- var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
- var node = callback, col = 0;
- node.innerHTML = "";
- callback = function(text, style) {
- if (text == "\n") {
- // Emitting LF or CRLF on IE8 or earlier results in an incorrect display.
- // Emitting a carriage return makes everything ok.
- node.appendChild(document.createTextNode(ie_lt9 ? '\r' : text));
- col = 0;
- return;
- }
- var content = "";
- // replace tabs
- for (var pos = 0;;) {
- var idx = text.indexOf("\t", pos);
- if (idx == -1) {
- content += text.slice(pos);
- col += text.length - pos;
- break;
- } else {
- col += idx - pos;
- content += text.slice(pos, idx);
- var size = tabSize - col % tabSize;
- col += size;
- for (var i = 0; i < size; ++i) content += " ";
- pos = idx + 1;
- }
- }
-
- if (style) {
- var sp = node.appendChild(document.createElement("span"));
- sp.className = "cm-" + style.replace(/ +/g, " cm-");
- sp.appendChild(document.createTextNode(content));
- } else {
- node.appendChild(document.createTextNode(content));
- }
- };
- }
-
- var lines = CodeMirror.splitLines(string), state = (options && options.state) || CodeMirror.startState(mode);
- for (var i = 0, e = lines.length; i < e; ++i) {
- if (i) callback("\n");
- var stream = new CodeMirror.StringStream(lines[i]);
- while (!stream.eol()) {
- var style = mode.token(stream, state);
- callback(stream.current(), style, i, stream.start, state);
- stream.start = stream.pos;
- }
- }
-};
-
-});
diff --git a/vendor/codemirror/addon/runmode/runmode.node.js b/vendor/codemirror/addon/runmode/runmode.node.js
deleted file mode 100644
index 74c39be7..00000000
--- a/vendor/codemirror/addon/runmode/runmode.node.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/* Just enough of CodeMirror to run runMode under node.js */
-
-// declare global: StringStream
-
-function splitLines(string){ return string.split(/\r?\n|\r/); };
-
-function StringStream(string) {
- this.pos = this.start = 0;
- this.string = string;
- this.lineStart = 0;
-}
-StringStream.prototype = {
- eol: function() {return this.pos >= this.string.length;},
- sol: function() {return this.pos == 0;},
- peek: function() {return this.string.charAt(this.pos) || null;},
- next: function() {
- if (this.pos < this.string.length)
- return this.string.charAt(this.pos++);
- },
- eat: function(match) {
- var ch = this.string.charAt(this.pos);
- if (typeof match == "string") var ok = ch == match;
- else var ok = ch && (match.test ? match.test(ch) : match(ch));
- if (ok) {++this.pos; return ch;}
- },
- eatWhile: function(match) {
- var start = this.pos;
- while (this.eat(match)){}
- return this.pos > start;
- },
- eatSpace: function() {
- var start = this.pos;
- while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
- return this.pos > start;
- },
- skipToEnd: function() {this.pos = this.string.length;},
- skipTo: function(ch) {
- var found = this.string.indexOf(ch, this.pos);
- if (found > -1) {this.pos = found; return true;}
- },
- backUp: function(n) {this.pos -= n;},
- column: function() {return this.start - this.lineStart;},
- indentation: function() {return 0;},
- match: function(pattern, consume, caseInsensitive) {
- if (typeof pattern == "string") {
- var cased = function(str) {return caseInsensitive ? str.toLowerCase() : str;};
- var substr = this.string.substr(this.pos, pattern.length);
- if (cased(substr) == cased(pattern)) {
- if (consume !== false) this.pos += pattern.length;
- return true;
- }
- } else {
- var match = this.string.slice(this.pos).match(pattern);
- if (match && match.index > 0) return null;
- if (match && consume !== false) this.pos += match[0].length;
- return match;
- }
- },
- current: function(){return this.string.slice(this.start, this.pos);},
- hideFirstChars: function(n, inner) {
- this.lineStart += n;
- try { return inner(); }
- finally { this.lineStart -= n; }
- }
-};
-exports.StringStream = StringStream;
-
-exports.startState = function(mode, a1, a2) {
- return mode.startState ? mode.startState(a1, a2) : true;
-};
-
-var modes = exports.modes = {}, mimeModes = exports.mimeModes = {};
-exports.defineMode = function(name, mode) {
- if (arguments.length > 2) {
- mode.dependencies = [];
- for (var i = 2; i < arguments.length; ++i) mode.dependencies.push(arguments[i]);
- }
- modes[name] = mode;
-};
-exports.defineMIME = function(mime, spec) { mimeModes[mime] = spec; };
-
-exports.defineMode("null", function() {
- return {token: function(stream) {stream.skipToEnd();}};
-});
-exports.defineMIME("text/plain", "null");
-
-exports.resolveMode = function(spec) {
- if (typeof spec == "string" && mimeModes.hasOwnProperty(spec)) {
- spec = mimeModes[spec];
- } else if (spec && typeof spec.name == "string" && mimeModes.hasOwnProperty(spec.name)) {
- spec = mimeModes[spec.name];
- }
- if (typeof spec == "string") return {name: spec};
- else return spec || {name: "null"};
-};
-exports.getMode = function(options, spec) {
- spec = exports.resolveMode(spec);
- var mfactory = modes[spec.name];
- if (!mfactory) throw new Error("Unknown mode: " + spec);
- return mfactory(options, spec);
-};
-exports.registerHelper = exports.registerGlobalHelper = Math.min;
-
-exports.runMode = function(string, modespec, callback, options) {
- var mode = exports.getMode({indentUnit: 2}, modespec);
- var lines = splitLines(string), state = (options && options.state) || exports.startState(mode);
- for (var i = 0, e = lines.length; i < e; ++i) {
- if (i) callback("\n");
- var stream = new exports.StringStream(lines[i]);
- while (!stream.eol()) {
- var style = mode.token(stream, state);
- callback(stream.current(), style, i, stream.start, state);
- stream.start = stream.pos;
- }
- }
-};
-
-require.cache[require.resolve("../../lib/codemirror")] = require.cache[require.resolve("./runmode.node")];
diff --git a/vendor/codemirror/addon/scroll/scrollpastend.js b/vendor/codemirror/addon/scroll/scrollpastend.js
deleted file mode 100644
index 467b7aa1..00000000
--- a/vendor/codemirror/addon/scroll/scrollpastend.js
+++ /dev/null
@@ -1,43 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- CodeMirror.defineOption("scrollPastEnd", false, function(cm, val, old) {
- if (old && old != CodeMirror.Init) {
- cm.off("change", onChange);
- cm.off("refresh", updateBottomMargin);
- cm.display.lineSpace.parentNode.style.paddingBottom = "";
- cm.state.scrollPastEndPadding = null;
- }
- if (val) {
- cm.on("change", onChange);
- cm.on("refresh", updateBottomMargin);
- updateBottomMargin(cm);
- }
- });
-
- function onChange(cm, change) {
- if (CodeMirror.changeEnd(change).line == cm.lastLine())
- updateBottomMargin(cm);
- }
-
- function updateBottomMargin(cm) {
- var padding = "";
- if (cm.lineCount() > 1) {
- var totalH = cm.display.scroller.clientHeight - 30,
- lastLineH = cm.getLineHandle(cm.lastLine()).height;
- padding = (totalH - lastLineH) + "px";
- }
- if (cm.state.scrollPastEndPadding != padding) {
- cm.state.scrollPastEndPadding = padding;
- cm.display.lineSpace.parentNode.style.paddingBottom = padding;
- cm.setSize();
- }
- }
-});
diff --git a/vendor/codemirror/addon/search/match-highlighter.js b/vendor/codemirror/addon/search/match-highlighter.js
deleted file mode 100644
index d9c818b8..00000000
--- a/vendor/codemirror/addon/search/match-highlighter.js
+++ /dev/null
@@ -1,100 +0,0 @@
-// Highlighting text that matches the selection
-//
-// Defines an option highlightSelectionMatches, which, when enabled,
-// will style strings that match the selection throughout the
-// document.
-//
-// The option can be set to true to simply enable it, or to a
-// {minChars, style, showToken} object to explicitly configure it.
-// minChars is the minimum amount of characters that should be
-// selected for the behavior to occur, and style is the token style to
-// apply to the matches. This will be prefixed by "cm-" to create an
-// actual CSS class name. showToken, when enabled, will cause the
-// current token to be highlighted when nothing is selected.
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- var DEFAULT_MIN_CHARS = 2;
- var DEFAULT_TOKEN_STYLE = "matchhighlight";
- var DEFAULT_DELAY = 100;
-
- function State(options) {
- if (typeof options == "object") {
- this.minChars = options.minChars;
- this.style = options.style;
- this.showToken = options.showToken;
- this.delay = options.delay;
- }
- if (this.style == null) this.style = DEFAULT_TOKEN_STYLE;
- if (this.minChars == null) this.minChars = DEFAULT_MIN_CHARS;
- if (this.delay == null) this.delay = DEFAULT_DELAY;
- this.overlay = this.timeout = null;
- }
-
- CodeMirror.defineOption("highlightSelectionMatches", false, function(cm, val, old) {
- if (old && old != CodeMirror.Init) {
- var over = cm.state.matchHighlighter.overlay;
- if (over) cm.removeOverlay(over);
- clearTimeout(cm.state.matchHighlighter.timeout);
- cm.state.matchHighlighter = null;
- cm.off("cursorActivity", cursorActivity);
- }
- if (val) {
- cm.state.matchHighlighter = new State(val);
- highlightMatches(cm);
- cm.on("cursorActivity", cursorActivity);
- }
- });
-
- function cursorActivity(cm) {
- var state = cm.state.matchHighlighter;
- clearTimeout(state.timeout);
- state.timeout = setTimeout(function() {highlightMatches(cm);}, state.delay);
- }
-
- function highlightMatches(cm) {
- cm.operation(function() {
- var state = cm.state.matchHighlighter;
- if (state.overlay) {
- cm.removeOverlay(state.overlay);
- state.overlay = null;
- }
- if (!cm.somethingSelected() && state.showToken) {
- var re = state.showToken === true ? /[\w$]/ : state.showToken;
- var cur = cm.getCursor(), line = cm.getLine(cur.line), start = cur.ch, end = start;
- while (start && re.test(line.charAt(start - 1))) --start;
- while (end < line.length && re.test(line.charAt(end))) ++end;
- if (start < end)
- cm.addOverlay(state.overlay = makeOverlay(line.slice(start, end), re, state.style));
- return;
- }
- if (cm.getCursor("head").line != cm.getCursor("anchor").line) return;
- var selection = cm.getSelections()[0].replace(/^\s+|\s+$/g, "");
- if (selection.length >= state.minChars)
- cm.addOverlay(state.overlay = makeOverlay(selection, false, state.style));
- });
- }
-
- function boundariesAround(stream, re) {
- return (!stream.start || !re.test(stream.string.charAt(stream.start - 1))) &&
- (stream.pos == stream.string.length || !re.test(stream.string.charAt(stream.pos)));
- }
-
- function makeOverlay(query, hasBoundary, style) {
- return {token: function(stream) {
- if (stream.match(query) &&
- (!hasBoundary || boundariesAround(stream, hasBoundary)))
- return style;
- stream.next();
- stream.skipTo(query.charAt(0)) || stream.skipToEnd();
- }};
- }
-});
diff --git a/vendor/codemirror/addon/search/search.js b/vendor/codemirror/addon/search/search.js
deleted file mode 100644
index 19f51f1d..00000000
--- a/vendor/codemirror/addon/search/search.js
+++ /dev/null
@@ -1,155 +0,0 @@
-// Define search commands. Depends on dialog.js or another
-// implementation of the openDialog method.
-
-// Replace works a little oddly -- it will do the replace on the next
-// Ctrl-G (or whatever is bound to findNext) press. You prevent a
-// replace by making sure the match is no longer selected when hitting
-// Ctrl-G.
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"), require("./searchcursor"), require("../dialog/dialog"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror", "./searchcursor", "../dialog/dialog"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
- function searchOverlay(query, caseInsensitive) {
- var startChar;
- if (typeof query == "string") {
- startChar = query.charAt(0);
- query = new RegExp("^" + query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"),
- caseInsensitive ? "i" : "");
- } else {
- query = new RegExp("^(?:" + query.source + ")", query.ignoreCase ? "i" : "");
- }
- return {token: function(stream) {
- if (stream.match(query)) return "searching";
- while (!stream.eol()) {
- stream.next();
- if (startChar && !caseInsensitive)
- stream.skipTo(startChar) || stream.skipToEnd();
- if (stream.match(query, false)) break;
- }
- }};
- }
-
- function SearchState() {
- this.posFrom = this.posTo = this.query = null;
- this.overlay = null;
- }
- function getSearchState(cm) {
- return cm.state.search || (cm.state.search = new SearchState());
- }
- function queryCaseInsensitive(query) {
- return typeof query == "string" && query == query.toLowerCase();
- }
- function getSearchCursor(cm, query, pos) {
- // Heuristic: if the query string is all lowercase, do a case insensitive search.
- return cm.getSearchCursor(query, pos, queryCaseInsensitive(query));
- }
- function dialog(cm, text, shortText, deflt, f) {
- if (cm.openDialog) cm.openDialog(text, f, {value: deflt});
- else f(prompt(shortText, deflt));
- }
- function confirmDialog(cm, text, shortText, fs) {
- if (cm.openConfirm) cm.openConfirm(text, fs);
- else if (confirm(shortText)) fs[0]();
- }
- function parseQuery(query) {
- var isRE = query.match(/^\/(.*)\/([a-z]*)$/);
- if (isRE) {
- query = new RegExp(isRE[1], isRE[2].indexOf("i") == -1 ? "" : "i");
- if (query.test("")) query = /x^/;
- } else if (query == "") {
- query = /x^/;
- }
- return query;
- }
- var queryDialog =
- 'Search: (Use /re/ syntax for regexp search)';
- function doSearch(cm, rev) {
- var state = getSearchState(cm);
- if (state.query) return findNext(cm, rev);
- dialog(cm, queryDialog, "Search for:", cm.getSelection(), function(query) {
- cm.operation(function() {
- if (!query || state.query) return;
- state.query = parseQuery(query);
- cm.removeOverlay(state.overlay, queryCaseInsensitive(state.query));
- state.overlay = searchOverlay(state.query, queryCaseInsensitive(state.query));
- cm.addOverlay(state.overlay);
- state.posFrom = state.posTo = cm.getCursor();
- findNext(cm, rev);
- });
- });
- }
- function findNext(cm, rev) {cm.operation(function() {
- var state = getSearchState(cm);
- var cursor = getSearchCursor(cm, state.query, rev ? state.posFrom : state.posTo);
- if (!cursor.find(rev)) {
- cursor = getSearchCursor(cm, state.query, rev ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(cm.firstLine(), 0));
- if (!cursor.find(rev)) return;
- }
- cm.setSelection(cursor.from(), cursor.to());
- cm.scrollIntoView({from: cursor.from(), to: cursor.to()});
- state.posFrom = cursor.from(); state.posTo = cursor.to();
- });}
- function clearSearch(cm) {cm.operation(function() {
- var state = getSearchState(cm);
- if (!state.query) return;
- state.query = null;
- cm.removeOverlay(state.overlay);
- });}
-
- var replaceQueryDialog =
- 'Replace: (Use /re/ syntax for regexp search)';
- var replacementQueryDialog = 'With: ';
- var doReplaceConfirm = "Replace? ";
- function replace(cm, all) {
- dialog(cm, replaceQueryDialog, "Replace:", cm.getSelection(), function(query) {
- if (!query) return;
- query = parseQuery(query);
- dialog(cm, replacementQueryDialog, "Replace with:", "", function(text) {
- if (all) {
- cm.operation(function() {
- for (var cursor = getSearchCursor(cm, query); cursor.findNext();) {
- if (typeof query != "string") {
- var match = cm.getRange(cursor.from(), cursor.to()).match(query);
- cursor.replace(text.replace(/\$(\d)/g, function(_, i) {return match[i];}));
- } else cursor.replace(text);
- }
- });
- } else {
- clearSearch(cm);
- var cursor = getSearchCursor(cm, query, cm.getCursor());
- var advance = function() {
- var start = cursor.from(), match;
- if (!(match = cursor.findNext())) {
- cursor = getSearchCursor(cm, query);
- if (!(match = cursor.findNext()) ||
- (start && cursor.from().line == start.line && cursor.from().ch == start.ch)) return;
- }
- cm.setSelection(cursor.from(), cursor.to());
- cm.scrollIntoView({from: cursor.from(), to: cursor.to()});
- confirmDialog(cm, doReplaceConfirm, "Replace?",
- [function() {doReplace(match);}, advance]);
- };
- var doReplace = function(match) {
- cursor.replace(typeof query == "string" ? text :
- text.replace(/\$(\d)/g, function(_, i) {return match[i];}));
- advance();
- };
- advance();
- }
- });
- });
- }
-
- CodeMirror.commands.find = function(cm) {clearSearch(cm); doSearch(cm);};
- CodeMirror.commands.findNext = doSearch;
- CodeMirror.commands.findPrev = function(cm) {doSearch(cm, true);};
- CodeMirror.commands.clearSearch = clearSearch;
- CodeMirror.commands.replace = replace;
- CodeMirror.commands.replaceAll = function(cm) {replace(cm, true);};
-});
diff --git a/vendor/codemirror/addon/search/searchcursor.js b/vendor/codemirror/addon/search/searchcursor.js
deleted file mode 100644
index 899f44c4..00000000
--- a/vendor/codemirror/addon/search/searchcursor.js
+++ /dev/null
@@ -1,186 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
- var Pos = CodeMirror.Pos;
-
- function SearchCursor(doc, query, pos, caseFold) {
- this.atOccurrence = false; this.doc = doc;
- if (caseFold == null && typeof query == "string") caseFold = false;
-
- pos = pos ? doc.clipPos(pos) : Pos(0, 0);
- this.pos = {from: pos, to: pos};
-
- // The matches method is filled in based on the type of query.
- // It takes a position and a direction, and returns an object
- // describing the next occurrence of the query, or null if no
- // more matches were found.
- if (typeof query != "string") { // Regexp match
- if (!query.global) query = new RegExp(query.source, query.ignoreCase ? "ig" : "g");
- this.matches = function(reverse, pos) {
- if (reverse) {
- query.lastIndex = 0;
- var line = doc.getLine(pos.line).slice(0, pos.ch), cutOff = 0, match, start;
- for (;;) {
- query.lastIndex = cutOff;
- var newMatch = query.exec(line);
- if (!newMatch) break;
- match = newMatch;
- start = match.index;
- cutOff = match.index + (match[0].length || 1);
- if (cutOff == line.length) break;
- }
- var matchLen = (match && match[0].length) || 0;
- if (!matchLen) {
- if (start == 0 && line.length == 0) {match = undefined;}
- else if (start != doc.getLine(pos.line).length) {
- matchLen++;
- }
- }
- } else {
- query.lastIndex = pos.ch;
- var line = doc.getLine(pos.line), match = query.exec(line);
- var matchLen = (match && match[0].length) || 0;
- var start = match && match.index;
- if (start + matchLen != line.length && !matchLen) matchLen = 1;
- }
- if (match && matchLen)
- return {from: Pos(pos.line, start),
- to: Pos(pos.line, start + matchLen),
- match: match};
- };
- } else { // String query
- var origQuery = query;
- if (caseFold) query = query.toLowerCase();
- var fold = caseFold ? function(str){return str.toLowerCase();} : function(str){return str;};
- var target = query.split("\n");
- // Different methods for single-line and multi-line queries
- if (target.length == 1) {
- if (!query.length) {
- // Empty string would match anything and never progress, so
- // we define it to match nothing instead.
- this.matches = function() {};
- } else {
- this.matches = function(reverse, pos) {
- if (reverse) {
- var orig = doc.getLine(pos.line).slice(0, pos.ch), line = fold(orig);
- var match = line.lastIndexOf(query);
- if (match > -1) {
- match = adjustPos(orig, line, match);
- return {from: Pos(pos.line, match), to: Pos(pos.line, match + origQuery.length)};
- }
- } else {
- var orig = doc.getLine(pos.line).slice(pos.ch), line = fold(orig);
- var match = line.indexOf(query);
- if (match > -1) {
- match = adjustPos(orig, line, match) + pos.ch;
- return {from: Pos(pos.line, match), to: Pos(pos.line, match + origQuery.length)};
- }
- }
- };
- }
- } else {
- var origTarget = origQuery.split("\n");
- this.matches = function(reverse, pos) {
- var last = target.length - 1;
- if (reverse) {
- if (pos.line - (target.length - 1) < doc.firstLine()) return;
- if (fold(doc.getLine(pos.line).slice(0, origTarget[last].length)) != target[target.length - 1]) return;
- var to = Pos(pos.line, origTarget[last].length);
- for (var ln = pos.line - 1, i = last - 1; i >= 1; --i, --ln)
- if (target[i] != fold(doc.getLine(ln))) return;
- var line = doc.getLine(ln), cut = line.length - origTarget[0].length;
- if (fold(line.slice(cut)) != target[0]) return;
- return {from: Pos(ln, cut), to: to};
- } else {
- if (pos.line + (target.length - 1) > doc.lastLine()) return;
- var line = doc.getLine(pos.line), cut = line.length - origTarget[0].length;
- if (fold(line.slice(cut)) != target[0]) return;
- var from = Pos(pos.line, cut);
- for (var ln = pos.line + 1, i = 1; i < last; ++i, ++ln)
- if (target[i] != fold(doc.getLine(ln))) return;
- if (doc.getLine(ln).slice(0, origTarget[last].length) != target[last]) return;
- return {from: from, to: Pos(ln, origTarget[last].length)};
- }
- };
- }
- }
- }
-
- SearchCursor.prototype = {
- findNext: function() {return this.find(false);},
- findPrevious: function() {return this.find(true);},
-
- find: function(reverse) {
- var self = this, pos = this.doc.clipPos(reverse ? this.pos.from : this.pos.to);
- function savePosAndFail(line) {
- var pos = Pos(line, 0);
- self.pos = {from: pos, to: pos};
- self.atOccurrence = false;
- return false;
- }
-
- for (;;) {
- if (this.pos = this.matches(reverse, pos)) {
- this.atOccurrence = true;
- return this.pos.match || true;
- }
- if (reverse) {
- if (!pos.line) return savePosAndFail(0);
- pos = Pos(pos.line-1, this.doc.getLine(pos.line-1).length);
- }
- else {
- var maxLine = this.doc.lineCount();
- if (pos.line == maxLine - 1) return savePosAndFail(maxLine);
- pos = Pos(pos.line + 1, 0);
- }
- }
- },
-
- from: function() {if (this.atOccurrence) return this.pos.from;},
- to: function() {if (this.atOccurrence) return this.pos.to;},
-
- replace: function(newText) {
- if (!this.atOccurrence) return;
- var lines = CodeMirror.splitLines(newText);
- this.doc.replaceRange(lines, this.pos.from, this.pos.to);
- this.pos.to = Pos(this.pos.from.line + lines.length - 1,
- lines[lines.length - 1].length + (lines.length == 1 ? this.pos.from.ch : 0));
- }
- };
-
- // Maps a position in a case-folded line back to a position in the original line
- // (compensating for codepoints increasing in number during folding)
- function adjustPos(orig, folded, pos) {
- if (orig.length == folded.length) return pos;
- for (var pos1 = Math.min(pos, orig.length);;) {
- var len1 = orig.slice(0, pos1).toLowerCase().length;
- if (len1 < pos) ++pos1;
- else if (len1 > pos) --pos1;
- else return pos1;
- }
- }
-
- CodeMirror.defineExtension("getSearchCursor", function(query, pos, caseFold) {
- return new SearchCursor(this.doc, query, pos, caseFold);
- });
- CodeMirror.defineDocExtension("getSearchCursor", function(query, pos, caseFold) {
- return new SearchCursor(this, query, pos, caseFold);
- });
-
- CodeMirror.defineExtension("selectMatches", function(query, caseFold) {
- var ranges = [], next;
- var cur = this.getSearchCursor(query, this.getCursor("from"), caseFold);
- while (next = cur.findNext()) {
- if (CodeMirror.cmpPos(cur.to(), this.getCursor("to")) > 0) break;
- ranges.push({anchor: cur.from(), head: cur.to()});
- }
- if (ranges.length)
- this.setSelections(ranges, 0);
- });
-});
diff --git a/vendor/codemirror/addon/selection/active-line.js b/vendor/codemirror/addon/selection/active-line.js
deleted file mode 100644
index a818f109..00000000
--- a/vendor/codemirror/addon/selection/active-line.js
+++ /dev/null
@@ -1,66 +0,0 @@
-// Because sometimes you need to style the cursor's line.
-//
-// Adds an option 'styleActiveLine' which, when enabled, gives the
-// active line's wrapping
+ {title} + {headlineConfig.actions} +
+ )} +
+ {description}
+
+
+ {contentInput}
+
+
+ {contentOutput}
+
+
+ {pickerState === PickerStates.IDLE && (
+
+ )}
+ {pickerState === PickerStates.PICKING && (
+ <>
+
+ );
+};
diff --git a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss
new file mode 100644
index 00000000..05fb7e17
--- /dev/null
+++ b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss
@@ -0,0 +1,152 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.picker {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 0.5rem;
+ height: 2rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ justify-content: center;
+ }
+}
+
+.container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ align-self: flex-end;
+ height: 100%;
+ width: fit-content;
+ flex-shrink: 0;
+
+ @media #{$breakpoint-dimension-sm} {
+ align-self: unset;
+ }
+}
+
+.button {
+ color: var(--color_fg_on_button);
+ background-color: var(--color_bg_button);
+ font-size: 0.75rem;
+ line-height: 1.25rem;
+ letter-spacing: 0.1px;
+ outline: none;
+ border: 1px solid var(--color_border_inverse_static);
+ padding: 0.25rem 0.5rem;
+ border-radius: 0.25rem;
+ cursor: pointer;
+
+ &:focus-visible {
+ outline: solid 1px var(--color_border_focus);
+ outline-offset: 0.125rem;
+ border-radius: 0.125rem;
+ }
+
+ @media only screen and (min-width: 375px) {
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ }
+}
+
+.label {
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.1px;
+}
+
+.select {
+ display: flex;
+ padding: 0.125rem 1.75rem 0.125rem 0.875rem;
+ align-items: center;
+ gap: 0.75rem;
+ align-self: stretch;
+
+ border-radius: 0.25rem;
+ border: 1px solid var(--color_border_button);
+
+ color: var(--color_fg_default);
+ font-variant-numeric: slashed-zero;
+ font-feature-settings:
+ "clig" off,
+ "liga" off;
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ letter-spacing: 0.2px;
+ appearance: none;
+ z-index: 2;
+ background-color: transparent;
+
+ @media #{$breakpoint-dimension-sm} {
+ font-size: 0.875rem;
+ padding: 0.25rem 2rem 0.25rem 1rem;
+ }
+}
+
+.icon {
+ position: absolute;
+ top: 50%;
+ right: 0.5rem;
+ transform: translateY(-40%);
+
+ z-index: 1;
+
+ svg {
+ height: 1rem;
+ width: 1rem;
+
+ path {
+ fill: var(--color_fg_default);
+ }
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ transform: translateY(-45%);
+
+ svg {
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+}
+
+.closeButton {
+ display: flex;
+
+ height: 1rem;
+ width: 1rem;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+
+ color: var(--color_fg_default);
+ font-variant-numeric: slashed-zero;
+ font-feature-settings:
+ "clig" off,
+ "liga" off;
+ font-size: 1.5rem;
+
+ line-height: 1.375rem;
+ letter-spacing: 0.2px;
+ appearance: none;
+ z-index: 2;
+ background-color: transparent;
+ outline: none;
+ border: none;
+ cursor: pointer;
+
+ span {
+ display: inline-block;
+ transform: rotate(45deg);
+ }
+
+ &:focus-visible {
+ outline: solid 1px var(--color_border_focus);
+ outline-offset: 0.125rem;
+ border-radius: 0.125rem;
+ }
+}
diff --git a/src/features/debugger/components/debugger-feedback/debugger-feedback.component.tsx b/src/features/debugger/components/debugger-feedback/debugger-feedback.component.tsx
new file mode 100644
index 00000000..0dcea04a
--- /dev/null
+++ b/src/features/debugger/components/debugger-feedback/debugger-feedback.component.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./debugger-feedback.module.scss";
+import { getLinksUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { BoxComponent } from "@/features/common/components/box/box.component";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+import Link from "next/link";
+
+interface DebuggerFeedbackComponentProps {
+ languageCode: string;
+}
+
+export const DebuggerFeedbackComponent: React.FC<
+ DebuggerFeedbackComponentProps
+> = ({ languageCode }) => {
+ const dictionary = getLinksUiDictionary(languageCode);
+
+ return (
+
+
+ );
+};
diff --git a/src/features/debugger/components/debugger-switch/debugger-switch.module.scss b/src/features/debugger/components/debugger-switch/debugger-switch.module.scss
new file mode 100644
index 00000000..30c9202d
--- /dev/null
+++ b/src/features/debugger/components/debugger-switch/debugger-switch.module.scss
@@ -0,0 +1,94 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.container {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.label {
+ display: flex;
+ flex-direction: column;
+ text-transform: uppercase;
+ font-size: 0.75rem;
+ line-height: 1.25rem;
+ color: var(--color_fg_default);
+ letter-spacing: 0.1px;
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 24px;
+
+ & input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+
+ &:focus-visible + .slider {
+ outline: solid 1px var(--color_border_focus);
+ outline-offset: 0.125rem;
+ border-radius: 1.5rem;
+ transition: unset;
+ }
+
+ &:checked + .slider {
+ background-color: var(--color_bg_state_success);
+ border: 1px solid var(--color_border_state_success);
+ }
+
+ &:checked + .slider:before {
+ transform: translateX(1rem);
+ background-color: var(--color_fg_on_state_success);
+ }
+ }
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--color_bg_layer);
+ border: 1px solid var(--color_border_inverse_static);
+
+ transition: 0.4s;
+
+ &:before {
+ position: absolute;
+ content: "";
+ height: 1rem;
+ width: 1rem;
+ top: calc((1.5rem - 1rem) / 2 - 1px);
+ left: 3px;
+ background-color: var(--color_fg_bold);
+ transition: 0.4s;
+ }
+}
+
+.slider.round {
+ border-radius: 1.5rem;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
+.compactLabel {
+ @media #{$tablet} {
+ display: none;
+ }
+}
+
+.fullLabel {
+ display: none;
+
+ @media #{$tablet} {
+ display: unset;
+ }
+}
diff --git a/src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx
new file mode 100644
index 00000000..8c7d0201
--- /dev/null
+++ b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import styles from "./debugger-toolbar.module.scss";
+import { BoxComponent } from "@/features/common/components/box/box.component";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { clsx } from "clsx";
+import { SecondaryFont } from "@/libs/theme/fonts";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { DebuggerModeValues } from "@/features/common/values/debugger-mode.values";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+
+interface DebuggerToolbarComponentProps {
+ decoderDictionary: HomeDictionaryModel["decoder"];
+ encoderDictionary: HomeDictionaryModel["encoder"];
+ mode: DebuggerModeValues;
+}
+
+export const DebuggerToolbarComponent: React.FC<
+ DebuggerToolbarComponentProps
+> = ({ decoderDictionary, encoderDictionary, mode }) => {
+ const activeWidget$ = useDebuggerStore((state) => state.activeWidget$);
+
+ const setActiveWidget$ = useDebuggerStore((state) => state.setActiveWidget$);
+
+ if (mode === DebuggerModeValues.UNIFIED) {
+ return (
+
+ {compactLabel}
+ {label}
+
+
+
+
+ -
+
- { + setActiveWidget$(DebuggerWidgetValues.DECODER); + }} + data-active={activeWidget$ === DebuggerWidgetValues.DECODER} + data-testid={dataTestidDictionary.debugger.decoderTab.id} + > + + {decoderDictionary.compactTitle} + + + {decoderDictionary.title} + + +
- { + setActiveWidget$(DebuggerWidgetValues.ENCODER); + }} + data-active={activeWidget$ === DebuggerWidgetValues.ENCODER} + data-testid={dataTestidDictionary.debugger.encoderTab.id} + > + + {encoderDictionary.compactTitle} + + + {encoderDictionary.title} + + +
+
+ );
+ }
+
+ return (
+
+
+ );
+};
diff --git a/src/features/debugger/components/debugger-widget/debugger-widget.module.scss b/src/features/debugger/components/debugger-widget/debugger-widget.module.scss
new file mode 100644
index 00000000..b105d2ce
--- /dev/null
+++ b/src/features/debugger/components/debugger-widget/debugger-widget.module.scss
@@ -0,0 +1,10 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding-bottom: 4rem;
+
+ &[data-mode="UNIFIED"] > :nth-child(2) {
+ margin-top: -0.5rem;
+ }
+}
diff --git a/src/features/debugger/models/decoder-inputs.model.ts b/src/features/debugger/models/decoder-inputs.model.ts
new file mode 100644
index 00000000..a1d639fa
--- /dev/null
+++ b/src/features/debugger/models/decoder-inputs.model.ts
@@ -0,0 +1,29 @@
+import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-category.values";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+
+export type DecoderInputsModel =
+ | {
+ algType: SigningAlgCategoryValues.SYMMETRIC;
+ alg: string;
+ jwt: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ }
+ | {
+ algType: SigningAlgCategoryValues.ASYMMETRIC;
+ alg: string;
+ jwt: string;
+ asymmetricPublicKey: string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+ }
+ | {
+ algType: SigningAlgCategoryValues.NONE;
+ alg: string;
+ jwt: string;
+ }
+ | {
+ algType: SigningAlgCategoryValues.NOOP;
+ alg: string;
+ jwt: string;
+ };
diff --git a/src/features/debugger/models/encoder-inputs.model.ts b/src/features/debugger/models/encoder-inputs.model.ts
new file mode 100644
index 00000000..3339ff1b
--- /dev/null
+++ b/src/features/debugger/models/encoder-inputs.model.ts
@@ -0,0 +1,33 @@
+import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-category.values";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+
+export type EncoderInputsModel =
+ | {
+ algType: SigningAlgCategoryValues.SYMMETRIC;
+ alg: string;
+ header: string;
+ payload: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ }
+ | {
+ algType: SigningAlgCategoryValues.ASYMMETRIC;
+ alg: string;
+ header: string;
+ payload: string;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+ }
+ | {
+ algType: SigningAlgCategoryValues.NONE;
+ alg: string;
+ header: string;
+ payload: string;
+ }
+ | {
+ algType: SigningAlgCategoryValues.NOOP;
+ alg: string;
+ header: string;
+ payload: string;
+ };
diff --git a/src/features/debugger/services/debugger.store.ts b/src/features/debugger/services/debugger.store.ts
new file mode 100644
index 00000000..9cfdc67e
--- /dev/null
+++ b/src/features/debugger/services/debugger.store.ts
@@ -0,0 +1,841 @@
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import { DebuggerModeValues } from "@/features/common/values/debugger-mode.values";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+import { useDecoderStore } from "@/features/decoder/services/decoder.store";
+import {
+ isDigitalSignatureAlg,
+ isHmacAlg,
+ isNoneAlg,
+} from "@/features/common/services/jwt.service";
+import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-category.values";
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+import { DecoderInputsModel } from "@/features/debugger/models/decoder-inputs.model";
+import { EncoderInputsModel } from "@/features/debugger/models/encoder-inputs.model";
+import { NOOP_ALG } from "@/features/common/values/constants";
+
+export enum DebuggerOutputModalValues {
+ OPEN = "open",
+ CLOSED = "closed",
+}
+
+type DebuggerStash = {
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ asymmetricPublicKey: string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+ asymmetricPrivateKey: string;
+ asymmetricPrivateKeyFormat: AsymmetricKeyFormatValues;
+};
+
+export type DebuggerStoreState = {
+ decoderInputs$: Partial
+ {field}
+
+ {warningMessage && (
+ + {canRenderAsCode ? ( +
{processedValue}
+ ) : (
+ {processedValue}
+ )}
+
+ {descriptionVisibility === ClaimDescriptionVisibilityValues.VISIBLE &&
+ description && (
+
+ {description}
+
+ )}
+
+
+ )}
+ {infoMessage && (
+
+ {warningMessage}
+
+
+
+ )}
+
+ );
+};
diff --git a/src/features/decoder/components/claim.module.scss b/src/features/decoder/components/claim.module.scss
new file mode 100644
index 00000000..68e52a19
--- /dev/null
+++ b/src/features/decoder/components/claim.module.scss
@@ -0,0 +1,146 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.row {
+ position: relative;
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: subgrid;
+
+ border-bottom: 1px solid var(--color_border_bold);
+
+ &:last-child {
+ border-bottom: unset;
+ }
+}
+
+.cell {
+ padding: 0.5rem 1rem;
+
+ border-bottom: 1px solid var(--color_border_bold);
+
+ &:last-child {
+ border-bottom: unset;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ border-right: 1px solid var(--color_border_bold);
+ border-bottom: unset;
+
+ &:last-child {
+ border-right: unset;
+ }
+ }
+}
+
+.field {
+ grid-column: span 6;
+ display: flex;
+ align-items: center;
+ text-wrap: wrap;
+ overflow: hidden;
+ word-break: break-all;
+ color: var(--color_jwt_payload);
+ background-color: var(--color_bg_layer_alternate-bold);
+ font-size: 0.75rem;
+ line-height: 1.125rem;
+ font-style: normal;
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 3;
+ }
+}
+
+.value {
+ grid-column: span 6;
+ display: flex;
+
+ text-wrap: wrap;
+ overflow: hidden;
+ word-break: break-all;
+
+ max-height: 8rem;
+ overflow-y: auto;
+ overflow-x: auto;
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 4;
+
+ &[data-full-width="true"] {
+ grid-column: span 9;
+ }
+ }
+
+ &::-webkit-scrollbar {
+ width: 0.75rem;
+ height: 0.75rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 2rem transparent;
+ cursor: pointer !important;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border: 0.25rem solid transparent;
+ background-clip: padding-box;
+ border-radius: 9999px;
+ background-color: var(--color_bg_scrollbar);
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+}
+
+.value__text {
+ margin: auto 0;
+ font-size: 0.75rem;
+ line-height: 1.125rem;
+ word-break: break-word;
+}
+
+.value__code {
+ margin: auto 0;
+ font-size: 0.75rem;
+ line-height: 1.125rem;
+}
+
+.description {
+ grid-column: span 6;
+ flex-wrap: wrap;
+ text-wrap: wrap;
+ overflow: hidden;
+ padding: 0.5rem;
+ display: block;
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-column: span 5;
+ }
+}
+
+.message {
+ grid-column: 1 / -1;
+ display: flex;
+
+ text-wrap: wrap;
+ overflow: hidden;
+ word-break: break-word;
+
+ max-height: 8rem;
+ overflow-y: auto;
+
+ margin: auto 0;
+ font-size: 0.75rem;
+ line-height: 1.25rem;
+
+ &[data-type="warning"] {
+ background-color: var(--color_bg_state_caution_subtle);
+ color: var(--color_fg_on_state_caution_subtle);
+ }
+
+ &[data-type="info"] {
+ background-color: var(--color_bg_state_info_subtle);
+ color: var(--color_fg_on_state_info_subtle);
+ }
+}
diff --git a/src/features/decoder/components/claims.component.tsx b/src/features/decoder/components/claims.component.tsx
new file mode 100644
index 00000000..b0c0ad7c
--- /dev/null
+++ b/src/features/decoder/components/claims.component.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { safeJsonParse } from "@/features/common/services/utils";
+import styles from "./claims.module.scss";
+import { jwtClaimsDictionary } from "@/features/decoder/jwt-claims.dictionary";
+import { ClaimComponent } from "@/features/decoder/components/claim.component";
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+
+interface ClaimsComponentProps {
+ decodedElement: string;
+ descriptionVisibility: ClaimDescriptionVisibilityValues;
+}
+
+export const ClaimsComponent: React.FC
+ {infoMessage}
+
+
+
+ );
+ }
+
+ if (
+ !(
+ typeof safeJsonParseResult.value === "object" &&
+ !Array.isArray(safeJsonParseResult.value) &&
+ safeJsonParseResult.value !== null
+ )
+ ) {
+ return (
+
+
+ );
+ }
+
+ const claims = Object.entries(safeJsonParseResult.value);
+
+ if (claims.length === 0) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {claims.map((entry) => {
+ const [key, value] = entry;
+ const description = jwtClaimsDictionary[key];
+
+ return (
+
+ );
+};
diff --git a/src/features/decoder/components/claims.module.scss b/src/features/decoder/components/claims.module.scss
new file mode 100644
index 00000000..bd40d92d
--- /dev/null
+++ b/src/features/decoder/components/claims.module.scss
@@ -0,0 +1,34 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.table {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ overflow-y: auto;
+ overflow-x: auto;
+
+ &::-webkit-scrollbar {
+ width: 0.75rem;
+ height: 0.75rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 2rem transparent;
+ cursor: pointer !important;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border: 0.25rem solid transparent;
+ background-clip: padding-box;
+ border-radius: 9999px;
+ background-color: var(--color_bg_scrollbar);
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ grid-template-columns: repeat(12, 1fr);
+ }
+}
diff --git a/src/features/decoder/components/decoded-header-output.component.tsx b/src/features/decoder/components/decoded-header-output.component.tsx
new file mode 100644
index 00000000..bb8d2e4a
--- /dev/null
+++ b/src/features/decoder/components/decoded-header-output.component.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+import { CardTabsWithTabPersistenceComponentProps } from "@/features/common/components/card-tabs/card-tabs.component";
+import { DecodedHeaderComponent } from "@/features/decoder/components/decoded-header.component";
+import { useDecoderStore } from "@/features/decoder/services/decoder.store";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { DECODED_HEADER_FORMAT_KEY } from "@/features/decoder/config/decoder.config";
+import { CardComponentProps } from "@/features/common/components/card/card.component";
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+import { ClaimsComponent } from "@/features/decoder/components/claims.component";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+import { CardToolbarComponent } from "@/features/common/components/card-toolbar/card-toolbar.component";
+import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component";
+import { CardToolbarResizeButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-resize-button/card-toolbar-resize-button.component";
+import { CardToolbarDescriptionButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-description-button/card-toolbar-description-button.component";
+
+interface DecodedHeaderOutputComponentProps {
+ languageCode: string;
+ dictionary: HomeDictionaryModel["decoder"]["decodedHeader"];
+ decodedHeaderInitialTabId: string;
+ descriptionVisibility: ClaimDescriptionVisibilityValues;
+}
+
+export const DecodedHeaderOutputComponent: React.FC<
+ DecodedHeaderOutputComponentProps
+> = ({
+ decodedHeaderInitialTabId,
+ languageCode,
+ dictionary,
+ descriptionVisibility,
+}) => {
+ const resizeId = "decoded_header_output";
+ const setDecodedHeaderTabValue$ = useDebuggerStore(
+ (state) => state.setDecodedHeaderTabId$,
+ );
+ const decodedHeaderDescriptionVisibility$ = useDebuggerStore(
+ (state) => state.decodedHeaderDescriptionVisibility$,
+ );
+
+ const decodedHeader$ = useDecoderStore((state) => state.decodedHeader);
+
+ const cards: CardComponentProps[] = [
+ {
+ id: dataTestidDictionary.decoder.decodedHeader.json.id,
+ languageCode: languageCode,
+ title: dictionary.tabs.json.label,
+ compactTitle: dictionary.tabs.json.label,
+ children:
+
+ );
+};
diff --git a/src/features/decoder/components/token-decoder-encoding-format-picker.module.scss b/src/features/decoder/components/token-decoder-encoding-format-picker.module.scss
new file mode 100644
index 00000000..1429bdc1
--- /dev/null
+++ b/src/features/decoder/components/token-decoder-encoding-format-picker.module.scss
@@ -0,0 +1,70 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ align-self: unset;
+ }
+}
+
+.label {
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.1px;
+}
+
+.select {
+ display: flex;
+ padding: 0.125rem 1.75rem 0.125rem 0.875rem;
+ align-items: center;
+ gap: 0.75rem;
+ align-self: stretch;
+
+ border-radius: 0.25rem;
+ border: 1px solid var(--color_border_button);
+
+ color: var(--color_fg_default);
+ font-variant-numeric: slashed-zero;
+ font-feature-settings:
+ "clig" off,
+ "liga" off;
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ letter-spacing: 0.2px;
+ appearance: none;
+
+ z-index: 2;
+
+ background-color: transparent;
+}
+
+.icon {
+ position: absolute;
+ top: 50%;
+ right: 0.5rem;
+ transform: translateY(-40%);
+
+ svg {
+ height: 1rem;
+ width: 1rem;
+
+ path {
+ fill: var(--color_fg_default);
+ }
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ transform: translateY(-45%);
+
+ svg {
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+}
diff --git a/src/features/decoder/components/token-decoder-key-format-picker.component.tsx b/src/features/decoder/components/token-decoder-key-format-picker.component.tsx
new file mode 100644
index 00000000..b43f8755
--- /dev/null
+++ b/src/features/decoder/components/token-decoder-key-format-picker.component.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import styles from "./token-decoder-key-format-picker.module.scss";
+import { useDecoderStore } from "@/features/decoder/services/decoder.store";
+import { getPickersUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import { DebuggerPickerComponent } from "@/features/common/components/debugger-picker/debugger-picker.component";
+
+interface TokenDecoderKeyFormatPickerComponentProps {
+ languageCode: string;
+}
+
+export const TokenDecoderKeyFormatPickerComponent: React.FC<
+ TokenDecoderKeyFormatPickerComponentProps
+> = ({ languageCode }) => {
+ const dictionary = getPickersUiDictionary(languageCode);
+
+ const handlePublicKeyFormatChange = useDecoderStore(
+ (state) => state.handleAsymmetricPublicKeyFormatChange,
+ );
+ const controlledAsymmetricPublicKey = useDecoderStore(
+ (state) => state.controlledAsymmetricPublicKey,
+ );
+
+ const [keyFormat, setKeyFormat] = useState
+
+ );
+};
diff --git a/src/features/decoder/components/token-decoder-key-format-picker.module.scss b/src/features/decoder/components/token-decoder-key-format-picker.module.scss
new file mode 100644
index 00000000..c172cbca
--- /dev/null
+++ b/src/features/decoder/components/token-decoder-key-format-picker.module.scss
@@ -0,0 +1,70 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ align-self: unset;
+ }
+}
+
+.label {
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.1px;
+}
+
+.select {
+ display: flex;
+ padding: 0.125rem 1.75rem 0.125rem 0.875rem;
+ align-items: center;
+ gap: 0.75rem;
+ align-self: stretch;
+ border-radius: 0.25rem;
+ border: 1px solid var(--color_border_button);
+ color: var(--color_fg_default);
+ font-variant-numeric: slashed-zero;
+ font-feature-settings:
+ "clig" off,
+ "liga" off;
+ font-size: 0.875rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.5rem;
+ letter-spacing: 0.2px;
+ appearance: none;
+
+ z-index: 2;
+
+ background-color: transparent;
+}
+
+.icon {
+ position: absolute;
+ top: 50%;
+ right: 0.5rem;
+ transform: translateY(-40%);
+
+ svg {
+ height: 1rem;
+ width: 1rem;
+
+ path {
+ fill: var(--color_fg_default);
+ }
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ transform: translateY(-45%);
+
+ svg {
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+}
diff --git a/src/features/decoder/components/token-decoder-signature-validation.component.tsx b/src/features/decoder/components/token-decoder-signature-validation.component.tsx
new file mode 100644
index 00000000..369943f9
--- /dev/null
+++ b/src/features/decoder/components/token-decoder-signature-validation.component.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { StringValues } from "@/features/common/values/string.values";
+import styles from "./token-decoder-signature-validation.module.scss";
+import { clsx } from "clsx";
+import { useDecoderStore } from "@/features/decoder/services/decoder.store";
+import { JwtSignatureStatusValues } from "@/features/common/values/jwt-signature-status.values";
+import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component";
+
+interface TokenDecoderSignatureValidationComponentProps {
+ id: string;
+}
+
+export const TokenDecoderSignatureValidationComponent: React.FC<
+ TokenDecoderSignatureValidationComponentProps
+> = ({ id }) => {
+ const signatureStatus$ = useDecoderStore((state) => state.signatureStatus);
+ const signatureWarnings = useDecoderStore((state) => state.signatureWarnings);
+
+ if (signatureStatus$ === JwtSignatureStatusValues.INVALID) {
+ return (
+
+ {StringValues.editor.signatureInvalid}
+
+ );
+ }
+
+ if (signatureStatus$ === JwtSignatureStatusValues.VALID) {
+ return (
+
+ {StringValues.editor.signatureVerified}
+
+ );
+ }
+
+ if (
+ signatureStatus$ === JwtSignatureStatusValues.WARNING &&
+ signatureWarnings &&
+ signatureWarnings.length > 0
+ ) {
+ return (
+
+ {signatureWarnings.map((warning, index) => (
+ {warning}
+ ))}
+
+ );
+ }
+
+ return null;
+};
diff --git a/src/features/decoder/components/token-decoder-signature-validation.module.scss b/src/features/decoder/components/token-decoder-signature-validation.module.scss
new file mode 100644
index 00000000..2d383902
--- /dev/null
+++ b/src/features/decoder/components/token-decoder-signature-validation.module.scss
@@ -0,0 +1,25 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.container {
+ display: flex;
+ flex-direction: column;
+ transition: background-color 0.13s ease-in-out;
+ padding: 0.5rem 1rem;
+ font-size: 0.75rem;
+ line-height: 1.125rem;
+}
+
+.valid {
+ background-color: var(--color_bg_state_success_subtle);
+ color: var(--color_fg_on_state_success_subtle);
+}
+
+.invalid {
+ background-color: var(--color_bg_state_danger_subtle);
+ color: var(--color_fg_on_state_danger_subtle);
+}
+
+.warning {
+ background-color: var(--color_bg_state_caution_subtle);
+ color: var(--color_fg_on_state_caution_subtle);
+}
diff --git a/src/features/decoder/components/token-decoder.component.tsx b/src/features/decoder/components/token-decoder.component.tsx
new file mode 100644
index 00000000..721ef51d
--- /dev/null
+++ b/src/features/decoder/components/token-decoder.component.tsx
@@ -0,0 +1,224 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { DecodedHeaderOutputComponent } from "@/features/decoder/components/decoded-header-output.component";
+import { DecodedPayloadOutputComponent } from "@/features/decoder/components/decoded-payload-output.component";
+import { JwtInputComponent } from "@/features/decoder/components/jwt-input.component";
+import { SecretKeyInputComponent } from "@/features/decoder/components/secret-key-input.component";
+import { useDecoderStore } from "@/features/decoder/services/decoder.store";
+import { useRouter } from "next/navigation";
+import {
+ SupportedTokenHashParamValues,
+ WARNING_PARAM_KEY,
+ WARNING_PARAM_VALUE,
+} from "@/libs/config/project.constants";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-category.values";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import { WidgetComponent } from "@/features/common/components/widget/widget/widget.component";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+
+interface TokenDecoderComponentProps {
+ languageCode: string;
+ dictionary: HomeDictionaryModel["decoder"];
+ decodedHeaderInitialTabId: string;
+ decodedPayloadInitialTabId: string;
+ decodedHeaderDescriptionVisibility: ClaimDescriptionVisibilityValues;
+ decodedPayloadDescriptionVisibility: ClaimDescriptionVisibilityValues;
+ headlineConfig: { isVisible: boolean; actions?: React.ReactNode };
+}
+
+export const TokenDecoderComponent: React.FC
+
+ );
+ }
+
+ return null;
+};
diff --git a/src/features/decoder/components/use-hash-warning/use-hash-warning.module.scss b/src/features/decoder/components/use-hash-warning/use-hash-warning.module.scss
new file mode 100644
index 00000000..0a26fabd
--- /dev/null
+++ b/src/features/decoder/components/use-hash-warning/use-hash-warning.module.scss
@@ -0,0 +1,60 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.backdrop {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+
+ z-index: 9999;
+
+ backdrop-filter: blur(0.5rem);
+
+ cursor: pointer;
+
+ &[aria-hidden="false"] {
+ visibility: visible;
+ animation: fadeIn 0.2s linear;
+ }
+
+ &[aria-hidden="true"] {
+ visibility: hidden;
+ }
+
+ @media #{$breakpoint-dimension-xs} {
+ min-width: auto;
+ }
+}
+
+.container {
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ left: 2rem;
+ padding: 1.5rem 2rem;
+ background-color: var(--color_bg_state_danger_subtle);
+ color: var(--color_fg_on_state_danger_subtle);
+ border: 1px solid var(--color_border_state_danger);
+ z-index: 999;
+ font-size: 0.865rem;
+ border-radius: 0.5rem;
+}
+
+.button {
+ background-color: transparent;
+ color: var(--color_fg_on_state_danger_subtle);
+ border: none;
+ position: absolute;
+ top: 0.25rem;
+ right: 0.75rem;
+ font-size: 1.5rem;
+ transform: rotate(45deg);
+ cursor: pointer;
+}
diff --git a/src/features/decoder/config/decoder.config.ts b/src/features/decoder/config/decoder.config.ts
new file mode 100644
index 00000000..e52cd0f8
--- /dev/null
+++ b/src/features/decoder/config/decoder.config.ts
@@ -0,0 +1,7 @@
+export const DECODED_HEADER_FORMAT_KEY = "decoded-header-format";
+export const DECODED_PAYLOAD_FORMAT_KEY = "decoded-payload-format";
+
+export const DECODED_HEADER_DESCRIPTION_KEY = "decoded-header-details";
+export const DECODED_PAYLOAD_DESCRIPTION_KEY = "decoded-payload-details";
+
+export const DEBUGGER_MODE_KEY = "debugger-mode";
diff --git a/src/features/decoder/jwt-claims.dictionary.ts b/src/features/decoder/jwt-claims.dictionary.ts
new file mode 100644
index 00000000..ee5df734
--- /dev/null
+++ b/src/features/decoder/jwt-claims.dictionary.ts
@@ -0,0 +1,69 @@
+export const jwtClaimsDictionary: { [index: string]: string } = {
+ alg: `The algorithm used to sign the JWT. [Learn more](https://datatracker.ietf.org/doc/html/rfc7518#section-3.1)`,
+ typ: `The media type of this complete JWT. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-5.1)`,
+ cty: `Convey structural information about the JWT. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-5.2)`,
+ iss: `The issuer of the JWT. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.1)`,
+ sub: `The subject of the JWT (the user). [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.2)`,
+ aud: `The recipients that the JWT is intended for. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.3)`,
+ exp: `The expiration time on or after which the JWT MUST NOT be accepted for processing. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.4)`,
+ nbf: `The time before which the JWT MUST NOT be accepted for processing. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.4)`,
+ iat: `The time at which the JWT was issued. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.6)`,
+ jti: `The unique identifier for the JWT. [Learn more](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.7)`,
+ azp: `The authorized party to which the ID Token was issued. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#IDToken)`,
+ jku: `A URI to a set of JSON-encoded public keys. [Learn more](https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1.2)`,
+ jwk: `The public key used to digitally sign the JWS. [Learn more](https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1.3)`,
+ kid: `The key ID is a hint indicating which key was used to secure the JWS. [Learn more](https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1.4)`,
+ x5u: `A URI to the X.509 certificate used to digitally sign the JWS. [Learn more](https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1.5)`,
+ x5t: `X.509 certificate SHA-1 thumbprint for the key used to digitally sign the JWS. [Learn more](https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1.7)`,
+ "x5t#S256": `X.509 certificate SHA-256 thumbprint for the key used to digitally sign the JWS. [Learn more](https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1.8)`,
+ crit: `The extensions that MUST be understood and processed. [Learn more](https://www.rfc-editor.org/rfc/rfc7515.html#section-4.1.11)`,
+ enc: `The content encryption algorithm used. [Learn more](https://www.rfc-editor.org/rfc/rfc7516.html#section-4.1.2)`,
+ zip: `The compression algorithm applied before encryption, if any. [Learn more](https://www.rfc-editor.org/rfc/rfc7516.html#section-4.1.3)`,
+ kty: `The cryptographic algorithm family used with the key. [Learn more](https://www.rfc-editor.org/rfc/rfc7517.html#section-4.1)`,
+ use: `The intended use of the public key. [Learn more](https://www.rfc-editor.org/rfc/rfc7517.html#section-4.2)`,
+ key_ops: `The operations for which the key is intended to be used. [Learn more](https://www.rfc-editor.org/rfc/rfc7517.html#section-4.3)`,
+ sid: `An identifier for a session at the relying party. [Learn more](https://openid.net/specs/openid-connect-frontchannel-1_0.html#OPLogout)`,
+ updated_at: `Time the End-User's information was last updated. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#StandardClaims)`,
+ at_hash: `Access Token hash value encoded in base64url format. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#HybridIDToken)`,
+ c_hash: `Code hash value encoded in base64url format. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#HybridIDToken)`,
+ s_hash: `State hash value encoded in base64url format. [Learn more](https://openid.net/specs/openid-financial-api-part-2-1_0.html#id-token-as-detached-signature)`,
+ nonce: `Associates a Client session with an ID Token. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#IDToken)`,
+ auth_time: `The time when the End-User authentication occurred. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#IDToken)`,
+ amr: `Authentication methods used in the authentication. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#IDToken)`,
+ acr: `Authentication Context Class. [Learn more](https://openid.net/specs/openid-connect-core-1_0-final.html#IDToken)`,
+};
+
+export const jwtClaimsTooltipDictionary: { [index: string]: string } = {
+ exp: "Expiration time (seconds since Unix epoch)",
+ nbf: "Not valid before (seconds since Unix epoch)",
+ iat: "Issued at (seconds since Unix epoch)",
+ iss: "Issuer (who created and signed this token)",
+ sub: "Subject (whom the token refers to)",
+ aud: "Audience (who or what the token is intended for)",
+ jti: "JWT ID (unique identifier for this token)",
+ typ: "Type of token",
+ azp: "Authorized party (the party to which this token was issued)",
+ alg: "Signature or encryption algorithm",
+ jku: "JSON Web Key Set URL",
+ jwk: "JSON Web Key Set (embedded)",
+ kid: "Key ID",
+ x5u: "X.509 Certificate URL",
+ x5t: "X.509 Fingerprint (SHA-1)",
+ "x5t#S256": "X.509 Fingerprint (SHA-256)",
+ cty: "Content type",
+ crit: "Extensions or claims that MUST be processed or verified",
+ enc: "Encryption algorithm",
+ zip: "Compression algorithm",
+ kty: "Key type",
+ use: 'Intended use of key: "sig" or "enc" (other values accepted)',
+ key_ops: "Intended operations for this key",
+ sid: "Session ID (String identifier for a Session)",
+ updated_at: "Last modification timestamp",
+ at_hash: "Access Token hash value",
+ c_hash: "Authorization Code hash value",
+ s_hash: "State hash value",
+ nonce: "Unique value associating request to token",
+ auth_time: "Time when authentication occurred",
+ amr: "Authentication methods array",
+ acr: "Authentication context class",
+};
diff --git a/src/features/decoder/services/decoder.store.ts b/src/features/decoder/services/decoder.store.ts
new file mode 100644
index 00000000..f0aef337
--- /dev/null
+++ b/src/features/decoder/services/decoder.store.ts
@@ -0,0 +1,212 @@
+import { create } from "zustand";
+import { EncodingValues } from "@/features/common/values/encoding.values";
+import {
+ DefaultTokensValues,
+ DefaultTokenWithSecretModel,
+} from "@/features/common/values/default-tokens.values";
+import { TokenDecoderService } from "@/features/decoder/services/token-decoder.service";
+import { subscribeWithSelector } from "zustand/middleware";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import { JwtSignatureStatusValues } from "@/features/common/values/jwt-signature-status.values";
+import { DecoderInputsModel } from "@/features/debugger/models/decoder-inputs.model";
+
+export enum HashWarningVisibilityValues {
+ VISIBLE = "VISIBLE",
+ HIDDEN = "HIDDEN",
+}
+
+export const DEFAULT_ALG_TYPE = "HS";
+export const DEFAULT_ALG_SIZE = 256;
+export const DEFAULT_ALG = `${DEFAULT_ALG_TYPE}${DEFAULT_ALG_SIZE}`;
+
+export const DEFAULT_JWT = DefaultTokensValues[
+ DEFAULT_ALG
+] as DefaultTokenWithSecretModel;
+
+export const DEFAULT_HEADER = {
+ alg: "HS256",
+ typ: "JWT",
+};
+
+export const DEFAULT_DECODED_HEADER = JSON.stringify(DEFAULT_HEADER, null, 2);
+
+export const DEFAULT_PAYLOAD = {
+ sub: "1234567890",
+ name: "John Doe",
+ admin: true,
+ iat: 1516239022,
+};
+
+export const DEFAULT_DECODED_PAYLOAD = JSON.stringify(DEFAULT_PAYLOAD, null, 2);
+
+export type DecoderStoreState = {
+ jwt: string;
+ alg: string;
+ symmetricSecretKey: string;
+ symmetricSecretKeyEncoding: EncodingValues;
+ asymmetricPublicKey: string;
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues;
+ decodedHeader: string;
+ decodedPayload: string;
+ signatureStatus: JwtSignatureStatusValues;
+ controlledSymmetricSecretKey: {
+ id: number;
+ value: string;
+ encoding: EncodingValues;
+ } | null;
+ controlledAsymmetricPublicKey: {
+ id: number;
+ value: string;
+ format: AsymmetricKeyFormatValues;
+ } | null;
+ decodingErrors: string[] | null;
+ signatureWarnings: string[] | null;
+ verificationInputErrors: string[] | null;
+ useHashWarningVisibility: HashWarningVisibilityValues;
+};
+
+type DecoderStoreActions = {
+ selectDecodingExample: (algorithm: string) => void;
+ handleJwtChange: (newToken: string) => void;
+ handleSymmetricSecretKeyChange: (newSymmetricSecretKey: string) => void;
+ handleSymmetricSecretKeyEncodingChange: (
+ newSymmetricSecretKey: EncodingValues,
+ ) => void;
+ handleAsymmetricPublicKeyChange: (newAsymmetricPublicKey: string) => void;
+ handleAsymmetricPublicKeyFormatChange: (
+ newFormat: AsymmetricKeyFormatValues,
+ ) => void;
+ resetControlledSymmetricSecretKey: () => void;
+ resetControlledAsymmetricPublicKey: () => void;
+ showUseHashWarning: () => void;
+ hideUseHashWarning: () => void;
+ loadDecoderInputs: (params: DecoderInputsModel) => void;
+};
+
+export const initialState: DecoderStoreState = {
+ jwt: DEFAULT_JWT.token,
+ alg: DEFAULT_ALG,
+ symmetricSecretKey: DEFAULT_JWT.secret,
+ symmetricSecretKeyEncoding: EncodingValues.UTF8,
+ asymmetricPublicKey: "",
+ asymmetricPublicKeyFormat: AsymmetricKeyFormatValues.PEM,
+ decodedHeader: DEFAULT_DECODED_HEADER,
+ decodedPayload: DEFAULT_DECODED_PAYLOAD,
+ signatureStatus: JwtSignatureStatusValues.VALID,
+ signatureWarnings: null,
+ decodingErrors: null,
+ controlledSymmetricSecretKey: null,
+ controlledAsymmetricPublicKey: null,
+ verificationInputErrors: null,
+ useHashWarningVisibility: HashWarningVisibilityValues.HIDDEN,
+};
+
+export type DecoderStore = DecoderStoreState & DecoderStoreActions;
+
+export const useDecoderStore = create
+
+
+
+
+ );
+};
diff --git a/src/features/encoder/components/token-encoder-encoding-format-picker.module.scss b/src/features/encoder/components/token-encoder-encoding-format-picker.module.scss
new file mode 100644
index 00000000..1429bdc1
--- /dev/null
+++ b/src/features/encoder/components/token-encoder-encoding-format-picker.module.scss
@@ -0,0 +1,70 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ align-self: unset;
+ }
+}
+
+.label {
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.1px;
+}
+
+.select {
+ display: flex;
+ padding: 0.125rem 1.75rem 0.125rem 0.875rem;
+ align-items: center;
+ gap: 0.75rem;
+ align-self: stretch;
+
+ border-radius: 0.25rem;
+ border: 1px solid var(--color_border_button);
+
+ color: var(--color_fg_default);
+ font-variant-numeric: slashed-zero;
+ font-feature-settings:
+ "clig" off,
+ "liga" off;
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ letter-spacing: 0.2px;
+ appearance: none;
+
+ z-index: 2;
+
+ background-color: transparent;
+}
+
+.icon {
+ position: absolute;
+ top: 50%;
+ right: 0.5rem;
+ transform: translateY(-40%);
+
+ svg {
+ height: 1rem;
+ width: 1rem;
+
+ path {
+ fill: var(--color_fg_default);
+ }
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ transform: translateY(-45%);
+
+ svg {
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+}
diff --git a/src/features/encoder/components/token-encoder-input.component.tsx b/src/features/encoder/components/token-encoder-input.component.tsx
new file mode 100644
index 00000000..e3300551
--- /dev/null
+++ b/src/features/encoder/components/token-encoder-input.component.tsx
@@ -0,0 +1,338 @@
+"use client";
+
+import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
+import { HeaderEditorComponent } from "@/features/encoder/components/header-editor.component";
+import {
+ CardComponent,
+ CardComponentProps,
+} from "@/features/common/components/card/card.component";
+import { PayloadEditorComponent } from "@/features/encoder/components/payload-editor.component";
+import { TokenEncoderEncodingFormatPickerComponent } from "@/features/encoder/components/token-encoder-encoding-format-picker.component";
+import { TokenEncoderKeyFormatPickerComponent } from "@/features/encoder/components/token-encoder-key-format-picker.component";
+import { SigningSecretEditorComponent } from "@/features/encoder/components/signing-secret-editor.component";
+import { SigningPrivateKeyEditorComponent } from "@/features/encoder/components/signing-private-key-editor.component";
+import { CardTabsComponent } from "@/features/common/components/card-tabs/card-tabs.component";
+import styles from "./token-encoder-input.module.scss";
+import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import {
+ DEFAULT_HEADER,
+ DEFAULT_PAYLOAD,
+ DEFAULT_SYMMETRIC_SECRET,
+} from "@/features/encoder/services/encoder.config";
+import {
+ isDigitalSignatureAlg,
+ isHmacAlg,
+ isNoneAlg,
+} from "@/features/common/services/jwt.service";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+import { CardToolbarComponent } from "@/features/common/components/card-toolbar/card-toolbar.component";
+import { CardToolbarClearButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component";
+
+type HeaderInputComponentProps = {
+ languageCode: string;
+ dictionary: HomeDictionaryModel["encoder"];
+};
+
+export const TokenEncoderInputComponent: React.FC<
+ HeaderInputComponentProps
+> = ({ languageCode, dictionary }) => {
+ const alg$ = useEncoderStore((state) => state.alg);
+ const headerErrors$ = useEncoderStore((state) =>
+ state.headerErrors && state.headerErrors.length > 0
+ ? state.headerErrors
+ : null,
+ );
+ const headerWarnings$ = useEncoderStore((state) =>
+ state.headerWarnings && state.headerWarnings.length > 0
+ ? state.headerWarnings
+ : null,
+ );
+ const payloadErrors$ = useEncoderStore((state) =>
+ state.payloadErrors && state.payloadErrors.length > 0
+ ? state.payloadErrors
+ : null,
+ );
+ const signingErrors$ = useEncoderStore((state) =>
+ state.signingErrors && state.signingErrors.length > 0
+ ? state.signingErrors
+ : null,
+ );
+ const controlledHeader$ = useEncoderStore((state) => state.controlledHeader);
+ const controlledPayload$ = useEncoderStore(
+ (state) => state.controlledPayload,
+ );
+ const controlledSymmetricSecretKey$ = useEncoderStore(
+ (state) => state.controlledSymmetricSecretKey,
+ );
+ const controlledAsymmetricPrivateKey$ = useEncoderStore(
+ (state) => state.controlledAsymmetricPrivateKey,
+ );
+
+ const [header, setHeader] = useState
+ {cards.map((props) => (
+
+
+
+
+ );
+};
diff --git a/src/features/encoder/components/token-encoder-input.module.scss b/src/features/encoder/components/token-encoder-input.module.scss
new file mode 100644
index 00000000..7ddf3a0d
--- /dev/null
+++ b/src/features/encoder/components/token-encoder-input.module.scss
@@ -0,0 +1,26 @@
+@use "@/libs/theme/styles/variables" as *;
+@use "@/libs/theme/styles/mixins" as *;
+
+.encoderCards {
+ display: none;
+
+ @media #{$breakpoint-dimension-sm} {
+ display: grid;
+ grid-column: span 6;
+ grid-template-columns: repeat(6, 1fr);
+ width: 100%;
+ gap: 1rem;
+ }
+}
+
+.encoderCardTabs {
+ grid-column: span 6;
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ width: 100%;
+ gap: 1rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ display: none;
+ }
+}
diff --git a/src/features/encoder/components/token-encoder-key-format-picker.component.tsx b/src/features/encoder/components/token-encoder-key-format-picker.component.tsx
new file mode 100644
index 00000000..523bcfc9
--- /dev/null
+++ b/src/features/encoder/components/token-encoder-key-format-picker.component.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import styles from "./token-encoder-key-format-picker.module.scss";
+import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import { getPickersUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-key-format.values";
+import { DebuggerPickerComponent } from "@/features/common/components/debugger-picker/debugger-picker.component";
+
+interface TokenEncoderKeyFormatPickerComponentProps {
+ languageCode: string;
+}
+
+export const TokenEncoderKeyFormatPickerComponent: React.FC<
+ TokenEncoderKeyFormatPickerComponentProps
+> = ({ languageCode }) => {
+ const dictionary = getPickersUiDictionary(languageCode);
+
+ const handlePrivateKeyFormatChange = useEncoderStore(
+ (state) => state.handleAsymmetricPrivateKeyFormatChange,
+ );
+ const controlledAsymmetricPrivateKey$ = useEncoderStore(
+ (state) => state.controlledAsymmetricPrivateKey,
+ );
+
+ const [keyFormat, setKeyFormat] = useState
+
+ );
+};
diff --git a/src/features/encoder/components/token-encoder-key-format-picker.module.scss b/src/features/encoder/components/token-encoder-key-format-picker.module.scss
new file mode 100644
index 00000000..1429bdc1
--- /dev/null
+++ b/src/features/encoder/components/token-encoder-key-format-picker.module.scss
@@ -0,0 +1,70 @@
+@use "@/libs/theme/styles/variables" as *;
+
+.container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ @media #{$breakpoint-dimension-sm} {
+ align-self: unset;
+ }
+}
+
+.label {
+ color: var(--color_fg_default);
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ font-weight: 500;
+ letter-spacing: 0.1px;
+}
+
+.select {
+ display: flex;
+ padding: 0.125rem 1.75rem 0.125rem 0.875rem;
+ align-items: center;
+ gap: 0.75rem;
+ align-self: stretch;
+
+ border-radius: 0.25rem;
+ border: 1px solid var(--color_border_button);
+
+ color: var(--color_fg_default);
+ font-variant-numeric: slashed-zero;
+ font-feature-settings:
+ "clig" off,
+ "liga" off;
+ font-size: 0.875rem;
+ line-height: 1.375rem;
+ letter-spacing: 0.2px;
+ appearance: none;
+
+ z-index: 2;
+
+ background-color: transparent;
+}
+
+.icon {
+ position: absolute;
+ top: 50%;
+ right: 0.5rem;
+ transform: translateY(-40%);
+
+ svg {
+ height: 1rem;
+ width: 1rem;
+
+ path {
+ fill: var(--color_fg_default);
+ }
+ }
+
+ @media #{$breakpoint-dimension-sm} {
+ transform: translateY(-45%);
+
+ svg {
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+}
diff --git a/src/features/encoder/components/token-encoder.component.tsx b/src/features/encoder/components/token-encoder.component.tsx
new file mode 100644
index 00000000..d2a045bf
--- /dev/null
+++ b/src/features/encoder/components/token-encoder.component.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { EncodedJwtOutputComponent } from "@/features/encoder/components/encoded-jwt-output.component";
+import { TokenEncoderInputComponent } from "@/features/encoder/components/token-encoder-input.component";
+import { useEncoderStore } from "@/features/encoder/services/encoder.store";
+import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
+import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
+import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-category.values";
+import { WidgetComponent } from "@/features/common/components/widget/widget/widget.component";
+import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
+import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+
+interface TokenEncoderComponentProps {
+ languageCode: string;
+ dictionary: HomeDictionaryModel["encoder"];
+ headlineConfig: { isVisible: boolean; actions?: React.ReactNode };
+}
+
+export const TokenEncoderComponent: React.FC
+
+ + {dictionary.libraries.title} +
+
+
+ + {dictionary.libraries.description} +
+ + {dictionary.libraries.ctaButton.label} + +
+
+ + {dictionary.assets.badges.title} +
+
+
+
+
+
+
+
+
+ + {dictionary.assets.logotype.title} +
+
+
+
+
+
+
+ {copy}
++ {dictionary.title} +
+{code} {label}
+ "); + + return ( +
+
+ );
+};
diff --git a/src/features/libraries/components/library-hero/library-hero.component.tsx b/src/features/libraries/components/library-hero/library-hero.component.tsx
new file mode 100644
index 00000000..fccdde2a
--- /dev/null
+++ b/src/features/libraries/components/library-hero/library-hero.component.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import React, { useMemo } from "react";
+import styles from "./library-hero.module.scss";
+import { BoxComponent } from "@/features/common/components/box/box.component";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { LIBRARIES_FILTER_QUERY_PARAM_KEY } from "@/libs/config/project.constants";
+import { clsx } from "clsx";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
+import { LibrariesDictionaryModel } from "@/features/localization/models/libraries-dictionary.model";
+import { DebuggerPickerComponent } from "@/features/common/components/debugger-picker/debugger-picker.component";
+
+interface LibraryHeroComponentProps {
+ languageCode: string;
+ query: string;
+ categoryOptions: { id: string; name: string }[];
+ dictionary: LibrariesDictionaryModel;
+}
+
+export const LibraryHeroComponent: React.FC
+
+
+
+ -
+
-
+
+ {authorUrl ? (
+
+
+ {minimumVersion && (
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {support && (
+
+
+
+ )}
+
+
+ {`${dictionary.minimumVersion.label} ${minimumVersion}`}
+
+ {dictionary.minimumVersion.resource.label}
+
+
+ )}
+
+ {command}
+
+
+
+ + {dictionary.title} +
+
+ {dictionary.filterPicker.label}
+
+
+ option.value === query)[0]
+ }
+ handleSelection={handleSelection}
+ placeholder={null}
+ minWidth="6.125rem"
+ />
+
+
+ {categories.map((category) => {
+ return category.libs.map((library, index) => {
+ return (
+
+ #token=[jwt] in the URL to preload a token instead
+ of a query parameter, such ?token=[jwt].
+
+ );
+};
+
+export const enWarningsDictionary: WarningsUiDictionaryModel = {
+ useHash: {
+ Modal: CookiesModal,
+ },
+};
diff --git a/src/features/localization/dictionaries/ui/warnings/ja.tsx b/src/features/localization/dictionaries/ui/warnings/ja.tsx
new file mode 100644
index 00000000..5f255668
--- /dev/null
+++ b/src/features/localization/dictionaries/ui/warnings/ja.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { WarningsUiDictionaryModel } from "@/features/localization/models/ui/warnings-ui-dictionary.model";
+
+const CookiesModal: React.FC = () => {
+ return (
+
+ ?token=[jwt]のようなクエリ文字列の代わりにハッシュ
+ #token=[jwt]
+ をURLに追加し、トークンをプリロードしてください。
+
+ );
+};
+
+export const jaWarningsDictionary: WarningsUiDictionaryModel = {
+ useHash: {
+ Modal: CookiesModal,
+ },
+};
diff --git a/src/features/localization/localization.config.ts b/src/features/localization/localization.config.ts
new file mode 100644
index 00000000..27821ffc
--- /dev/null
+++ b/src/features/localization/localization.config.ts
@@ -0,0 +1,11 @@
+export const DEFAULT_LANGUAGE_CODE = "en";
+
+export const PREFERRED_LANGUAGE_COOKIE_KEY = "preferred_language";
+
+const withJapanese = process.env.NEXT_PUBLIC_WITH_JAPANESE === "enabled";
+
+export const LANGUAGE_CODES = ["en"];
+
+if (withJapanese) {
+ LANGUAGE_CODES.push("ja");
+}
diff --git a/src/features/localization/models/auth0-dictionary.model.ts b/src/features/localization/models/auth0-dictionary.model.ts
new file mode 100644
index 00000000..9093328e
--- /dev/null
+++ b/src/features/localization/models/auth0-dictionary.model.ts
@@ -0,0 +1,19 @@
+import { LinkMetadataModel } from "@/features/common/models/link-metadata.model";
+import { ImageMetadataModel } from "@/features/common/models/image-metadata.model";
+
+export interface Auth0DictionaryModel {
+ banner: {
+ title: string;
+ description: string;
+ image: ImageMetadataModel;
+ ctaButton: LinkMetadataModel;
+ };
+ ebook: {
+ title: string;
+ description: string;
+ ctaButton: {
+ url: string;
+ label: string;
+ };
+ };
+}
diff --git a/src/features/localization/models/common-dictionary.model.ts b/src/features/localization/models/common-dictionary.model.ts
new file mode 100644
index 00000000..0668e535
--- /dev/null
+++ b/src/features/localization/models/common-dictionary.model.ts
@@ -0,0 +1,11 @@
+export interface CommonDictionaryModel {
+ openGraph: {
+ siteName: string;
+ locale: string;
+ type: string;
+ images: { url: string; width: number; height: number }[];
+ };
+ alternates: {
+ canonical: string;
+ };
+}
diff --git a/src/features/localization/models/component-dictionary.model.ts b/src/features/localization/models/component-dictionary.model.ts
new file mode 100644
index 00000000..a4d9d301
--- /dev/null
+++ b/src/features/localization/models/component-dictionary.model.ts
@@ -0,0 +1,5 @@
+import React from "react";
+
+export interface ComponentDictionaryModel {
+ ebookAd: React.ReactNode;
+}
diff --git a/src/features/localization/models/decoder-dictionary.model.ts b/src/features/localization/models/decoder-dictionary.model.ts
new file mode 100644
index 00000000..ade14593
--- /dev/null
+++ b/src/features/localization/models/decoder-dictionary.model.ts
@@ -0,0 +1,63 @@
+export interface DecoderDictionaryModel {
+ title: string;
+ compactTitle: string;
+ description: string;
+ syncButton: {
+ label: string;
+ compactLabel: string;
+ };
+ jwtEditor: {
+ headline: string;
+ label: string;
+ title: string;
+ compactTitle: string;
+ successMessage: string;
+ };
+ exampleGenerator: {
+ label: string;
+ };
+ decodedHeader: {
+ title: string;
+ tabs: {
+ json: {
+ label: string;
+ };
+ claims: {
+ label: string;
+ };
+ };
+ };
+ decodedPayload: {
+ title: string;
+ tabs: {
+ json: {
+ label: string;
+ };
+ claims: {
+ label: string;
+ };
+ };
+ };
+ signatureVerification: {
+ title: string;
+ subtitle: string;
+ description: {
+ secret: string;
+ publicKey: string;
+ };
+ editor: {
+ title: {
+ secret: string;
+ publicKey: string;
+ };
+ successMessage: {
+ secret: string;
+ publicKey: string;
+ };
+ placeholder: {
+ secret: string;
+ publicKey: string;
+ };
+ };
+ };
+}
diff --git a/src/features/localization/models/encoder-dictionary.model.ts b/src/features/localization/models/encoder-dictionary.model.ts
new file mode 100644
index 00000000..cafec528
--- /dev/null
+++ b/src/features/localization/models/encoder-dictionary.model.ts
@@ -0,0 +1,46 @@
+export interface EncoderDictionaryModel {
+ title: string;
+ compactTitle: string;
+ description: string;
+ syncButton: {
+ label: string;
+ compactLabel: string;
+ };
+ unsyncButton: {
+ label: string;
+ compactLabel: string;
+ };
+ exampleGenerator: {
+ label: string;
+ };
+ headerEditor: {
+ title: string;
+ compactTitle: string;
+ successMessage: string;
+ };
+ payloadEditor: {
+ title: string;
+ compactTitle: string;
+ successMessage: string;
+ };
+ signatureEditor: {
+ title: {
+ secret: string;
+ privateKey: string;
+ };
+ compactTitle: {
+ secret: string;
+ privateKey: string;
+ };
+ successMessage: {
+ secret: string;
+ privateKey: string;
+ };
+ placeholder: {
+ privateKey: string;
+ };
+ };
+ encodedJwt: {
+ title: string;
+ };
+}
diff --git a/src/features/localization/models/home-dictionary.model.ts b/src/features/localization/models/home-dictionary.model.ts
new file mode 100644
index 00000000..8b120ba9
--- /dev/null
+++ b/src/features/localization/models/home-dictionary.model.ts
@@ -0,0 +1,31 @@
+import { PageMetadataModel } from "@/features/common/models/page-metadata.model";
+import { HeroMetadataModel } from "@/features/common/models/hero-metadata.model";
+import { EncoderDictionaryModel } from "@/features/localization/models/encoder-dictionary.model";
+import { DecoderDictionaryModel } from "@/features/localization/models/decoder-dictionary.model";
+import { LinkMetadataModel } from "@/features/common/models/link-metadata.model";
+import { ImageMetadataModel } from "@/features/common/models/image-metadata.model";
+
+export interface HomeDictionaryModel {
+ metadata: PageMetadataModel;
+ hero: HeroMetadataModel;
+ info: {
+ summary: string;
+ description: string;
+ ctaButton?: LinkMetadataModel;
+ secondaryCtaButton?: LinkMetadataModel;
+ image?: ImageMetadataModel;
+ resources: {
+ spec: {
+ name: string;
+ link: string;
+ };
+ };
+ };
+ warning: {
+ summary: string;
+ title: string;
+ description: string;
+ };
+ decoder: DecoderDictionaryModel;
+ encoder: EncoderDictionaryModel;
+}
diff --git a/src/features/localization/models/images-dictionary.model.ts b/src/features/localization/models/images-dictionary.model.ts
new file mode 100644
index 00000000..392e4e75
--- /dev/null
+++ b/src/features/localization/models/images-dictionary.model.ts
@@ -0,0 +1,8 @@
+import { StaticImageMetadataModel } from "@/features/common/models/static-image-metadata.model";
+
+export interface ImagesDictionaryModel {
+ logos: {
+ site: StaticImageMetadataModel;
+ auth0: StaticImageMetadataModel;
+ };
+}
diff --git a/src/features/localization/models/introduction-dictionary.model.ts b/src/features/localization/models/introduction-dictionary.model.ts
new file mode 100644
index 00000000..0d258092
--- /dev/null
+++ b/src/features/localization/models/introduction-dictionary.model.ts
@@ -0,0 +1,7 @@
+import { PageMetadataModel } from "@/features/common/models/page-metadata.model";
+import { HeroMetadataModel } from "@/features/common/models/hero-metadata.model";
+
+export interface IntroductionDictionaryModel {
+ metadata: PageMetadataModel;
+ hero: HeroMetadataModel;
+}
diff --git a/src/features/localization/models/jwt-dictionary.model.ts b/src/features/localization/models/jwt-dictionary.model.ts
new file mode 100644
index 00000000..6fc6f7d7
--- /dev/null
+++ b/src/features/localization/models/jwt-dictionary.model.ts
@@ -0,0 +1,26 @@
+import { LinkMetadataModel } from "@/features/common/models/link-metadata.model";
+import { StaticImageMetadataModel } from "@/features/common/models/static-image-metadata.model";
+
+export interface JwtDictionaryModel {
+ libraries: {
+ title: string;
+ description: string;
+ ctaButton: LinkMetadataModel;
+ };
+ assets: {
+ badges: {
+ title: string;
+ images: {
+ viewOn: StaticImageMetadataModel;
+ compatible: StaticImageMetadataModel;
+ };
+ };
+ logotype: {
+ title: string;
+ images: {
+ icon: StaticImageMetadataModel;
+ iconWithLabel: StaticImageMetadataModel;
+ };
+ };
+ };
+}
diff --git a/src/features/localization/models/layout-dictionary.model.ts b/src/features/localization/models/layout-dictionary.model.ts
new file mode 100644
index 00000000..df259944
--- /dev/null
+++ b/src/features/localization/models/layout-dictionary.model.ts
@@ -0,0 +1,88 @@
+import { LinkMetadataModel } from "@/features/common/models/link-metadata.model";
+import { ImageMetadataModel } from "@/features/common/models/image-metadata.model";
+import { ThemeModel } from "@/features/common/models/theme.model";
+import { UiLanguageModel } from "@/features/common/models/ui-language.model";
+
+export interface RibbonPickerModel the CSS class "CodeMirror-activeline",
-// and gives its background
the class "CodeMirror-activeline-background".
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
- var WRAP_CLASS = "CodeMirror-activeline";
- var BACK_CLASS = "CodeMirror-activeline-background";
-
- CodeMirror.defineOption("styleActiveLine", false, function(cm, val, old) {
- var prev = old && old != CodeMirror.Init;
- if (val && !prev) {
- cm.state.activeLines = [];
- updateActiveLines(cm, cm.listSelections());
- cm.on("beforeSelectionChange", selectionChange);
- } else if (!val && prev) {
- cm.off("beforeSelectionChange", selectionChange);
- clearActiveLines(cm);
- delete cm.state.activeLines;
- }
- });
-
- function clearActiveLines(cm) {
- for (var i = 0; i < cm.state.activeLines.length; i++) {
- cm.removeLineClass(cm.state.activeLines[i], "wrap", WRAP_CLASS);
- cm.removeLineClass(cm.state.activeLines[i], "background", BACK_CLASS);
- }
- }
-
- function sameArray(a, b) {
- if (a.length != b.length) return false;
- for (var i = 0; i < a.length; i++)
- if (a[i] != b[i]) return false;
- return true;
- }
-
- function updateActiveLines(cm, ranges) {
- var active = [];
- for (var i = 0; i < ranges.length; i++) {
- var line = cm.getLineHandleVisualStart(ranges[i].head.line);
- if (active[active.length - 1] != line) active.push(line);
- }
- if (sameArray(cm.state.activeLines, active)) return;
- cm.operation(function() {
- clearActiveLines(cm);
- for (var i = 0; i < active.length; i++) {
- cm.addLineClass(active[i], "wrap", WRAP_CLASS);
- cm.addLineClass(active[i], "background", BACK_CLASS);
- }
- cm.state.activeLines = active;
- });
- }
-
- function selectionChange(cm, sel) {
- updateActiveLines(cm, sel.ranges);
- }
-});
diff --git a/vendor/codemirror/addon/selection/mark-selection.js b/vendor/codemirror/addon/selection/mark-selection.js
deleted file mode 100644
index ae0d3931..00000000
--- a/vendor/codemirror/addon/selection/mark-selection.js
+++ /dev/null
@@ -1,115 +0,0 @@
-// Because sometimes you need to mark the selected *text*.
-//
-// Adds an option 'styleSelectedText' which, when enabled, gives
-// selected text the CSS class given as option value, or
-// "CodeMirror-selectedtext" when the value is not a string.
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- CodeMirror.defineOption("styleSelectedText", false, function(cm, val, old) {
- var prev = old && old != CodeMirror.Init;
- if (val && !prev) {
- cm.state.markedSelection = [];
- cm.state.markedSelectionStyle = typeof val == "string" ? val : "CodeMirror-selectedtext";
- reset(cm);
- cm.on("cursorActivity", onCursorActivity);
- cm.on("change", onChange);
- } else if (!val && prev) {
- cm.off("cursorActivity", onCursorActivity);
- cm.off("change", onChange);
- clear(cm);
- cm.state.markedSelection = cm.state.markedSelectionStyle = null;
- }
- });
-
- function onCursorActivity(cm) {
- cm.operation(function() { update(cm); });
- }
-
- function onChange(cm) {
- if (cm.state.markedSelection.length)
- cm.operation(function() { clear(cm); });
- }
-
- var CHUNK_SIZE = 8;
- var Pos = CodeMirror.Pos;
- var cmp = CodeMirror.cmpPos;
-
- function coverRange(cm, from, to, addAt) {
- if (cmp(from, to) == 0) return;
- var array = cm.state.markedSelection;
- var cls = cm.state.markedSelectionStyle;
- for (var line = from.line;;) {
- var start = line == from.line ? from : Pos(line, 0);
- var endLine = line + CHUNK_SIZE, atEnd = endLine >= to.line;
- var end = atEnd ? to : Pos(endLine, 0);
- var mark = cm.markText(start, end, {className: cls});
- if (addAt == null) array.push(mark);
- else array.splice(addAt++, 0, mark);
- if (atEnd) break;
- line = endLine;
- }
- }
-
- function clear(cm) {
- var array = cm.state.markedSelection;
- for (var i = 0; i < array.length; ++i) array[i].clear();
- array.length = 0;
- }
-
- function reset(cm) {
- clear(cm);
- var ranges = cm.listSelections();
- for (var i = 0; i < ranges.length; i++)
- coverRange(cm, ranges[i].from(), ranges[i].to());
- }
-
- function update(cm) {
- if (!cm.somethingSelected()) return clear(cm);
- if (cm.listSelections().length > 1) return reset(cm);
-
- var from = cm.getCursor("start"), to = cm.getCursor("end");
-
- var array = cm.state.markedSelection;
- if (!array.length) return coverRange(cm, from, to);
-
- var coverStart = array[0].find(), coverEnd = array[array.length - 1].find();
- if (!coverStart || !coverEnd || to.line - from.line < CHUNK_SIZE ||
- cmp(from, coverEnd.to) >= 0 || cmp(to, coverStart.from) <= 0)
- return reset(cm);
-
- while (cmp(from, coverStart.from) > 0) {
- array.shift().clear();
- coverStart = array[0].find();
- }
- if (cmp(from, coverStart.from) < 0) {
- if (coverStart.to.line - from.line < CHUNK_SIZE) {
- array.shift().clear();
- coverRange(cm, from, coverStart.to, 0);
- } else {
- coverRange(cm, from, coverStart.from, 0);
- }
- }
-
- while (cmp(to, coverEnd.to) < 0) {
- array.pop().clear();
- coverEnd = array[array.length - 1].find();
- }
- if (cmp(to, coverEnd.to) > 0) {
- if (to.line - coverEnd.from.line < CHUNK_SIZE) {
- array.pop().clear();
- coverRange(cm, coverEnd.from, to);
- } else {
- coverRange(cm, coverEnd.to, to);
- }
- }
- }
-});
diff --git a/vendor/codemirror/addon/tern/tern.css b/vendor/codemirror/addon/tern/tern.css
deleted file mode 100644
index eacc2f05..00000000
--- a/vendor/codemirror/addon/tern/tern.css
+++ /dev/null
@@ -1,85 +0,0 @@
-.CodeMirror-Tern-completion {
- padding-left: 22px;
- position: relative;
-}
-.CodeMirror-Tern-completion:before {
- position: absolute;
- left: 2px;
- bottom: 2px;
- border-radius: 50%;
- font-size: 12px;
- font-weight: bold;
- height: 15px;
- width: 15px;
- line-height: 16px;
- text-align: center;
- color: white;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-.CodeMirror-Tern-completion-unknown:before {
- content: "?";
- background: #4bb;
-}
-.CodeMirror-Tern-completion-object:before {
- content: "O";
- background: #77c;
-}
-.CodeMirror-Tern-completion-fn:before {
- content: "F";
- background: #7c7;
-}
-.CodeMirror-Tern-completion-array:before {
- content: "A";
- background: #c66;
-}
-.CodeMirror-Tern-completion-number:before {
- content: "1";
- background: #999;
-}
-.CodeMirror-Tern-completion-string:before {
- content: "S";
- background: #999;
-}
-.CodeMirror-Tern-completion-bool:before {
- content: "B";
- background: #999;
-}
-
-.CodeMirror-Tern-completion-guess {
- color: #999;
-}
-
-.CodeMirror-Tern-tooltip {
- border: 1px solid silver;
- border-radius: 3px;
- color: #444;
- padding: 2px 5px;
- font-size: 90%;
- font-family: monospace;
- background-color: white;
- white-space: pre-wrap;
-
- max-width: 40em;
- position: absolute;
- z-index: 10;
- -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
- -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
- box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-
- transition: opacity 1s;
- -moz-transition: opacity 1s;
- -webkit-transition: opacity 1s;
- -o-transition: opacity 1s;
- -ms-transition: opacity 1s;
-}
-
-.CodeMirror-Tern-hint-doc {
- max-width: 25em;
-}
-
-.CodeMirror-Tern-fname { color: black; }
-.CodeMirror-Tern-farg { color: #70a; }
-.CodeMirror-Tern-farg-current { text-decoration: underline; }
-.CodeMirror-Tern-type { color: #07c; }
-.CodeMirror-Tern-fhint-guess { opacity: .7; }
diff --git a/vendor/codemirror/addon/tern/tern.js b/vendor/codemirror/addon/tern/tern.js
deleted file mode 100644
index 6fbd10c5..00000000
--- a/vendor/codemirror/addon/tern/tern.js
+++ /dev/null
@@ -1,660 +0,0 @@
-// Glue code between CodeMirror and Tern.
-//
-// Create a CodeMirror.TernServer to wrap an actual Tern server,
-// register open documents (CodeMirror.Doc instances) with it, and
-// call its methods to activate the assisting functions that Tern
-// provides.
-//
-// Options supported (all optional):
-// * defs: An array of JSON definition data structures.
-// * plugins: An object mapping plugin names to configuration
-// options.
-// * getFile: A function(name, c) that can be used to access files in
-// the project that haven't been loaded yet. Simply do c(null) to
-// indicate that a file is not available.
-// * fileFilter: A function(value, docName, doc) that will be applied
-// to documents before passing them on to Tern.
-// * switchToDoc: A function(name) that should, when providing a
-// multi-file view, switch the view or focus to the named file.
-// * showError: A function(editor, message) that can be used to
-// override the way errors are displayed.
-// * completionTip: Customize the content in tooltips for completions.
-// Is passed a single argument—the completion's data as returned by
-// Tern—and may return a string, DOM node, or null to indicate that
-// no tip should be shown. By default the docstring is shown.
-// * typeTip: Like completionTip, but for the tooltips shown for type
-// queries.
-// * responseFilter: A function(doc, query, request, error, data) that
-// will be applied to the Tern responses before treating them
-//
-//
-// It is possible to run the Tern server in a web worker by specifying
-// these additional options:
-// * useWorker: Set to true to enable web worker mode. You'll probably
-// want to feature detect the actual value you use here, for example
-// !!window.Worker.
-// * workerScript: The main script of the worker. Point this to
-// wherever you are hosting worker.js from this directory.
-// * workerDeps: An array of paths pointing (relative to workerScript)
-// to the Acorn and Tern libraries and any Tern plugins you want to
-// load. Or, if you minified those into a single script and included
-// them in the workerScript, simply leave this undefined.
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
- // declare global: tern
-
- CodeMirror.TernServer = function(options) {
- var self = this;
- this.options = options || {};
- var plugins = this.options.plugins || (this.options.plugins = {});
- if (!plugins.doc_comment) plugins.doc_comment = true;
- if (this.options.useWorker) {
- this.server = new WorkerServer(this);
- } else {
- this.server = new tern.Server({
- getFile: function(name, c) { return getFile(self, name, c); },
- async: true,
- defs: this.options.defs || [],
- plugins: plugins
- });
- }
- this.docs = Object.create(null);
- this.trackChange = function(doc, change) { trackChange(self, doc, change); };
-
- this.cachedArgHints = null;
- this.activeArgHints = null;
- this.jumpStack = [];
- };
-
- CodeMirror.TernServer.prototype = {
- addDoc: function(name, doc) {
- var data = {doc: doc, name: name, changed: null};
- this.server.addFile(name, docValue(this, data));
- CodeMirror.on(doc, "change", this.trackChange);
- return this.docs[name] = data;
- },
-
- delDoc: function(name) {
- var found = this.docs[name];
- if (!found) return;
- CodeMirror.off(found.doc, "change", this.trackChange);
- delete this.docs[name];
- this.server.delFile(name);
- },
-
- hideDoc: function(name) {
- closeArgHints(this);
- var found = this.docs[name];
- if (found && found.changed) sendDoc(this, found);
- },
-
- complete: function(cm) {
- var self = this;
- CodeMirror.showHint(cm, function(cm, c) { return hint(self, cm, c); }, {async: true});
- },
-
- getHint: function(cm, c) { return hint(this, cm, c); },
-
- showType: function(cm, pos) { showType(this, cm, pos); },
-
- updateArgHints: function(cm) { updateArgHints(this, cm); },
-
- jumpToDef: function(cm) { jumpToDef(this, cm); },
-
- jumpBack: function(cm) { jumpBack(this, cm); },
-
- rename: function(cm) { rename(this, cm); },
-
- selectName: function(cm) { selectName(this, cm); },
-
- request: function (cm, query, c, pos) {
- var self = this;
- var doc = findDoc(this, cm.getDoc());
- var request = buildRequest(this, doc, query, pos);
-
- this.server.request(request, function (error, data) {
- if (!error && self.options.responseFilter)
- data = self.options.responseFilter(doc, query, request, error, data);
- c(error, data);
- });
- }
- };
-
- var Pos = CodeMirror.Pos;
- var cls = "CodeMirror-Tern-";
- var bigDoc = 250;
-
- function getFile(ts, name, c) {
- var buf = ts.docs[name];
- if (buf)
- c(docValue(ts, buf));
- else if (ts.options.getFile)
- ts.options.getFile(name, c);
- else
- c(null);
- }
-
- function findDoc(ts, doc, name) {
- for (var n in ts.docs) {
- var cur = ts.docs[n];
- if (cur.doc == doc) return cur;
- }
- if (!name) for (var i = 0;; ++i) {
- n = "[doc" + (i || "") + "]";
- if (!ts.docs[n]) { name = n; break; }
- }
- return ts.addDoc(name, doc);
- }
-
- function trackChange(ts, doc, change) {
- var data = findDoc(ts, doc);
-
- var argHints = ts.cachedArgHints;
- if (argHints && argHints.doc == doc && cmpPos(argHints.start, change.to) <= 0)
- ts.cachedArgHints = null;
-
- var changed = data.changed;
- if (changed == null)
- data.changed = changed = {from: change.from.line, to: change.from.line};
- var end = change.from.line + (change.text.length - 1);
- if (change.from.line < changed.to) changed.to = changed.to - (change.to.line - end);
- if (end >= changed.to) changed.to = end + 1;
- if (changed.from > change.from.line) changed.from = change.from.line;
-
- if (doc.lineCount() > bigDoc && change.to - changed.from > 100) setTimeout(function() {
- if (data.changed && data.changed.to - data.changed.from > 100) sendDoc(ts, data);
- }, 200);
- }
-
- function sendDoc(ts, doc) {
- ts.server.request({files: [{type: "full", name: doc.name, text: docValue(ts, doc)}]}, function(error) {
- if (error) window.console.error(error);
- else doc.changed = null;
- });
- }
-
- // Completion
-
- function hint(ts, cm, c) {
- ts.request(cm, {type: "completions", types: true, docs: true, urls: true}, function(error, data) {
- if (error) return showError(ts, cm, error);
- var completions = [], after = "";
- var from = data.start, to = data.end;
- if (cm.getRange(Pos(from.line, from.ch - 2), from) == "[\"" &&
- cm.getRange(to, Pos(to.line, to.ch + 2)) != "\"]")
- after = "\"]";
-
- for (var i = 0; i < data.completions.length; ++i) {
- var completion = data.completions[i], className = typeToIcon(completion.type);
- if (data.guess) className += " " + cls + "guess";
- completions.push({text: completion.name + after,
- displayText: completion.name,
- className: className,
- data: completion});
- }
-
- var obj = {from: from, to: to, list: completions};
- var tooltip = null;
- CodeMirror.on(obj, "close", function() { remove(tooltip); });
- CodeMirror.on(obj, "update", function() { remove(tooltip); });
- CodeMirror.on(obj, "select", function(cur, node) {
- remove(tooltip);
- var content = ts.options.completionTip ? ts.options.completionTip(cur.data) : cur.data.doc;
- if (content) {
- tooltip = makeTooltip(node.parentNode.getBoundingClientRect().right + window.pageXOffset,
- node.getBoundingClientRect().top + window.pageYOffset, content);
- tooltip.className += " " + cls + "hint-doc";
- }
- });
- c(obj);
- });
- }
-
- function typeToIcon(type) {
- var suffix;
- if (type == "?") suffix = "unknown";
- else if (type == "number" || type == "string" || type == "bool") suffix = type;
- else if (/^fn\(/.test(type)) suffix = "fn";
- else if (/^\[/.test(type)) suffix = "array";
- else suffix = "object";
- return cls + "completion " + cls + "completion-" + suffix;
- }
-
- // Type queries
-
- function showType(ts, cm, pos) {
- ts.request(cm, "type", function(error, data) {
- if (error) return showError(ts, cm, error);
- if (ts.options.typeTip) {
- var tip = ts.options.typeTip(data);
- } else {
- var tip = elt("span", null, elt("strong", null, data.type || "not found"));
- if (data.doc)
- tip.appendChild(document.createTextNode(" — " + data.doc));
- if (data.url) {
- tip.appendChild(document.createTextNode(" "));
- tip.appendChild(elt("a", null, "[docs]")).href = data.url;
- }
- }
- tempTooltip(cm, tip);
- }, pos);
- }
-
- // Maintaining argument hints
-
- function updateArgHints(ts, cm) {
- closeArgHints(ts);
-
- if (cm.somethingSelected()) return;
- var state = cm.getTokenAt(cm.getCursor()).state;
- var inner = CodeMirror.innerMode(cm.getMode(), state);
- if (inner.mode.name != "javascript") return;
- var lex = inner.state.lexical;
- if (lex.info != "call") return;
-
- var ch, argPos = lex.pos || 0, tabSize = cm.getOption("tabSize");
- for (var line = cm.getCursor().line, e = Math.max(0, line - 9), found = false; line >= e; --line) {
- var str = cm.getLine(line), extra = 0;
- for (var pos = 0;;) {
- var tab = str.indexOf("\t", pos);
- if (tab == -1) break;
- extra += tabSize - (tab + extra) % tabSize - 1;
- pos = tab + 1;
- }
- ch = lex.column - extra;
- if (str.charAt(ch) == "(") {found = true; break;}
- }
- if (!found) return;
-
- var start = Pos(line, ch);
- var cache = ts.cachedArgHints;
- if (cache && cache.doc == cm.getDoc() && cmpPos(start, cache.start) == 0)
- return showArgHints(ts, cm, argPos);
-
- ts.request(cm, {type: "type", preferFunction: true, end: start}, function(error, data) {
- if (error || !data.type || !(/^fn\(/).test(data.type)) return;
- ts.cachedArgHints = {
- start: pos,
- type: parseFnType(data.type),
- name: data.exprName || data.name || "fn",
- guess: data.guess,
- doc: cm.getDoc()
- };
- showArgHints(ts, cm, argPos);
- });
- }
-
- function showArgHints(ts, cm, pos) {
- closeArgHints(ts);
-
- var cache = ts.cachedArgHints, tp = cache.type;
- var tip = elt("span", cache.guess ? cls + "fhint-guess" : null,
- elt("span", cls + "fname", cache.name), "(");
- for (var i = 0; i < tp.args.length; ++i) {
- if (i) tip.appendChild(document.createTextNode(", "));
- var arg = tp.args[i];
- tip.appendChild(elt("span", cls + "farg" + (i == pos ? " " + cls + "farg-current" : ""), arg.name || "?"));
- if (arg.type != "?") {
- tip.appendChild(document.createTextNode(":\u00a0"));
- tip.appendChild(elt("span", cls + "type", arg.type));
- }
- }
- tip.appendChild(document.createTextNode(tp.rettype ? ") ->\u00a0" : ")"));
- if (tp.rettype) tip.appendChild(elt("span", cls + "type", tp.rettype));
- var place = cm.cursorCoords(null, "page");
- ts.activeArgHints = makeTooltip(place.right + 1, place.bottom, tip);
- }
-
- function parseFnType(text) {
- var args = [], pos = 3;
-
- function skipMatching(upto) {
- var depth = 0, start = pos;
- for (;;) {
- var next = text.charAt(pos);
- if (upto.test(next) && !depth) return text.slice(start, pos);
- if (/[{\[\(]/.test(next)) ++depth;
- else if (/[}\]\)]/.test(next)) --depth;
- ++pos;
- }
- }
-
- // Parse arguments
- if (text.charAt(pos) != ")") for (;;) {
- var name = text.slice(pos).match(/^([^, \(\[\{]+): /);
- if (name) {
- pos += name[0].length;
- name = name[1];
- }
- args.push({name: name, type: skipMatching(/[\),]/)});
- if (text.charAt(pos) == ")") break;
- pos += 2;
- }
-
- var rettype = text.slice(pos).match(/^\) -> (.*)$/);
-
- return {args: args, rettype: rettype && rettype[1]};
- }
-
- // Moving to the definition of something
-
- function jumpToDef(ts, cm) {
- function inner(varName) {
- var req = {type: "definition", variable: varName || null};
- var doc = findDoc(ts, cm.getDoc());
- ts.server.request(buildRequest(ts, doc, req), function(error, data) {
- if (error) return showError(ts, cm, error);
- if (!data.file && data.url) { window.open(data.url); return; }
-
- if (data.file) {
- var localDoc = ts.docs[data.file], found;
- if (localDoc && (found = findContext(localDoc.doc, data))) {
- ts.jumpStack.push({file: doc.name,
- start: cm.getCursor("from"),
- end: cm.getCursor("to")});
- moveTo(ts, doc, localDoc, found.start, found.end);
- return;
- }
- }
- showError(ts, cm, "Could not find a definition.");
- });
- }
-
- if (!atInterestingExpression(cm))
- dialog(cm, "Jump to variable", function(name) { if (name) inner(name); });
- else
- inner();
- }
-
- function jumpBack(ts, cm) {
- var pos = ts.jumpStack.pop(), doc = pos && ts.docs[pos.file];
- if (!doc) return;
- moveTo(ts, findDoc(ts, cm.getDoc()), doc, pos.start, pos.end);
- }
-
- function moveTo(ts, curDoc, doc, start, end) {
- doc.doc.setSelection(end, start);
- if (curDoc != doc && ts.options.switchToDoc) {
- closeArgHints(ts);
- ts.options.switchToDoc(doc.name);
- }
- }
-
- // The {line,ch} representation of positions makes this rather awkward.
- function findContext(doc, data) {
- var before = data.context.slice(0, data.contextOffset).split("\n");
- var startLine = data.start.line - (before.length - 1);
- var start = Pos(startLine, (before.length == 1 ? data.start.ch : doc.getLine(startLine).length) - before[0].length);
-
- var text = doc.getLine(startLine).slice(start.ch);
- for (var cur = startLine + 1; cur < doc.lineCount() && text.length < data.context.length; ++cur)
- text += "\n" + doc.getLine(cur);
- if (text.slice(0, data.context.length) == data.context) return data;
-
- var cursor = doc.getSearchCursor(data.context, 0, false);
- var nearest, nearestDist = Infinity;
- while (cursor.findNext()) {
- var from = cursor.from(), dist = Math.abs(from.line - start.line) * 10000;
- if (!dist) dist = Math.abs(from.ch - start.ch);
- if (dist < nearestDist) { nearest = from; nearestDist = dist; }
- }
- if (!nearest) return null;
-
- if (before.length == 1)
- nearest.ch += before[0].length;
- else
- nearest = Pos(nearest.line + (before.length - 1), before[before.length - 1].length);
- if (data.start.line == data.end.line)
- var end = Pos(nearest.line, nearest.ch + (data.end.ch - data.start.ch));
- else
- var end = Pos(nearest.line + (data.end.line - data.start.line), data.end.ch);
- return {start: nearest, end: end};
- }
-
- function atInterestingExpression(cm) {
- var pos = cm.getCursor("end"), tok = cm.getTokenAt(pos);
- if (tok.start < pos.ch && (tok.type == "comment" || tok.type == "string")) return false;
- return /\w/.test(cm.getLine(pos.line).slice(Math.max(pos.ch - 1, 0), pos.ch + 1));
- }
-
- // Variable renaming
-
- function rename(ts, cm) {
- var token = cm.getTokenAt(cm.getCursor());
- if (!/\w/.test(token.string)) showError(ts, cm, "Not at a variable");
- dialog(cm, "New name for " + token.string, function(newName) {
- ts.request(cm, {type: "rename", newName: newName, fullDocs: true}, function(error, data) {
- if (error) return showError(ts, cm, error);
- applyChanges(ts, data.changes);
- });
- });
- }
-
- function selectName(ts, cm) {
- var cur = cm.getCursor(), token = cm.getTokenAt(cur);
- if (!/\w/.test(token.string)) showError(ts, cm, "Not at a variable");
- var name = findDoc(ts, cm.doc).name;
- ts.request(cm, {type: "refs"}, function(error, data) {
- if (error) return showError(ts, cm, error);
- var ranges = [], cur = 0;
- for (var i = 0; i < data.refs.length; i++) {
- var ref = data.refs[i];
- if (ref.file == name) {
- ranges.push({anchor: ref.start, head: ref.end});
- if (cmpPos(cur, ref.start) >= 0 && cmpPos(cur, ref.end) <= 0)
- cur = ranges.length - 1;
- }
- }
- cm.setSelections(ranges, cur);
- });
- }
-
- var nextChangeOrig = 0;
- function applyChanges(ts, changes) {
- var perFile = Object.create(null);
- for (var i = 0; i < changes.length; ++i) {
- var ch = changes[i];
- (perFile[ch.file] || (perFile[ch.file] = [])).push(ch);
- }
- for (var file in perFile) {
- var known = ts.docs[file], chs = perFile[file];;
- if (!known) continue;
- chs.sort(function(a, b) { return cmpPos(b.start, a.start); });
- var origin = "*rename" + (++nextChangeOrig);
- for (var i = 0; i < chs.length; ++i) {
- var ch = chs[i];
- known.doc.replaceRange(ch.text, ch.start, ch.end, origin);
- }
- }
- }
-
- // Generic request-building helper
-
- function buildRequest(ts, doc, query, pos) {
- var files = [], offsetLines = 0, allowFragments = !query.fullDocs;
- if (!allowFragments) delete query.fullDocs;
- if (typeof query == "string") query = {type: query};
- query.lineCharPositions = true;
- if (query.end == null) {
- query.end = pos || doc.doc.getCursor("end");
- if (doc.doc.somethingSelected())
- query.start = doc.doc.getCursor("start");
- }
- var startPos = query.start || query.end;
-
- if (doc.changed) {
- if (doc.doc.lineCount() > bigDoc && allowFragments !== false &&
- doc.changed.to - doc.changed.from < 100 &&
- doc.changed.from <= startPos.line && doc.changed.to > query.end.line) {
- files.push(getFragmentAround(doc, startPos, query.end));
- query.file = "#0";
- var offsetLines = files[0].offsetLines;
- if (query.start != null) query.start = Pos(query.start.line - -offsetLines, query.start.ch);
- query.end = Pos(query.end.line - offsetLines, query.end.ch);
- } else {
- files.push({type: "full",
- name: doc.name,
- text: docValue(ts, doc)});
- query.file = doc.name;
- doc.changed = null;
- }
- } else {
- query.file = doc.name;
- }
- for (var name in ts.docs) {
- var cur = ts.docs[name];
- if (cur.changed && cur != doc) {
- files.push({type: "full", name: cur.name, text: docValue(ts, cur)});
- cur.changed = null;
- }
- }
-
- return {query: query, files: files};
- }
-
- function getFragmentAround(data, start, end) {
- var doc = data.doc;
- var minIndent = null, minLine = null, endLine, tabSize = 4;
- for (var p = start.line - 1, min = Math.max(0, p - 50); p >= min; --p) {
- var line = doc.getLine(p), fn = line.search(/\bfunction\b/);
- if (fn < 0) continue;
- var indent = CodeMirror.countColumn(line, null, tabSize);
- if (minIndent != null && minIndent <= indent) continue;
- minIndent = indent;
- minLine = p;
- }
- if (minLine == null) minLine = min;
- var max = Math.min(doc.lastLine(), end.line + 20);
- if (minIndent == null || minIndent == CodeMirror.countColumn(doc.getLine(start.line), null, tabSize))
- endLine = max;
- else for (endLine = end.line + 1; endLine < max; ++endLine) {
- var indent = CodeMirror.countColumn(doc.getLine(endLine), null, tabSize);
- if (indent <= minIndent) break;
- }
- var from = Pos(minLine, 0);
-
- return {type: "part",
- name: data.name,
- offsetLines: from.line,
- text: doc.getRange(from, Pos(endLine, 0))};
- }
-
- // Generic utilities
-
- var cmpPos = CodeMirror.cmpPos;
-
- function elt(tagname, cls /*, ... elts*/) {
- var e = document.createElement(tagname);
- if (cls) e.className = cls;
- for (var i = 2; i < arguments.length; ++i) {
- var elt = arguments[i];
- if (typeof elt == "string") elt = document.createTextNode(elt);
- e.appendChild(elt);
- }
- return e;
- }
-
- function dialog(cm, text, f) {
- if (cm.openDialog)
- cm.openDialog(text + ": ", f);
- else
- f(prompt(text, ""));
- }
-
- // Tooltips
-
- function tempTooltip(cm, content) {
- var where = cm.cursorCoords();
- var tip = makeTooltip(where.right + 1, where.bottom, content);
- function clear() {
- if (!tip.parentNode) return;
- cm.off("cursorActivity", clear);
- fadeOut(tip);
- }
- setTimeout(clear, 1700);
- cm.on("cursorActivity", clear);
- }
-
- function makeTooltip(x, y, content) {
- var node = elt("div", cls + "tooltip", content);
- node.style.left = x + "px";
- node.style.top = y + "px";
- document.body.appendChild(node);
- return node;
- }
-
- function remove(node) {
- var p = node && node.parentNode;
- if (p) p.removeChild(node);
- }
-
- function fadeOut(tooltip) {
- tooltip.style.opacity = "0";
- setTimeout(function() { remove(tooltip); }, 1100);
- }
-
- function showError(ts, cm, msg) {
- if (ts.options.showError)
- ts.options.showError(cm, msg);
- else
- tempTooltip(cm, String(msg));
- }
-
- function closeArgHints(ts) {
- if (ts.activeArgHints) { remove(ts.activeArgHints); ts.activeArgHints = null; }
- }
-
- function docValue(ts, doc) {
- var val = doc.doc.getValue();
- if (ts.options.fileFilter) val = ts.options.fileFilter(val, doc.name, doc.doc);
- return val;
- }
-
- // Worker wrapper
-
- function WorkerServer(ts) {
- var worker = new Worker(ts.options.workerScript);
- worker.postMessage({type: "init",
- defs: ts.options.defs,
- plugins: ts.options.plugins,
- scripts: ts.options.workerDeps});
- var msgId = 0, pending = {};
-
- function send(data, c) {
- if (c) {
- data.id = ++msgId;
- pending[msgId] = c;
- }
- worker.postMessage(data);
- }
- worker.onmessage = function(e) {
- var data = e.data;
- if (data.type == "getFile") {
- getFile(ts, data.name, function(err, text) {
- send({type: "getFile", err: String(err), text: text, id: data.id});
- });
- } else if (data.type == "debug") {
- window.console.log(data.message);
- } else if (data.id && pending[data.id]) {
- pending[data.id](data.err, data.body);
- delete pending[data.id];
- }
- };
- worker.onerror = function(e) {
- for (var id in pending) pending[id](e);
- pending = {};
- };
-
- this.addFile = function(name, text) { send({type: "add", name: name, text: text}); };
- this.delFile = function(name) { send({type: "del", name: name}); };
- this.request = function(body, c) { send({type: "req", body: body}, c); };
- }
-});
diff --git a/vendor/codemirror/addon/tern/worker.js b/vendor/codemirror/addon/tern/worker.js
deleted file mode 100644
index 1ff63de4..00000000
--- a/vendor/codemirror/addon/tern/worker.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// declare global: tern, server
-
-var server;
-
-this.onmessage = function(e) {
- var data = e.data;
- switch (data.type) {
- case "init": return startServer(data.defs, data.plugins, data.scripts);
- case "add": return server.addFile(data.name, data.text);
- case "del": return server.delFile(data.name);
- case "req": return server.request(data.body, function(err, reqData) {
- postMessage({id: data.id, body: reqData, err: err && String(err)});
- });
- case "getFile":
- var c = pending[data.id];
- delete pending[data.id];
- return c(data.err, data.text);
- default: throw new Error("Unknown message type: " + data.type);
- }
-};
-
-var nextId = 0, pending = {};
-function getFile(file, c) {
- postMessage({type: "getFile", name: file, id: ++nextId});
- pending[nextId] = c;
-}
-
-function startServer(defs, plugins, scripts) {
- if (scripts) importScripts.apply(null, scripts);
-
- server = new tern.Server({
- getFile: getFile,
- async: true,
- defs: defs,
- plugins: plugins
- });
-}
-
-var console = {
- log: function(v) { postMessage({type: "debug", message: v}); }
-};
diff --git a/vendor/codemirror/addon/wrap/hardwrap.js b/vendor/codemirror/addon/wrap/hardwrap.js
deleted file mode 100644
index 87aab1b8..00000000
--- a/vendor/codemirror/addon/wrap/hardwrap.js
+++ /dev/null
@@ -1,136 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- var Pos = CodeMirror.Pos;
-
- function findParagraph(cm, pos, options) {
- var startRE = options.paragraphStart || cm.getHelper(pos, "paragraphStart");
- for (var start = pos.line, first = cm.firstLine(); start > first; --start) {
- var line = cm.getLine(start);
- if (startRE && startRE.test(line)) break;
- if (!/\S/.test(line)) { ++start; break; }
- }
- var endRE = options.paragraphEnd || cm.getHelper(pos, "paragraphEnd");
- for (var end = pos.line + 1, last = cm.lastLine(); end <= last; ++end) {
- var line = cm.getLine(end);
- if (endRE && endRE.test(line)) { ++end; break; }
- if (!/\S/.test(line)) break;
- }
- return {from: start, to: end};
- }
-
- function findBreakPoint(text, column, wrapOn, killTrailingSpace) {
- for (var at = column; at > 0; --at)
- if (wrapOn.test(text.slice(at - 1, at + 1))) break;
- if (at == 0) at = column;
- var endOfText = at;
- if (killTrailingSpace)
- while (text.charAt(endOfText - 1) == " ") --endOfText;
- return {from: endOfText, to: at};
- }
-
- function wrapRange(cm, from, to, options) {
- from = cm.clipPos(from); to = cm.clipPos(to);
- var column = options.column || 80;
- var wrapOn = options.wrapOn || /\s\S|-[^\.\d]/;
- var killTrailing = options.killTrailingSpace !== false;
- var changes = [], curLine = "", curNo = from.line;
- var lines = cm.getRange(from, to, false);
- if (!lines.length) return null;
- var leadingSpace = lines[0].match(/^[ \t]*/)[0];
-
- for (var i = 0; i < lines.length; ++i) {
- var text = lines[i], oldLen = curLine.length, spaceInserted = 0;
- if (curLine && text && !wrapOn.test(curLine.charAt(curLine.length - 1) + text.charAt(0))) {
- curLine += " ";
- spaceInserted = 1;
- }
- var spaceTrimmed = "";
- if (i) {
- spaceTrimmed = text.match(/^\s*/)[0];
- text = text.slice(spaceTrimmed.length);
- }
- curLine += text;
- if (i) {
- var firstBreak = curLine.length > column && leadingSpace == spaceTrimmed &&
- findBreakPoint(curLine, column, wrapOn, killTrailing);
- // If this isn't broken, or is broken at a different point, remove old break
- if (!firstBreak || firstBreak.from != oldLen || firstBreak.to != oldLen + spaceInserted) {
- changes.push({text: [spaceInserted ? " " : ""],
- from: Pos(curNo, oldLen),
- to: Pos(curNo + 1, spaceTrimmed.length)});
- } else {
- curLine = leadingSpace + text;
- ++curNo;
- }
- }
- while (curLine.length > column) {
- var bp = findBreakPoint(curLine, column, wrapOn, killTrailing);
- changes.push({text: ["", leadingSpace],
- from: Pos(curNo, bp.from),
- to: Pos(curNo, bp.to)});
- curLine = leadingSpace + curLine.slice(bp.to);
- ++curNo;
- }
- }
- if (changes.length) cm.operation(function() {
- for (var i = 0; i < changes.length; ++i) {
- var change = changes[i];
- cm.replaceRange(change.text, change.from, change.to);
- }
- });
- return changes.length ? {from: changes[0].from, to: CodeMirror.changeEnd(changes[changes.length - 1])} : null;
- }
-
- CodeMirror.defineExtension("wrapParagraph", function(pos, options) {
- options = options || {};
- if (!pos) pos = this.getCursor();
- var para = findParagraph(this, pos, options);
- return wrapRange(this, Pos(para.from, 0), Pos(para.to - 1), options);
- });
-
- CodeMirror.commands.wrapLines = function(cm) {
- cm.operation(function() {
- var ranges = cm.listSelections(), at = cm.lastLine() + 1;
- for (var i = ranges.length - 1; i >= 0; i--) {
- var range = ranges[i], span;
- if (range.empty()) {
- var para = findParagraph(cm, range.head, {});
- span = {from: Pos(para.from, 0), to: Pos(para.to - 1)};
- } else {
- span = {from: range.from(), to: range.to()};
- }
- if (span.to.line >= at) continue;
- at = span.from.line;
- wrapRange(cm, span.from, span.to, {});
- }
- });
- };
-
- CodeMirror.defineExtension("wrapRange", function(from, to, options) {
- return wrapRange(this, from, to, options || {});
- });
-
- CodeMirror.defineExtension("wrapParagraphsInRange", function(from, to, options) {
- options = options || {};
- var cm = this, paras = [];
- for (var line = from.line; line <= to.line;) {
- var para = findParagraph(cm, Pos(line, 0), options);
- paras.push(para);
- line = para.to;
- }
- var madeChange = false;
- if (paras.length) cm.operation(function() {
- for (var i = paras.length - 1; i >= 0; --i)
- madeChange = madeChange || wrapRange(cm, Pos(paras[i].from, 0), Pos(paras[i].to - 1), options);
- });
- return madeChange;
- });
-});
diff --git a/vendor/codemirror/bower.json b/vendor/codemirror/bower.json
deleted file mode 100644
index 66e049df..00000000
--- a/vendor/codemirror/bower.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "name": "CodeMirror",
- "main": ["lib/codemirror.js", "lib/codemirror.css"],
- "ignore": [
- "**/.*",
- "node_modules",
- "components",
- "bin",
- "demo",
- "doc",
- "test",
- "index.html",
- "package.json"
- ]
-}
diff --git a/vendor/codemirror/keymap/emacs.js b/vendor/codemirror/keymap/emacs.js
deleted file mode 100644
index 8d3ab62d..00000000
--- a/vendor/codemirror/keymap/emacs.js
+++ /dev/null
@@ -1,405 +0,0 @@
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../lib/codemirror"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../lib/codemirror"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- var Pos = CodeMirror.Pos;
- function posEq(a, b) { return a.line == b.line && a.ch == b.ch; }
-
- // Kill 'ring'
-
- var killRing = [];
- function addToRing(str) {
- killRing.push(str);
- if (killRing.length > 50) killRing.shift();
- }
- function growRingTop(str) {
- if (!killRing.length) return addToRing(str);
- killRing[killRing.length - 1] += str;
- }
- function getFromRing(n) { return killRing[killRing.length - (n ? Math.min(n, 1) : 1)] || ""; }
- function popFromRing() { if (killRing.length > 1) killRing.pop(); return getFromRing(); }
-
- var lastKill = null;
-
- function kill(cm, from, to, mayGrow, text) {
- if (text == null) text = cm.getRange(from, to);
-
- if (mayGrow && lastKill && lastKill.cm == cm && posEq(from, lastKill.pos) && cm.isClean(lastKill.gen))
- growRingTop(text);
- else
- addToRing(text);
- cm.replaceRange("", from, to, "+delete");
-
- if (mayGrow) lastKill = {cm: cm, pos: from, gen: cm.changeGeneration()};
- else lastKill = null;
- }
-
- // Boundaries of various units
-
- function byChar(cm, pos, dir) {
- return cm.findPosH(pos, dir, "char", true);
- }
-
- function byWord(cm, pos, dir) {
- return cm.findPosH(pos, dir, "word", true);
- }
-
- function byLine(cm, pos, dir) {
- return cm.findPosV(pos, dir, "line", cm.doc.sel.goalColumn);
- }
-
- function byPage(cm, pos, dir) {
- return cm.findPosV(pos, dir, "page", cm.doc.sel.goalColumn);
- }
-
- function byParagraph(cm, pos, dir) {
- var no = pos.line, line = cm.getLine(no);
- var sawText = /\S/.test(dir < 0 ? line.slice(0, pos.ch) : line.slice(pos.ch));
- var fst = cm.firstLine(), lst = cm.lastLine();
- for (;;) {
- no += dir;
- if (no < fst || no > lst)
- return cm.clipPos(Pos(no - dir, dir < 0 ? 0 : null));
- line = cm.getLine(no);
- var hasText = /\S/.test(line);
- if (hasText) sawText = true;
- else if (sawText) return Pos(no, 0);
- }
- }
-
- function bySentence(cm, pos, dir) {
- var line = pos.line, ch = pos.ch;
- var text = cm.getLine(pos.line), sawWord = false;
- for (;;) {
- var next = text.charAt(ch + (dir < 0 ? -1 : 0));
- if (!next) { // End/beginning of line reached
- if (line == (dir < 0 ? cm.firstLine() : cm.lastLine())) return Pos(line, ch);
- text = cm.getLine(line + dir);
- if (!/\S/.test(text)) return Pos(line, ch);
- line += dir;
- ch = dir < 0 ? text.length : 0;
- continue;
- }
- if (sawWord && /[!?.]/.test(next)) return Pos(line, ch + (dir > 0 ? 1 : 0));
- if (!sawWord) sawWord = /\w/.test(next);
- ch += dir;
- }
- }
-
- function byExpr(cm, pos, dir) {
- var wrap;
- if (cm.findMatchingBracket && (wrap = cm.findMatchingBracket(pos, true))
- && wrap.match && (wrap.forward ? 1 : -1) == dir)
- return dir > 0 ? Pos(wrap.to.line, wrap.to.ch + 1) : wrap.to;
-
- for (var first = true;; first = false) {
- var token = cm.getTokenAt(pos);
- var after = Pos(pos.line, dir < 0 ? token.start : token.end);
- if (first && dir > 0 && token.end == pos.ch || !/\w/.test(token.string)) {
- var newPos = cm.findPosH(after, dir, "char");
- if (posEq(after, newPos)) return pos;
- else pos = newPos;
- } else {
- return after;
- }
- }
- }
-
- // Prefixes (only crudely supported)
-
- function getPrefix(cm, precise) {
- var digits = cm.state.emacsPrefix;
- if (!digits) return precise ? null : 1;
- clearPrefix(cm);
- return digits == "-" ? -1 : Number(digits);
- }
-
- function repeated(cmd) {
- var f = typeof cmd == "string" ? function(cm) { cm.execCommand(cmd); } : cmd;
- return function(cm) {
- var prefix = getPrefix(cm);
- f(cm);
- for (var i = 1; i < prefix; ++i) f(cm);
- };
- }
-
- function findEnd(cm, by, dir) {
- var pos = cm.getCursor(), prefix = getPrefix(cm);
- if (prefix < 0) { dir = -dir; prefix = -prefix; }
- for (var i = 0; i < prefix; ++i) {
- var newPos = by(cm, pos, dir);
- if (posEq(newPos, pos)) break;
- pos = newPos;
- }
- return pos;
- }
-
- function move(by, dir) {
- var f = function(cm) {
- cm.extendSelection(findEnd(cm, by, dir));
- };
- f.motion = true;
- return f;
- }
-
- function killTo(cm, by, dir) {
- kill(cm, cm.getCursor(), findEnd(cm, by, dir), true);
- }
-
- function addPrefix(cm, digit) {
- if (cm.state.emacsPrefix) {
- if (digit != "-") cm.state.emacsPrefix += digit;
- return;
- }
- // Not active yet
- cm.state.emacsPrefix = digit;
- cm.on("keyHandled", maybeClearPrefix);
- cm.on("inputRead", maybeDuplicateInput);
- }
-
- var prefixPreservingKeys = {"Alt-G": true, "Ctrl-X": true, "Ctrl-Q": true, "Ctrl-U": true};
-
- function maybeClearPrefix(cm, arg) {
- if (!cm.state.emacsPrefixMap && !prefixPreservingKeys.hasOwnProperty(arg))
- clearPrefix(cm);
- }
-
- function clearPrefix(cm) {
- cm.state.emacsPrefix = null;
- cm.off("keyHandled", maybeClearPrefix);
- cm.off("inputRead", maybeDuplicateInput);
- }
-
- function maybeDuplicateInput(cm, event) {
- var dup = getPrefix(cm);
- if (dup > 1 && event.origin == "+input") {
- var one = event.text.join("\n"), txt = "";
- for (var i = 1; i < dup; ++i) txt += one;
- cm.replaceSelection(txt);
- }
- }
-
- function addPrefixMap(cm) {
- cm.state.emacsPrefixMap = true;
- cm.addKeyMap(prefixMap);
- cm.on("keyHandled", maybeRemovePrefixMap);
- cm.on("inputRead", maybeRemovePrefixMap);
- }
-
- function maybeRemovePrefixMap(cm, arg) {
- if (typeof arg == "string" && (/^\d$/.test(arg) || arg == "Ctrl-U")) return;
- cm.removeKeyMap(prefixMap);
- cm.state.emacsPrefixMap = false;
- cm.off("keyHandled", maybeRemovePrefixMap);
- cm.off("inputRead", maybeRemovePrefixMap);
- }
-
- // Utilities
-
- function setMark(cm) {
- cm.setCursor(cm.getCursor());
- cm.setExtending(!cm.getExtending());
- cm.on("change", function() { cm.setExtending(false); });
- }
-
- function clearMark(cm) {
- cm.setExtending(false);
- cm.setCursor(cm.getCursor());
- }
-
- function getInput(cm, msg, f) {
- if (cm.openDialog)
- cm.openDialog(msg + ": ", f, {bottom: true});
- else
- f(prompt(msg, ""));
- }
-
- function operateOnWord(cm, op) {
- var start = cm.getCursor(), end = cm.findPosH(start, 1, "word");
- cm.replaceRange(op(cm.getRange(start, end)), start, end);
- cm.setCursor(end);
- }
-
- function toEnclosingExpr(cm) {
- var pos = cm.getCursor(), line = pos.line, ch = pos.ch;
- var stack = [];
- while (line >= cm.firstLine()) {
- var text = cm.getLine(line);
- for (var i = ch == null ? text.length : ch; i > 0;) {
- var ch = text.charAt(--i);
- if (ch == ")")
- stack.push("(");
- else if (ch == "]")
- stack.push("[");
- else if (ch == "}")
- stack.push("{");
- else if (/[\(\{\[]/.test(ch) && (!stack.length || stack.pop() != ch))
- return cm.extendSelection(Pos(line, i));
- }
- --line; ch = null;
- }
- }
-
- function quit(cm) {
- cm.execCommand("clearSearch");
- clearMark(cm);
- }
-
- // Actual keymap
-
- var keyMap = CodeMirror.keyMap.emacs = {
- "Ctrl-W": function(cm) {kill(cm, cm.getCursor("start"), cm.getCursor("end"));},
- "Ctrl-K": repeated(function(cm) {
- var start = cm.getCursor(), end = cm.clipPos(Pos(start.line));
- var text = cm.getRange(start, end);
- if (!/\S/.test(text)) {
- text += "\n";
- end = Pos(start.line + 1, 0);
- }
- kill(cm, start, end, true, text);
- }),
- "Alt-W": function(cm) {
- addToRing(cm.getSelection());
- clearMark(cm);
- },
- "Ctrl-Y": function(cm) {
- var start = cm.getCursor();
- cm.replaceRange(getFromRing(getPrefix(cm)), start, start, "paste");
- cm.setSelection(start, cm.getCursor());
- },
- "Alt-Y": function(cm) {cm.replaceSelection(popFromRing(), "around", "paste");},
-
- "Ctrl-Space": setMark, "Ctrl-Shift-2": setMark,
-
- "Ctrl-F": move(byChar, 1), "Ctrl-B": move(byChar, -1),
- "Right": move(byChar, 1), "Left": move(byChar, -1),
- "Ctrl-D": function(cm) { killTo(cm, byChar, 1); },
- "Delete": function(cm) { killTo(cm, byChar, 1); },
- "Ctrl-H": function(cm) { killTo(cm, byChar, -1); },
- "Backspace": function(cm) { killTo(cm, byChar, -1); },
-
- "Alt-F": move(byWord, 1), "Alt-B": move(byWord, -1),
- "Alt-D": function(cm) { killTo(cm, byWord, 1); },
- "Alt-Backspace": function(cm) { killTo(cm, byWord, -1); },
-
- "Ctrl-N": move(byLine, 1), "Ctrl-P": move(byLine, -1),
- "Down": move(byLine, 1), "Up": move(byLine, -1),
- "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd",
- "End": "goLineEnd", "Home": "goLineStart",
-
- "Alt-V": move(byPage, -1), "Ctrl-V": move(byPage, 1),
- "PageUp": move(byPage, -1), "PageDown": move(byPage, 1),
-
- "Ctrl-Up": move(byParagraph, -1), "Ctrl-Down": move(byParagraph, 1),
-
- "Alt-A": move(bySentence, -1), "Alt-E": move(bySentence, 1),
- "Alt-K": function(cm) { killTo(cm, bySentence, 1); },
-
- "Ctrl-Alt-K": function(cm) { killTo(cm, byExpr, 1); },
- "Ctrl-Alt-Backspace": function(cm) { killTo(cm, byExpr, -1); },
- "Ctrl-Alt-F": move(byExpr, 1), "Ctrl-Alt-B": move(byExpr, -1),
-
- "Shift-Ctrl-Alt-2": function(cm) {
- cm.setSelection(findEnd(cm, byExpr, 1), cm.getCursor());
- },
- "Ctrl-Alt-T": function(cm) {
- var leftStart = byExpr(cm, cm.getCursor(), -1), leftEnd = byExpr(cm, leftStart, 1);
- var rightEnd = byExpr(cm, leftEnd, 1), rightStart = byExpr(cm, rightEnd, -1);
- cm.replaceRange(cm.getRange(rightStart, rightEnd) + cm.getRange(leftEnd, rightStart) +
- cm.getRange(leftStart, leftEnd), leftStart, rightEnd);
- },
- "Ctrl-Alt-U": repeated(toEnclosingExpr),
-
- "Alt-Space": function(cm) {
- var pos = cm.getCursor(), from = pos.ch, to = pos.ch, text = cm.getLine(pos.line);
- while (from && /\s/.test(text.charAt(from - 1))) --from;
- while (to < text.length && /\s/.test(text.charAt(to))) ++to;
- cm.replaceRange(" ", Pos(pos.line, from), Pos(pos.line, to));
- },
- "Ctrl-O": repeated(function(cm) { cm.replaceSelection("\n", "start"); }),
- "Ctrl-T": repeated(function(cm) {
- var pos = cm.getCursor();
- if (pos.ch < cm.getLine(pos.line).length) pos = Pos(pos.line, pos.ch + 1);
- var from = cm.findPosH(pos, -2, "char");
- var range = cm.getRange(from, pos);
- if (range.length != 2) return;
- cm.setSelection(from, pos);
- cm.replaceSelection(range.charAt(1) + range.charAt(0), null, "+transpose");
- }),
-
- "Alt-C": repeated(function(cm) {
- operateOnWord(cm, function(w) {
- var letter = w.search(/\w/);
- if (letter == -1) return w;
- return w.slice(0, letter) + w.charAt(letter).toUpperCase() + w.slice(letter + 1).toLowerCase();
- });
- }),
- "Alt-U": repeated(function(cm) {
- operateOnWord(cm, function(w) { return w.toUpperCase(); });
- }),
- "Alt-L": repeated(function(cm) {
- operateOnWord(cm, function(w) { return w.toLowerCase(); });
- }),
-
- "Alt-;": "toggleComment",
-
- "Ctrl-/": repeated("undo"), "Shift-Ctrl--": repeated("undo"),
- "Ctrl-Z": repeated("undo"), "Cmd-Z": repeated("undo"),
- "Shift-Alt-,": "goDocStart", "Shift-Alt-.": "goDocEnd",
- "Ctrl-S": "findNext", "Ctrl-R": "findPrev", "Ctrl-G": quit, "Shift-Alt-5": "replace",
- "Alt-/": "autocomplete",
- "Ctrl-J": "newlineAndIndent", "Enter": false, "Tab": "indentAuto",
-
- "Alt-G": function(cm) {cm.setOption("keyMap", "emacs-Alt-G");},
- "Ctrl-X": function(cm) {cm.setOption("keyMap", "emacs-Ctrl-X");},
- "Ctrl-Q": function(cm) {cm.setOption("keyMap", "emacs-Ctrl-Q");},
- "Ctrl-U": addPrefixMap
- };
-
- CodeMirror.keyMap["emacs-Ctrl-X"] = {
- "Tab": function(cm) {
- cm.indentSelection(getPrefix(cm, true) || cm.getOption("indentUnit"));
- },
- "Ctrl-X": function(cm) {
- cm.setSelection(cm.getCursor("head"), cm.getCursor("anchor"));
- },
-
- "Ctrl-S": "save", "Ctrl-W": "save", "S": "saveAll", "F": "open", "U": repeated("undo"), "K": "close",
- "Delete": function(cm) { kill(cm, cm.getCursor(), bySentence(cm, cm.getCursor(), 1), true); },
- auto: "emacs", nofallthrough: true, disableInput: true
- };
-
- CodeMirror.keyMap["emacs-Alt-G"] = {
- "G": function(cm) {
- var prefix = getPrefix(cm, true);
- if (prefix != null && prefix > 0) return cm.setCursor(prefix - 1);
-
- getInput(cm, "Goto line", function(str) {
- var num;
- if (str && !isNaN(num = Number(str)) && num == num|0 && num > 0)
- cm.setCursor(num - 1);
- });
- },
- auto: "emacs", nofallthrough: true, disableInput: true
- };
-
- CodeMirror.keyMap["emacs-Ctrl-Q"] = {
- "Tab": repeated("insertTab"),
- auto: "emacs", nofallthrough: true
- };
-
- var prefixMap = {"Ctrl-G": clearPrefix};
- function regPrefix(d) {
- prefixMap[d] = function(cm) { addPrefix(cm, d); };
- keyMap["Ctrl-" + d] = function(cm) { addPrefix(cm, d); };
- prefixPreservingKeys["Ctrl-" + d] = true;
- }
- for (var i = 0; i < 10; ++i) regPrefix(String(i));
- regPrefix("-");
-});
diff --git a/vendor/codemirror/keymap/extra.js b/vendor/codemirror/keymap/extra.js
deleted file mode 100644
index 18dd5a97..00000000
--- a/vendor/codemirror/keymap/extra.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// A number of additional default bindings that are too obscure to
-// include in the core codemirror.js file.
-
-(function() {
- "use strict";
-
- var Pos = CodeMirror.Pos;
-
- function moveLines(cm, start, end, dist) {
- if (!dist || start > end) return 0;
-
- var from = cm.clipPos(Pos(start, 0)), to = cm.clipPos(Pos(end));
- var text = cm.getRange(from, to);
-
- if (start <= cm.firstLine())
- cm.replaceRange("", from, Pos(to.line + 1, 0));
- else
- cm.replaceRange("", Pos(from.line - 1), to);
- var target = from.line + dist;
- if (target <= cm.firstLine()) {
- cm.replaceRange(text + "\n", Pos(target, 0));
- return cm.firstLine() - from.line;
- } else {
- var targetPos = cm.clipPos(Pos(target - 1));
- cm.replaceRange("\n" + text, targetPos);
- return targetPos.line + 1 - from.line;
- }
- }
-
- function moveSelectedLines(cm, dist) {
- var head = cm.getCursor("head"), anchor = cm.getCursor("anchor");
- cm.operation(function() {
- var moved = moveLines(cm, Math.min(head.line, anchor.line), Math.max(head.line, anchor.line), dist);
- cm.setSelection(Pos(anchor.line + moved, anchor.ch), Pos(head.line + moved, head.ch));
- });
- }
-
- CodeMirror.commands.moveLinesUp = function(cm) { moveSelectedLines(cm, -1); };
- CodeMirror.commands.moveLinesDown = function(cm) { moveSelectedLines(cm, 1); };
-
- CodeMirror.keyMap["default"]["Alt-Up"] = "moveLinesUp";
- CodeMirror.keyMap["default"]["Alt-Down"] = "moveLinesDown";
-})();
diff --git a/vendor/codemirror/keymap/sublime.js b/vendor/codemirror/keymap/sublime.js
deleted file mode 100644
index b2ba0ce3..00000000
--- a/vendor/codemirror/keymap/sublime.js
+++ /dev/null
@@ -1,425 +0,0 @@
-// A rough approximation of Sublime Text's keybindings
-// Depends on addon/search/searchcursor.js and optionally addon/dialog/dialogs.js
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../lib/codemirror"), require("../addon/search/searchcursor"), require("../addon/edit/matchbrackets"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../lib/codemirror", "../addon/search/searchcursor", "../addon/edit/matchbrackets"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- "use strict";
-
- var map = CodeMirror.keyMap.sublime = {fallthrough: "default"};
- var cmds = CodeMirror.commands;
- var Pos = CodeMirror.Pos;
- var ctrl = CodeMirror.keyMap["default"] == CodeMirror.keyMap.pcDefault ? "Ctrl-" : "Cmd-";
-
- // This is not exactly Sublime's algorithm. I couldn't make heads or tails of that.
- function findPosSubword(doc, start, dir) {
- if (dir < 0 && start.ch == 0) return doc.clipPos(Pos(start.line - 1));
- var line = doc.getLine(start.line);
- if (dir > 0 && start.ch >= line.length) return doc.clipPos(Pos(start.line + 1, 0));
- var state = "start", type;
- for (var pos = start.ch, e = dir < 0 ? 0 : line.length, i = 0; pos != e; pos += dir, i++) {
- var next = line.charAt(dir < 0 ? pos - 1 : pos);
- var cat = next != "_" && CodeMirror.isWordChar(next) ? "w" : "o";
- if (cat == "w" && next.toUpperCase() == next) cat = "W";
- if (state == "start") {
- if (cat != "o") { state = "in"; type = cat; }
- } else if (state == "in") {
- if (type != cat) {
- if (type == "w" && cat == "W" && dir < 0) pos--;
- if (type == "W" && cat == "w" && dir > 0) { type = "w"; continue; }
- break;
- }
- }
- }
- return Pos(start.line, pos);
- }
-
- function moveSubword(cm, dir) {
- cm.extendSelectionsBy(function(range) {
- if (cm.display.shift || cm.doc.extend || range.empty())
- return findPosSubword(cm.doc, range.head, dir);
- else
- return dir < 0 ? range.from() : range.to();
- });
- }
-
- cmds[map["Alt-Left"] = "goSubwordLeft"] = function(cm) { moveSubword(cm, -1); };
- cmds[map["Alt-Right"] = "goSubwordRight"] = function(cm) { moveSubword(cm, 1); };
-
- cmds[map[ctrl + "Up"] = "scrollLineUp"] = function(cm) {
- cm.scrollTo(null, cm.getScrollInfo().top - cm.defaultTextHeight());
- };
- cmds[map[ctrl + "Down"] = "scrollLineDown"] = function(cm) {
- cm.scrollTo(null, cm.getScrollInfo().top + cm.defaultTextHeight());
- };
-
- cmds[map["Shift-" + ctrl + "L"] = "splitSelectionByLine"] = function(cm) {
- var ranges = cm.listSelections(), lineRanges = [];
- for (var i = 0; i < ranges.length; i++) {
- var from = ranges[i].from(), to = ranges[i].to();
- for (var line = from.line; line <= to.line; ++line)
- if (!(to.line > from.line && line == to.line && to.ch == 0))
- lineRanges.push({anchor: line == from.line ? from : Pos(line, 0),
- head: line == to.line ? to : Pos(line)});
- }
- cm.setSelections(lineRanges, 0);
- };
-
- map["Shift-Tab"] = "indentLess";
-
- cmds[map[ctrl + "L"] = "selectLine"] = function(cm) {
- var ranges = cm.listSelections(), prim = cm.getCursor(), primIndex, extended = [];
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i];
- if (range.head == prim) primIndex = i;
- extended.push({anchor: Pos(range.from().line, 0),
- head: Pos(range.to().line + 1, 0)});
- }
- cm.setSelections(extended, primIndex);
- };
-
- function wordAt(cm, pos) {
- var start = pos.ch, end = start, line = cm.getLine(pos.line);
- while (start && CodeMirror.isWordChar(line.charAt(start - 1))) --start;
- while (end < line.length && CodeMirror.isWordChar(line.charAt(end))) ++end;
- return {from: Pos(pos.line, start), to: Pos(pos.line, end), word: line.slice(start, end)};
- }
-
- cmds[map[ctrl + "D"] = "selectNextOccurrence"] = function(cm) {
- var from = cm.getCursor("from"), to = cm.getCursor("to");
- var fullWord = cm.state.sublimeFindFullWord == cm.doc.sel;
- if (CodeMirror.cmpPos(from, to) == 0) {
- var word = wordAt(cm, from);
- if (!word.word) return;
- cm.setSelection(word.from, word.to);
- fullWord = true;
- } else {
- var query = cm.getRange(from, to);
- var cur = cm.getSearchCursor(fullWord ? new RegExp("\\b" + query + "\\b") : query, to);
- if (cur.findNext())
- cm.addSelection(cur.from(), cur.to());
- }
- if (fullWord)
- cm.state.sublimeFindFullWord = cm.doc.sel;
- };
-
- var mirror = "(){}[]";
- function selectBetweenBrackets(cm) {
- var pos = cm.getCursor(), opening = cm.scanForBracket(pos, -1);
- if (!opening) return;
- for (;;) {
- var closing = cm.scanForBracket(pos, 1);
- if (!closing) return;
- if (closing.ch == mirror.charAt(mirror.indexOf(opening.ch) + 1)) {
- cm.setSelection(Pos(opening.pos.line, opening.pos.ch + 1), closing.pos, false);
- return true;
- }
- pos = Pos(closing.pos.line, closing.pos.ch + 1);
- }
- }
-
- cmds[map["Shift-" + ctrl + "Space"] = "selectScope"] = function(cm) {
- selectBetweenBrackets(cm) || cm.execCommand("selectAll");
- };
- cmds[map["Shift-" + ctrl + "M"] = "selectBetweenBrackets"] = function(cm) {
- if (!selectBetweenBrackets(cm)) return CodeMirror.Pass;
- };
-
- cmds[map[ctrl + "M"] = "goToBracket"] = function(cm) {
- cm.extendSelectionsBy(function(range) {
- var next = cm.scanForBracket(range.head, 1);
- if (next && CodeMirror.cmpPos(next.pos, range.head) != 0) return next.pos;
- var prev = cm.scanForBracket(range.head, -1);
- return prev && Pos(prev.pos.line, prev.pos.ch + 1) || range.head;
- });
- };
-
- cmds[map["Shift-" + ctrl + "Up"] = "swapLineUp"] = function(cm) {
- var ranges = cm.listSelections(), linesToMove = [], at = cm.firstLine() - 1;
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i], from = range.from().line - 1, to = range.to().line;
- if (from > at) linesToMove.push(from, to);
- else if (linesToMove.length) linesToMove[linesToMove.length - 1] = to;
- at = to;
- }
- cm.operation(function() {
- for (var i = 0; i < linesToMove.length; i += 2) {
- var from = linesToMove[i], to = linesToMove[i + 1];
- var line = cm.getLine(from);
- cm.replaceRange("", Pos(from, 0), Pos(from + 1, 0));
- cm.replaceRange(line + "\n", Pos(to, 0));
- }
- });
- };
-
- cmds[map["Shift-" + ctrl + "Down"] = "swapLineDown"] = function(cm) {
- var ranges = cm.listSelections(), linesToMove = [], at = cm.lastLine() + 1;
- for (var i = ranges.length - 1; i >= 0; i--) {
- var range = ranges[i], from = range.to().line + 1, to = range.from().line;
- if (from < at) linesToMove.push(from, to);
- else if (linesToMove.length) linesToMove[linesToMove.length - 1] = to;
- at = to;
- }
- cm.operation(function() {
- for (var i = linesToMove.length - 2; i >= 0; i -= 2) {
- var from = linesToMove[i], to = linesToMove[i + 1];
- var line = cm.getLine(from);
- if (from == cm.lastLine())
- cm.replaceRange("", Pos(from - 1), Pos(from));
- else
- cm.replaceRange("", Pos(from, 0), Pos(from + 1, 0));
- cm.replaceRange(line + "\n", Pos(to, 0));
- }
- });
- };
-
- map[ctrl + "/"] = "toggleComment";
-
- cmds[map[ctrl + "J"] = "joinLines"] = function(cm) {
- var ranges = cm.listSelections(), joined = [];
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i], from = range.from();
- var start = from.line, end = range.to().line;
- while (i < ranges.length - 1 && ranges[i + 1].from().line == end)
- end = ranges[++i].to().line;
- joined.push({start: start, end: end, anchor: !range.empty() && from});
- }
- cm.operation(function() {
- var offset = 0, ranges = [];
- for (var i = 0; i < joined.length; i++) {
- var obj = joined[i];
- var anchor = obj.anchor && Pos(obj.anchor.line - offset, obj.anchor.ch), head;
- for (var line = obj.start; line <= obj.end; line++) {
- var actual = line - offset;
- if (line == obj.end) head = Pos(actual, cm.getLine(actual).length + 1);
- if (actual < cm.lastLine()) {
- cm.replaceRange(" ", Pos(actual), Pos(actual + 1, /^\s*/.exec(cm.getLine(actual + 1))[0].length));
- ++offset;
- }
- }
- ranges.push({anchor: anchor || head, head: head});
- }
- cm.setSelections(ranges, 0);
- });
- };
-
- cmds[map["Shift-" + ctrl + "D"] = "duplicateLine"] = function(cm) {
- cm.operation(function() {
- var rangeCount = cm.listSelections().length;
- for (var i = 0; i < rangeCount; i++) {
- var range = cm.listSelections()[i];
- if (range.empty())
- cm.replaceRange(cm.getLine(range.head.line) + "\n", Pos(range.head.line, 0));
- else
- cm.replaceRange(cm.getRange(range.from(), range.to()), range.from());
- }
- });
- };
-
- map[ctrl + "T"] = "transposeChars";
-
- function sortLines(cm, caseSensitive) {
- var ranges = cm.listSelections(), toSort = [], selected;
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i];
- if (range.empty()) continue;
- var from = range.from().line, to = range.to().line;
- while (i < ranges.length - 1 && ranges[i + 1].from().line == to)
- to = range[++i].to().line;
- toSort.push(from, to);
- }
- if (toSort.length) selected = true;
- else toSort.push(cm.firstLine(), cm.lastLine());
-
- cm.operation(function() {
- var ranges = [];
- for (var i = 0; i < toSort.length; i += 2) {
- var from = toSort[i], to = toSort[i + 1];
- var start = Pos(from, 0), end = Pos(to);
- var lines = cm.getRange(start, end, false);
- if (caseSensitive)
- lines.sort();
- else
- lines.sort(function(a, b) {
- var au = a.toUpperCase(), bu = b.toUpperCase();
- if (au != bu) { a = au; b = bu; }
- return a < b ? -1 : a == b ? 0 : 1;
- });
- cm.replaceRange(lines, start, end);
- if (selected) ranges.push({anchor: start, head: end});
- }
- if (selected) cm.setSelections(ranges, 0);
- });
- }
-
- cmds[map["F9"] = "sortLines"] = function(cm) { sortLines(cm, true); };
- cmds[map[ctrl + "F9"] = "sortLinesInsensitive"] = function(cm) { sortLines(cm, false); };
-
- cmds[map["F2"] = "nextBookmark"] = function(cm) {
- var marks = cm.state.sublimeBookmarks;
- if (marks) while (marks.length) {
- var current = marks.shift();
- var found = current.find();
- if (found) {
- marks.push(current);
- return cm.setSelection(found.from, found.to);
- }
- }
- };
-
- cmds[map["Shift-F2"] = "prevBookmark"] = function(cm) {
- var marks = cm.state.sublimeBookmarks;
- if (marks) while (marks.length) {
- marks.unshift(marks.pop());
- var found = marks[marks.length - 1].find();
- if (!found)
- marks.pop();
- else
- return cm.setSelection(found.from, found.to);
- }
- };
-
- cmds[map[ctrl + "F2"] = "toggleBookmark"] = function(cm) {
- var ranges = cm.listSelections();
- var marks = cm.state.sublimeBookmarks || (cm.state.sublimeBookmarks = []);
- for (var i = 0; i < ranges.length; i++) {
- var from = ranges[i].from(), to = ranges[i].to();
- var found = cm.findMarks(from, to);
- for (var j = 0; j < found.length; j++) {
- if (found[j].sublimeBookmark) {
- found[j].clear();
- for (var k = 0; k < marks.length; k++)
- if (marks[k] == found[j])
- marks.splice(k--, 1);
- break;
- }
- }
- if (j == found.length)
- marks.push(cm.markText(from, to, {sublimeBookmark: true, clearWhenEmpty: false}));
- }
- };
-
- cmds[map["Shift-" + ctrl + "F2"] = "clearBookmarks"] = function(cm) {
- var marks = cm.state.sublimeBookmarks;
- if (marks) for (var i = 0; i < marks.length; i++) marks[i].clear();
- marks.length = 0;
- };
-
- cmds[map["Alt-F2"] = "selectBookmarks"] = function(cm) {
- var marks = cm.state.sublimeBookmarks, ranges = [];
- if (marks) for (var i = 0; i < marks.length; i++) {
- var found = marks[i].find();
- if (!found)
- marks.splice(i--, 0);
- else
- ranges.push({anchor: found.from, head: found.to});
- }
- if (ranges.length)
- cm.setSelections(ranges, 0);
- };
-
- map["Alt-Q"] = "wrapLines";
-
- var mapK = CodeMirror.keyMap["sublime-Ctrl-K"] = {auto: "sublime", nofallthrough: true};
-
- map[ctrl + "K"] = function(cm) {cm.setOption("keyMap", "sublime-Ctrl-K");};
-
- function modifyWordOrSelection(cm, mod) {
- cm.operation(function() {
- var ranges = cm.listSelections(), indices = [], replacements = [];
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i];
- if (range.empty()) { indices.push(i); replacements.push(""); }
- else replacements.push(mod(cm.getRange(range.from(), range.to())));
- }
- cm.replaceSelections(replacements, "around", "case");
- for (var i = indices.length - 1, at; i >= 0; i--) {
- var range = ranges[indices[i]];
- if (at && CodeMirror.cmpPos(range.head, at) > 0) continue;
- var word = wordAt(cm, range.head);
- at = word.from;
- cm.replaceRange(mod(word.word), word.from, word.to);
- }
- });
- }
-
- cmds[mapK[ctrl + "U"] = "upcaseAtCursor"] = function(cm) {
- modifyWordOrSelection(cm, function(str) { return str.toUpperCase(); });
- };
- cmds[mapK[ctrl + "L"] = "downcaseAtCursor"] = function(cm) {
- modifyWordOrSelection(cm, function(str) { return str.toLowerCase(); });
- };
-
- cmds[mapK[ctrl + "Space"] = "setSublimeMark"] = function(cm) {
- if (cm.state.sublimeMark) cm.state.sublimeMark.clear();
- cm.state.sublimeMark = cm.setBookmark(cm.getCursor());
- };
- cmds[mapK[ctrl + "A"] = "selectToSublimeMark"] = function(cm) {
- var found = cm.state.sublimeMark && cm.state.sublimeMark.find();
- if (found) cm.setSelection(cm.getCursor(), found);
- };
- cmds[mapK[ctrl + "W"] = "deleteToSublimeMark"] = function(cm) {
- var found = cm.state.sublimeMark && cm.state.sublimeMark.find();
- if (found) {
- var from = cm.getCursor(), to = found;
- if (CodeMirror.cmpPos(from, to) > 0) { var tmp = to; to = from; from = tmp; }
- cm.state.sublimeKilled = cm.getRange(from, to);
- cm.replaceRange("", from, to);
- }
- };
- cmds[mapK[ctrl + "X"] = "swapWithSublimeMark"] = function(cm) {
- var found = cm.state.sublimeMark && cm.state.sublimeMark.find();
- if (found) {
- cm.state.sublimeMark.clear();
- cm.state.sublimeMark = cm.setBookmark(cm.getCursor());
- cm.setCursor(found);
- }
- };
- cmds[mapK[ctrl + "Y"] = "sublimeYank"] = function(cm) {
- if (cm.state.sublimeKilled != null)
- cm.replaceSelection(cm.state.sublimeKilled, null, "paste");
- };
-
- mapK[ctrl + "G"] = "clearBookmarks";
- cmds[mapK[ctrl + "C"] = "showInCenter"] = function(cm) {
- var pos = cm.cursorCoords(null, "local");
- cm.scrollTo(null, (pos.top + pos.bottom) / 2 - cm.getScrollInfo().clientHeight / 2);
- };
-
- cmds[map["Shift-Alt-Up"] = "selectLinesUpward"] = function(cm) {
- cm.operation(function() {
- var ranges = cm.listSelections();
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i];
- if (range.head.line > cm.firstLine())
- cm.addSelection(Pos(range.head.line - 1, range.head.ch));
- }
- });
- };
- cmds[map["Shift-Alt-Down"] = "selectLinesDownward"] = function(cm) {
- cm.operation(function() {
- var ranges = cm.listSelections();
- for (var i = 0; i < ranges.length; i++) {
- var range = ranges[i];
- if (range.head.line < cm.lastLine())
- cm.addSelection(Pos(range.head.line + 1, range.head.ch));
- }
- });
- };
-
- map["Shift-" + ctrl + "["] = "fold";
- map["Shift-" + ctrl + "]"] = "unfold";
- mapK[ctrl + "0"] = mapK[ctrl + "j"] = "unfoldAll";
-
- map[ctrl + "I"] = "findIncremental";
- map["Shift-" + ctrl + "I"] = "findIncrementalReverse";
- map[ctrl + "H"] = "replace";
- map["F3"] = "findNext";
- map["Shift-F3"] = "findPrev";
-
-});
diff --git a/vendor/codemirror/keymap/vim.js b/vendor/codemirror/keymap/vim.js
deleted file mode 100644
index f9cdfd54..00000000
--- a/vendor/codemirror/keymap/vim.js
+++ /dev/null
@@ -1,4123 +0,0 @@
-/**
- * Supported keybindings:
- *
- * Motion:
- * h, j, k, l
- * gj, gk
- * e, E, w, W, b, B, ge, gE
- * f, F, t, T
- * $, ^, 0, -, +, _
- * gg, G
- * %
- * ', `
- *
- * Operator:
- * d, y, c
- * dd, yy, cc
- * g~, g~g~
- * >, <, >>, <<
- *
- * Operator-Motion:
- * x, X, D, Y, C, ~
- *
- * Action:
- * a, i, s, A, I, S, o, O
- * zz, z., z, zt, zb, z-
- * J
- * u, Ctrl-r
- * m
- * r
- *
- * Modes:
- * ESC - leave insert mode, visual mode, and clear input state.
- * Ctrl-[, Ctrl-c - same as ESC.
- *
- * Registers: unnamed, -, a-z, A-Z, 0-9
- * (Does not respect the special case for number registers when delete
- * operator is made with these commands: %, (, ), , /, ?, n, N, {, } )
- * TODO: Implement the remaining registers.
- * Marks: a-z, A-Z, and 0-9
- * TODO: Implement the remaining special marks. They have more complex
- * behavior.
- *
- * Events:
- * 'vim-mode-change' - raised on the editor anytime the current mode changes,
- * Event object: {mode: "visual", subMode: "linewise"}
- *
- * Code structure:
- * 1. Default keymap
- * 2. Variable declarations and short basic helpers
- * 3. Instance (External API) implementation
- * 4. Internal state tracking objects (input state, counter) implementation
- * and instanstiation
- * 5. Key handler (the main command dispatcher) implementation
- * 6. Motion, operator, and action implementations
- * 7. Helper functions for the key handler, motions, operators, and actions
- * 8. Set up Vim to work as a keymap for CodeMirror.
- */
-
-(function(mod) {
- if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../lib/codemirror"), require("../addon/search/searchcursor"), require("../addon/dialog/dialog"));
- else if (typeof define == "function" && define.amd) // AMD
- define(["../lib/codemirror", "../addon/search/searchcursor", "../addon/dialog/dialog"], mod);
- else // Plain browser env
- mod(CodeMirror);
-})(function(CodeMirror) {
- 'use strict';
-
- var defaultKeymap = [
- // Key to key mapping. This goes first to make it possible to override
- // existing mappings.
- { keys: [''], type: 'keyToKey', toKeys: ['h'] },
- { keys: [''], type: 'keyToKey', toKeys: ['l'] },
- { keys: ['