Add View.DeviceRegistration form from Mike's app, opens with ?register in the url param

emiMobileServer/bin/emiMobileServer.ini

 [Settings]
-LogFileNum=109
-webClientVersion=0.9.4.3
+LogFileNum=112
+webClientVersion=0.9.4.5
 
 [Database]
 --Server=192.168.91.129

emiMobileServer/emiMobileServer.dproj

@@ -108,9 +108,9 @@
         <VerInfo_MajorVer>0</VerInfo_MajorVer>
         <VerInfo_MinorVer>9</VerInfo_MinorVer>
         <VerInfo_Release>4</VerInfo_Release>
-        <VerInfo_Keys>CompanyName=;FileDescription=$(MSBuildProjectName);FileVersion=0.9.4.3;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=0.9.2.0;Comments=</VerInfo_Keys>
+        <VerInfo_Keys>CompanyName=;FileDescription=$(MSBuildProjectName);FileVersion=0.9.4.5;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=0.9.2.0;Comments=</VerInfo_Keys>
         <DCC_UnitSearchPath>C:\RADTOOLS\FastMM4;$(DCC_UnitSearchPath)</DCC_UnitSearchPath>
-        <VerInfo_Build>3</VerInfo_Build>
+        <VerInfo_Build>5</VerInfo_Build>
     </PropertyGroup>
     <PropertyGroup Condition="'$(Cfg_1_Win64)'!=''">
         <AppDPIAwarenessMode>PerMonitorV2</AppDPIAwarenessMode>

webEMIMobile/Auth.Service.pas

@@ -8,23 +8,33 @@ uses
 
 const
   TOKEN_NAME = 'WEBEMIMOBILE_TOKEN';
+  CREDENTIAL_NAME = 'WEBEMIMOBILE_CREDENTIAL_ID';
 
 type
   TOnLoginSuccess = reference to procedure;
   TOnLoginError = reference to procedure(AMsg: string);
   TOnProfileSuccess = reference to procedure;
   TOnProfileError = reference to procedure(AMsg: string);
+  TOnBeginSuccess = reference to procedure(AChallenge, AChallengeToken: string);
+  TOnDeviceSuccess = reference to procedure;
+  TOnDeviceError = reference to procedure(AMsg: string);
 
   TAuthService = class
   private
     FClient: TXDataWebClient;
     procedure SetToken(AToken: string);
     procedure DeleteToken;
+    procedure SetCredentialId(AId: string);
   public
     constructor Create; reintroduce;
     destructor Destroy; override;
     procedure Login(AUser, APassword, AAgency: string; ASuccess: TOnLoginSuccess;
       AError: TOnLoginError);
+    procedure BeginRegistration(APhoneNumber: string;
+      ASuccess: TOnBeginSuccess; AError: TOnDeviceError);
+    procedure CompleteRegistration(APhoneNumber, ACredentialId,
+      AAttestationObject, AClientDataJSON, AChallengeToken: string;
+      ASuccess: TOnDeviceSuccess; AError: TOnDeviceError);
     procedure Logout;
     function GetToken: string;
     function Authenticated: Boolean;
@@ -69,6 +79,77 @@ begin
             (window.localStorage.getItem(TOKEN_NAME) <> '');
 end;
 
+procedure TAuthService.BeginRegistration(APhoneNumber: string;
+  ASuccess: TOnBeginSuccess; AError: TOnDeviceError);
+
+  procedure OnLoad(Response: TXDataClientResponse);
+  var
+    resp: JS.TJSObject;
+    challenge, token, status: string;
+  begin
+    resp := JS.TJSObject(Response.Result);
+    status := JS.toString(resp.Properties['status']);
+    if status = 'error' then
+    begin
+      AError(JS.toString(resp.Properties['message']));
+      Exit;
+    end;
+    challenge := JS.toString(resp.Properties['challenge']);
+    token := JS.toString(resp.Properties['challengeToken']);
+    ASuccess(challenge, token);
+  end;
+
+  procedure OnError(Error: TXDataClientError);
+  begin
+    AError(Format('%s: %s', [Error.ErrorCode, Error.ErrorMessage]));
+  end;
+
+begin
+  FClient.RawInvoke(
+    'IAuthService.BeginRegistration',
+    [APhoneNumber],
+    @OnLoad, @OnError
+  );
+end;
+
+procedure TAuthService.CompleteRegistration(APhoneNumber, ACredentialId,
+  AAttestationObject, AClientDataJSON, AChallengeToken: string;
+  ASuccess: TOnDeviceSuccess; AError: TOnDeviceError);
+
+  procedure OnLoad(Response: TXDataClientResponse);
+  var
+    resp: JS.TJSObject;
+    status, msg, credId: string;
+  begin
+    resp := JS.TJSObject(Response.Result);
+    status := JS.toString(resp.Properties['status']);
+    msg := JS.toString(resp.Properties['message']);
+    credId := JS.toString(resp.Properties['credentialId']);
+
+    if status = 'revoked' then
+      AError('Access denied: ' + msg)
+    else if status = 'ok' then
+    begin
+      SetCredentialId(credId);
+      ASuccess;
+    end
+    else
+      AError(msg);
+  end;
+
+  procedure OnError(Error: TXDataClientError);
+  begin
+    AError(Format('%s: %s', [Error.ErrorCode, Error.ErrorMessage]));
+  end;
+
+begin
+  FClient.RawInvoke(
+    'IAuthService.CompleteRegistration',
+    [APhoneNumber, ACredentialId, AAttestationObject, AClientDataJSON, AChallengeToken],
+    @OnLoad, @OnError
+  );
+end;
+
 constructor TAuthService.Create;
 begin
   FClient := TXDataWebClient.Create(nil);
@@ -131,6 +212,11 @@ begin
   window.localStorage.setItem(TOKEN_NAME, AToken);
 end;
 
+procedure TAuthService.SetCredentialId(AId: string);
+begin
+  window.localStorage.setItem(CREDENTIAL_NAME, AId);
+end;
+
 function TAuthService.TokenExpirationDate: TDateTime;
 var
   ExpirationDate: TJSDate;

webEMIMobile/ConnectionModule.pas

@@ -21,7 +21,7 @@ type
     procedure VerifyVersion(SuccessProc: TSuccessProc);
   public
     property WsUrl: string read FWsUrl;
-    const clientVersion = '0.9.4.3';
+    const clientVersion = '0.9.4.5';
     procedure InitApp(SuccessProc: TSuccessProc;
       UnauthorizedAccessProc: TUnauthorizedAccessProc);
   end;

webEMIMobile/View.DeviceRegistration.dfm

+object FViewDeviceRegistration: TFViewDeviceRegistration
+  Width = 640
+  Height = 480
+  Font.Charset = DEFAULT_CHARSET
+  Font.Color = clWindowText
+  Font.Height = -11
+  Font.Name = 'Tahoma'
+  Font.Style = []
+  ParentFont = False
+  OnCreate = WebFormCreate
+  object edtPhoneNumber: TWebEdit
+    Left = 240
+    Top = 136
+    Width = 121
+    Height = 21
+    ElementID = 'view.devicereg.edtphonenumber'
+    HeightPercent = 100.000000000000000000
+    TextHint = '(303) 555-1234'
+    WidthPercent = 100.000000000000000000
+  end
+  object btnRegister: TWebButton
+    Left = 240
+    Top = 190
+    Width = 121
+    Height = 25
+    Caption = 'Register This Device'
+    ElementID = 'view.devicereg.btnregister'
+    HeightPercent = 100.000000000000000000
+    TabOrder = 1
+    WidthPercent = 100.000000000000000000
+    OnClick = btnRegisterClick
+  end
+  object pnlMessage: TWebPanel
+    Left = 240
+    Top = 65
+    Width = 121
+    Height = 33
+    ElementID = 'view.devicereg.message'
+    TabOrder = 2
+    object lblMessage: TWebLabel
+      Left = 16
+      Top = 11
+      Width = 42
+      Height = 13
+      Caption = 'Message'
+      ElementID = 'view.devicereg.message.label'
+      HeightPercent = 100.000000000000000000
+      WidthPercent = 100.000000000000000000
+    end
+    object btnCloseNotification: TWebButton
+      Left = 96
+      Top = 3
+      Width = 22
+      Height = 25
+      ElementID = 'view.devicereg.message.button'
+      HeightPercent = 100.000000000000000000
+      WidthPercent = 100.000000000000000000
+      OnClick = btnCloseNotificationClick
+    end
+  end
+  object XDataWebClient: TXDataWebClient
+    Connection = DMConnection.AuthConnection
+    Left = 492
+    Top = 102
+  end
+end

webEMIMobile/View.DeviceRegistration.html

+<div class="container">
+  <nav class="navbar navbar-light bg-light border rounded-bottom"
+       style="--bs-border-color: #d6d6d6; --bs-border-radius: 0.25rem;">
+    <div class="container-fluid">
+      <a id="view.devicereg.apptitle"
+         class="navbar-brand text-secondary small"
+         href="index.html">
+        emiMobile
+      </a>
+    </div>
+  </nav>
+
+  <div class="row justify-content-center mt-4">
+    <div class="col-12 col-sm-10 col-md-8 col-lg-5 col-xl-4">
+      <div class="card shadow-sm">
+        <div class="card-header">
+          <h5 class="card-title mb-0 text-center">
+            Register This Device
+          </h5>
+        </div>
+        <div class="card-body">
+
+          <!-- Notification bar -->
+          <div id="view.devicereg.message"
+               class="alert alert-danger d-flex align-items-start d-none mb-3"
+               role="alert">
+            <span id="view.devicereg.message.label" class="me-auto"></span>
+            <button id="view.devicereg.message.button"
+                    type="button"
+                    class="btn-close ms-2"
+                    aria-label="Close"></button>
+          </div>
+
+          <p class="text-muted small mb-3">
+            This browser has not been registered for emiMobile access.
+            Enter the phone number your administrator registered for this device,
+            then click <strong>Register</strong>.
+            Your browser will prompt you to verify with a PIN, fingerprint, or security key.
+          </p>
+
+          <div class="mb-3">
+            <label class="form-label small text-muted">Phone number</label>
+            <input id="view.devicereg.edtphonenumber"
+                   class="form-control"
+                   type="tel"
+                   placeholder="(303) 555-1234"
+                   autofocus>
+          </div>
+
+          <div class="mb-3">
+            <p class="text-muted small mb-1">Browser</p>
+            <p id="view.devicereg.useragent"
+               class="text-muted small text-truncate"
+               style="max-width:100%; overflow:hidden; white-space:nowrap;"></p>
+          </div>
+
+          <button id="view.devicereg.btnregister"
+                  class="btn btn-primary w-100">
+            Register This Device
+          </button>
+
+        </div>
+        <div class="card-footer text-muted small">
+          Registration is required once per browser. Clearing browser storage will require re-registration.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

webEMIMobile/View.DeviceRegistration.pas

+unit View.DeviceRegistration;
+
+interface
+
+uses
+  System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Controls, WEBLib.Forms, WEBLib.Dialogs,
+  Vcl.Controls, Vcl.StdCtrls, WEBLib.StdCtrls, WEBLib.JSON,
+  JS, XData.Web.Connection, WEBLib.ExtCtrls,
+  App.Types, ConnectionModule, XData.Web.Client;
+
+type
+  TFViewDeviceRegistration = class(TWebForm)
+    edtPhoneNumber: TWebEdit;
+    btnRegister: TWebButton;
+    pnlMessage: TWebPanel;
+    lblMessage: TWebLabel;
+    btnCloseNotification: TWebButton;
+    XDataWebClient: TXDataWebClient;
+    procedure btnRegisterClick(Sender: TObject);
+    procedure btnCloseNotificationClick(Sender: TObject);
+    procedure WebFormCreate(Sender: TObject);
+  private
+    FRegistrationProc: TSuccessProc;
+    procedure ShowNotification(const AMsg: string; AIsError: Boolean = True);
+    procedure HideNotification;
+    procedure SetBusy(ABusy: Boolean);
+    procedure DoWebAuthnCreate(APhoneNumber, AChallenge, AChallengeToken: string);
+  public
+    class procedure Display(ARegistrationProc: TSuccessProc);
+  end;
+
+var
+  FViewDeviceRegistration: TFViewDeviceRegistration;
+
+implementation
+
+uses
+  Auth.Service,
+  View.ErrorPage;
+
+{$R *.dfm}
+
+class procedure TFViewDeviceRegistration.Display(ARegistrationProc: TSuccessProc);
+begin
+  if Assigned(FViewDeviceRegistration) then
+    FViewDeviceRegistration.Free;
+  FViewDeviceRegistration := TFViewDeviceRegistration.CreateNew;
+  FViewDeviceRegistration.FRegistrationProc := ARegistrationProc;
+end;
+
+procedure TFViewDeviceRegistration.WebFormCreate(Sender: TObject);
+var
+  userAgent: string;
+begin
+  HideNotification;
+  userAgent := '';
+  asm
+    userAgent = navigator.userAgent;
+  end;
+  asm
+    var el = document.getElementById('view.devicereg.useragent');
+    if (el) el.textContent = userAgent;
+
+    // Format phone number on-the-fly as the user types
+    var inp = document.getElementById('view.devicereg.edtphonenumber');
+    if (inp) {
+      inp.addEventListener('input', function() {
+        var digits = inp.value.replace(/\D/g, '');
+        if (digits.length > 10) digits = digits.slice(0, 10);
+        var formatted = '';
+        if (digits.length > 6)
+          formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6);
+        else if (digits.length > 3)
+          formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3);
+        else if (digits.length > 0)
+          formatted = '(' + digits;
+        inp.value = formatted;
+      });
+    }
+  end;
+end;
+
+procedure TFViewDeviceRegistration.SetBusy(ABusy: Boolean);
+begin
+  asm
+    var btn = document.getElementById('view.devicereg.btnregister');
+    if (btn) {
+      btn.disabled = ABusy;
+      btn.textContent = ABusy ? 'Waiting for authenticator...' : 'Register This Device';
+    }
+  end;
+end;
+
+procedure TFViewDeviceRegistration.btnRegisterClick(Sender: TObject);
+var
+  phoneNumber: string;
+
+  procedure OnBeginOK(AChallenge, AChallengeToken: string);
+  begin
+    DoWebAuthnCreate(phoneNumber, AChallenge, AChallengeToken);
+  end;
+
+  procedure OnBeginError(AMsg: string);
+  begin
+    SetBusy(False);
+    ShowNotification(AMsg);
+  end;
+
+begin
+  phoneNumber := Trim(edtPhoneNumber.Text);
+  if phoneNumber = '' then
+  begin
+    ShowNotification('Please enter your phone number.');
+    Exit;
+  end;
+
+  SetBusy(True);
+  HideNotification;
+
+  AuthService.BeginRegistration(phoneNumber, @OnBeginOK, @OnBeginError);
+end;
+
+procedure TFViewDeviceRegistration.DoWebAuthnCreate(
+  APhoneNumber, AChallenge, AChallengeToken: string);
+var
+  phoneNumber, challenge, challengeToken: string;
+
+  procedure OnCompleteOK;
+  begin
+    FRegistrationProc;
+  end;
+
+  procedure OnCompleteError(AMsg: string);
+  begin
+    SetBusy(False);
+    ShowNotification(AMsg);
+  end;
+
+  procedure OnCredential(ACredentialId, AAttestationObject, AClientDataJSON: string);
+  begin
+    AuthService.CompleteRegistration(
+      phoneNumber, ACredentialId, AAttestationObject, AClientDataJSON, challengeToken,
+      @OnCompleteOK, @OnCompleteError
+    );
+  end;
+
+  procedure OnWebAuthnError(AMsg: string);
+  begin
+    SetBusy(False);
+    ShowNotification(AMsg);
+  end;
+
+begin
+  phoneNumber    := APhoneNumber;
+  challenge      := AChallenge;
+  challengeToken := AChallengeToken;
+
+  asm
+    (function() {
+      function b64urlToArr(b64) {
+        b64 = b64.replace(/-/g, '+').replace(/_/g, '/');
+        while (b64.length % 4) b64 += '=';
+        var bin = atob(b64);
+        var arr = new Uint8Array(bin.length);
+        for (var i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+        return arr;
+      }
+      function arrToB64url(buf) {
+        var bin = String.fromCharCode.apply(null, new Uint8Array(buf));
+        return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+      }
+
+      var userId = new Uint8Array(16);
+      crypto.getRandomValues(userId);
+
+      navigator.credentials.create({
+        publicKey: {
+          challenge: b64urlToArr(challenge),
+          rp: { id: window.location.hostname, name: 'emiMobile' },
+          user: { id: userId, name: 'emimobile-user', displayName: 'emiMobile User' },
+          pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
+          timeout: 60000,
+          attestation: 'none',
+          authenticatorSelection: {
+            userVerification: 'required',
+            residentKey: 'preferred'
+          }
+        }
+      }).then(function(cred) {
+        var credId  = arrToB64url(cred.rawId);
+        var attObj  = arrToB64url(cred.response.attestationObject);
+        var cdJson  = arrToB64url(cred.response.clientDataJSON);
+        OnCredential(credId, attObj, cdJson);
+      }).catch(function(err) {
+        OnWebAuthnError('WebAuthn error: ' + err.message);
+      });
+    })();
+  end;
+end;
+
+procedure TFViewDeviceRegistration.btnCloseNotificationClick(Sender: TObject);
+begin
+  HideNotification;
+end;
+
+procedure TFViewDeviceRegistration.ShowNotification(const AMsg: string; AIsError: Boolean);
+begin
+  if AMsg <> '' then
+  begin
+    lblMessage.Caption := AMsg;
+    asm
+      var el = document.getElementById('view.devicereg.message');
+      if (el) {
+        el.classList.remove('alert-danger', 'alert-warning');
+        el.classList.add(AIsError ? 'alert-danger' : 'alert-warning');
+        el.classList.remove('d-none');
+      }
+    end;
+  end;
+end;
+
+procedure TFViewDeviceRegistration.HideNotification;
+begin
+  asm
+    var el = document.getElementById('view.devicereg.message');
+    if (el) el.classList.add('d-none');
+  end;
+end;
+
+end.

webEMIMobile/wcEmiMobile.dpr

@@ -4,6 +4,7 @@ program wcEmiMobile;
 
 uses
   Vcl.Forms,
+  Web,
   XData.Web.Connection,
   Auth.Service in 'Auth.Service.pas',
   App.Types in 'App.Types.pas',
@@ -26,12 +27,18 @@ uses
   uMapFilters in 'uMapFilters.pas',
   View.ComplaintArchive in 'View.ComplaintArchive.pas' {FViewComplaintArchive: TWebForm} {*.html},
   uMapMarkerJs in 'uMapMarkerJs.pas',
-  Module.Websocket in 'Module.Websocket.pas' {dmWebsocket: TDataModule};
+  Module.Websocket in 'Module.Websocket.pas' {dmWebsocket: TDataModule},
+  View.DeviceRegistration in 'View.DeviceRegistration.pas' {FViewDeviceRegistration: TWebForm} {*.html};
 
 {$R *.res}
 
 procedure DisplayLoginView(AMessage: string = ''); forward;
 
+function HasRegisterParameter: Boolean;
+begin
+  Result := TJSURLSearchParams.new(window.location.search).has('register');
+end;
+
 procedure DisplayMainView;
 
   procedure ConnectProc;
@@ -57,6 +64,19 @@ begin
   TFViewLogin.Display(@DisplayMainView, AMessage);
 end;
 
+procedure DisplayDeviceRegistrationView;
+
+  procedure OnRegistered;
+  begin
+    if Assigned(FViewDeviceRegistration) then
+      FViewDeviceRegistration.Free;
+    DisplayLoginView;
+  end;
+
+begin
+  TFViewDeviceRegistration.Display(@OnRegistered);
+end;
+
 procedure UnauthorizedAccessProc(AMessage: string);
 begin
   DisplayLoginView(AMessage);
@@ -64,6 +84,12 @@ end;
 
 procedure StartApplication;
 begin
+  if HasRegisterParameter then
+  begin
+    DisplayDeviceRegistrationView;
+    Exit;
+  end;
+
   if (not AuthService.Authenticated) or AuthService.TokenExpired then
     DisplayLoginView
   else

webEMIMobile/wcEmiMobile.dproj

@@ -91,12 +91,12 @@
         <DCC_RemoteDebug>false</DCC_RemoteDebug>
         <VerInfo_IncludeVerInfo>true</VerInfo_IncludeVerInfo>
         <VerInfo_Locale>1033</VerInfo_Locale>
-        <VerInfo_Keys>CompanyName=;FileDescription=$(MSBuildProjectName);FileVersion=0.9.4.3;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=0.9.3.0;Comments=;LastCompiledTime=2018/08/27 15:18:29</VerInfo_Keys>
+        <VerInfo_Keys>CompanyName=;FileDescription=$(MSBuildProjectName);FileVersion=0.9.4.5;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=0.9.3.0;Comments=;LastCompiledTime=2018/08/27 15:18:29</VerInfo_Keys>
         <AppDPIAwarenessMode>PerMonitor</AppDPIAwarenessMode>
         <VerInfo_MinorVer>9</VerInfo_MinorVer>
         <VerInfo_MajorVer>0</VerInfo_MajorVer>
         <VerInfo_Release>4</VerInfo_Release>
-        <VerInfo_Build>3</VerInfo_Build>
+        <VerInfo_Build>5</VerInfo_Build>
         <TMSWebSingleInstance>1</TMSWebSingleInstance>
         <TMSWebBrowser>1</TMSWebBrowser>
         <TMSWebOutputPath>..\emiMobileServer\bin\static</TMSWebOutputPath>
@@ -201,6 +201,11 @@
             <FormType>dfm</FormType>
             <DesignClass>TDataModule</DesignClass>
         </DCCReference>
+        <DCCReference Include="View.DeviceRegistration.pas">
+            <Form>FViewDeviceRegistration</Form>
+            <FormType>dfm</FormType>
+            <DesignClass>TWebForm</DesignClass>
+        </DCCReference>
         <None Include="index.html"/>
         <None Include="css\app.css"/>
         <None Include="css\spinner.css"/>