How to implement a register system (signup) using Ionic and Strophe js?

Ionic Framework ionic-v3
1

I’m using Ionic 3 and Strophe.js with an eJabberd xmpp server. I connect very well. Everything is going well at this level.

Now the problem is that I can not implement a signup system (register). I am new to XMPP and this is my first project.

So, your help will be welcome and even your examples on how to make a register (signup) using IONIC 2-3, ANGULAR 4-5 and STROPHE.JS XMPP.

Please help me.

Here is my code for authentication (login):

xmpp-service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Events } from 'ionic-angular';
import { Strophe } from 'strophe.js';
declare let Strophe: any;

export class Message {
    id: String;
    senderId: String;
    text: String;
    time: String;
}

@Injectable()
export class XMPPService {
    private dismissObserver: any;
    public dismiss: any;

    private BOSH_SERVICE: string = "localhost:5280/http-bind/";
    private CONFERENCE_SERVICE: string = "conference.localhost";
    private connection: Strophe.Connection;
    private roomName: string = "";

    constructor(public events: Events) {
        this.dismissObserver = null;
        this.dismiss = Observable.create(observer => {
            this.dismissObserver = observer;
        });
    }

    /*Function
        Connects the client from the Jabber server.
      Parameters:
        (String) jid - Jabber id.
        (String) host - Host name.
        (String) pass - Password.
      Returns:
    */

    login(jid, host, pass) {
        this.connection = new Strophe.Connection(this.BOSH_SERVICE, { 'keepalive': true });
        this.connection.connect(jid + '@' + host, pass, (status) => {
            this.onConnect(status);
        });
    }

    /*Function
        Disconnects the client from the Jabber server.
      Parameters:
      Returns:
    */

    logout() {
        this.connection.options.sync = true; // Switch to using synchronous requests since this is typically called onUnload.
        this.connection.flush();
        this.connection.disconnect();
    }

    /*Function
        Connect XMPP.
      Parameters:    
      Returns:
        status - Status of connection.
    */

    onConnect(status) {
        var self = this;

        switch (status) {
            case Strophe.Status.CONNECTED:
                console.log('[Connection] Strophe is Connected');

                this.connection.addHandler((msg) => { self.onMessage(msg); return true; }, null, 'message', null, null, null);
                this.connection.addHandler((stanza) => { self.onSubscriptionRequest(stanza) }, null, "presence", "subscribe");

                this.dismissObserver.next("login");

                break;
            case Strophe.Status.ATTACHED:
                console.log('[Connection] Strophe is Attached');
                break;

            case Strophe.Status.DISCONNECTED:
                console.log('[Connection] Strophe is Disconnected');
                this.dismissObserver.next("logout");
                break;

            case Strophe.Status.AUTHFAIL:
                console.log('[Connection] Strophe is Authentication failed');
                break;

            case Strophe.Status.CONNECTING:
                console.log('[Connection] Strophe is Connecting');
                break;

            case Strophe.Status.DISCONNECTING:
                console.log('[Connection] Strophe is Disconnecting');
                break;

            case Strophe.Status.AUTHENTICATING:
                console.log('[Connection] Strophe is Authenticating');
                break;

            case Strophe.Status.ERROR:
            case Strophe.Status.CONNFAIL:
                console.log('[Connection] Failed (' + status + ')');
                break;

            default:
                console.log('[Connection] Unknown status received:', status);
                break;
        }
    };
}

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { XMPPService } from '../../app/xmpp.service';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  aid: string = "login";
  private jid: string = "";
  private host: string = "";
  private password: string = "";

  constructor(public navCtrl: NavController, public navParams: NavParams, public xmppService: XMPPService) {
    this.jid = "didierson"
    this.password = "123@4amurid56";
    this.host = "localhost";
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login() {
    this.xmppService.login(this.jid, this.host, this.password);
  }
}