simono41/audible-tools.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added google recaptcha

Browse source
This commit is contained in:
JKamsker 2022-09-01 00:00:52 +02:00
parent 0b02da06ef
commit 246a777878
4 changed files with 346 additions and 302 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
package-lock.json generated
View file

@ -22,6 +22,7 @@
"react-dom": "^16.14.0", "react-dom": "^16.14.0",
"react-dropzone": "^11.3.2", "react-dropzone": "^11.3.2",
"react-ga": "^3.3.0", "react-ga": "^3.3.0",
"react-google-recaptcha-v3": "^1.10.0",
"react-notifications-component": "^3.1.0", "react-notifications-component": "^3.1.0",
"react-scripts": "^4.0.3", "react-scripts": "^4.0.3",
"reactstrap": "^8.9.0", "reactstrap": "^8.9.0",
@ -18676,6 +18677,18 @@
"react": "^15.6.2 || ^16.0 || ^17" "react": "^15.6.2 || ^16.0 || ^17"
} }
}, },
"node_modules/react-google-recaptcha-v3": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.10.0.tgz",
"integrity": "sha512-JBoqU107X8klQmS8tQSbQh1IMsT1fH3kVoArIqnia0rtn0rPNG9Ld+9rD/dHJMculIczSZpGvIJTXXwtsolMcg==",
"dependencies": {
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"react": "^17.0 || ^18.0",
"react-dom": "^17.0 || ^18.0"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -38638,6 +38651,14 @@
"resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz", "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz",
"integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==" "integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ=="
}, },
"react-google-recaptcha-v3": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.10.0.tgz",
"integrity": "sha512-JBoqU107X8klQmS8tQSbQh1IMsT1fH3kVoArIqnia0rtn0rPNG9Ld+9rD/dHJMculIczSZpGvIJTXXwtsolMcg==",
"requires": {
"hoist-non-react-statics": "^3.3.2"
}
},
"react-is": { "react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

1
package.json
View file

@ -18,6 +18,7 @@
"react-dom": "^16.14.0", "react-dom": "^16.14.0",
"react-dropzone": "^11.3.2", "react-dropzone": "^11.3.2",
"react-ga": "^3.3.0", "react-ga": "^3.3.0",
"react-google-recaptcha-v3": "^1.10.0",
"react-notifications-component": "^3.1.0", "react-notifications-component": "^3.1.0",
"react-scripts": "^4.0.3", "react-scripts": "^4.0.3",
"reactstrap": "^8.9.0", "reactstrap": "^8.9.0",

232
src/ChecksumResolver.js
View file

@ -1,41 +1,40 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from '@material-ui/core/styles'
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar'
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button'
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@material-ui/core/CssBaseline'
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField'
import Link from '@material-ui/core/Link'; import Link from '@material-ui/core/Link'
import Box from '@material-ui/core/Box'; import Box from '@material-ui/core/Box'
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography'
import Container from '@material-ui/core/Container'; import Container from '@material-ui/core/Container'
import Dropzone from 'react-dropzone' import Dropzone from 'react-dropzone'
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton'
import FileCopyOutlined from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlined from '@material-ui/icons/FileCopyOutlined'
import PublishOutlined from '@material-ui/icons/PublishOutlined'; import PublishOutlined from '@material-ui/icons/PublishOutlined'
// import { useFilePicker } from 'react-sage'
// import { FilePicker } from 'react-file-picker'
import { FilePicker } from '../src/Components' import { FilePicker } from '../src/Components'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { CopyToClipboard } from 'react-copy-to-clipboard';
import ControlledAccordions from './ControlledAccordions' import ControlledAccordions from './ControlledAccordions'
import OnlineConverter from "./OnlineConverter"; import OnlineConverter from './OnlineConverter'
import 'react-notifications-component/dist/theme.css' import 'react-notifications-component/dist/theme.css'
import ReactNotification from 'react-notifications-component' import ReactNotification from 'react-notifications-component'
import { store } from 'react-notifications-component'; import { store } from 'react-notifications-component'
// import 'animate.css/animate.compat.css'
import AaxHashAlgorithm from './Utils/AaxHashAlgorithm' import AaxHashAlgorithm from './Utils/AaxHashAlgorithm'
import {
GoogleReCaptchaProvider,
withGoogleReCaptcha,
} from 'react-google-recaptcha-v3'
const useStyles = theme => ({ const useStyles = (theme) => ({
paper: { paper: {
marginTop: theme.spacing(8), marginTop: theme.spacing(8),
display: 'flex', display: 'flex',
@ -61,27 +60,27 @@ const useStyles = theme => ({
fontSize: theme.typography.pxToRem(15), fontSize: theme.typography.pxToRem(15),
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
}, },
}); })
class ChecksumResolver extends React.Component { class ChecksumResolver extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
checksum: "", checksum: '',
fileName: "input.aax" fileName: 'input.aax',
} }
} }
DarkerDisabledTextField = withStyles({ DarkerDisabledTextField = withStyles({
root: { root: {
marginRight: 8, marginRight: 8,
"& .MuiInputBase-root.Mui-disabled": { '& .MuiInputBase-root.Mui-disabled': {
color: "rgba(0, 0, 0, 0.6)" color: 'rgba(0, 0, 0, 0.6)',
} },
} },
})(TextField); })(TextField)
Copyright = (function () { Copyright = function () {
return ( return (
<Typography variant="body2" color="textSecondary" align="center"> <Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '} {'Copyright © '}
@ -91,116 +90,134 @@ class ChecksumResolver extends React.Component {
{new Date().getFullYear()} {new Date().getFullYear()}
{'. V 0.3'} {'. V 0.3'}
</Typography> </Typography>
); )
}) }
setChecksum = (value) => { setChecksum = (value) => {
if (value.length > 40) { if (value.length > 40) {
return; return
} }
this.setState({ checksum: value }) this.setState({ checksum: value })
} }
isChecksumValid = () => { isChecksumValid = () => {
const { checksum } = this.state; const { checksum } = this.state
const regex = RegExp('[a-f0-9]{40}'); const regex = RegExp('[a-f0-9]{40}')
const testResults = regex.test(checksum); const testResults = regex.test(checksum)
return testResults; return testResults
} }
isInputInvalid = () => { isInputInvalid = () => {
const { checksum } = this.state; const { checksum } = this.state
if (!checksum || checksum === '') { if (!checksum || checksum === '') {
return false; return false
}
return !this.isChecksumValid()
} }
return !this.isChecksumValid();
};
addNotification = function (text, success = true) { addNotification = function (text, success = true) {
store.addNotification({ store.addNotification({
message: text, message: text,
type: success ? "success" : "danger", type: success ? 'success' : 'danger',
// type: "danger", // type: "danger",
insert: "bottom-left", insert: 'bottom-left',
container: "top-full", container: 'top-full',
animationIn: ["animate__animated", "animate__fadeIn"], animationIn: ['animate__animated', 'animate__fadeIn'],
animationOut: ["animate__animated", "animate__fadeOut"], animationOut: ['animate__animated', 'animate__fadeOut'],
dismiss: { dismiss: {
duration: 3000, duration: 3000,
onScreen: false onScreen: false,
} },
}); })
} }
requestActivationBytes = async () => { requestActivationBytes = async () => {
const { checksum } = this.state; const { checksum } = this.state
const { executeRecaptcha } = (this.props)
.googleReCaptchaProps;
if (!executeRecaptcha) {
console.log('Recaptcha has not been loaded');
return;
}
const token = await executeRecaptcha('homepage');
console.log(`XToken: ${token}`);
try { try {
let request = await fetch("https://api.audible-converter.ml/api/v2/activation/" + checksum); let request = await fetch(
let result = await request.json(); 'https://api.audible-converter.ml/api/v2/activation/' + checksum,
const { success, activationBytes } = result; )
let result = await request.json()
const { success, activationBytes } = result
if (success !== true) { if (success !== true) {
this.setState({ activationBytes: 'UNKNOWN' }); this.setState({ activationBytes: 'UNKNOWN' })
this.addNotification("An error occured while resolving the activation bytes, please check your inputs", false); this.addNotification(
return; 'An error occured while resolving the activation bytes, please check your inputs',
false,
)
return
} }
if (success === true) { if (success === true) {
const calculatedChecksum = await AaxHashAlgorithm.CalculateChecksum(activationBytes); const calculatedChecksum = await AaxHashAlgorithm.CalculateChecksum(
activationBytes,
)
if (calculatedChecksum == checksum) { if (calculatedChecksum == checksum) {
this.setState({ activationBytes: activationBytes }); this.setState({ activationBytes: activationBytes })
this.addNotification("Successfully resolved the activation bytes"); this.addNotification('Successfully resolved the activation bytes')
return; return
} }
this.setState({ activationBytes: "API ERROR" }); this.setState({ activationBytes: 'API ERROR' })
this.addNotification("An unexpected error occured while resolving the activation bytes, please try again", false); this.addNotification(
'An unexpected error occured while resolving the activation bytes, please try again',
false,
)
} }
} catch (error) { } catch (error) {
this.setState({ activationBytes: error }); this.setState({ activationBytes: error })
this.addNotification("An error occured while resolving the activation bytes, please check your inputs", false); this.addNotification(
'An error occured while resolving the activation bytes, please check your inputs',
false,
)
} }
} }
buf2hex(buffer) { // buffer is an ArrayBuffer buf2hex(buffer) {
return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join(''); // buffer is an ArrayBuffer
return Array.prototype.map
.call(new Uint8Array(buffer), (x) => ('00' + x.toString(16)).slice(-2))
.join('')
} }
acceptFiles = async files => { acceptFiles = async (files) => {
const file = files[0]; const file = files[0]
await this.acceptFile(file); await this.acceptFile(file)
} }
acceptFile = async file => { acceptFile = async (file) => {
// if (!file.name.toLowerCase().endsWith(".aax")) { // if (!file.name.toLowerCase().endsWith(".aax")) {
// alert('FileType not supported!'); // alert('FileType not supported!');
// return; // return;
// } // }
this.setState({ fileName: file.name, file:file }); this.setState({ fileName: file.name, file: file })
const slic = file.slice(653, 653 + 20); const slic = file.slice(653, 653 + 20)
const results = this.buf2hex(await slic.arrayBuffer()); const results = this.buf2hex(await slic.arrayBuffer())
this.setChecksum(results) this.setChecksum(results)
this.requestActivationBytes(); this.requestActivationBytes()
} }
render() { render() {
const { classes } = this.props; const { classes } = this.props
const { checksum, activationBytes, fileName, file } = this.state; const { checksum, activationBytes, fileName, file } = this.state
// const { files, onClick, errors, HiddenFileInput } = useFilePicker({
// maxFileSize: 1000000,
// maxImageWidth: 1000,
// imageQuality: 0.92,
// resizeImage: true
// });
return ( return (
<Container component="main" maxWidth="md"> <Container component="main" maxWidth="md">
<CssBaseline /> <CssBaseline />
<div className={classes.paper}> <div className={classes.paper}>
<Avatar className={classes.avatar}> <Avatar className={classes.avatar}>
@ -213,10 +230,11 @@ class ChecksumResolver extends React.Component {
<form className={classes.form} noValidate> <form className={classes.form} noValidate>
<Dropzone <Dropzone
noClick noClick
onDrop={acceptedFiles => { onDrop={(acceptedFiles) => {
console.log(acceptedFiles); console.log(acceptedFiles)
this.acceptFiles(acceptedFiles); this.acceptFiles(acceptedFiles)
}}> }}
>
{({ getRootProps, getInputProps }) => ( {({ getRootProps, getInputProps }) => (
<section> <section>
<div {...getRootProps()}> <div {...getRootProps()}>
@ -233,7 +251,7 @@ class ChecksumResolver extends React.Component {
autoComplete="checksum" autoComplete="checksum"
autoFocus autoFocus
onChange={(x) => this.setChecksum(x.target.value)} onChange={(x) => this.setChecksum(x.target.value)}
onError={()=>{}} onError={() => {}}
value={checksum} value={checksum}
InputProps={{ InputProps={{
readOnly: false, readOnly: false,
@ -242,14 +260,14 @@ class ChecksumResolver extends React.Component {
extensions={['aax', 'AAX']} extensions={['aax', 'AAX']}
maxSize={99999} maxSize={99999}
onChange={this.acceptFile} onChange={this.acceptFile}
onError={() => {}}
> >
<IconButton > <IconButton>
<PublishOutlined /> <PublishOutlined />
</IconButton> </IconButton>
</FilePicker> </FilePicker>
) ),
}} }}
/> />
</div> </div>
</section> </section>
@ -260,7 +278,7 @@ class ChecksumResolver extends React.Component {
fullWidth fullWidth
variant="contained" variant="contained"
onClick={() => { onClick={() => {
this.requestActivationBytes(); this.requestActivationBytes()
}} }}
disabled={!this.isChecksumValid()} disabled={!this.isChecksumValid()}
> >
@ -274,40 +292,34 @@ class ChecksumResolver extends React.Component {
margin="normal" margin="normal"
fullWidth fullWidth
id="activationBytes" id="activationBytes"
label={activationBytes ? '' : "Activation Bytes"} label={activationBytes ? '' : 'Activation Bytes'}
name="activationBytes" name="activationBytes"
autoComplete="activationBytes" autoComplete="activationBytes"
aria-readonly aria-readonly
InputProps={{ InputProps={{
readOnly: true, readOnly: true,
endAdornment: ( endAdornment: (
<CopyToClipboard text={activationBytes}> <CopyToClipboard text={activationBytes}>
<IconButton > <IconButton>
<FileCopyOutlined /> <FileCopyOutlined />
</IconButton> </IconButton>
</CopyToClipboard> </CopyToClipboard>
) ),
}} }}
/> />
</form> </form>
</div> </div>
<ControlledAccordions <ControlledAccordions
fileName={fileName} fileName={fileName}
activationBytes={activationBytes} activationBytes={activationBytes}
file ={file} file={file}
/> />
<Box mt={1}> <Box mt={1}>
<this.Copyright /> <this.Copyright />
</Box> </Box>
</Container> </Container>
); )
} }
} }
export default withStyles(useStyles)(ChecksumResolver); export default withGoogleReCaptcha(withStyles(useStyles)(ChecksumResolver))

44
src/index.js
View file

@ -1,25 +1,34 @@
import React from 'react'; import React from 'react'
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom'
import './index.css'; import './index.css'
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker'
import ChecksumResolver from './ChecksumResolver'; import ChecksumResolver from './ChecksumResolver'
import ReactNotification from 'react-notifications-component' import ReactNotification from 'react-notifications-component'
import ForkMeOnGithub from 'fork-me-on-github'; import ForkMeOnGithub from 'fork-me-on-github'
import ReactGA from 'react-ga'
import {
GoogleReCaptchaProvider,
GoogleReCaptcha,
} from 'react-google-recaptcha-v3'
import ReactGA from 'react-ga'; fetch('https://api.audible-converter.ml/api/v2/WakeUpNeo').then((data) =>
console.log('Woke up, im ready to serve :D'),
)
fetch("https://api.audible-converter.ml/api/v2/WakeUpNeo") ReactGA.initialize('UA-174657678-1')
.then(data => console.log("Woke up, im ready to serve :D")) ReactGA.pageview(window.location.pathname + window.location.search)
ReactGA.initialize('UA-174657678-1');
ReactGA.pageview(window.location.pathname + window.location.search);
ReactDOM.render( ReactDOM.render(
<div> <div>
<div style={{display:'flex'}}> <GoogleReCaptchaProvider reCaptchaKey="6LeZhMMhAAAAAH2cwtbCRYys5WawPj4KS5pw-GNd">
{/* <GoogleReCaptcha
onVerify={(a, b, c) => {
console.log(`Token: ${a}`);
}}
/> */}
<div style={{ display: 'flex' }}>
<ReactNotification /> <ReactNotification />
</div> </div>
<ForkMeOnGithub <ForkMeOnGithub
repo="https://github.com/audible-tools/audible-tools.github.io" repo="https://github.com/audible-tools/audible-tools.github.io"
@ -27,11 +36,12 @@ ReactDOM.render(
isPride isPride
/> />
<ChecksumResolver /> <ChecksumResolver />
</GoogleReCaptchaProvider>
</div>, </div>,
document.getElementById('root') document.getElementById('root'),
); )
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls. // unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA // Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister(); serviceWorker.unregister()