- 
-
-
- );
- }
-}
-
-App.propTypes = {
- t: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(App);
diff --git a/src/components/CodeHighlight/CodeHighlight.test.tsx b/src/components/CodeHighlight/CodeHighlight.test.tsx
new file mode 100644
index 0000000..61614b3
--- /dev/null
+++ b/src/components/CodeHighlight/CodeHighlight.test.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import CodeHighlight from './CodeHighlight';
+
+describe('CodeHighlight Component', () => {
+ it('renders the children correctly', () => {
+ const { container } = render(
+ {children}
+
+ );
+};
+
+export default CodeHighlight;
\ No newline at end of file
diff --git a/src/components/CodeHighlight/index.ts b/src/components/CodeHighlight/index.ts
new file mode 100644
index 0000000..8e8f4b2
--- /dev/null
+++ b/src/components/CodeHighlight/index.ts
@@ -0,0 +1 @@
+export {default} from './CodeHighlight';
\ No newline at end of file
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
deleted file mode 100644
index 3391908..0000000
--- a/src/components/Footer.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Container } from '@material-ui/core';
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
-
-/**
- * @extends Component
- */
-class Footer extends React.PureComponent {
- /**
- * @inheritdoc
- * @returns {ReactElement}
- */
- render() {
- const { t } = this.props;
-
- return (
-
-
-
-
- );
- }
-}
-
-Footer.propTypes = {
- t: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(Footer);
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..53e568c
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,63 @@
+import { Container } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { Background } from '../../types/background';
+import { FC } from 'react';
+
+type Props = {
+ background: Background;
+};
+
+const Footer: FC
-
-
-
+
+
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 0000000..596eedb
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export {default} from './Footer';
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
deleted file mode 100644
index 048fe77..0000000
--- a/src/components/Header.jsx
+++ /dev/null
@@ -1,277 +0,0 @@
-/* global WEB_COMPONENT_API_ENDPOINT */
-
-import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-import React from 'react';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import { withTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import logo from '../images/logo.svg';
-import logoInfomaniak from '../images/logo-infomaniak.svg';
-import iconMenu from '../images/menu.svg';
-import i18n from '../lib/i18n';
-import StyledSelect from '../lib/Select';
-import BootstrapInput from '../lib/Input';
-
-/**
- * @extends Component
- */
-class IkHeader extends React.PureComponent {
- /**
- * @inheritdoc
- */
- constructor(props) {
- super(props);
-
- this.state = {
- session: null,
- };
- }
-
- /**
- * @inheritdoc
- */
- componentDidMount() {
- fetch(
- `${WEB_COMPONENT_API_ENDPOINT}/api/components/profile/me?with=current_group,user,groups,products`, {
- method: 'GET',
- credentials: 'include',
- // eslint-disable-next-line no-confusing-arrow
- },
- ).then((response) => (response.ok
- ? response.json()
- : Promise.reject(new Error(response.statusText))))
- .then((json) => {
- if (json.data.user) {
- if (json.data.user.locale) {
- window.CONST_LANG = json.data.user.locale.substr(0, 2);
- i18n.changeLanguage(json.data.user.locale.substr(0, 2));
- }
-
- this.setState({
- session: json.data,
- });
- }
- });
- }
-
- /**
- * @inheritdoc
- */
- static onHandleMenuItemClick(selectedItem) {
- window.CONST_LANG = selectedItem.target.value;
- i18n.changeLanguage(selectedItem.target.value);
- }
-
- /**
- * Redirect to the login page.
- *
- * @inheritdoc
- */
- static onLogin() {
- window.location = `${WEB_COMPONENT_API_ENDPOINT}/auth/login/paste?uri=${window.location.pathname}`;
- }
-
- showHeaderTitle() {
- const { session } = this.state;
-
- return (
- <>
- {session && session.current_group && !session.current_group.logo
- && (
-
+
+
+
+
+
+ Photo by
+ {' '}
+ {background.author}
+
+
+ -
+
+
+ {t('footer.cgu')}
+
+
+ -
+
+
+ {t('footer.know_more')}
+ {' '}
+ Infomaniak
+
+
+ - {session.current_group.organization_name} -
- )} - {session && session.current_group && session.current_group.logo - && ( -
-
-
-
- );
- }
-
- showConnectedUserMenu() {
- const { session } = this.state;
-
- if (!session || !session.user || !session.user.id) {
- return false;
- }
-
- return (
-
-
-
-
-
- );
- }
-
- showProductMenuRight() {
- const { session } = this.state;
-
- if (!session || !session.user || !session.user.id) {
- return false;
- }
-
- return (
-
-
-
-
-
-
-
- );
- }
-
- showProductMenuLeft() {
- const { session } = this.state;
-
- return (
- <>
-
- 
-
-
-
-
-
- 
-
-
-
- {this.showHeaderTitle()}
-
- kPaste
-
- {this.showProductMenuLeft()}
-
-
- {this.showProductMenuRight()}
- {this.showConnectedUserMenu()}
- {this.showNotConnectedMenu()}
-
-
+
+
+
+ );
+ };
+
+ const showConnectedUserMenu = () => {
+ if (!session || !session.user || !session.user.id) {
+ return false;
+ }
+
+ return (
+
+
+ );
+ };
+
+ const showProductMenuRight = () => {
+
+ if (!session || !session.user || !session.user.id) {
+ return false;
+ }
+
+ return (
+
+
+
+
+ );
+ };
+
+ if (window.location.search.includes('ksuite-mode=side') && bridge && bridge.isConnected) {
+ return (
+
+
+
+
+
+ kPaste
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showProductMenuRight()}
+ {showConnectedUserMenu()}
+ {showNotConnectedMenu()}
+
+
-
- );
- }
-}
-
-Home.propTypes = {
- t: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(Home);
diff --git a/src/components/Home/Home.test.tsx b/src/components/Home/Home.test.tsx
new file mode 100644
index 0000000..3a1cac5
--- /dev/null
+++ b/src/components/Home/Home.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Home from './Home';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('Home Component', () => {
+ it('renders the texts correctly', () => {
+ const { getByText } = render(
-
-
-
-
-
-
-
- 
- kPaste
-
-
-
-
-
-
-
-
-
-
- - {t('home.title')} -
-- {t('home.subtitle')} -
-- - {t('home.text')} - - - {t('home.link')} - -
-
+
+ );
+}
+
+export default Home;
+
diff --git a/src/components/Home/index.ts b/src/components/Home/index.ts
new file mode 100644
index 0000000..ff15772
--- /dev/null
+++ b/src/components/Home/index.ts
@@ -0,0 +1 @@
+export {default} from './Home';
\ No newline at end of file
diff --git a/src/components/HtmlTooltip/HtmlTooltip.tsx b/src/components/HtmlTooltip/HtmlTooltip.tsx
new file mode 100644
index 0000000..830f016
--- /dev/null
+++ b/src/components/HtmlTooltip/HtmlTooltip.tsx
@@ -0,0 +1,13 @@
+import { Tooltip, TooltipProps, styled } from '@mui/material';
+
+const HtmlTooltip = styled(Tooltip)
+
+
+
+
+
+
+
+
+
+ kPaste
+
+
+
+
+
+
+
+
+
+
+
+ + {t('home.title')} +
++ {t('home.subtitle')} +
++ + {t('home.text')} + + + {t('home.link')} + +
+
-
-
- );
- }
-}
-
-export default Loader;
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000..b0d33ca
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import logo from '../../images/logo.svg';
+
+const Loader: FC = () => {
+ return (
+ loading...
-
+
+
+ );
+}
+
+export default Loader;
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
new file mode 100644
index 0000000..7d5a53c
--- /dev/null
+++ b/src/components/Loader/index.ts
@@ -0,0 +1 @@
+export {default} from './Loader';
\ No newline at end of file
diff --git a/src/components/NewPaste.jsx b/src/components/NewPaste.jsx
deleted file mode 100644
index 5c505a2..0000000
--- a/src/components/NewPaste.jsx
+++ /dev/null
@@ -1,364 +0,0 @@
-/* global WEB_COMPONENT_API_ENDPOINT */
-import { Paper } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import TextareaAutosize from '@material-ui/core/TextareaAutosize';
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { Redirect } from 'react-router-dom';
-
-import InputAdornment from '@material-ui/core/InputAdornment';
-import IconButton from '@material-ui/core/IconButton';
-import Input from '@material-ui/core/Input';
-import PropTypes from 'prop-types';
-import Crypto from '../lib/Crypto';
-import expandTextarea from '../lib/ExpandPage';
-import pasteExpiration from '../lib/PasteExpiration';
-import StyledSwitch from '../lib/Switch';
-import HtmlTooltip from '../lib/Tooltip';
-import Footer from './Footer';
-
-/**
- * @extends Component
- */
-class NewPaste extends React.PureComponent {
- onChangeDestroy: () => void;
-
- onChangePassword: (Object) => void;
-
- onTogglePassword: () => void;
-
- onMessageChange: (Object) => void;
-
- onChangeValidityPeriod: (Object) => void;
-
- handleClickShowPassword: () => void;
-
- /**
- * @inheritdoc
- */
- constructor(props) {
- super(props);
-
- this.onChangeDestroy = this.onChangeDestroy.bind(this);
- this.onChangePassword = this.onChangePassword.bind(this);
- this.onTogglePassword = this.onTogglePassword.bind(this);
- this.onChangeValidityPeriod = this.onChangeValidityPeriod.bind(this);
- this.onMessageChange = this.onMessageChange.bind(this);
- this.handleClickShowPassword = this.handleClickShowPassword.bind(this);
-
- this.state = {
- message: '',
- destroy: false,
- period: '1w',
- key: null,
- password: '',
- enablePassword: false,
- showPassword: false,
- };
- }
-
- static getCookie(name) {
- const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
- if (match) {
- return match[2];
- }
-
- return '';
- }
-
- handleClickShowPassword() {
- const { showPassword } = this.state;
-
- this.setState({ showPassword: !showPassword });
- }
-
- /**
- * Change password input visibility.
- *
- * @param {Object} event - Switch event.
- * @returns {void}
- */
- onChangeDestroy() {
- const { destroy } = this.state;
-
- this.setState({
- destroy: !destroy,
- });
- }
-
- onTogglePassword() {
- const { enablePassword } = this.state;
-
- this.setState({
- enablePassword: !enablePassword,
- });
- }
-
- /**
- *
- * @param {object} event - Keyboard event.
- * @private
- * @returns {void}
- */
- onChangePassword(event) {
- this.setState({ password: event.target.value });
- }
-
- /**
- *
- * @param {object} event - Keyboard event.
- * @private
- * @returns {void}
- */
- onMessageChange(event) {
- this.setState({ message: event.target.value });
- }
-
- /**
- *
- * @param {string} event - Keyboard event.
- * @private
- * @returns {void}
- */
- onChangeValidityPeriod(event) {
- this.setState({ period: event.target.value });
- }
-
- async sendPaste() {
- const {
- message, destroy, period, password, enablePassword,
- } = this.state;
- const crypto = new Crypto();
- const datas = await crypto.crypt(message, enablePassword ? password : '');
- const headers = {
- Accept: 'application/json',
- 'Content-Type': 'application/json',
- 'X-XSRF-TOKEN': decodeURIComponent(NewPaste.getCookie('SHOP-XSRF-TOKEN')),
- };
- const paste = await fetch(`${WEB_COMPONENT_API_ENDPOINT}/api/components/paste`, {
- method: 'POST',
- headers,
- credentials: 'include',
- body: JSON.stringify({
- data: datas.message,
- vector: datas.vector,
- salt: datas.salt,
- burn: destroy,
- validity: period,
- password: !!(enablePassword && password.length),
- }),
- }).then((response) => (response.ok
- ? response.json()
- : Promise.reject(new Error(response.statusText))));
-
- this.setState({
- redirect: true,
- key: datas.key,
- pasteId: paste.data,
- });
- }
-
- /**
- * @inheritdoc
- * @returns {ReactElement}
- */
- render() {
- const { t } = this.props;
- const {
- message, redirect, key, pasteId, destroy, period, showPassword, enablePassword,
- } = this.state;
-
- if (redirect) {
- return (
- loading...
+
-
- );
- }
-}
-
-NewPaste.propTypes = {
- t: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(NewPaste);
diff --git a/src/components/ShowPaste.jsx b/src/components/ShowPaste.jsx
deleted file mode 100644
index 0535067..0000000
--- a/src/components/ShowPaste.jsx
+++ /dev/null
@@ -1,557 +0,0 @@
-import { Paper } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import ReactTimeAgo from 'react-time-ago';
-
-import TextField from '@material-ui/core/TextField';
-import PropTypes from 'prop-types';
-import CodeHighlight from '../lib/CodeHighlight';
-import Crypto from '../lib/Crypto';
-import expandTextarea from '../lib/ExpandPage';
-import i18n from '../lib/i18n';
-import pasteExpiration from '../lib/PasteExpiration';
-import HtmlTooltip from '../lib/Tooltip';
-import Footer from './Footer';
-
-/* global WEB_COMPONENT_API_ENDPOINT */
-// eslint-disable-next-line react/prop-types
-const TooltipContainer = ({ verboseDate, children }) => (
-
-
-
-
-
- - {t('paste.title')} -
-
-
-
-
-
-
-
-
- {t('paste.input.tooltip')}
-
- )}
- >
-
-
-
-
-
-
- - {t('paste.label.input')} -
-
-
-
-
-
-
-
- - - {t('paste.label.validity')} - -
-- {t('paste.text.validity')} -
-
-
-
-
-
-
-
- - - {t('paste.label.destroy')} - -
-- {t('paste.text.destroy')} -
-
-
- {enablePassword
- && (
- <>
-
-
- - - {t('paste.label.password')} - -
-- {t('paste.text.password')} -
-
-
-
- {showPassword ? : }
-
-
- )}
- />
-
-
-
- {t('paste.info.password')}
-
-
- )}
-
-
-
- {t('show_paste.new.title')}
- -
- {
- await this.handleTooltipClose();
- }}
- >
-
-
-
-
- )}
-
-
-
-
- {document.queryCommandSupported('copy')
- && (
- {window.location.href}
-
- {state.destroy
- && (
-
-
-
- {t('show_paste.label.burn')}
-
- )}
- {state.period
- && (
-
-
-
- {t('show_paste.label.validity')}
-
- {period}
-
- )}
-
-
-
- {t('show_paste.link.other_paste')}
-
-
-
- );
- }
-
- showError() {
- const { t } = this.props;
- const { error } = this.state;
-
- if (!error) {
- return false;
- }
-
- return (
- <>
- - {t('show_paste.title.error')} -
-- {t('show_paste.text.error')} - - 😎 -
-
-
- {t('show_paste.link.new_paste')}
-
-
-
- );
- }
-
- highlightCode() {
- const { highlightCode } = this.state;
- this.setState({ highlightCode: !highlightCode });
- }
-
- showPassword() {
- const { t } = this.props;
- const {
- password, invalidPassword,
- } = this.state;
-
- if (!password) {
- return false;
- }
-
- return (
- <>
- {t('show_paste.password.title')}
- -- {t('show_paste.subtitle.password')} -
- -
-
-
-
- - {t('paste.password.input')} -
-
-
- {t('show_paste.info.wrong_password')}
-
- )}
-
-
-
-
- );
- }
-
- showMessage() {
- const { t } = this.props;
- const {
- error, newPaste, expiratedAt, burn, message, highlightCode, password,
- } = this.state;
-
- if (error || newPaste || password) {
- return false;
- }
-
- return (
- <>
- - {t('show_paste.title.normal')} -
- {expiratedAt - && ( -
- {t('show_paste.subtitle.destroy')}
-
-
-
-
- {t('show_paste.label.message')}
-
-
-
-
- {burn
- && (
-
-
-
- {t('paste.input.copy')}
-
- )}
- >
-
-
-
-
- {t('paste.input.tooltip')}
-
- )}
- >
-
-
-
- {!highlightCode
- && (
-
- {t('paste.input.code')}
-
- )}
- >
-
-
- )}
-
-
-
- - - - {t('show_paste.label.destroy')} -
- )} - -
-
- {message}
-
-
-
-
- {t('show_paste.link.new_paste')}
-
-
-
- );
- }
-
- /**
- * @inheritdoc
- * @returns {ReactElement}
- */
- render() {
- return (
-
-
- );
- }
-}
-
-ShowPaste.propTypes = {
- t: PropTypes.func.isRequired,
- // eslint-disable-next-line react/forbid-prop-types
- match: PropTypes.object.isRequired,
- // eslint-disable-next-line react/forbid-prop-types
- location: PropTypes.object.isRequired,
- // eslint-disable-next-line react/forbid-prop-types
- history: PropTypes.object.isRequired,
-};
-
-export default withTranslation()(ShowPaste);
diff --git a/src/components/StyledSelect/StyledSelect.tsx b/src/components/StyledSelect/StyledSelect.tsx
new file mode 100644
index 0000000..8959b58
--- /dev/null
+++ b/src/components/StyledSelect/StyledSelect.tsx
@@ -0,0 +1,16 @@
+import { Select, SelectProps, styled } from '@mui/material';
+
+const StyledSelect = styled(Select)
-
-
-
- {this.showNew()}
- {this.showError()}
- {this.showMessage()}
- {this.showPassword()}
-
-
- {children}
-
- );
- }
-}
-
-CodeHighlight.propTypes = {
- children: PropTypes.node.isRequired,
- code: PropTypes.bool.isRequired,
-};
-
-export default CodeHighlight;
diff --git a/src/lib/Crypto/Crypto.test.ts b/src/lib/Crypto/Crypto.test.ts
new file mode 100644
index 0000000..03d95d5
--- /dev/null
+++ b/src/lib/Crypto/Crypto.test.ts
@@ -0,0 +1,19 @@
+import MyCrypto from './Crypto';
+import Crypto from './Crypto';
+import { describe, expect, it } from 'vitest';
+
+describe('Crypto', () => {
+ it('should be the same message', async () => {
+ const password = 'testPassword';
+ const crypto = new MyCrypto();
+ const originalMessage = 'This is a test message';
+ const encryptedMessage = await crypto.crypt(originalMessage, password);
+ const crypt = new Crypto(
+ crypto.key,
+ atob(encryptedMessage.vector),
+ atob(encryptedMessage.salt),
+ );
+ const decryptedMessage = await crypt.decrypt(encryptedMessage.message, password);
+ expect(originalMessage).toBe(decryptedMessage);
+ });
+});
\ No newline at end of file
diff --git a/src/lib/Crypto.js b/src/lib/Crypto/Crypto.ts
similarity index 73%
rename from src/lib/Crypto.js
rename to src/lib/Crypto/Crypto.ts
index 40f2383..f9adede 100644
--- a/src/lib/Crypto.js
+++ b/src/lib/Crypto/Crypto.ts
@@ -1,14 +1,20 @@
-const BASE58 = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
-const baseX = require('base-x')(BASE58);
-const pako = require('pako');
-
-class Crypto {
- key: String;
+import pako from 'pako';
+import base from 'base-x';
- vector: String;
+const BASE58 = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
+const baseX = base(BASE58);
- salt: String;
+interface ICrypto {
+ key: string;
+ vector: string;
+ salt: string;
+}
+export class Crypto implements ICrypto{
+ key: string;
+ vector: string;
+ salt: string;
+
static interation() {
return 100000;
}
@@ -21,7 +27,7 @@ class Crypto {
return 128;
}
- constructor(key, vector, salt) {
+ constructor(key?: string, vector?: string, salt?: string) {
if (key) {
this.key = key;
} else {
@@ -41,7 +47,7 @@ class Crypto {
}
}
- async crypt(text, password) {
+ async crypt(text: string, password:string) {
const derivedKey = await this.deriveKey(password);
const message = await this.aesGcmEncrypt(text, derivedKey);
@@ -53,18 +59,18 @@ class Crypto {
};
}
- async decrypt(text, password) {
+ async decrypt(text: string, password: string) {
const derivedKey = await this.deriveKey(password);
return this.aesGcmDecrypt(text, derivedKey);
}
- static base58encode(input) {
+ static base58encode(input: string) {
return baseX.encode(
Crypto.stringToArraybuffer(input),
);
}
- async deriveKey(password) {
+ async deriveKey(password: string) {
let keyArray = Crypto.stringToArraybuffer(this.key);
if (password.length > 0) {
const passwordArray = Crypto.stringToArraybuffer(password);
@@ -74,7 +80,7 @@ class Crypto {
keyArray = newKeyArray;
}
- const importedKey = await window.crypto.subtle.importKey(
+ const importedKey = await globalThis.crypto.subtle.importKey(
'raw',
keyArray,
{ name: 'PBKDF2' },
@@ -82,7 +88,7 @@ class Crypto {
['deriveKey'],
);
- return window.crypto.subtle.deriveKey(
+ return globalThis.crypto.subtle.deriveKey(
{
name: 'PBKDF2',
salt: Crypto.stringToArraybuffer(this.salt),
@@ -99,8 +105,8 @@ class Crypto {
);
}
- static stringToArraybuffer(message) {
- let i: number;
+ static stringToArraybuffer(message: string) {
+ let i;
const messageArray = new Uint8Array(message.length);
for (i = 0; i < message.length; i += 1) {
messageArray[i] = message.charCodeAt(i);
@@ -108,14 +114,14 @@ class Crypto {
return messageArray;
}
- static utf16To8(message) {
+ static utf16To8(message: string) {
return encodeURIComponent(message).replace(
- /%([0-9A-F]{2})/g,
- (match, hexCharacter) => String.fromCharCode(`0x${hexCharacter}`),
+ /%([0-9A-F]{2})/g,
+ (_, hexCharacter) => String.fromCharCode(parseInt(hexCharacter, 16))
);
}
- async aesGcmEncrypt(plaintext, derivedKey) {
+ async aesGcmEncrypt(plaintext: string, derivedKey: CryptoKey) {
const alg = {
name: 'AES-GCM',
iv: Crypto.stringToArraybuffer(this.vector),
@@ -125,7 +131,7 @@ class Crypto {
Crypto.utf16To8(plaintext),
);
- const ctBuffer = await window.crypto.subtle.encrypt(
+ const ctBuffer = await globalThis.crypto.subtle.encrypt(
alg,
derivedKey,
pako.deflate(message),
@@ -136,8 +142,8 @@ class Crypto {
);
}
- static arraybufferToString(messageArray) {
- let i: number;
+ static arraybufferToString(messageArray: ArrayBuffer) {
+ let i;
const array = new Uint8Array(messageArray);
let message = '';
for (i = 0; i < array.length; i += 1) {
@@ -146,11 +152,11 @@ class Crypto {
return message;
}
- static getRandomBytes(length) {
- let i: number;
+ static getRandomBytes(length: number) {
+ let i;
let bytes = '';
const byteArray = new Uint8Array(length);
- window.crypto.getRandomValues(byteArray);
+ globalThis.crypto.getRandomValues(byteArray);
for (i = 0; i < length; i += 1) {
bytes += String.fromCharCode(byteArray[i]);
}
@@ -158,7 +164,7 @@ class Crypto {
}
static getPasteKey() {
- let newKey = window.location.hash.substring(1);
+ let newKey = globalThis.location.hash.substring(1);
if (newKey === '') {
throw new Error('no encryption key given');
@@ -174,13 +180,13 @@ class Crypto {
return Crypto.base58decode(newKey).padStart(32, '\u0000');
}
- static base58decode(input) {
+ static base58decode(input: string) {
return Crypto.arraybufferToString(
baseX.decode(input),
);
}
- static utf8To16(message) {
+ static utf8To16(message: string) {
return decodeURIComponent(
message.split('').map(
(character) => `%${(`00${character.charCodeAt(0).toString(16)}`).slice(-2)}`,
@@ -188,14 +194,14 @@ class Crypto {
);
}
- async aesGcmDecrypt(ciphertext, derivedKey) {
+ async aesGcmDecrypt(ciphertext: string, derivedKey: CryptoKey) {
const alg = {
name: 'AES-GCM',
iv: Crypto.stringToArraybuffer(this.vector),
tagLength: Crypto.tagSize(),
};
- const plainBuffer = await window.crypto.subtle.decrypt(
+ const plainBuffer = await globalThis.crypto.subtle.decrypt(
alg,
derivedKey,
Crypto.stringToArraybuffer(atob(ciphertext)),
diff --git a/src/lib/ExpandPage.js b/src/lib/ExpandPage/ExpandPage.ts
similarity index 58%
rename from src/lib/ExpandPage.js
rename to src/lib/ExpandPage/ExpandPage.ts
index d70c3a1..1a390b0 100644
--- a/src/lib/ExpandPage.js
+++ b/src/lib/ExpandPage/ExpandPage.ts
@@ -2,18 +2,18 @@ const expandTextarea = () => {
const elem = document.getElementById('root');
const iconElem = document.getElementById('expand_button');
- if (elem.classList.contains('expand')) {
+ if (elem && elem.classList.contains('expand')) {
elem.classList.remove('expand');
} else {
- elem.classList.add('expand');
+ elem?.classList.add('expand');
}
- if (iconElem.classList.contains('icon-shrink-3')) {
+ if (iconElem?.classList.contains('icon-shrink-3')) {
iconElem.classList.add('icon-expand-diagonal');
iconElem.classList.remove('icon-shrink-3');
} else {
- iconElem.classList.add('icon-shrink-3');
- iconElem.classList.remove('icon-expand-diagonal');
+ iconElem?.classList.add('icon-shrink-3');
+ iconElem?.classList.remove('icon-expand-diagonal');
}
};
diff --git a/src/lib/Input.jsx b/src/lib/Input.jsx
deleted file mode 100644
index 20ca6c3..0000000
--- a/src/lib/Input.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { InputBase, withStyles } from '@material-ui/core';
-
-const BootstrapInput = withStyles(() => ({
- root: {
- width: 50,
- height: 35,
- },
-}))(InputBase);
-
-export default BootstrapInput;
diff --git a/src/lib/ScrollToTop.jsx b/src/lib/ScrollToTop.jsx
deleted file mode 100644
index e2e667a..0000000
--- a/src/lib/ScrollToTop.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
-
-class ScrollToTop extends Component
+
+
+ );
+}
+
+export default NewPaste;
diff --git a/src/pages/NewPaste/index.ts b/src/pages/NewPaste/index.ts
new file mode 100644
index 0000000..fe3a6ff
--- /dev/null
+++ b/src/pages/NewPaste/index.ts
@@ -0,0 +1 @@
+export {default} from './NewPaste';
\ No newline at end of file
diff --git a/src/pages/ShowPaste/ShowPaste.tsx b/src/pages/ShowPaste/ShowPaste.tsx
new file mode 100644
index 0000000..3a24674
--- /dev/null
+++ b/src/pages/ShowPaste/ShowPaste.tsx
@@ -0,0 +1,534 @@
+import React, { useState, useEffect, useCallback, useMemo, FC } from 'react';
+import { Link } from 'react-router-dom';
+import ReactTimeAgo from 'react-time-ago';
+import { Paper } from '@mui/material';
+import Button from '@mui/material/Button';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import TextField from '@mui/material/TextField';
+import { useLocation, useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ResponseData } from '../../types/paste';
+import { Background } from '../../types/background';
+
+import HtmlTooltip from '../../components/HtmlTooltip/HtmlTooltip';
+import i18n from '../../lib/i18n/i18n';
+import CodeHighlight from '../../components/CodeHighlight/CodeHighlight';
+import pasteExpiration from '../../data/PasteExpiration';
+import Crypto from '../../lib/Crypto/Crypto';
+import expandTextarea from '../../lib/ExpandPage/ExpandPage';
+import Footer from '../../components/Footer/Footer';
+
+type Props = {
+ background: Background;
+};
+
+const initialState = {
+ burn: false,
+ expiratedAt: new Date(),
+ destroy: false,
+ message: '',
+ vector: '',
+ password: false,
+ key: '',
+ salt: '',
+};
+
+type TooltipContainerProps = {
+ verboseDate: string;
+ children: React.ReactElement;
+};
+
+function TooltipContainer({
+ verboseDate,
+ children,
+}: TooltipContainerProps) {
+ return (
+
+
+
+
+
+ + {t('paste.title')} +
+
+
+
+
+
+
+
+
+ {t('paste.input.tooltip')}
+
+ )}
+ >
+
+
+
+
+
+
+ + {t('paste.label.input')} +
+
+
+
+
+
+
+
+ + + {t('paste.label.validity')} + +
++ {t('paste.text.validity')} +
+
+
+
+
+
+
+
+ + + {t('paste.label.destroy')} + +
+
+
+ {enablePassword
+ && (
+ <>
+
+
+ + + {t('paste.label.password')} + +
+
+
+
+ {showPassword ?
+ : }
+
+
+ )}
+ />
+
+
+
+ {t('paste.info.password')}
+
+
+ )}
+
+
+
+ {t('show_paste.new.title')}
+ +
+ {
+ handleTooltipClose();
+ }}
+ >
+
+
+
+
+ )}
+
+
+
+ {navigator.clipboard
+ && (
+ {window.location.href}
+
+ {destroy
+ && (
+
+
+
+ {t('show_paste.label.burn')}
+
+ )}
+ {periodLabel
+ && (
+
+
+
+ {t('show_paste.label.validity')}
+
+ {periodLabel}
+
+ )}
+
+
+
+ {t('show_paste.link.other_paste')}
+
+
+
+ );
+ };
+
+ const showError = () => {
+ if (!error) {
+ return false;
+ }
+
+ return (
+ <>
+ + {t('show_paste.title.error')} +
+
+
+ {t('show_paste.link.new_paste')}
+
+
+
+
+ {t('show_paste.link.text')}
+
+
+
+ );
+ };
+
+ const highlightCode = () => {
+ setHighlight(!highlight);
+ };
+
+ const showPassword = () => {
+ if (!password) {
+ return false;
+ }
+
+ return (
+ <>
+ {t('show_paste.password.title')}
+ ++ {t('show_paste.subtitle.password')} +
+ +
+
+
+
+ + {t('paste.password.input')} +
+
+
+ {t('show_paste.info.wrong_password')}
+
+ )}
+
+
+
+
+ );
+ };
+
+ const showMessage = () => {
+ if (error || newPaste || password) {
+ return false;
+ }
+ return (
+ <>
+ + {t('show_paste.title.normal')} +
+ {expiratedAt + && ( +
+ {t('show_paste.subtitle.destroy')}
+
+
+
+
+ {t('show_paste.label.message')}
+
+
+
+
+ {burn
+ && (
+
+
+
+ {t('paste.input.copy')}
+
+ )}
+ >
+
+
+
+
+ {t('paste.input.tooltip')}
+
+ )}
+ >
+
+
+
+ {!highlight
+ && (
+
+ {t('paste.input.code')}
+
+ )}
+ >
+
+
+ )}
+
+
+
+ + + + {t('show_paste.label.destroy')} +
+ )} +
+
+ {message}
+
+
+
+
+ {t('show_paste.label.post_message')}
+ {' '}
+
+ Infomaniak
+
+ {', '}
+ {t('show_paste.label.post_message_after')}
+
+
+
+ {t('show_paste.link.new_paste')}
+
+
+
+
+ {t('show_paste.link.text')}
+
+
+
+ );
+ };
+
+
+ return (
+
+
+
+ );
+}
+
+export default ShowPaste;
diff --git a/src/pages/ShowPaste/index.ts b/src/pages/ShowPaste/index.ts
new file mode 100644
index 0000000..67ccb16
--- /dev/null
+++ b/src/pages/ShowPaste/index.ts
@@ -0,0 +1 @@
+export {default} from './ShowPaste';
\ No newline at end of file
diff --git a/src/scss/App.scss b/src/scss/App.scss
index a0dd665..53201e1 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -3,8 +3,8 @@
font-style: normal;
font-weight: normal;
- src: url("../fonts/SuisseIntl-Regular.eot");
- src: url("../fonts/SuisseIntl-Regular.eot#iefix") format("embedded-opentype"), url("../fonts/SuisseIntl-Regular.woff") format("woff"), url("../fonts/SuisseIntl-Regular.ttf") format("truetype");
+ src: url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Regular.eot");
+ src: url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Regular.eot#iefix") format("embedded-opentype"), url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Regular.woff") format("woff"), url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Regular.ttf") format("truetype");
}
@font-face {
@@ -12,14 +12,11 @@
font-style: normal;
font-weight: bold;
- src: url("../fonts/SuisseIntl-Medium.eot");
- src: url("../fonts/SuisseIntl-Medium.eot#iefix") format("embedded-opentype"), url("../fonts/SuisseIntl-Medium.woff") format("woff"), url("../fonts/SuisseIntl-Medium.ttf") format("truetype");
+ src: url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Medium.eot");
+ src: url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Medium.eot#iefix") format("embedded-opentype"), url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Medium.woff") format("woff"), url("https://fonts.storage.infomaniak.com/SuisseIntl/SuisseIntl-Medium.ttf") format("truetype");
}
-$font-url-products: '../fonts/';
-
@import url('https://fonts.storage.infomaniak.com/current/icons/style.css');
-@import "../../node_modules/@infomaniak/font-assets/products/_infomaniak-products";
@import "Variable";
@import "Reset";
@@ -178,16 +175,6 @@ pre {
word-break: normal;
}
-.illus-container {
- z-index: 1;
- height: 91%;
- width: 44%;
- bottom: 0;
- right: 0;
- position: absolute;
- overflow: hidden;
-}
-
button.expand_button {
background-color: $white !important;
border-radius: 5px;
diff --git a/src/scss/Footer.scss b/src/scss/Footer.scss
index 024c3cf..0be5fa7 100644
--- a/src/scss/Footer.scss
+++ b/src/scss/Footer.scss
@@ -1,6 +1,5 @@
.footer {
color: white;
- background-color: $yellow;
display: flex;
z-index: 2;
align-items: center;
@@ -15,7 +14,10 @@
}
a {
+ color: white;
font-size: 14px;
+ font-weight: 400;
+ line-height: 16px;
}
div {
@@ -23,9 +25,3 @@
justify-content: left;
}
}
-
-@media only screen and (min-width: 1100px) {
- .footer {
- padding: 5% 3% 3% 3%;
- }
-}
diff --git a/src/scss/Header.scss b/src/scss/Header.scss
index 9aad612..8797595 100644
--- a/src/scss/Header.scss
+++ b/src/scss/Header.scss
@@ -1,6 +1,6 @@
.ik-header {
background: white;
- height: 66px;
+ height: 64px;
display: flex;
justify-content: space-between;
z-index: 1;
@@ -29,50 +29,44 @@
.header-icon-wrapper {
width: auto;
- min-width: 66px;
+ min-width: 64px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
- }
- .header-title {
- display: flex;
- flex-direction: column;
- color: #000;
- margin-left: 10px;
- margin-right: auto;
-
- .product-name {
- margin-top: 5px;
- font-size: 24px;
- line-height: 28px;
- color: #333333;
- font-weight: bold;
+ &.products-component {
+ @media only screen and (max-width: 400px) {
+ display: none;
+ }
}
}
.header-title-wrapper {
- width: 320px;
+ width: 288px;
height: 100%;
display: flex;
align-items: center;
- margin-left: 15px;
}
.relative {
position: relative;
z-index: 5;
+
+ &:hover {
+ background-color: #3F435014;
+ }
}
.header-icon {
- padding: 0 15px;
- height: 66px;
+ padding: 0 22px;
+ height: 64px;
display: flex;
align-items: center;
+ justify-content: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
- > span {
+ >span {
cursor: pointer;
background-color: #f5f5f5;
color: $gray;
@@ -92,30 +86,14 @@
white-space: nowrap;
}
- .header-title {
- display: flex;
- flex-direction: column;
- color: black;
- margin-left: 10px;
- margin-right: auto;
- }
-
- .product-name {
- font-size: 24px;
- }
-
.user-avatar-wrapper {
- height: 66px;
+ height: 64px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
- margin-left: 15px;
- }
-
- .product-icon {
- width: 40px;
- height: 40px;
+ margin-left: 9px;
+ max-width: 64px;
}
.avatar {
@@ -125,23 +103,25 @@
font-weight: 100;
object-fit: cover;
}
-}
-.welcome .header .illus-container {
- max-height: 90%;
- min-width: 330px;
- align-self: flex-end;
-}
+ &.bridge-header {
+ border-bottom: 1px solid #E0E0E0;
+
+ .header-icon {
+ min-width: 45px;
+ width: 45px;
+ height: 100%;
+ color: #000;
-@media only screen and (max-width: 1100px) {
- .illus-container {
- position: absolute;
- right: 0;
+ &:hover {
+ background-color: unset;
+ }
+ }
}
}
@media only screen and (max-width: 450px) {
.ik-header .header-title-wrapper {
- width: 150px;
+ width: 210px;
}
-}
+}
\ No newline at end of file
diff --git a/src/scss/Home.scss b/src/scss/Home.scss
index 2f2e820..2115a36 100644
--- a/src/scss/Home.scss
+++ b/src/scss/Home.scss
@@ -4,8 +4,9 @@
justify-content: space-between;
font-family: inherit;
position: relative;
- background-color: #E8A20C;
min-height: calc(100% - 66px);
+ background: no-repeat 50% 50%;
+ background-size: cover;
#header_homepage {
flex-direction: column;
diff --git a/src/scss/NewPaste.scss b/src/scss/NewPaste.scss
index 7209369..2af032f 100644
--- a/src/scss/NewPaste.scss
+++ b/src/scss/NewPaste.scss
@@ -7,6 +7,10 @@
max-width: none;
}
+ #paste_container .title-section {
+ max-width: inherit;
+ }
+
#welcome-container-newpaste {
padding: 50px 50px 0 50px;
flex-grow: 2;
@@ -116,6 +120,7 @@
display: flex;
justify-content: space-between;
width: 100%;
+ max-width: 760px;
.settings-title {
font-size: 14px;
@@ -134,8 +139,6 @@
flex: 0 0 70%;
overflow-y: hidden;
}
-
- button {}
}
.validity-select {
@@ -156,6 +159,7 @@
.password-info-section {
margin-top: 15px;
+
span {
vertical-align: super;
@@ -182,6 +186,10 @@
margin-bottom: 20px;
}
+ .after-button-section {
+ padding-top: 10px;
+ }
+
strong {
font-size: 14px;
line-height: 20px;
@@ -263,7 +271,7 @@ button.copy-buton {
.paste_container-main {
z-index: 3;
- >div {
+ > div {
padding: 30px;
margin: 30px 0;
}
@@ -288,7 +296,6 @@ button.copy-buton {
#paste_container {
#new_paste_box {
- height: 97%;
max-width: none !important;
margin: 0px;
margin-top: 30px;
@@ -312,12 +319,6 @@ button.copy-buton {
}
}
-@media only screen and (max-height: 890px) {
- #root.expand #paste_container #new_paste_box {
- height: 90%;
- }
-}
-
@media only screen and (max-width: 735px) {
#welcome-container-newpaste {
padding: 15px;
diff --git a/src/scss/ShowPaste.scss b/src/scss/ShowPaste.scss
index 362ab5f..8e1bd8c 100644
--- a/src/scss/ShowPaste.scss
+++ b/src/scss/ShowPaste.scss
@@ -8,10 +8,6 @@ h2 {
padding: 50px 50px 0 50px;
flex-grow: 2;
}
-
- .pasteContent {
- height: 91%;
- }
}
#welcome-container-showpaste {
@@ -22,7 +18,7 @@ h2 {
width: 60%;
- h1#new_paste_title {
+ .show_paste_label {
max-width: 550px;
}
@@ -62,6 +58,17 @@ h2 {
width: 100%;
}
+ .show_paste_post_message {
+ margin-top: 20px;
+
+ a {
+ color: #3f51b5;
+ text-decoration: underline;
+ font-size: inherit;
+ font-weight: inherit;
+ }
+ }
+
.icon-bubble-alert {
color: #FB472E;
}
@@ -77,7 +84,6 @@ h2 {
.pasteContent {
pre {
height: auto;
- min-height: 95%;
}
}
}
@@ -97,3 +103,13 @@ h2 {
padding: 10px 0 0 0;
}
}
+
+.override-time {
+ background-color: unset !important;
+ color: unset !important;
+ max-width: unset !important;
+ font-size: unset !important;
+ border: unset !important;
+ border-radius: unset !important;
+ padding: unset !important;
+}
\ No newline at end of file
diff --git a/src/types/background.ts b/src/types/background.ts
new file mode 100644
index 0000000..d8ff0ae
--- /dev/null
+++ b/src/types/background.ts
@@ -0,0 +1,5 @@
+export type Background = {
+ link: string;
+ image: string;
+ author: string;
+}
\ No newline at end of file
diff --git a/src/types/module.ts b/src/types/module.ts
new file mode 100644
index 0000000..2e9006f
--- /dev/null
+++ b/src/types/module.ts
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export { };
+
+declare global {
+ // eslint-disable-next-line @typescript-eslint/no-namespace
+ export namespace JSX {
+ export interface IntrinsicElements {
+ 'module-products-component': any;
+ 'module-header-title-component': any;
+ 'module-menu-user': any;
+ 'module-avatar-component': any;
+ 'wc-user-panel': any;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/types/paste.ts b/src/types/paste.ts
new file mode 100644
index 0000000..4caed7d
--- /dev/null
+++ b/src/types/paste.ts
@@ -0,0 +1,21 @@
+export type ResponseData = {
+ burn: boolean;
+ expiratedAt: Date | null;
+ destroy: boolean;
+ message: string;
+ vector: string;
+ key: string;
+ password: boolean;
+ salt: string;
+};
+
+export type PasteData = {
+ pasteId: string;
+ key: string;
+ destroy: boolean;
+ period: string;
+ message: string;
+ enablePassword: boolean;
+ password: string;
+ showPassword: boolean;
+};
\ No newline at end of file
diff --git a/src/types/user.ts b/src/types/user.ts
new file mode 100644
index 0000000..4751ad4
--- /dev/null
+++ b/src/types/user.ts
@@ -0,0 +1,16 @@
+export type User = {
+ id: string;
+ firstname: string;
+ lastname: string;
+ avatar: string;
+ length: number;
+ email: string;
+ display_name: string;
+ }
+
+export type Session = {
+ user: User;
+ current_group: {
+ id: string;
+ };
+}
\ No newline at end of file
diff --git a/src/types/window.ts b/src/types/window.ts
new file mode 100644
index 0000000..9a16349
--- /dev/null
+++ b/src/types/window.ts
@@ -0,0 +1,9 @@
+export { };
+
+declare global {
+ interface Window {
+ WEB_COMPONENT_API_ENDPOINT: URL;
+ CONST_LANG: string;
+ location: Location;
+ }
+}
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+
+ {showNew()}
+ {showError()}
+ {showMessage()}
+ {showPassword()}
+
+