77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
|
|
import BucketList from './BucketList';
|
|
import './App.css';
|
|
|
|
type AppProps = {};
|
|
|
|
type AppState = {
|
|
accessKeyId: string;
|
|
secretAccessKey: string;
|
|
client: S3Client | null;
|
|
};
|
|
|
|
class App extends React.Component<AppProps, AppState> {
|
|
state = {
|
|
accessKeyId: "GK31c2f218a2e44f485b94239e",
|
|
secretAccessKey: "b892c0665f0ada8a4755dae98baa3b133590e11dae3bcc1f9d769d67f16c3835",
|
|
client: null,
|
|
};
|
|
|
|
constructor(props: AppProps) {
|
|
super(props);
|
|
}
|
|
|
|
handleChangeAccessKeyId = (e: React.FormEvent<HTMLInputElement>): void => {
|
|
this.setState({accessKeyId: e.currentTarget.value});
|
|
}
|
|
|
|
handleChangeSecreteAccessKey = (e: React.FormEvent<HTMLInputElement>): void => {
|
|
this.setState({secretAccessKey: e.currentTarget.value});
|
|
}
|
|
|
|
login = async (e: React.SyntheticEvent) => {
|
|
e.preventDefault();
|
|
console.log("Login with: ", this.state);
|
|
let client = new S3Client({
|
|
//endpoint: 'https://garage-staging.home.adnab.me',
|
|
logger: console,
|
|
// Necessary to write the full endpoint struct instead of endpoint: 'http://localhost:3811'
|
|
// otherwise AWS SDK removes the port number from the signature, which is a bug:
|
|
// https://github.com/aws/aws-sdk-js-v3/issues/1941
|
|
endpoint: {
|
|
protocol: 'http',
|
|
hostname: 'localhost:3811',
|
|
path: '/',
|
|
},
|
|
tls: false,
|
|
credentials: {
|
|
accessKeyId: this.state.accessKeyId,
|
|
secretAccessKey: this.state.secretAccessKey,
|
|
},
|
|
forcePathStyle: true,
|
|
region: 'us-east-1',
|
|
});
|
|
|
|
this.setState({client: client});
|
|
};
|
|
|
|
render() {
|
|
if (this.state.client) {
|
|
return (
|
|
<BucketList client={ this.state.client } />
|
|
);
|
|
} else {
|
|
return (
|
|
<form onSubmit={this.login} >
|
|
<p>Access key id: <input type="text" value={ this.state.accessKeyId } onChange={this.handleChangeAccessKeyId} /></p>
|
|
<p>Secret access key: <input type="text" value={ this.state.secretAccessKey } onChange={this.handleChangeSecreteAccessKey} /></p>
|
|
<p><input type="submit" value="Log in" /></p>
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default App;
|