Skip to content

Commit a688c7f

Browse files
jricherjricher
committed
switched header style, added i18n shell
1 parent dcc28e7 commit a688c7f

File tree

5 files changed

+139
-25
lines changed

5 files changed

+139
-25
lines changed

‎package-lock.json

Lines changed: 30 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"react-transition-group": "^2.2.0",
1010
"react-router-dom": "^4.3.1",
1111
"qrcode.react": "^0.9.3",
12-
"react-syntax-highlighter": "^10.2.1"
12+
"react-syntax-highlighter": "^10.2.1",
13+
"react-i18next": "^11.2.5",
14+
"i18next": "^19.0.1"
1315
},
1416
"scripts": {
1517
"watch": "webpack --watch -d"

‎src/main/js/app.js

Lines changed: 65 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { Button, Tabs, Container, Section, Level, Form, Columns } from 'react-bulma-components';
44
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
5+
import i18n from './i18n';
6+
import { useTranslation } from 'react-i18next';
7+
import { Translation } from 'react-i18next';
58

69

710
class MkJwk extends React.Component {
@@ -159,7 +162,7 @@ const KeyProps = ({...props}) => {
159162
</Form.Field>
160163
</Columns.Column>
161164
<Columns.Column>
162-
<Button onClick={props.generate} fullwidth color='primary'>Generate</Button>
165+
<Button onClick={props.generate} fullwidth color='primary'>Generate</Button>
163166
</Columns.Column>
164167
</Columns>
165168
);
@@ -219,8 +222,8 @@ const KeyProps = ({...props}) => {
219222
</Form.Field>
220223
</Columns.Column>
221224
<Columns.Column>
222-
<Button onClick={props.generate} fullwidth color='primary'>Generate</Button>
223-
</Columns.Column>
225+
<Button onClick={props.generate} fullwidth color='primary'>Generate</Button>
226+
</Columns.Column>
224227
</Columns>
225228
);
226229
} else if (props.kty == 'oct') {
@@ -268,8 +271,8 @@ const KeyProps = ({...props}) => {
268271
</Form.Field>
269272
</Columns.Column>
270273
<Columns.Column>
271-
<Button onClick={props.generate} fullwidth color='primary'>Generate</Button>
272-
</Columns.Column>
274+
<Button onClick={props.generate} fullwidth color='primary'>Generate</Button>
275+
</Columns.Column>
273276
</Columns>
274277
);
275278
}
@@ -302,7 +305,7 @@ const KeyDisplay = ({...props}) => {
302305
} else {
303306
return (
304307
<Columns>
305-
<Columns.Column size='half'>
308+
<Columns.Column size='half'>
306309
<p>Shared Key</p>
307310
<SyntaxHighlighter language='json'
308311
customStyle={{wordBreak: 'break-all', wordWrap: 'break-word', whiteSpace: 'pre-wrap'}}
@@ -319,9 +322,64 @@ const KeyDisplay = ({...props}) => {
319322
}
320323
}
321324

325+
class LanguageSwitch extends React.Component {
326+
constructor(props) {
327+
super(props);
328+
329+
this.state = {
330+
language: 'en'
331+
};
332+
333+
if (props.lang) {
334+
this.selectTab(props.lang)();
335+
}
336+
}
337+
338+
selectTab = (lang) => () => {
339+
// short circuit out if it's not changing
340+
if (lang == this.state.language) {
341+
return;
342+
}
343+
344+
var _self = this;
345+
346+
i18n.changeLanguage(lang).then((t) => {
347+
_self.setState({
348+
language: lang
349+
});
350+
});
351+
}
352+
353+
render = () => {
354+
return (
355+
<Tabs type='toggle' className='has-background-dark'>
356+
<Tabs.Tab active={this.state.language == 'en'} onClick={this.selectTab('en')}>
357+
English
358+
</Tabs.Tab>
359+
<Tabs.Tab active={this.state.language == 'ja'} onClick={this.selectTab('ja')}>
360+
日本語
361+
</Tabs.Tab>
362+
</Tabs>
363+
);
364+
}
365+
}
366+
367+
const urlObject = new URL(window.location);
368+
const lang = urlObject.searchParams.get('lang')
369+
console.log(lang)
322370

323371
ReactDOM.render((
324-
<MkJwk />
372+
<LanguageSwitch lang={lang} />
373+
),
374+
document.getElementById('languageSwitch')
375+
);
376+
377+
ReactDOM.render((
378+
<Translation i18n={i18n}>
379+
{
380+
(t, { i18n }) => <MkJwk t={t} />
381+
}
382+
</Translation>
325383
),
326384
document.getElementById('react')
327385
);

‎src/main/js/i18n.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import i18n from "i18next";
2+
import { initReactI18next } from "react-i18next";
3+
4+
//the translations
5+
const resources = {
6+
en: {
7+
translation: {
8+
}
9+
},
10+
ja: {
11+
translation: {
12+
}
13+
}
14+
};
15+
16+
i18n
17+
.use(initReactI18next) // passes i18n down to react-i18next
18+
.init({
19+
resources,
20+
lng: "en",
21+
fallbackLng: "en",
22+
23+
interpolation: {
24+
escapeValue: false // react already safes from xss
25+
}
26+
});
27+
28+
export default i18n;

‎src/main/resources/public/index.html

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,16 @@
1919

2020
<body>
2121

22-
<nav class="navbar" role="navigation" aria-label="main navigation">
23-
<div class="navbar-brand">
24-
<h1 class="title is-size-1 navbar-item">
25-
mkjwk
26-
</h1>
27-
<h3 class="subtitle is-size-3 navbar-item">
28-
JSON Web Key Generator
29-
</h3>
30-
</div>
31-
</nav>
32-
33-
<section class="hero is-dark is-bold">
34-
<div class="hero-body">
35-
<div class="container">
22+
<div class="hero is-dark">
23+
<div class="hero-body">
24+
<div class="container">
25+
<div id="languageSwitch" class="navbar-item is-mobile is-pulled-right"></div>
26+
<h1 class="title is-size-1">
27+
mkjwk
28+
</h1>
29+
<h3 class="subtitle is-size-3">
30+
simple JSON Web Key generator
31+
</h3>
3632
<p>
3733
A <a href="https://tools.ietf.org/html/draft-ietf-jose-json-web-key">JSON
3834
Web Key (JWK)</a> is a cryptographic key or keypair expressed in JSON
@@ -48,9 +44,9 @@ <h3 class="subtitle is-size-3 navbar-item">
4844
href="https://github.com/mitreid-connect/json-web-key-generator">command line
4945
utility</a> version of the library that powers this site.
5046
</p>
51-
</div>
52-
</div>
53-
</section>
47+
</div>
48+
</div>
49+
</div>
5450

5551
<div id="react"></div>
5652

0 commit comments

Comments
 (0)