Focus added focus and back button

client/App.js

@@ -8,6 +8,7 @@ import {
  updateDataTransferProgressPercent,
  updateSocketConnectivity,
 } from "./slice";
+
 //import styles if necessary
 //may need to import functions from slices here
 

client/components/BucketSelect.js

@@ -28,6 +28,7 @@ const BucketSelect = (props) => {
  Choose a bucket:
  </label>
  <select
+ autoFocus
  className="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
  name="buckets"
  onChange={(e) => {

client/components/Remote.js

@@ -5,6 +5,7 @@ import BucketSelect from "./BucketSelect";
 import { getUserBuckets } from "../services/getBuckets";
 import ErrorDisplay from "./ErrorDisplay";
 import StartMigrationButton from "./MigrationButton";
+import ResetButton from "./ResetButton";
 
 const Remote = (props) => {
  const dispatch = useDispatch();
@@ -35,6 +36,18 @@ const Remote = (props) => {
  dispatch(getUserBuckets({ ...remote, originOrDestination: remoteType }));
  }, [remote.accessId, remote.secretKey, remote.name, remote.accountId]);
 
+ useEffect(() => {
+ if (remote.accessId) {
+ document.querySelector(`#${remoteType}SecretKey`).focus();
+ }
+ }, [remote.accessId]);
+
+ useEffect(() => {
+ if (remote.secretKey && remote.name === "Cloudflare") {
+ document.querySelector(`#${remoteType}accountId`).focus();
+ }
+ }, [remote.secretKey]);
+
  let correctInputClass =
  "block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer";
  let wrongInputClass =
@@ -55,6 +68,7 @@ const Remote = (props) => {
  <div className="relative z-0 w-full h-full mb-6 group">
  <input
  type="key"
+ autoFocus
  className={remote.errorMessage ? wrongInputClass : correctInputClass}
  placeholder=" "
  required
@@ -85,7 +99,7 @@ const Remote = (props) => {
  required
  type="key"
  name="secretKey"
- id={`${remote}SecretKey`}
+ id={`${remoteType}SecretKey`}
  onChange={(e) => {
  const newState = props.secretKeyHandler(e, remote);
  dispatch(updateSecretKey({ newState, remoteType }));
@@ -114,7 +128,7 @@ const Remote = (props) => {
  placeholder=" "
  required
  type="id"
- id="accountId"
+ id={`${remoteType}accountId`}
  name="accountId"
  onChange={(e) => {
  dispatch(
@@ -146,6 +160,8 @@ const Remote = (props) => {
  </div>
  )}
 
+ <ResetButton remoteType={remoteType}></ResetButton>
+
  {origin.selectedBucket &&
  destination.selectedBucket &&
  remoteType === "destination" ? (

client/components/ResetButton.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { resetRemote } from "../slice";
+
+const ResetButton = (props) => {
+ const dispatch = useDispatch();
+ const { remoteType } = props;
+
+ const reset = () => {
+ dispatch(resetRemote(remoteType));
+ };
+
+ return (
+ <div>
+ <button
+ className="text-white bg-[#009bf9] hover:bg-blue-500 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-500 focus:outline-none dark:focus:ring-blue-800"
+ onClick={reset}
+ >
+ Reset {remoteType.charAt(0).toUpperCase() + remoteType.slice(1)}
+ </button>
+ </div>
+ );
+};
+
+export default ResetButton;

client/slice.js

@@ -107,6 +107,11 @@ const slice = createSlice({
  displayName: action.payload.displayName,
  };
  },
+ resetRemote: (state, action) => {
+ console.log(action.payload);
+
+ state[action.payload] = startingState[action.payload];
+ },
  },
  extraReducers: (builder) => {
  builder
@@ -183,4 +188,5 @@ export const {
  clearDestinationErrorMessage,
  resetState,
  updateRemoteName,
+ resetRemote,
 } = slice.actions;