godprotocol/html/create.js

A distributed computing environment for Web 4.0 — integrating AI, decentralisation, and virtual computation.

const script = (manager)=> {
    return `
const account_id_el = document.getElementById('account_id'), account_password_el = document.getElementById('account_password'),
 show_password = document.getElementById('show_password'),  create_account = document.getElementById('create_account')

 show_password.addEventListener('click', e=>{
    account_password_el.setAttribute('type', e.target.checked ? 'text' : 'password')
 })

 let message_box = document.getElementById('message-box')

 create_account.addEventListener('click', e=>{
    e.preventDefault();
    console.log('click click', "${manager.options.server_domain}")

    let name = account_id_el.value.trim(), password = account_password_el.value.trim();

    if (!name || !password){
        message_box.textContent = 'Please completely fill all form fields.'

        setTimeout(() => {
            message_box.textContent = ''
        }, 2500);
        return;
    }

    ftch("/create_account", {name, password})
    .then(res=>{
      let accs = sessionStorage.getItem('accounts') 
      if (accs) accs = JSON.parse(accs)
      else accs = new Array()

      if (res.uid){
        let indx = accs.findIndex(ac=>ac.name === name)
        if (indx !== -1){
            accs[indx].uid = res.uid
        } else {
            accs.push({name, uid: res.uid})
        }
        sessionStorage.setItem('accounts', JSON.stringify(accs))

        account_password_el.value = ''
        account_id_el.value = ''
      }

      message_box.textContent = res.uid ? 'Account signed succesfully!' : res.message
        return;
    })
    .catch(err=>console.log(err))

 }) `
}

const create = (manager)=>{
    let tml = `<div class="container my-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <form id="create-form" class="card p-4 shadow-sm">
        <h4 class="mb-4 text-center">Create Account</h4>

        <!-- Account Name -->
        <div class="mb-3">
          <label for="account_id" class="form-label">Account Name</label>
          <input type="text" class="form-control" id="account_id" placeholder="Name" required>
        </div>

        <!-- Password -->
        <div class="mb-3">
          <label for="account_password" class="form-label">Password</label>
          <input type="password" class="form-control" id="account_password" placeholder="Password" required>
        </div>

        <!-- Show Password -->
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="show_password">
          <label class="form-check-label" for="show_password">Show Password</label>
        </div>

        <!-- Submit -->
        <div class="d-grid">
          <button type="submit" class="btn btn-primary" id="create_account">Submit</button>
        </div>
      </form>

      <!-- Message box placeholder -->
      <div id="message-box" class="mt-3"></div>
    </div>
  </div>
</div>`

    tml = `${tml} <script>${script(manager)}</script>`

    return tml
}

export default create