frontend: fix continue button not clickable in wizard

Unfortunatelly I could only reproduce it once and got the error
js: Uncaught TypeError: Cannot read property 'querySelectorAll' of null
on line
https://github.com/digitalbitbox/bitbox-wallet-app/blob/6ed4ff598ce0a352e13bb5bc3a42edcebc83d47f/frontends/web/src/components/devices/bitbox02/bitbox02.tsx#L357

This fix removes the dom reference and instead adds each checkbox
as a boolean to the state. That way we don't depend on the form
to be there or having to querySelect the input elements and check
if they are checked.

frontends/web/src/components/devices/bitbox02/bitbox02.tsx

@@ -72,16 +72,18 @@ interface State {
     // if true, we just pair and unlock, so we can hide some steps.
     unlockOnly: boolean;
     showWizard: boolean;
-    readDisclaimers: boolean;
+    agreement1: boolean;
+    agreement2: boolean;
+    agreement3: boolean;
+    agreement4: boolean;
+    agreement5: boolean;
     waitDialog?: {
         title: string;
         text?: string;
     };
 }
 
 class BitBox02 extends Component<Props, State> {
-    private disclaimerForm!: HTMLElement;
-
     constructor(props) {
         super(props);
         this.state = {
@@ -98,7 +100,11 @@ class BitBox02 extends Component<Props, State> {
             deviceName: '',
             unlockOnly: true,
             showWizard: false,
-            readDisclaimers: false,
+            agreement1: false,
+            agreement2: false,
+            agreement3: false,
+            agreement4: false,
+            agreement5: false,
             waitDialog: undefined,
         };
     }
@@ -349,19 +355,13 @@ class BitBox02 extends Component<Props, State> {
         });
     }
 
-    private setDisclaimerRef = (element: HTMLElement) => {
-        this.disclaimerForm = element;
-    }
-
-    private handleDisclaimerCheck = () => {
-        const checkboxes = this.disclaimerForm.querySelectorAll('input');
-        let result = true;
-        for (const checkbox of checkboxes) {
-            if (!checkbox.checked) {
-                result = false;
-            }
-        }
-        this.setState({ readDisclaimers: result });
+    private handleDisclaimerCheck = (event: InputEvent) => {
+        const target = event.target as HTMLInputElement;
+        const name = target.id as 'argement1' | 'argement2' | 'argement3' | 'argement4' | 'argement5';
+        this.setState(prevState => ({
+            ...prevState,
+            [name]: target.checked
+        }));
     }
 
     public render(
@@ -382,7 +382,11 @@ class BitBox02 extends Component<Props, State> {
             showWizard,
             sdCardInserted,
             deviceName,
-            readDisclaimers,
+            agreement1,
+            agreement2,
+            agreement3,
+            agreement4,
+            agreement5,
             waitDialog,
         }: State,
     ) {
@@ -415,6 +419,7 @@ class BitBox02 extends Component<Props, State> {
             return <Settings deviceID={deviceID}/>;
         }
         const passwordGif = versionInfo.currentVersion === '1.0.0' || versionInfo.currentVersion === '2.0.0' ? passwordEntryOldGif : passwordEntryGif;
+        const readDisclaimers = agreement1 && agreement2 && agreement3 && agreement4 && agreement5;
         // TODO: move to wizard.tsx
         return (
             <div className="contentWithGuide">
@@ -605,7 +610,7 @@ class BitBox02 extends Component<Props, State> {
                                         <div className={style.stepContext}>
                                             <p>{t('bitbox02Wizard.stepBackup.createBackup')}</p>
                                             <p className="m-bottom-default">{t('bitbox02Wizard.stepBackup.beforeProceed')}</p>
-                                            <form ref={this.setDisclaimerRef}>
+                                            <form>
                                                 <div className="m-top-quarter">
                                                     <Checkbox onChange={this.handleDisclaimerCheck} className={style.wizardCheckbox} id="agreement1" label={t('bitbox02Wizard.backup.userConfirmation1')} />
                                                 </div>