MC_Report/public/js/pages/install.js

const InstallPage = {
  step: 1,

  async render() {
    const status = await API.get('/install/status');
    if (status.installed) { location.hash = '#/login'; return ''; }
    return `<div style="max-width:600px;margin:0 auto;padding:30px 0"><div id="install-steps"></div></div>`;
  },

  mount() {
    this.showStep(1);
  },

  showStep(n) {
    this.step = n;
    const ct = document.getElementById('install-steps');
    if (n === 1) this.renderDBStep(ct);
    else if (n === 2) this.renderAdminStep(ct);
  },

  renderDBStep(ct) {
    ct.innerHTML = `
      <div class="card"><div class="card-h"><i class="fas fa-database"></i> 绗?姝ワ細鏁版嵁搴撻厤缃?/div><div class="card-b">
        <form id="install-db">
          <div class="grid-2"><div class="form-group"><label>MySQL 涓绘満</label><input id="db-host" value="localhost"></div>
          <div class="form-group"><label>绔<>彛</label><input id="db-port" value="3306" type="number"></div></div>
          <div class="grid-2"><div class="form-group"><label>鐢ㄦ埛鍚?/label><input id="db-user" value="root" required></div>
          <div class="form-group"><label>瀵嗙爜</label><input type="password" id="db-pass"></div></div>
          <div class="form-group"><label>鏁版嵁搴撳悕</label><input id="db-name" value="mc_report" required><span class="help">濡備笉瀛樺湪灏嗚嚜鍔ㄥ垱寤?/span></div>
          <div id="db-err" class="alert alert-e hidden"></div>
          <button type="submit" class="btn btn-p"><i class="fas fa-check"></i> 娴嬭瘯杩炴帴骞剁户缁?/button>
        </form>
      </div></div>
    `;
    document.getElementById('install-db').onsubmit = async e => {
      e.preventDefault();
      const btn = e.target.querySelector('button');
      btn.disabled = true;
      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 娴嬭瘯涓?..';
      try {
        await API.post('/install/check-db', {
          host: document.getElementById('db-host').value,
          port: document.getElementById('db-port').value,
          user: document.getElementById('db-user').value,
          password: document.getElementById('db-pass').value,
          database: document.getElementById('db-name').value,
        });
        this.dbConfig = {
          host: document.getElementById('db-host').value,
          port: document.getElementById('db-port').value,
          user: document.getElementById('db-user').value,
          pass: document.getElementById('db-pass').value,
          name: document.getElementById('db-name').value,
        };
        this.showStep(2);
      } catch (ex) {
        document.getElementById('db-err').textContent = ex.message;
        document.getElementById('db-err').classList.remove('hidden');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-check"></i> 娴嬭瘯杩炴帴骞剁户缁?;
      }
    };
  },

  renderAdminStep(ct) {
    ct.innerHTML = `
      <div class="card"><div class="card-h"><i class="fas fa-user-crown"></i> 绗?姝ワ細鍒涘缓鏈嶄富璐﹀彿</div><div class="card-b">
        <form id="install-admin">
          <div class="grid-2"><div class="form-group"><label>绔欑偣鍚嶇О</label><input id="ia-sitename" value="MC涓炬姤绯荤粺"></div>
          <div class="form-group"><label>绔欑偣鍦板潃</label><input id="ia-siteurl" value="${location.origin}"></div></div>
          <div class="grid-2"><div class="form-group"><label>鏈嶄富鐢ㄦ埛鍚?*</label><input id="ia-username" required placeholder="鐧诲綍鐢?></div>
          <div class="form-group"><label>閭<><E996AD> *</label><input type="email" id="ia-email" required></div></div>
          <div class="grid-2"><div class="form-group"><label>瀵嗙爜 *</label><input type="password" id="ia-password" required minlength="6"></div>
          <div class="form-group"><label>娓告垙鍚嶇О</label><input id="ia-game" placeholder="Minecraft ID"></div></div>
          <div class="form-group"><label>娓告垙UID</label><input id="ia-uid" placeholder="娓告垙鍞<E59E99>竴ID"></div>
          <div id="ia-err" class="alert alert-e hidden"></div>
          <div id="ia-warn" class="alert alert-i"><strong>娉ㄦ剰锛?/strong>瀹夎<E780B9>瀹屾垚鍚庨渶瑕侀噸鍚<E599B8>湇鍔″櫒鎵嶈兘鍔犺浇涓氬姟璺<E5A79F>敱銆傝<E98A86>璁板ソ璐﹀彿瀵嗙爜銆?/div>
          <button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-check"></i> 瀹屾垚瀹夎<E780B9></button>
        </form>
      </div></div>
    `;
    document.getElementById('install-admin').onsubmit = async e => {
      e.preventDefault();
      const btn = e.target.querySelector('button');
      btn.disabled = true;
      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 瀹夎<EFBFBD>涓?..';
      try {
        await API.post('/install/complete', {
          ...this.dbConfig,
          db_host: this.dbConfig.host, db_port: this.dbConfig.port,
          db_user: this.dbConfig.user, db_pass: this.dbConfig.pass, db_name: this.dbConfig.name,
          site_name: document.getElementById('ia-sitename').value,
          site_url: document.getElementById('ia-siteurl').value,
          admin_username: document.getElementById('ia-username').value,
          admin_password: document.getElementById('ia-password').value,
          admin_email: document.getElementById('ia-email').value,
          admin_game_name: document.getElementById('ia-game').value,
          admin_game_uid: document.getElementById('ia-uid').value,
        });
        document.getElementById('install-admin').innerHTML = '<div class="alert alert-s"><h3><i class="fas fa-check-circle"></i> 瀹夎<E780B9>鎴愬姛锛?/h3><p>閰嶇疆宸蹭繚瀛樸€傝<E282AC>閲嶅惎鏈嶅姟鍣ㄥ悗鍒锋柊椤甸潰銆?/p></div>';
      } catch (ex) {
        document.getElementById('ia-err').textContent = ex.message;
        document.getElementById('ia-err').classList.remove('hidden');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-check"></i> 瀹屾垚瀹夎<E780B9>';
      }
    };
  }
};