How can I make a Jquey terminal login command that uses a this.read() and maskchar for password?

Im trying to create a login command for my Jquery Terminal, here is the code:

<link href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>

<script>
$('body').terminal({

  login: function(user, pass) {
this.read('Login: ')
   

if(user === 'test'&& pass === '123') {
 
   
   this.echo('Logged.')
    this.set_prompt('test>')
}
 else {
this.echo('Inncorrect')
}

  },


}, {
    checkArity: false,

    prompt: '$ ',
greetings: ' ',
      strings: {
      commandNotFound: "-Error: unknown command: %s",
      echoCommand: true,

    },
    pasteImage: true,

});
</script>

after the this.read('Login: ') I dont know how to make the password part of it show up after, and how to make the if statement match whats put in the this.read(). Also, once you type your username, how can I make another line of text saying password using this.read() but with the mask char?

I feel like I already have pretty much the base for this command set up, but im not sure how to make this work all together.

Solution

You're mixing two things. If you want to create a command that you call like this:

login <username> <password>

Then you should use arguments to the function. But I expect that you don't want that and want to have command work like this:

login
username: <you type username>
password: <you type password>
successful or error

If this it the case then you should use code like this:

<link href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>

<script>
$('body').terminal({

  login: function() {
  
    this.read('Login: ').then(user => {
       this.set_mask(true).read('Password: ').then(pass => {
          this.set_mask(false);
          if(user === 'test'&& pass === '123') {
            this.echo('Logged.')
            this.push({
              hidden() {
                this.echo('this is hidden command');
              }
            }, {
              prompt: 'test> '
            });
          } else {
            this.echo('Inncorrect')
          }
       });
    });
  }
}, {
    checkArity: false,

    prompt: '$ ',
greetings: ' ',
      strings: {
      commandNotFound: "-Error: unknown command: %s",
      echoCommand: true,

    },
    pasteImage: true,

});
</script>

You can also make the user and pass arguments to login optional:

<link href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>

<script>
async function optional_read(term, prompt, default_value) {
  if (!default_value) {
    return term.read(prompt);
  }
  return default_value;
}

$('body').terminal({

  login: function(user, pass) {
    optional_read(this, 'Login: ', user).then(user => {
       this.set_mask(true);
       optional_read(this, 'Password: ', pass).then(pass => {
          this.set_mask(false);
          if (user === 'test' && pass === '123') {
            this.echo('Logged.')
            this.push({
              hidden() {
                this.echo('this is hidden command');
              }
            }, {
              prompt: 'test> '
            });
          } else {
            this.echo('Inncorrect')
          }
       });
    });
  }
}, {
    checkArity: false,
    processArguments: false, // neded for password that are digits

    prompt: '$ ',
    greetings: ' ',
    strings: {
      commandNotFound: "-Error: unknown command: %s",
    },
    pasteImage: true,

});
</script>