CreateAccountPage: new design

GitLab: #1417

Change-Id: I15db389e699ae030c3657746b68f0c5ab2af31a6

resources/icons/brush_black_24dp.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="brush_black_24dp" opacity="1">
+    <path id="Path_323" data-name="Path 323" d="M0,0H24V24H0Z" fill="none"/>
+    <path id="Path_324" data-name="Path 324" d="M7,16a1,1,0,0,1,1,1,2.006,2.006,0,0,1-2,2,2.825,2.825,0,0,1-.5-.05A3.947,3.947,0,0,0,6,17a1,1,0,0,1,1-1M18.67,3a1.024,1.024,0,0,0-.71.29L9,12.25,11.75,15l8.96-8.96a1,1,0,0,0,0-1.41L19.37,3.29a.976.976,0,0,0-.7-.29ZM7,14a3,3,0,0,0-3,3,2.029,2.029,0,0,1-2,2,5.174,5.174,0,0,0,4,2,4,4,0,0,0,4-4A3,3,0,0,0,7,14Z"/>
+  </g>
+</svg>

resources/icons/person_outline_black_24dp.svg

+<svg id="person_outline_black_24dp_1_" data-name="person_outline_black_24dp (1)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path id="Path_325" data-name="Path 325" d="M0,0H24V24H0Z" fill="none"/>
+  <path id="Path_326" data-name="Path 326" d="M12,5.9A2.1,2.1,0,1,1,9.9,8,2.1,2.1,0,0,1,12,5.9m0,9c2.97,0,6.1,1.46,6.1,2.1v1.1H5.9V17c0-.64,3.13-2.1,6.1-2.1M12,4a4,4,0,1,0,4,4A4,4,0,0,0,12,4Zm0,9c-2.67,0-8,1.34-8,4v3H20V17C20,14.34,14.67,13,12,13Z"/>
+</svg>

src/app/commoncomponents/InfoBox.qml

@@ -71,7 +71,7 @@ Rectangle {
 
         Text {
 
-            Layout.preferredWidth: 180
+            Layout.preferredWidth: root.width - 10
             Layout.alignment: Qt.AlignLeft
             Layout.topMargin: 8
             Layout.bottomMargin: 15

src/app/commoncomponents/MaterialButton.qml

@@ -39,12 +39,15 @@ AbstractButton {
     property var hoveredColor: JamiTheme.buttonTintedBlueHovered
     property var secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
     property var pressedColor: JamiTheme.buttonTintedBluePressed
+    property var checkedColor: JamiTheme.secAndTertiHoveredBackgroundColor
     property bool hasIcon: animatedIconSource.length !== 0 || iconSource.length !== 0
     property var preferredWidth
     property real textLeftPadding
     property real textRightPadding
     property real fontSize: JamiTheme.buttontextFontPixelSize
     property real textAlignment: Text.AlignHCenter
+    checkable: false
+    checked: false
 
     property real buttontextHeightMargin: JamiTheme.wizardButtonHeightMargin
     height: buttontextHeightMargin + textButton.height
@@ -187,6 +190,8 @@ AbstractButton {
             if (root.secondary || root.tertiary) {
                 if (root.hovered && root.enabled)
                     return root.secHoveredColor;
+                if (root.checked && root.checkable)
+                    return root.checkedColor;
                 return JamiTheme.transparentColor;
             }
             if (root.down)

src/app/commoncomponents/PhotoboothPopup.qml

@@ -40,6 +40,7 @@ BaseModalDialog {
 
     signal focusOnPreviousItem
     signal focusOnNextItem
+    signal imageValidated
 
     function startBooth() {
         recordBox.openRecorder(true)
@@ -72,8 +73,10 @@ BaseModalDialog {
         onValidatePhoto: function(photo) {
             if (!root.newItem)
                 AccountAdapter.setCurrentAccountAvatarBase64(photo)
-            else
-                UtilsAdapter.setTempCreationImageFromString(photo, imageId)
+            else{
+                UtilsAdapter.setTempCreationImageFromString(photo, imageId);
+                imageValidated();
+            }
 
             root.close()
 

src/app/commoncomponents/PhotoboothView.qml

@@ -34,6 +34,8 @@ Item {
     property real avatarSize
     property bool doubleEditAvatar: false
 
+    property alias editButton: editImage
+
     height: avatarSize
 
     Rectangle {

src/app/constant/JamiStrings.qml

@@ -829,6 +829,10 @@ Item {
     // ManageAccount
     property string enableAccountDescription: qsTr("Enabling your account allows you to be contacted on Jami")
 
+    // CreateAccount
+    property string encryptWithPassword: qsTr("Encrypt your account with a password")
+    property string customizeYourProfile: qsTr("Customize your profile")
+
     // General
     property string appearance: qsTr("Appearance")
 

src/app/constant/JamiTheme.qml

@@ -195,6 +195,9 @@ Item {
     property color wizardGreenColor: "#aed581"
     property color requiredFieldColor: "#ff1f62"
     property color requiredFieldBackgroundColor: "#fee4e9"
+    property color customizePhotoColor: "#0B03DB"
+    property color customizePhotoHoveredColor: "#3B35E2"
+    property color customizeRectangleColor: darkTheme ? "#333333" : "#F0EFEF"
 
     // Misc
     property color recordIconColor: "#dc2719"
@@ -539,6 +542,7 @@ Item {
     property real wizardViewBlocMarginSize: pixelToPoint(40)
     property real wizardViewDescriptionMarginSize: pixelToPoint(20)
 
+
     // WizardView Welcome Page
     property real welcomeLabelPointSize: 30
     property var welcomeLogo: darkTheme ? JamiResources.logo_jami_standard_coul_white_svg : JamiResources.logo_jami_standard_coul_svg
@@ -571,9 +575,12 @@ Item {
 
     property real cornerIconSize: 40
 
+    property color wizardIconColor: darkTheme ? "#8c8c8c" : "#7f7f7f"
+
     // InfoBox
     property real infoBoxTitleFontSize: calcSize(13)
     property real infoBoxDescFontSize: calcSize(12)
+    property color infoRectangleColor: JamiTheme.darkTheme ? "#143842" : "#e5eef5"
 
     // Tipbox
     property real tipBoxWidth: 200

src/app/wizardview/components/CreateAccountPage.qml

@@ -2,6 +2,7 @@
  * Copyright (C) 2021-2023 Savoir-faire Linux Inc.
  * Author: Yang Wang <yang.wang@savoirfairelinux.com>
  * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
+ * Author: Capucine Berthet <capucine.berthet@savoirfairelinux.com>
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -26,6 +27,8 @@ import Qt5Compat.GraphicalEffects
 import "../"
 import "../../commoncomponents"
 import "../../settingsview/components"
+import "../../mainview/components"
+import "../../commoncomponents/contextmenu"
 
 Rectangle {
     id: root
@@ -45,9 +48,9 @@ Rectangle {
 
     function clearAllTextFields() {
         chooseUsernameButton.enabled = true;
-        showAdvancedButton.enabled = true;
+        encryptButton.enabled = true;
+        customizeButton.enabled = true;
         usernameEdit.dynamicText = "";
-        advancedAccountSettingsPage.clear();
     }
 
     color: JamiTheme.secondaryBackgroundColor
@@ -286,21 +289,22 @@ Rectangle {
                     text: !enabled ? JamiStrings.creatingAccount : root.isRendezVous ? JamiStrings.chooseName : JamiStrings.joinJami
                     enabled: usernameEdit.nameRegistrationState === UsernameTextEdit.NameRegistrationState.FREE || usernameEdit.nameRegistrationState === UsernameTextEdit.NameRegistrationState.BLANK
 
-                    KeyNavigation.tab: showAdvancedButton
+                    KeyNavigation.tab: customizeButton
                     KeyNavigation.up: usernameEdit
-                    KeyNavigation.down: showAdvancedButton
+                    KeyNavigation.down: customizeButton
 
                     onClicked: {
                         WizardViewStepModel.accountCreationInfo = JamiQmlUtils.setUpAccountCreationInputPara({
                                 "registeredName": usernameEdit.dynamicText,
-                                "alias": advancedAccountSettingsPage.alias,
-                                "password": advancedAccountSettingsPage.validatedPassword,
+                                "alias": advancedButtons.chosenDisplayName,
+                                "password": advancedButtons.chosenPassword,
                                 "avatar": UtilsAdapter.tempCreationImage(),
                                 "isRendezVous": root.isRendezVous
                             });
                         if (usernameEdit.nameRegistrationState === UsernameTextEdit.NameRegistrationState.FREE) {
                             enabled = false;
-                            showAdvancedButton.enabled = false;
+                            customizeButton.enabled = false;
+                            encryptButton.enabled = false;
                             WizardViewStepModel.nextStep();
                         }
                         if (usernameEdit.nameRegistrationState === UsernameTextEdit.NameRegistrationState.BLANK)
@@ -308,29 +312,72 @@ Rectangle {
                     }
                 }
 
-                MaterialButton {
-                    id: showAdvancedButton
 
-                    objectName: "showAdvancedButton"
-                    tertiary: true
-                    secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+                RowLayout {
+                    id: advancedButtons
 
                     Layout.alignment: Qt.AlignCenter
-                    Layout.topMargin: 2 * JamiTheme.wizardViewBlocMarginSize
-                    preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
 
-                    text: JamiStrings.advancedAccountSettings
-                    toolTipText: JamiStrings.showAdvancedFeatures
+                    property string chosenPassword: ""
+                    property string chosenDisplayName: ""
 
-                    KeyNavigation.tab: backButton
-                    KeyNavigation.up: chooseUsernameButton
-                    KeyNavigation.down: backButton
+                    spacing: 5
 
-                    onClicked: {
-                        adviceBox.checked = false;
-                        infoBox.checked = false;
-                        createAccountStack.currentIndex++;
+                    MaterialButton {
+                        id: encryptButton
+
+                        tertiary: true
+                        secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+
+                        Layout.alignment: Qt.AlignCenter
+                        Layout.topMargin: 2 * JamiTheme.wizardViewBlocMarginSize
+                        preferredWidth: customizeButton.width
+
+                        text: JamiStrings.encrypt
+                        toolTipText: JamiStrings.encryptWithPassword
+
+                        KeyNavigation.tab: customizeButton
+                        KeyNavigation.up: chooseUsernameButton
+                        KeyNavigation.down: backButton
+
+                        onClicked: {
+                            var dlg = viewCoordinator.presentDialog(appWindow, "wizardview/components/EncryptAccountPopup.qml");
+                            dlg.accepted.connect(function (password) {
+                                advancedButtons.chosenPassword = password;
+                            });
+                        }
+                    }
+
+                    MaterialButton {
+                        id: customizeButton
+
+                        tertiary: true
+                        secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
+
+                        TextMetrics {
+                            id: customizeText
+                            text: customizeButton.text
+                        }
+
+                        Layout.alignment: Qt.AlignCenter
+                        Layout.topMargin: 2 * JamiTheme.wizardViewBlocMarginSize
+                        preferredWidth: customizeText.width + 2 * JamiTheme.buttontextWizzardPadding
+
+                        text: JamiStrings.customize
+                        toolTipText: JamiStrings.customizeYourProfile
+
+                        KeyNavigation.tab: backButton
+                        KeyNavigation.up: chooseUsernameButton
+                        KeyNavigation.down: backButton
+
+                        onClicked: {
+                            var dlg = viewCoordinator.presentDialog(appWindow, "wizardview/components/CustomizeProfilePopup.qml");
+                            dlg.accepted.connect(function (displayName) {
+                                advancedButtons.chosenDisplayName = displayName;
+                            });
+                        }
                     }
+
                 }
 
                 NoUsernamePopup {
@@ -342,38 +389,28 @@ Rectangle {
 
                     onJoinClicked: {
                         chooseUsernameButton.enabled = false;
-                        showAdvancedButton.enabled = false;
+                        customizeButton.enabled = false;
+                        encryptButton.enabled = false;
                     }
                 }
             }
         }
-
-        AdvancedAccountSettings {
-            id: advancedAccountSettingsPage
-            objectName: "advancedAccountSettingsPage"
-
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-
-            property int stackIndex: 1
-
-            onSaveButtonClicked: createAccountStack.currentIndex--
-        }
     }
 
-    BackButton {
+    JamiPushButton {
         id: backButton
 
         objectName: "createAccountPageBackButton"
 
-        preferredSize: JamiTheme.wizardViewPageBackButtonSize
+        preferredSize: 36
+        imageContainerWidth: 20
+        source: JamiResources.ic_arrow_back_24dp_svg
 
         anchors.left: parent.left
         anchors.top: parent.top
         anchors.margins: JamiTheme.wizardViewPageBackButtonMargins
 
         KeyNavigation.tab: adviceBox
-        KeyNavigation.up: advancedAccountSettingsPage
         KeyNavigation.down: KeyNavigation.tab
 
         onClicked: {
@@ -383,162 +420,40 @@ Rectangle {
                 createAccountStack.currentIndex--;
             } else {
                 WizardViewStepModel.previousStep();
-                goodToKnow.visible = false;
                 helpOpened = false;
             }
         }
     }
 
-    PushButton {
+    JamiPushButton {
         id: adviceBox
         z: 1
 
-        preferredSize: JamiTheme.wizardViewPageBackButtonSize
+        preferredSize: 36
+        checkedImageColor: JamiTheme.chatviewButtonColor
+
         anchors.right: parent.right
         anchors.top: parent.top
         anchors.margins: JamiTheme.wizardViewPageBackButtonMargins
 
-        normalColor: "transparent"
-        imageColor: adviceBox.checked ? JamiTheme.inviteHoverColor : JamiTheme.buttonTintedBlue
         source: JamiResources._black_24dp_svg
-        pressedColor: JamiTheme.tintedBlue
-        hoveredColor: JamiTheme.hoveredButtonColorWizard
-        border.color: {
-            if (adviceBox.checked) {
-                return "transparent";
-            }
-            return JamiTheme.buttonTintedBlue;
-        }
+
         checkable: true
 
-        onCheckedChanged: {
-            goodToKnow.visible = !goodToKnow.visible;
-            helpOpened = !helpOpened;
-            advancedAccountSettingsPage.openedPassword = false;
-            advancedAccountSettingsPage.openedNickname = false;
+        onClicked:{
+            if (!helpOpened) {
+                checked = true
+                helpOpened = true;
+                var dlg = viewCoordinator.presentDialog(appWindow, "wizardview/components/GoodToKnowPopup.qml");
+                dlg.accepted.connect(function() {
+                    checked = false;
+                    helpOpened = false;
+                });
+            }
         }
 
         KeyNavigation.tab: !createAccountStack.currentIndex ? usernameEdit : advancedAccountSettingsPage
         KeyNavigation.up: backButton
         KeyNavigation.down: KeyNavigation.tab
     }
-
-    Item {
-        id: goodToKnow
-        anchors.top: parent.top
-        anchors.right: parent.right
-
-        anchors.margins: JamiTheme.wizardViewPageBackButtonMargins + adviceBox.preferredWidth * 2 / 5
-
-        width: helpOpened ? Math.min(root.width - 2 * JamiTheme.preferredMarginSize, 452) : 0
-        height: {
-            if (!helpOpened)
-                return 0;
-            var finalHeight = title.height + 3 * JamiTheme.preferredMarginSize;
-            finalHeight += flow.implicitHeight;
-            return finalHeight;
-        }
-
-        visible: false
-
-        Behavior on width {
-            NumberAnimation {
-                duration: JamiTheme.shortFadeDuration
-            }
-        }
-
-        Behavior on height  {
-            NumberAnimation {
-                duration: JamiTheme.shortFadeDuration
-            }
-        }
-
-        DropShadow {
-            z: -1
-            anchors.fill: boxAdvice
-            horizontalOffset: 2.0
-            verticalOffset: 2.0
-            radius: boxAdvice.radius
-            color: JamiTheme.shadowColor
-            source: boxAdvice
-            transparentBorder: true
-            samples: radius + 1
-        }
-
-        Rectangle {
-            id: boxAdvice
-
-            z: 0
-            anchors.fill: parent
-            radius: 30
-            color: JamiTheme.secondaryBackgroundColor
-
-            ColumnLayout {
-                id: adviceContainer
-
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.top: parent.top
-                visible: helpOpened ? 1 : 0
-
-                Behavior on visible  {
-                    NumberAnimation {
-                        from: 0
-                        duration: JamiTheme.overlayFadeDuration
-                    }
-                }
-
-                Text {
-                    id: title
-                    text: JamiStrings.goodToKnow
-                    color: JamiTheme.textColor
-                    font.weight: Font.Medium
-                    Layout.topMargin: JamiTheme.preferredMarginSize
-                    Layout.alignment: Qt.AlignCenter | Qt.AlignTop
-
-                    font.pixelSize: JamiTheme.title2FontSize
-                    font.kerning: true
-                }
-
-                Flow {
-                    id: flow
-                    spacing: 25
-                    Layout.alignment: Qt.AlignTop
-                    Layout.leftMargin: JamiTheme.preferredMarginSize * 4
-                    Layout.topMargin: JamiTheme.preferredMarginSize
-                    Layout.preferredWidth: helpOpened ? Math.min(root.width - 2 * JamiTheme.preferredMarginSize, 452) : 0
-                    Layout.fillWidth: true
-
-                    InfoBox {
-                        id: info
-                        icoSource: JamiResources.laptop_black_24dp_svg
-                        title: JamiStrings.local
-                        description: JamiStrings.localAccount
-                        icoColor: JamiTheme.buttonTintedBlue
-                    }
-
-                    InfoBox {
-                        icoSource: JamiResources.person_24dp_svg
-                        title: JamiStrings.username
-                        description: JamiStrings.usernameRecommened
-                        icoColor: JamiTheme.buttonTintedBlue
-                    }
-
-                    InfoBox {
-                        icoSource: JamiResources.lock_svg
-                        title: JamiStrings.encrypt
-                        description: JamiStrings.passwordOptional
-                        icoColor: JamiTheme.buttonTintedBlue
-                    }
-
-                    InfoBox {
-                        icoSource: JamiResources.noun_paint_svg
-                        title: JamiStrings.customize
-                        description: JamiStrings.customizeOptional
-                        icoColor: JamiTheme.buttonTintedBlue
-                    }
-                }
-            }
-        }
-    }
 }

src/app/wizardview/components/CustomizeProfilePopup.qml

+/*
+ * Copyright (C) 2020-2023 Savoir-faire Linux Inc.
+ * Author: Capucine Berthet <capucine.berthet@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import QtQuick
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+import QtQuick.Layouts
+import "../../commoncomponents"
+
+BaseModalDialog {
+    id: root
+
+    title: JamiStrings.customizeProfile
+    closeButtonVisible: false
+
+    signal accepted(string displayName)
+
+    property string alias: ""
+
+    button1.text: JamiStrings.optionSave
+    button1.enabled: false
+    button1.onClicked: {
+        accepted(alias);
+        close();
+    }
+
+    button2.text: JamiStrings.optionCancel
+    button2.onClicked: close()
+
+    popupContent: ColumnLayout {
+        id: customColumnLayout
+        spacing: 20
+
+        Rectangle {
+            id: customRectangle
+
+            Layout.preferredHeight: customLayout.height
+            Layout.fillWidth: true
+            color: JamiTheme.customizeRectangleColor
+            radius: 5
+
+            RowLayout {
+                id: customLayout
+                anchors.centerIn: parent
+                width: parent.width
+
+                PhotoboothView {
+                    id: accountAvatar
+
+                    width: avatarSize
+                    height: avatarSize
+
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignCenter
+                    Layout.margins: 10
+
+                    newItem: true
+                    imageId: "temp"
+                    avatarSize: 56
+                    editButton.visible: false
+                    visible: false
+
+                }
+
+                PushButton {
+                    id: editImage
+
+                    width: 56
+                    height: 56
+                    Layout.margins: 10
+                    Layout.alignment: Qt.AlignLeft| Qt.AlignCenter
+
+                    source: JamiResources.person_outline_black_24dp_svg
+                    visible: !accountAvatar.visible
+
+                    preferredSize: 56
+
+                    normalColor: JamiTheme.customizePhotoColor
+                    imageColor: JamiTheme.whiteColor
+                    hoveredColor: JamiTheme.customizePhotoHoveredColor
+
+                    imageContainerWidth: 30
+
+                    onClicked: {
+                        var dlg = viewCoordinator.presentDialog(parent, "commoncomponents/PhotoboothPopup.qml", {
+                            "parent": editImage,
+                            "imageId": accountAvatar.imageId,
+                            "newItem": true
+                        })
+                        dlg.onImageValidated.connect(function() {
+                            accountAvatar.visible = true
+                            root.button1.enabled = true
+                        })
+                    }
+                }
+
+                ModalTextEdit {
+                    id: displayNameLineEdit
+
+                    Layout.alignment: Qt.AlignLeft
+                    Layout.rightMargin: 10
+                    Layout.fillWidth: true
+
+                    placeholderText: JamiStrings.displayName
+
+                    onDynamicTextChanged: {
+                        if (!button1.enabled)
+                            button1.enabled = displayNameLineEdit.dynamicText.length !== 0
+                        root.alias = displayNameLineEdit.dynamicText;
+                    }
+                }
+            }
+        }
+
+
+
+        Text {
+
+            Layout.fillWidth: true
+            Layout.preferredWidth: 400 - 2 * popupMargins
+            Layout.alignment: Qt.AlignLeft
+
+            wrapMode: Text.WordWrap
+            color: JamiTheme.textColor
+            text: JamiStrings.customizeProfileDescription
+            font.pixelSize: JamiTheme.headerFontSize
+            lineHeight: JamiTheme.wizardViewTextLineHeight
+        }
+    }
+}

src/app/wizardview/components/EncryptAccountPopup.qml

+/*
+ * Copyright (C) 2020-2023 Savoir-faire Linux Inc.
+ * Author: Capucine Berthet <capucine.berthet@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import QtQuick
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+import QtQuick.Layouts
+import "../../commoncomponents"
+
+BaseModalDialog {
+    id: root
+
+    title: JamiStrings.encryptAccount
+
+    closeButtonVisible: false
+
+    signal accepted(string password)
+
+    button1.text: JamiStrings.optionSave
+    button1.enabled: false
+
+    button2.text: JamiStrings.optionCancel
+    button2.onClicked: close()
+
+    popupContent: ColumnLayout {
+
+        id: passwordColumnLayout
+        anchors.bottomMargin: 30
+
+        Component.onCompleted: {
+            root.button1.clicked.connect(function() {
+                root.accepted(passwordConfirmEdit.dynamicText);
+                root.close();
+            });
+        }
+
+        Text {
+            Layout.preferredWidth: 400 - 2 * popupMargins
+            Layout.alignment: Qt.AlignLeft
+
+            color: JamiTheme.textColor
+            wrapMode: Text.WordWrap
+            text: JamiStrings.encryptDescription
+            font.pixelSize: JamiTheme.headerFontSize
+            lineHeight: JamiTheme.wizardViewTextLineHeight
+        }
+
+        PasswordTextEdit {
+            id: passwordEdit
+
+            firstEntry: true
+            placeholderText: JamiStrings.enterPassword
+
+            Layout.alignment: Qt.AlignLeft
+            Layout.topMargin: 20
+            Layout.preferredWidth: 400 - 2 * popupMargins
+
+            KeyNavigation.up: passwordConfirmEdit
+            KeyNavigation.down: KeyNavigation.up
+
+            onDynamicTextChanged: {
+                button1.enabled = passwordEdit.dynamicText === passwordConfirmEdit.dynamicText && passwordEdit.dynamicText.length !== 0
+            }
+        }
+
+        PasswordTextEdit {
+            id: passwordConfirmEdit
+            placeholderText: JamiStrings.confirmPassword
+
+            Layout.alignment: Qt.AlignLeft
+            Layout.preferredWidth: 400 - 2 * popupMargins
+            Layout.topMargin: 20
+            KeyNavigation.up: passwordEdit
+            KeyNavigation.down: KeyNavigation.up
+
+            onDynamicTextChanged: {
+                button1.enabled = passwordEdit.dynamicText === passwordConfirmEdit.dynamicText && passwordEdit.dynamicText.length !== 0
+            }
+        }
+
+        Rectangle {
+            radius: 5
+            color: JamiTheme.infoRectangleColor
+            Layout.fillWidth: true
+            Layout.minimumHeight: infoLayout.height + 35
+            Layout.topMargin: 20
+
+            RowLayout {
+                id: infoLayout
+                anchors.centerIn: parent
+                width: parent.width - 35
+                anchors.margins: 14
+                spacing: 10
+
+                ResponsiveImage{
+                    Layout.fillWidth: true
+                    source: JamiResources.outline_info_24dp_svg
+                    fillMode: Image.PreserveAspectFit
+                    color: JamiTheme.darkTheme ? JamiTheme.editLineColor : JamiTheme.darkTintedBlue
+                }
+
+                Text {
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignLeft
+                    Layout.preferredWidth: 400 - 2 * popupMargins
+
+                    color: JamiTheme.textColor
+                    wrapMode: Text.WordWrap
+                    text: JamiStrings.encryptWarning
+                    font.pixelSize: JamiTheme.headerFontSize
+                }
+            }
+        }
+    }
+}

src/app/wizardview/components/GoodToKnowPopup.qml

+/*
+ * Copyright (C) 2020-2023 Savoir-faire Linux Inc.
+ * Author: Capucine Berthet <capucine.berthet@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import QtQuick
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+import QtQuick.Layouts
+import "../../commoncomponents"
+
+BaseModalDialog {
+    id: root
+
+    title: JamiStrings.goodToKnow
+    signal accepted
+
+    onClosed: accepted()
+
+    popupContent: Column {
+        spacing: 20
+
+        InfoBox {
+            id: info
+
+            width: root.width - 2 * root.popupMargins
+            icoSource: JamiResources.laptop_black_24dp_svg
+            title: JamiStrings.local
+            description: JamiStrings.localAccount
+            icoColor: JamiTheme.wizardIconColor
+        }
+
+        InfoBox {
+            width: root.width - 2 * root.popupMargins
+            icoSource: JamiResources.assignment_ind_black_24dp_svg
+            title: JamiStrings.username
+            description: JamiStrings.usernameRecommened
+            icoColor: JamiTheme.wizardIconColor
+        }
+
+        InfoBox {
+            width: root.width - 2 * root.popupMargins
+            icoSource: JamiResources.lock_svg
+            title: JamiStrings.encrypt
+            description: JamiStrings.passwordOptional
+            icoColor: JamiTheme.wizardIconColor
+        }
+
+        InfoBox {
+            width: root.width - 2 * root.popupMargins
+            icoSource: JamiResources.brush_black_24dp_svg
+            title: JamiStrings.customize
+            description: JamiStrings.customizeOptional
+            icoColor: JamiTheme.wizardIconColor
+        }
+    }
+}
+