Display text in qml based on signal generated - c++

Question

I'm trying to create a simple login application which authenticates via firebase. My current issue is how to display a signal emitted in the .cpp file in a .qml file.
.h file:
#ifndef AUTHHANDLER_H
#define AUTHHANDLER_H
#include <QObject>
#include <QNetworkAccessManager>
#include <QNetworkReply>
#include <QJsonDocument>
#include <QtQml/qqml.h>
class AuthHandler : public QObject
{
Q_OBJECT
public:
explicit AuthHandler(QObject *parent = nullptr);
~AuthHandler();
void setAPIKey(const QString & apiKey);
//void signUserUp(const QString & emailAddress, const QString & password);
//void signUserIn(const QString & emailAddress, const QString & password);
public slots:
void networkReplyReadyRead();
void signUserIn(const QString & emailAddress, const QString & password);
void signUserUp(const QString & emailAddress, const QString & password);
void performAuthenticatedDatabaseCall();
signals:
void userSignedIn(); //void
private:
void performPOST( const QString & url, const QJsonDocument & payload);
void parseResponse( const QByteArray & response);
QString m_apiKey;
QNetworkAccessManager * m_networkAccessManager;
QNetworkReply * m_networkReply;
QString m_idToken;
};
#endif // AUTHHANDLER_H
.cpp file: This is one of the functions in my .cpp file. As you can see on running the code it displays the "User signed in successfully" in the application output window. This code works as intended.
void AuthHandler::parseResponse(const QByteArray &response)
{
QJsonDocument jsonDocument = QJsonDocument::fromJson(( response ));
if ( jsonDocument.object().contains("error"))
{
qDebug() << "Error occured!" << response;
}
else if (jsonDocument.object().contains("kind"))
{
QString idToken = jsonDocument.object().value("idToken").toString();
qDebug() << "Obtained user ID Token: " << idToken;
qDebug() << "User signed in successfully!";
m_idToken = idToken;
emit userSignedIn();
}
else
qDebug() << "The response was: " << response;
}
.qml file code:
Button {
id: loginbutton
//anchors.bottom: parent.bottom
property color colorNormal: "white"
property color colorHovered: "grey"
property color colorClicked: "black"
property color hoverColor: loginbutton.down ? colorClicked : (loginbutton.hovered ? colorHovered : colorNormal)
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: password.bottom
anchors.topMargin: 10
text: qsTr("Login");
font.family: "/fonts/Montserrat-Italic"
font.pointSize: ScreenTools.mediumFontPointSize * 1.3
background: Rectangle {
implicitWidth: mainWindow.width*0.05
implicitHeight: mainWindow.height*0.05
opacity: enabled ? 1 : 0.3
//border.color: controlBt1.down ? "#A9A9A9" : "#373737"
//border.width: 1
radius: 10
gradient: Gradient {
GradientStop { position: 0; color: "#ffffff" }
GradientStop { position: 1; color: "#ADD8E6" }
}
}
onClicked: {
console.log("login: " + username.text + " password: " + password.text);
AuthHandler.signUserIn(username.text, password.text);
This is part of my qml file. On clicking the login button, the signUserIn function executes correctly. My question is, how would I display a succesful login message via my qml if there is a succesful login attempt.

Answer 1

You can use Connection QML type.
Should look something like this:
Connection{
target: AuthHandler
function onUserSignedIn(){console.log("QML: User signed in!")}
}
The pattern is function on<signal name capitalized>(){...}