Skip to content

detain/myadmin-client-vue

Repository files navigation

InterServer MyAdmin Client Interface

Check out the WIKI for documentation.

FAQ

Getting a blank page when loading the site

Check your ad blocker or privacy addons, they might need to be disabled for this site.

Development

After this is done on all of the repos pick the best one and setit up .. try to preserve git history

TODO Road-Map

  • 1.0-alpha MileStone
    • order service pages
      • server
      • domain
    • cart/iids parsed and handled
  • 1.0-beta MileStone
    • update response codes to match table below
    • loading / no entries messages
    • services list pages
      • datatables or equivalent
        • filtering
        • sorting
        • pagination
        • print/export
  • 1.0-stable MileStone
    • setup github actions and hooks for automated testing
    • make sure affiliate tracking still works
    • analytics
    • minimize api fields in requests/responses and filter them for security
    • api finalized
  • Future Tasks

electron-vite/electron-vite-vue: πŸ₯³ Really simple Electron + Vite + Vue boilerplate. caoxiemeihao/electron-vite-boilerplate: πŸ“š Really simple Electron + Vite boilerplate. yingpengsha/electron-vite-quick-start: ⚑ Full stack uses Vite to run Electron application, including main process. umbrella22/electron-vite-template: This project is a vue3 + Vite + electron project template composed of Vite and rollup. It has the same functions as my previous electron+Vue+template project ArcherGu/fast-vite-electron: Vite + Electron with esbuild, so fast! ⚑ cawa-93/vite-electron-builder: Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla electron-vite/vite-plugin-electron-renderer: Support use Node.js API in Electron-Renderer Deluze/electron-vue-template: Simple Vue3 + Electron starter template in TypeScript, including ViteJS and Electron Builder tada5hi/vitron: This is a library to build (win, linux, mac) desktop apps for modern web projects with vite and electron. jooy2/vutron: πŸ’š Quick Start Templates for Vite + Electron + Vue 3 + Vuetify + TypeScript. Vutron is a preconfigured template for developing Electron cross-platform desktop apps. It uses Vue 3 and allows you to build a fast development environment with little effort. caoxiemeihao/vite-electron-plugin: High-performance, esbuild-based Vite Electron plugin

Page Status

  • Working status does not include the export/sorting related options on the view service list type pages
Url Working API Call API Spec Breadcrum
/ [x] [x] [x] [x]
/login [x] [x] [x]
/sudo/:sessionId [x]
/account/info [x] [x] [x] [x]
/account/pass [x] [x] [x] [x]
/account/settings [x] [x]
/dns [x] [x] [x] [x]
/dns/:id [x] [x] [x] [x]
/affiliate [x] [x]
/affiliate/faq [x] [x]
/affiliate/status_legend [x] [x]
/affiliate/tos [x] [x]
/affiliate/web_traffic [x] [x] [x] [x]
/backups [x] [x] [x] [x]
/backups/:id [x] [x] [x] [x]
/backups/:id/cancel [x] [x] [x] [x]
/backups/:id/invoices [x] [x] [x] [x]
/backups/:id/welcome_email [x] [x] [x] [x]
/backups/order [x] [x] [x] [x]
/domains [x] [x] [x] [x]
/domains/:id [x] [x] [x] [x]
/domains/:id/cancel [x] [x] [x] [x]
/domains/:id/invoices [x] [x] [x] [x]
/domains/:id/welcome_email [x] [x] [x] [x]
/floating_ips [x] [x] [x] [x]
/floating_ips/:id/cancel [x] [x] [x] [x]
/floating_ips/:id/invoices [x] [x] [x] [x]
/floating_ips/:id/welcome_email [x] [x] [x] [x]
/licenses [x] [x] [x] [x]
/licenses/:id [x] [x] [x] [x]
/licenses/:id/cancel [x] [x] [x] [x]
/licenses/:id/invoices [x] [x] [x] [x]
/licenses/:id/welcome_email [x] [x] [x] [x]
/mail [x] [x] [x] [x]
/mail/:id [x] [x] [x] [x]
/mail/:id/cancel [x] [x] [x] [x]
/mail/:id/invoices [x] [x] [x] [x]
/mail/:id/welcome_email [x] [x] [x] [x]
/qs [x] [x] [x] [x]
/qs/:id [x] [x] [x] [x]
/qs/:id/cancel [x] [x] [x] [x]
/qs/:id/invoices [x] [x] [x] [x]
/qs/:id/welcome_email [x] [x] [x] [x]
/servers [x] [x] [x] [x]
/servers/:id [x] [x] [x] [x]
/servers/:id/cancel [x] [x] [x] [x]
/servers/:id/invoices [x] [x] [x] [x]
/servers/:id/welcome_email [x] [x] [x] [x]
/ssl/:id/cancel [x] [x] [x] [x]
/ssl/:id/invoices [x] [x] [x] [x]
/ssl/:id/welcome_email [x] [x] [x] [x]
/vps [x] [x] [x] [x]
/vps/:id [x] [x] [x] [x]
/vps/:id/block_smtp [x] [x] [x] [x]
/vps/:id/cancel [x] [x] [x] [x]
/vps/:id/change_timezone [x] [x] [x] [x]
/vps/:id/disable_cd [x] [x] [x] [x]
/vps/:id/disable_quota [x] [x] [x] [x]
/vps/:id/eject_cd [x] [x] [x] [x]
/vps/:id/enable_quota [x] [x] [x] [x]
/vps/:id/invoices [x] [x] [x] [x]
/vps/:id/insert_cd [x] [x] [x] [x]
/vps/:id/restart [x] [x] [x] [x]
/vps/:id/reinstall_os [x] [x] [x] [x]
/vps/:id/reverse_dns [x] [x] [x] [x]
/vps/:id/setup_vnc [x] [x] [x] [x]
/vps/:id/start [x] [x] [x] [x]
/vps/:id/stop [x] [x] [x] [x]
/vps/:id/view_desktop [x] [x] [x] [x]
/vps/:id/welcome_email [x] [x] [x] [x]
/websites [x] [x] [x] [x]
/websites/:id [x] [x] [x] [x]
/websites/:id/cancel [x] [x] [x] [x]
/websites/:id/invoices [x] [x] [x] [x]
/websites/:id/login [x] [x] [x] [x]
/websites/:id/welcome_email [x] [x] [x] [x]
/register [x] [ ] [ ]
/account/username [ ] [ ] [ ] [ ]
/cart [ ] [ ] [ ] [ ]
/cart/::iids [ ] [ ] [ ] [ ]
/invoices [ ] [ ] [ ] [ ]
/payment_types [ ] [ ] [ ] [ ]
/prepays [ ] [ ] [ ] [ ]
/pay/:method/:invoices [ ] [x] [x] [ ]
/tickets [ ] [ ] [ ] [ ]
/tickets/:id [ ] [ ] [ ] [ ]
/tickets/new [ ] [ ] [ ] [ ]
/affiliate/banner/:id [ ] [ ]
/affiliate/banners [ ] [x] [x] [ ]
/affiliate/landing_pg [ ] [ ] [ ] [ ]
/affiliate/payment_setup [ ] [ ] [ ] [ ]
/affiliate/rich_report [ ] [ ] [ ] [ ]
/affiliate/sales_graph [ ] [ ] [ ] [ ]
/affiliate/sales_report [ ] [ ] [ ] [ ]
/affiliate/traffic_graph [ ] [ ] [ ] [ ]
/domains/:id/contact [ ] [ ] [ ] [ ]
/domains/:id/dnssec [ ] [ ] [ ] [ ]
/domains/:id/nameservers [ ] [ ] [ ] [ ]
/domains/:id/renew [ ] [ ] [ ] [ ]
/domains/:id/transfer [ ] [ ] [ ] [ ]
/domains/:id/whois [ ] [ ] [ ] [ ]
/domains/order [ ] [ ] [ ] [ ]
/domains/order/:domain [ ] [ ] [ ] [ ]
/domains/order/:domain/:regType [ ] [ ] [ ] [ ]
/floating_ips/:id [ ] [ ] [ ] [ ]
/floating_ips/:id/change_ip [ ] [ ] [ ] [ ]
/floating_ips/order [ ] [ ] [ ] [ ]
/licenses/:id/change_ip [ ] [ ] [ ] [ ]
/licenses/:id/change_os [ ] [ ] [ ] [ ]
/licenses/order [ ] [ ] [ ] [ ]
/licenses/order/:catTag [ ] [ ] [ ] [ ]
/mail/:id/alerts [ ] [ ] [ ] [ ]
/mail/:id/deny_rules [ ] [ ] [ ] [ ]
/mail/order [ ] [ ] [ ] [ ]
/qs/:id/backup [ ] [x] [x] [ ]
/qs/:id/backups [ ] [x] [x] [ ]
/qs/:id/change_timezone [ ] [x] [x] [ ]
/qs/:id/eject_cd [ ] [x] [x] [ ]
/qs/:id/insert_cd [ ] [x] [x] [ ]
/qs/:id/reinstall_os [ ] [x] [x] [ ]
/qs/:id/reset_password [ ] [x] [x] [ ]
/qs/:id/restart [ ] [x] [x] [ ]
/qs/:id/restore [ ] [ ] [ ] [ ]
/qs/:id/reverse_dns [ ] [x] [x] [ ]
/qs/:id/setup_vnc [ ] [x] [x] [ ]
/qs/:id/start [ ] [x] [x] [ ]
/qs/:id/stop [ ] [x] [x] [ ]
/qs/:id/traffic_usage [ ] [x] [x] [ ]
/qs/:id/view_desktop [ ] [x] [x] [ ]
/qs/order [ ] [ ] [ ] [ ]
/servers/:id/bandwidth_graph [ ] [ ] [ ] [ ]
/servers/:id/ipmi_live [ ] [ ] [ ] [ ]
/servers/:id/reverse_dns [ ] [ ] [ ] [ ]
/servers/order [ ] [ ] [ ] [ ]
/ssl [ ] [ ] [ ] [ ]
/ssl/:id [ ] [ ] [ ] [ ]
/ssl/:id/change_approver_email [ ] [ ] [ ] [ ]
/ssl/:id/resend_approver_email [ ] [ ] [ ] [ ]
/ssl/order [ ] [ ] [ ] [ ]
/vps/:id/backup [ ] [x] [x] [ ]
/vps/:id/backups [ ] [x] [x] [ ]
/vps/:id/buy_hd_space [ ] [ ] [ ] [ ]
/vps/:id/buy_ip [ ] [ ] [ ] [ ]
/vps/:id/change_hostname [ ] [x] [x] [ ]
/vps/:id/change_root_password [ ] [x] [x] [ ]
/vps/:id/change_webuzo_password [ ] [ ] [x] [ ]
/vps/:id/reset_password [ ] [x] [x] [ ]
/vps/:id/restore [ ] [ ] [x] [ ]
/vps/:id/slices [ ] [ ] [ ] [ ]
/vps/:id/traffic_usage [ ] [x] [x] [ ]
/vps/order [ ] [ ] [ ] [ ]
/websites/:id/buy_ip [ ] [ ] [ ] [ ]
/websites/:id/download_backups [ ] [ ] [ ] [ ]
/websites/:id/migration [ ] [ ] [ ] [ ]
/websites/:id/reverse_dns [ ] [ ] [ ] [ ]
/websites/order [ ] [ ] [ ] [ ]

How it Works

We use Vue 3 with the Composition API to provide an entire website/application in a single page. This is done using a combination of Vue SFC's (Single File Components) which and the Vue Router to change the url in the browser without actually navigating to a new page.

Variables are mostly handled by reference (like a pointer). This allows us to pass around variables that are ukept up to date when changed in other sections of the site.

Core Functionality

These are the libs which power the majority of the sites functionality. You should at least breifly read opver each of them.

  • Vue 3 is the Template Engine with all the modern bells and whistles like automatically updating the display render as data changes.
  • Pinia is used to provide Data Stores which allow us to load data that is reusable between pages without having to reload the data.
  • Vue Router is used for Routing to trigger calling pages based on the url while all being in a single page).

Additional Functionality

This stuff provides good features but does not require you to really be famiiar with it. Skip over these unless you find you need to know more about one of them for some reason.

  • Vite is our Frontend Tooling system which provides a nice dev setup and handles building the project for production use.
  • Vite PWA automatically generates the the files needed so we are a PWA (Progressive Web App).
  • Electron allows us to build a Desktop App for macOS, Windows, Linux, as well as Mobile Device versions.
  • ESLint is our Linter which can detect a wide range of problems your code.
  • Prettier is our Code Formatter allowing automatic formatting of code based on our set of predefined rules.
  • Vitest is our Unit Testing framework.
  • VeeValidate is installed for Form Validation
  • Vue-i18n is our Translation lib.

Inspecting and Debugging The Live Data

There are several Developer Console type interfaces setup which we can use to view and modify the live variables generating the site.

Browser Extension Vue Devtools vue-devtools-extension

The other way is vue-devtools-popup

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint