can add new key and delete existing one in frontend

src/Application/Controller/Admin/d3user_webauthn.php

@@ -27,7 +27,6 @@ use OxidEsales\Eshop\Application\Model\User;
 use OxidEsales\Eshop\Core\Exception\DatabaseConnectionException;
 use OxidEsales\Eshop\Core\Exception\DatabaseErrorException;
 use OxidEsales\Eshop\Core\Registry;
-use OxidEsales\Eshop\Core\UtilsView;
 
 class d3user_webauthn extends AdminDetailsController
 {
@@ -147,62 +146,4 @@ class d3user_webauthn extends AdminDetailsController
         $credential = oxNew(PublicKeyCredential::class);
         $credential->delete(Registry::getRequest()->getRequestEscapedParameter('deleteoxid'));
     }
-
-    public function registerNewKey()
-    {
-        $this->getWebauthnObject()->registerNewKey(Registry::getRequest()->getRequestParameter('authn'));
-    }
-
-    /**
-     * @throws Exception
-     */
-    public function save()
-    {
-        parent::save();
-
-        $aParams = Registry::getRequest()->getRequestEscapedParameter("editval");
-
-        try {
-            /** @var d3webauthn $oWebauthn */
-            $oWebauthn = $this->getWebauthnObject();
-/*
-            if ($oWebauthn->checkIfAlreadyExist($this->getEditObjectId())) {
-                $oException = oxNew(StandardException::class, 'D3_TOTP_ALREADY_EXIST');
-                throw $oException;
-            };
-
-            if ($aParams['d3totp__oxid']) {
-                $oWebauthn->load($aParams['d3totp__oxid']);
-            } else {
-                $aParams['d3totp__usetotp'] = 1;
-                $seed = Registry::getRequest()->getRequestEscapedParameter("secret");
-                $otp = Registry::getRequest()->getRequestEscapedParameter("otp");
-
-                $oWebauthn->saveSecret($seed);
-                $oWebauthn->assign($aParams);
-                $oWebauthn->verify($otp, $seed);
-                $oWebauthn->setId();
-            }
-            $oWebauthn->save();
-*/
-        } catch (Exception $oExcp) {
-            $this->_sSaveError = $oExcp->getMessage();
-        }
-    }
-
-    /**
-     * @throws DatabaseConnectionException
-     */
-    public function delete()
-    {
-        $aParams = Registry::getRequest()->getRequestEscapedParameter("editval");
-
-        /** @var d3webauthn $oWebauthn */
-        $oWebauthn = $this->getWebauthnObject();
-        if ($aParams['d3totp__oxid']) {
-            $oWebauthn->load($aParams['d3totp__oxid']);
-            $oWebauthn->delete();
-            Registry::get(UtilsView::class)->addErrorToDisplay('D3_TOTP_REGISTERDELETED');
-        }
-    }
 }

src/Application/Controller/d3_account_webauthn.php

@@ -17,8 +17,8 @@ namespace D3\Webauthn\Application\Controller;
 
 use D3\Webauthn\Application\Model\Credential\PublicKeyCredential;
 use D3\Webauthn\Application\Model\Credential\PublicKeyCredentialList;
-use D3\Webauthn\Application\Model\d3webauthn;
-use D3\Webauthn\Application\Model\Webauthn\d3PublicKeyCredentialUserEntity;
+use D3\Webauthn\Application\Model\Webauthn;
+use D3\Webauthn\Application\Model\WebauthnErrors;
 use OxidEsales\Eshop\Application\Controller\AccountController;
 use OxidEsales\Eshop\Core\Exception\DatabaseConnectionException;
 use OxidEsales\Eshop\Core\Exception\DatabaseErrorException;
@@ -35,11 +35,6 @@ class d3_account_webauthn extends AccountController
      */
     public function render()
     {
-        if (Registry::getRequest()->getRequestEscapedParameter('error')) {
-dumpvar(Registry::getRequest()->getRequestEscapedParameter('error'));
-            Registry::getUtilsView()->addErrorToDisplay('error occured');
-        }
-
         $sRet = parent::render();
 
         // is logged in ?
@@ -50,56 +45,68 @@ dumpvar(Registry::getRequest()->getRequestEscapedParameter('error'));
 
         $this->addTplParam('user', $this->getUser());
 
-        // $this->setAuthnRegister();
-
         return $sRet;
     }
 
     /**
-     * @return publicKeyCredentialList|object
-     * @throws DatabaseConnectionException
-     * @throws DatabaseErrorException
+     * @return publicKeyCredentialList
      */
     public function getCredentialList()
     {
-        $credentialList = oxNew(PublicKeyCredentialList::class);
-
         $oUser = $this->getUser();
-        if ($oUser) {
-            /** @var d3PublicKeyCredentialUserEntity $userEntity */
-            $userEntity = oxNew(d3PublicKeyCredentialUserEntity::class, $oUser);
-            $credentialList->loadAllForUserEntity($userEntity);
-        }
-
-        return $credentialList;
+        $credentialList = oxNew(PublicKeyCredentialList::class);
+        return $credentialList->getAllFromUser($oUser);
+    }
+
+    public function requestNewCredential()
+    {
+        $this->setPageType('requestnew');
+        $this->setAuthnRegister();
+    }
+
+    public function setPageType($pageType)
+    {
+        $this->addTplParam('pageType', $pageType);
     }
 
-    /**
-     * @throws DatabaseConnectionException
-     * @throws DatabaseErrorException
-     */
     public function setAuthnRegister()
     {
-        $webauthn = oxNew(d3webauthn::class);
-        $publicKeyCredentialCreationOptions = $webauthn->setAuthnRegister('36944b76d6e583fe2.12734046');
+        $authn = oxNew(Webauthn::class);
+        $publicKeyCredentialCreationOptions = $authn->getCreationOptions($this->getUser());
 
         $this->addTplParam(
-            'webauthn_publickey_register',
-            json_encode($publicKeyCredentialCreationOptions, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)
+            'webauthn_publickey_create',
+            $publicKeyCredentialCreationOptions
         );
+        $this->addTplParam('isAdmin', isAdmin());
+        $this->addTplParam('keyname', Registry::getRequest()->getRequestEscapedParameter('credenialname'));
     }
 
-    public function registerNewKey()
+    public function saveAuthn()
     {
-        $webauthn = oxNew(d3webauthn::class);
-        $webauthn->registerNewKey(Registry::getRequest()->getRequestParameter('authn'));
+        if (strlen(Registry::getRequest()->getRequestEscapedParameter('error'))) {
+            $errors = oxNew(WebauthnErrors::class);
+            Registry::getUtilsView()->addErrorToDisplay(
+                $errors->translateError(Registry::getRequest()->getRequestEscapedParameter('error'))
+            );
+        }
+
+        if (strlen(Registry::getRequest()->getRequestEscapedParameter('credential'))) {
+            /** @var Webauthn $webauthn */
+            $webauthn = oxNew(Webauthn::class);
+            $webauthn->saveAuthn(
+                Registry::getRequest()->getRequestEscapedParameter('credential'),
+                Registry::getRequest()->getRequestEscapedParameter('keyname')
+            );
+        }
     }
 
     public function deleteKey()
     {
-        if (Registry::getRequest()->getRequestEscapedParameter('oxid')) {
-            $credential = oxNew(publicKeyCredential::class);
-            $credential->delete(Registry::getRequest()->getRequestEscapedParameter('oxid'));
+        if (Registry::getRequest()->getRequestEscapedParameter('deleteoxid')) {
+            /** @var PublicKeyCredential $credential */
+            $credential = oxNew(PublicKeyCredential::class);
+            $credential->delete(Registry::getRequest()->getRequestEscapedParameter('deleteoxid'));
         }
     }
 }

src/Application/views/admin/tpl/d3user_webauthn.tpl

@@ -44,24 +44,26 @@
             document.getElementById('myedit').submit();
         }
     }
-
-    function toggle(elementId) {
-        document.getElementById(elementId).classList.toggle("hidden-delete");
-    }
 [{/capture}]
 [{oxscript add=$smarty.capture.javascripts}]
 
 [{if $oxid && $oxid != '-1'}]
     [{if $pageType === 'requestnew'}]
         <div class="container-fluid">
-            <div class="row">
-                [{include file="js_create.tpl"}]
+            <div class="row justify-content-center">
+                <div class="col-6">
+                    [{include file="js_create.tpl"}]
 
-                <div>
-                    Bitte die Anfrage Ihres Browsers bestätigen.
+                    <div class="card">
+                        <div class="card-body">
+                            <p class="card-text">
+                                Bitte die Anfrage Ihres Browsers bestätigen.
+                            </p>
+                            <button onclick="document.getElementById('webauthn').submit();">Abbrechen</button>
+                        </div>
+
+                    </div>
                 </div>
-
-                <button onclick="document.getElementById('webauthn').submit();">Abbrechen</button>
             </div>
         </div>
     [{else}]
@@ -122,9 +124,10 @@
                                 [{oxmultilang ident="D3_WEBAUTHN_REGISTEREDKEYS"}]
                             </div>
                             <div class="card-body">
-                                [{if $oView->getCredentialList($userid)}]
+                                [{assign var="list" value=$oView->getCredentialList($oxid)}]
+                                [{if $list|@count}]
                                     <ul class="list-group list-group-flush">
-                                        [{foreach from=$oView->getCredentialList($userid) item="credential"}]
+                                        [{foreach from=$list item="credential"}]
                                             <li class="list-group-item">
                                                 [{$credential->getName()}]
                                                 <a onclick="deleteItem('[{$credential->getId()}]'); return false;" href="#" class="btn btn-danger btn-sm">

src/Application/views/tpl/d3_account_webauthn.tpl

@@ -1,84 +1,121 @@
 [{capture append="oxidBlock_content"}]
 
     [{capture name="javascripts"}]
-        function arrayToBase64String(a) {
-            return btoa(String.fromCharCode(...a));
-        }
-
-        function base64url2base64(input) {
-            input = input
-            .replace(/=/g, "")
-            .replace(/-/g, '+')
-            .replace(/_/g, '/');
-
-            const pad = input.length % 4;
-            if(pad) {
-                if(pad === 1) {
-                    throw new Error('InvalidLengthError: Input base64url string is the wrong length to determine padding');
-                }
-                input += new Array(5-pad).join('=');
-            }
-
-            return input;
-        }
-
-        function authnregister() {
-            let publicKey = [{$webauthn_publickey_register}];
-
-            publicKey.challenge = Uint8Array.from(window.atob(base64url2base64(publicKey.challenge)), function(c){return c.charCodeAt(0);});
-            publicKey.user.id = Uint8Array.from(window.atob(publicKey.user.id), function(c){return c.charCodeAt(0);});
-            if (publicKey.excludeCredentials) {
-                publicKey.excludeCredentials = publicKey.excludeCredentials.map(function(data) {
-                    data.id = Uint8Array.from(window.atob(base64url2base64(data.id)), function(c){return c.charCodeAt(0);});
-                    return data;
-                });
-            }
-
-            navigator.credentials.create({ 'publicKey': publicKey }).then(function(data){
-                let publicKeyCredential = {
-                    id: data.id,
-                    type: data.type,
-                    rawId: arrayToBase64String(new Uint8Array(data.rawId)),
-                    response: {
-                        clientDataJSON: arrayToBase64String(new Uint8Array(data.response.clientDataJSON)),
-                        attestationObject: arrayToBase64String(new Uint8Array(data.response.attestationObject))
-                    }
-                };
-                document.getElementById('fncname').value = 'registerNewKey';
-                document.getElementById('authnvalue').value = btoa(JSON.stringify(publicKeyCredential));
-                document.getElementById('actionform').submit();
-            }).catch(function(error){
-                document.getElementById('errorvalue').value = btoa(JSON.stringify(error));
-                document.getElementById('actionform').submit();
-            });
-        }
-
         function deleteItem(id) {
-            document.getElementById('fncname').value = 'deleteKey';
-            document.getElementById('oxidvalue').value = id;
-            document.getElementById('actionform').submit();
-        }
-
-        function toggle(elementId) {
-            $("#" + elementId).toggle();
+            if (confirm('wirklich loeschen?') === true) {
+                document.getElementById('fncname').value = 'deleteKey';
+                document.getElementById('oxidvalue').value = id;
+                document.getElementById('actionform').submit();
+            }
         }
     [{/capture}]
     [{oxscript add=$smarty.capture.javascripts}]
 
     <h1 class="page-header">[{oxmultilang ident="D3_WEBAUTHN_ACCOUNT"}]</h1>
 
-    <form action="[{$oViewConf->getSelfActionLink()}]" id="actionform" name="d3webauthnform" class="form-horizontal" method="post">
-        <div class="hidden">
-            [{$oViewConf->getHiddenSid()}]
-            [{$oViewConf->getNavFormParams()}]
-            <input type="hidden" id="fncname" name="fnc" value="">
-            <input type="hidden" name="cl" value="[{$oViewConf->getActiveClassName()}]">
-            <input type="hidden" id="oxidvalue" name="oxid" value="">
-            <input type="hidden" id="authnvalue" name="authn" value="">
-            <input type="hidden" id="errorvalue" name="error" value="">
-        </div>
-    </form>
+    <style>
+        .contentbox {
+            padding-bottom: 15px;
+        }
+    </style>
 
+    [{if $pageType === 'requestnew'}]
+        <div class="container-fluid">
+            <div class="row justify-content-center">
+                <div class="col-6">
+                    [{include file="js_create.tpl"}]
+
+                    <div class="card">
+                        <div class="card-body">
+                            <p class="card-text">
+                                Bitte die Anfrage Ihres Browsers bestätigen.
+                            </p>
+                            <button onclick="document.getElementById('webauthn').submit();">Abbrechen</button>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    [{else}]
+        <form action="[{$oViewConf->getSelfActionLink()}]" id="actionform" name="d3webauthnform" class="form-horizontal" method="post">
+            <div class="hidden">
+                [{$oViewConf->getHiddenSid()}]
+                [{$oViewConf->getNavFormParams()}]
+                <input type="hidden" id="fncname" name="fnc" value="">
+                <input type="hidden" name="cl" value="[{$oViewConf->getActiveClassName()}]">
+                <input type="hidden" id="authnvalue" name="authn" value="">
+                <input type="hidden" id="errorvalue" name="error" value="">
+                <input type="hidden" name="deleteoxid" id="oxidvalue" value="">
+                <button type="submit" style="display: none;"></button>
+            </div>
+        </form>
+
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12 col-lg-6 contentbox">
+                    <div class="card">
+                        [{block name="user_d3user_totp_registernew"}]
+                            <div class="card-header">
+                                [{oxmultilang ident="D3_WEBAUTHN_ACC_REGISTERNEW"}]
+                            </div>
+                            <div class="card-body">
+                                <form name="newcred" id="newcred" action="[{$oViewConf->getSelfLink()}]" method="post">
+                                    [{$oViewConf->getHiddenSid()}]
+                                    <input type="hidden" name="cl" value="[{$oView->getClassName()}]">
+                                    <input type="hidden" name="fnc" value="requestNewCredential">
+                                    <input type="hidden" name="oxid" value="[{$oxid}]">
+                                    [{block name="user_d3user_totp_registerform"}]
+                                        <label for="credentialname">Name des Schlüssels</label>
+                                        <p class="card-text">
+                                            <input id="credentialname" type="text" name="credenialname" [{$readonly}]>
+                                        </p>
+                                        <p class="card-text">
+                                            <button type="submit" [{$readonly}] class="btn btn-primary btn-success">
+                                                [{oxmultilang ident="D3_WEBAUTHN_ACC_ADDKEY"}]
+                                            </button>
+                                        </p>
+                                    [{/block}]
+                                </form>
+                            </div>
+                        [{/block}]
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6 contentbox">
+                    <div class="card">
+                        [{block name="user_d3user_totp_form2"}]
+                            <div class="card-header">
+                                [{oxmultilang ident="D3_WEBAUTHN_ACC_REGISTEREDKEYS"}]
+                            </div>
+                            <div class="card-body">
+                                [{assign var="list" value=$oView->getCredentialList()}]
+                                [{if $list|@count}]
+                                    <ul class="list-group list-group-flush">
+                                        [{foreach from=$list item="credential"}]
+                                            <li class="list-group-item">
+                                                [{$credential->getName()}]
+                                                <a onclick="deleteItem('[{$credential->getId()}]'); return false;" href="#" class="btn btn-danger btn-sm">
+                                                    <span class="glyphicon glyphicon-pencil"></span>
+                                                    delete
+                                                </a>
+                                            </li>
+                                        [{/foreach}]
+                                    </ul>
+                                [{else}]
+                                    <div class="card-text">
+                                        kein Schluessel registriert
+                                    </div>
+                                [{/if}]
+                            </div>
+                        [{/block}]
+                    </div>
+                </div>
+            </div>
+        </div>
+    [{/if}]
+
+
+[{*
     <div class="panel panel-default">
         <div class="panel-heading">settings</div>
         <div class="panel-body">
@@ -124,130 +161,8 @@
             </div>
         </div>
     </div>
-
-    <div class="panel panel-default">
-        <div class="panel-heading">[{oxmultilang ident="D3_WEBAUTHN_ACC_REGISTERNEW"}]</div>
-        <div class="panel-body">
-            <button onclick="authnregister();">[{oxmultilang ident="D3_WEBAUTHN_ACC_ADDKEY"}]</button>
-        </div>
-    </div>
-
-    <div class="panel panel-default">
-        <div class="panel-heading">[{oxmultilang ident="D3_WEBAUTHN_ACC_REGISTEREDKEYS"}]</div>
-        <div class="panel-body">
-            <div class="list-group">
-                [{foreach from=$oView->getCredentialList() item="credential"}]
-                    <a href="#" onclick="toggle('keydetails_[{$credential->getId()}]'); return false;" class="list-group-item">
-                        [{$credential->d3GetName()}] (last used: XX)
-                    </a>
-                    <div class="list-group-item" id="keydetails_[{$credential->getId()}]" style="display: none">
-                        <a onclick="deleteItem('[{$credential->getId()}]'); return false;"><span class="glyphicon glyphicon-pencil">delete</span></a>
-                    </div>
-                [{/foreach}]
-            </div>
-        </div>
-    </div>
-
-            [{if 1 == 0 && false == $totp->getId()}]
-                <div class="registerNew [{* flow *}] panel panel-default [{* wave *}] card">
-                    <div class="[{* flow *}] panel-heading [{* wave *}] card-header">
-                        [{oxmultilang ident="D3_TOTP_REGISTERNEW"}]
-                    </div>
-                    <div class="[{* flow *}] panel-body [{* wave *}] card-body">
-                        <dl>
-                            <dt>
-                                [{oxmultilang ident="D3_TOTP_QRCODE"}]&nbsp;
-                            </dt>
-                            <dd>
-                                [{$totp->getQrCodeElement()}]
-                            </dd>
-                        </dl>
-                        <p>
-                            [{oxmultilang ident="D3_TOTP_QRCODE_HELP"}]
-                        </p>
-
-                        <hr>
-
-                        <dl>
-                            <dt>
-                                <label for="secret">[{oxmultilang ident="D3_TOTP_SECRET"}]</label>
-                            </dt>
-                            <dd>
-                                <textarea rows="3" cols="50" id="secret" name="secret" class="editinput" readonly="readonly">[{$totp->getSecret()}]</textarea>
-                            </dd>
-                        </dl>
-                        <p>
-                            [{oxmultilang ident="D3_TOTP_SECRET_HELP"}]
-                        </p>
-
-                        <hr>
-
-                        <dl>
-                            <dt>
-                                <label for="otp">[{oxmultilang ident="D3_TOTP_CURROTP"}]</label>
-                            </dt>
-                            <dd>
-                                <input type="text" class="editinput" size="6" maxlength="6" id="otp" name="otp" value="" [{$readonly}]>
-                            </dd>
-                        </dl>
-                        <p>
-                            [{oxmultilang ident="D3_TOTP_CURROTP_HELP"}]
-                        </p>
-                    </div>
-                </div>
-            [{/if}]
-
-            [{if 1 == 0 && $totp->getId()}]
-                [{block name="d3_account_totp_deletenotes"}]
-                    <div class="[{* flow *}] panel panel-default [{* wave *}] card">
-                        <div class="[{* flow *}] panel-heading [{* wave *}] card-header">
-                            [{oxmultilang ident="D3_TOTP_REGISTEREXIST"}]
-                        </div>
-                        <div class="[{* flow *}] panel-body [{* wave *}] card-body">
-                            [{oxmultilang ident="D3_TOTP_REGISTERDELETE_DESC"}]
-                        </div>
-                    </div>
-                [{/block}]
-
-                [{block name="d3_account_totp_backupcodes"}]
-                    <div class="[{* flow *}] panel panel-default [{* wave *}] card">
-                        <div class="[{* flow *}] panel-heading [{* wave *}] card-header">
-                            [{oxmultilang ident="D3_TOTP_BACKUPCODES"}]
-                        </div>
-                        <div class="[{* flow *}] panel-body [{* wave *}] card-body">
-                            [{if $oView->getBackupCodes()}]
-                                [{block name="d3_account_totp_backupcodes_list"}]
-                                    <label for="backupcodes">[{oxmultilang ident="D3_TOTP_BACKUPCODES_DESC"}]</label>
-                                    <textarea id="backupcodes" rows="10" cols="20">[{$oView->getBackupCodes()}]</textarea>
-                                [{/block}]
-                            [{else}]
-                                [{block name="d3_account_totp_backupcodes_info"}]
-                                    [{oxmultilang ident="D3_TOTP_AVAILBACKUPCODECOUNT" args=$oView->getAvailableBackupCodeCount()}]<br>
-                                    [{oxmultilang ident="D3_TOTP_AVAILBACKUPCODECOUNT_DESC"}]
-                                [{/block}]
-                            [{/if}]
-                        </div>
-                    </div>
-                [{/block}]
-            [{/if}]
-[{*
-            <p class="submitBtn">
-                <button type="submit" class="btn btn-primary"
-                    [{if $totp->getId()}]
-                        onclick="
-                            if(false === document.getElementById('totp_use').checked && false === confirm('[{oxmultilang ident="D3_TOTP_REGISTERDELETE_CONFIRM"}]')) {return false;}
-                            document.getElementById('fncname').value = 'delete';
-                        "
-                    [{else}]
-                        onclick="document.getElementById('fncname').value = 'create';"
-                    [{/if}]
-                >
-                    [{oxmultilang ident="D3_TOTP_ACCOUNT_SAVE"}]
-                </button>
-            </p>
-        </form>
-    [{/block}]
 *}]
+
 [{/capture}]
 
 [{capture append="oxidBlock_sidebar"}]