warpbox-dev/backend/templates/pages/admin_storage.html

{{define "admin_storage.html"}}{{template "base" .}}{{end}}

{{define "content"}}
<section class="app-shell admin-shell" aria-labelledby="admin-storage-title">
  <aside class="app-sidebar">
    <nav class="sidebar-nav">
      <a class="sidebar-link" href="/admin">Overview</a>
      <a class="sidebar-link" href="/admin/files">Files</a>
      <a class="sidebar-link" href="/admin/users">Users</a>
      <a class="sidebar-link" href="/admin/settings">Settings</a>
      <a class="sidebar-link is-active" href="/admin/storage">Storage</a>
    </nav>
    <hr class="sidebar-sep">
    <nav class="sidebar-nav"><a class="sidebar-link" href="/app">My Files</a></nav>
    <hr class="sidebar-sep">
    <form class="sidebar-logout" action="/admin/logout" method="post">
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
      <button class="button button-outline" type="submit">Sign out</button>
    </form>
  </aside>

  <div class="app-main">
    <div class="admin-header">
      <div>
        <p class="kicker">Operator console</p>
        <h1 id="admin-storage-title">{{.Data.PageTitle}}</h1>
      </div>
    </div>

    {{if .Data.Error}}<p class="form-error">{{.Data.Error}}</p>{{end}}

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header">
          <div>
            <h2>Storage backends</h2>
            <p>Local storage is always available. Remote backends stay private behind Warpbox routes.</p>
          </div>
        </div>
        <div class="admin-table-wrap">
          <table class="admin-table">
            <thead><tr><th>Name</th><th>Type</th><th>Status</th><th>Usage</th><th>Details</th><th>Actions</th></tr></thead>
            <tbody>
              {{range .Data.Storage}}
              <tr>
                <td>{{.Config.Name}}</td>
                <td>{{if eq .Config.Provider "contabo"}}Contabo Object Storage{{else if eq .Config.Type "sftp"}}SFTP{{else if eq .Config.Type "smb"}}Samba{{else if eq .Config.Type "webdav"}}WebDAV{{else if eq .Config.Type "s3"}}S3 bucket{{else}}{{.Config.Type}}{{end}}</td>
                <td>{{if .Config.Enabled}}Enabled{{else}}Disabled{{end}}</td>
                <td>{{.UsageLabel}}</td>
                <td>{{if eq .Config.Type "local"}}{{.Config.LocalPath}}{{else if eq .Config.Type "sftp"}}{{.Config.Username}}@{{.Config.Host}}:{{.Config.RemotePath}}{{else if eq .Config.Type "smb"}}{{.Config.Domain}}\{{.Config.Username}}@{{.Config.Host}}/{{.Config.Share}}:{{.Config.RemotePath}}{{else if eq .Config.Type "webdav"}}{{.Config.Endpoint}}/{{.Config.RemotePath}}{{else}}{{.Config.Bucket}} @ {{.Config.Endpoint}}{{end}}</td>
                <td class="table-actions">
                  <form action="/admin/storage/{{.Config.ID}}/test" method="post">
                    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                    <button class="button button-outline button-sm" type="submit">Test</button>
                  </form>
                  {{if ne .Config.ID "local"}}
                  <details class="row-edit">
                    <summary class="button button-outline button-sm">Edit</summary>
                    <form action="/admin/storage/{{.Config.ID}}/edit" method="post" class="row-edit-form storage-edit-form">
                      <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                      <label><span>Storage kind</span><select name="provider" data-storage-provider>
                        <option value="s3" {{if or (eq .Config.Provider "s3") (eq .Config.Provider "")}}selected{{end}}>S3 bucket</option>
                        <option value="contabo" {{if eq .Config.Provider "contabo"}}selected{{end}}>Contabo Object Storage</option>
                        <option value="sftp" {{if eq .Config.Provider "sftp"}}selected{{end}}>SFTP</option>
                        <option value="smb" {{if eq .Config.Provider "smb"}}selected{{end}}>Samba</option>
                        <option value="webdav" {{if eq .Config.Provider "webdav"}}selected{{end}}>WebDAV</option>
                      </select></label>
                      <label><span>Name</span><input name="name" value="{{.Config.Name}}" required></label>
                      <label data-provider-fields="s3 contabo"><span>Endpoint</span><input name="endpoint" value="{{.Config.Endpoint}}" required></label>
                      <label data-provider-fields="s3 contabo"><span>Region</span><input name="region" value="{{.Config.Region}}"></label>
                      <label data-provider-fields="s3 contabo"><span>Bucket / object storage name</span><input name="bucket" value="{{.Config.Bucket}}" required></label>
                      <label data-provider-fields="s3 contabo"><span>Access key</span><input name="access_key" value="{{.Config.AccessKey}}" required></label>
                      <label data-provider-fields="s3 contabo"><span>Secret key</span><input name="secret_key" type="password" placeholder="Leave unchanged"></label>
                      <label class="checkbox-field" data-provider-fields="s3 contabo"><input type="checkbox" name="use_ssl" {{if .Config.UseSSL}}checked{{end}}><span>Use TLS</span></label>
                      <label class="checkbox-field" data-provider-fields="s3 contabo"><input type="checkbox" name="path_style" {{if .Config.PathStyle}}checked{{end}}><span>Path-style lookup</span></label>
                      <label data-provider-fields="sftp smb"><span>Host</span><input name="host" value="{{.Config.Host}}" required></label>
                      <label data-provider-fields="sftp smb"><span>Port</span><input type="number" name="port" min="1" value="{{.Config.Port}}"></label>
                      <label data-provider-fields="smb"><span>Share</span><input name="share" value="{{.Config.Share}}" required></label>
                      <label data-provider-fields="smb"><span>Domain</span><input name="domain" value="{{.Config.Domain}}" placeholder="Optional"></label>
                      <label data-provider-fields="sftp smb webdav"><span>Username</span><input name="username" value="{{.Config.Username}}" required></label>
                      <label data-provider-fields="sftp smb webdav"><span>Password</span><input name="password" type="password" placeholder="Leave unchanged"></label>
                      <label data-provider-fields="sftp"><span>Private key</span><textarea name="private_key" rows="4" placeholder="Leave unchanged"></textarea></label>
                      <label data-provider-fields="sftp"><span>SSH host public key</span><textarea name="host_key" rows="3" placeholder="Optional, leave unchanged">{{.Config.HostKey}}</textarea></label>
                      <label data-provider-fields="webdav"><span>WebDAV URL</span><input name="endpoint" value="{{.Config.Endpoint}}" placeholder="https://files.example.com/remote.php/dav/files/user"></label>
                      <label data-provider-fields="sftp smb webdav"><span>Remote path</span><input name="remote_path" value="{{.Config.RemotePath}}" placeholder="/srv/warpbox"></label>
                      <button class="button button-primary button-sm" type="submit">Save</button>
                    </form>
                  </details>
                  <form action="/admin/storage/{{.Config.ID}}/disable" method="post">
                    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                    <button class="button button-danger button-sm" type="submit" {{if .InUse}}disabled{{end}}>Disable</button>
                  </form>
                  <form action="/admin/storage/{{.Config.ID}}/delete" method="post">
                    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                    <button class="button button-danger button-sm" type="submit" {{if .InUse}}disabled{{end}}>Delete</button>
                  </form>
                  {{end}}
                </td>
              </tr>
              {{end}}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="card admin-table-card">
      <div class="card-content">
        <div class="table-header">
          <div>
            <h2>Add storage</h2>
            <p>Choose a provider kind first. SFTP is useful for a server or NAS you control.</p>
          </div>
        </div>
        <form class="settings-form" action="/admin/storage/s3" method="post">
          <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
          <div class="settings-section">
            <label><span>Storage kind</span><select name="provider" data-storage-provider>
              <option value="s3">S3 bucket</option>
              <option value="contabo">Contabo Object Storage</option>
              <option value="sftp">SFTP</option>
              <option value="smb">Samba</option>
              <option value="webdav">WebDAV</option>
            </select></label>
            <label><span>Name</span><input name="name" placeholder="Bob's bucket" required></label>
            <label data-provider-fields="s3 contabo"><span>Endpoint</span><input name="endpoint" placeholder="s3.example.com" required></label>
            <label data-provider-fields="s3 contabo"><span>Region</span><input name="region" placeholder="us-east-1"></label>
            <label data-provider-fields="s3 contabo"><span>Bucket / object storage name</span><input name="bucket" placeholder="My Main Bucket" required></label>
            <label data-provider-fields="s3 contabo"><span>Access key</span><input name="access_key" required></label>
            <label data-provider-fields="s3 contabo"><span>Secret key</span><input name="secret_key" type="password" required></label>
            <label class="checkbox-field" data-provider-fields="s3 contabo"><input type="checkbox" name="use_ssl" checked><span>Use TLS</span></label>
            <label class="checkbox-field" data-provider-fields="s3 contabo"><input type="checkbox" name="path_style"><span>Use path-style bucket lookup</span></label>
            <label data-provider-fields="sftp smb"><span>Host</span><input name="host" placeholder="files.example.com" required></label>
            <label data-provider-fields="sftp smb"><span>Port</span><input type="number" name="port" min="1"></label>
            <label data-provider-fields="smb"><span>Share</span><input name="share" placeholder="uploads" required></label>
            <label data-provider-fields="smb"><span>Domain</span><input name="domain" placeholder="Optional"></label>
            <label data-provider-fields="sftp smb webdav"><span>Username</span><input name="username" required></label>
            <label data-provider-fields="sftp smb webdav"><span>Password</span><input name="password" type="password"></label>
            <label data-provider-fields="sftp"><span>Private key</span><textarea name="private_key" rows="4" placeholder="Optional private key"></textarea></label>
            <label data-provider-fields="sftp"><span>SSH host public key</span><textarea name="host_key" rows="3" placeholder="Optional pinned host key"></textarea></label>
            <label data-provider-fields="webdav"><span>WebDAV URL</span><input name="endpoint" placeholder="https://files.example.com/webdav"></label>
            <label data-provider-fields="sftp smb webdav"><span>Remote path</span><input name="remote_path" placeholder="/srv/warpbox"></label>
          </div>
          <button class="button button-primary" type="submit">Add storage</button>
        </form>
      </div>
    </div>
  </div>
</section>
{{end}}