Prevent user from selecting non-empty folders

src-tauri/src/main.rs

@@ -436,6 +436,14 @@ async fn get_download_location(state: tauri::State<'_, State>) -> Result<String,
  Ok(state_guard.settings.download_location.clone())
 }
 
+#[tauri::command]
+fn is_dir_empty(path: String) -> bool {
+ match fs::read_dir(path) {
+ Ok(mut entries) => entries.next().is_none(),
+ Err(_) => false,
+ }
+}
+
 fn main() {
  tauri::Builder::default()
  .plugin(tauri_plugin_log::Builder::default().build())
@@ -457,7 +465,8 @@ fn main() {
  get_os,
  is_initialized,
  set_download_location,
- get_download_location
+ get_download_location,
+ is_dir_empty
  ])
  .setup(|app| {
  let window = app.get_window("main").unwrap();

src/assets/Icons/index.ts

@@ -22,6 +22,7 @@ import { ReactComponent as UpdateIcon } from "./Update.svg";
 import { ReactComponent as DriveIcon } from "./Drive.svg";
 import { ReactComponent as UnknownUserIcon } from "./UnknownUser.svg";
 import { ReactComponent as BackIcon } from "./Back.svg";
+import { ReactComponent as WarningIcon } from "./Warning.svg";
 
 export {
  AddIcon,
@@ -47,5 +48,6 @@ export {
  UpdateIcon,
  DriveIcon,
  UnknownUserIcon,
- BackIcon
+ BackIcon,
+ WarningIcon
 };

src/components/LaunchPage/styles.module.css

@@ -26,7 +26,7 @@
 
 .icon_container {
  position: relative;
- z-index: 100;
+ z-index: 1;
 }
 
 .icon {

src/dialogs/DialogProvider.module.css

@@ -3,13 +3,15 @@
  position: fixed;
  inset: 0;
  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+ z-index: 9998;
 }
 
 .content {
  display: inline-flex;
  padding: 25px 50px;
  flex-direction: column;
  align-items: center;
+ z-index: 9999;
 
  border-radius: 8px;
  background: linear-gradient(360deg, rgba(255, 255, 255, 0.25) 0%, rgba(184, 184, 184, 0.25) 100%), #FFF;

src/dialogs/Dialogs/InstallFolderDialog.module.css

@@ -36,4 +36,24 @@
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
+}
+
+.warning_box {
+ margin-top: 10px;
+
+ display: flex;
+ padding: 15px;
+ align-items: center;
+ gap: 10px;
+ align-self: stretch;
+
+ border-radius: var(--web-radius, 8px);
+ border: 1px solid #FFA800;
+ background: rgba(255, 168, 0, 0.10);
+
+ color: #7C5200;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
 }

src/dialogs/Dialogs/InstallFolderDialog.tsx

@@ -2,25 +2,28 @@ import Button, { ButtonColor } from "@app/components/Button";
 import { BaseDialog } from "./BaseDialog";
 import { open } from "@tauri-apps/api/dialog";
 import styles from "./InstallFolderDialog.module.css";
-import { DriveIcon } from "@app/assets/Icons";
+import { DriveIcon, WarningIcon } from "@app/assets/Icons";
 import { invoke } from "@tauri-apps/api";
 
 interface State {
  path?: string;
+ empty: boolean;
 }
 
 export class InstallFolderDialog extends BaseDialog<State> {
  constructor(props: Record<string, unknown>) {
  super(props);
  this.state = {
- path: undefined
+ path: undefined,
+ empty: true
  };
 
  // Load the default path
  (async () => {
  const path = await invoke("get_download_location") as string;
  this.setState(() => ({
- path: path
+ path: path,
+ empty: true
  }));
  })();
  }
@@ -40,6 +43,12 @@ export class InstallFolderDialog extends BaseDialog<State> {
 
  </div>
  </div>
+ {!this.state.empty ?
+ <div className={styles.warning_box}>
+ <WarningIcon /> The folder selected is not empty! Make sure it doesn&apos;t have any files in it.
+ </div>
+ : ""
+ }
  </>;
  }
 
@@ -49,8 +58,12 @@ export class InstallFolderDialog extends BaseDialog<State> {
  });
 
  if (typeof select === "string") {
+ const path: string = select;
+ const empty: boolean = await invoke("is_dir_empty", { path: path });
+
  this.setState(() => ({
- path: select as string
+ path: path,
+ empty: empty
  }));
  }
  }
@@ -62,7 +75,13 @@ export class InstallFolderDialog extends BaseDialog<State> {
  getButtons() {
  return <>
  <Button color={ButtonColor.GRAY} onClick={() => this.context.closeDialog("cancel")}>Cancel</Button>
- <Button color={ButtonColor.GREEN} onClick={() => this.context.closeDialog(this.state.path)}>Okay</Button>
+ <Button color={ButtonColor.GREEN} onClick={() => {
+ if (!this.state.empty) {
+ return;
+ }
+
+ this.context.closeDialog(this.state.path);
+ }}>Okay</Button>
  </>;
  }
 }