2025-09-10 12:03:18 +02:00 · 2023-11-15 10:48:53 -05:00 · 2023-11-15 10:48:53 -05:00 · b7c3f3b553
commit b7c3f3b553
parent a6b7ef76f8
12 changed files with 467 additions and 179 deletions
--- a/resources/icons/brush_black_24dp.svg
+++ b/resources/icons/brush_black_24dp.svg
@ -0,0 +1,6 @@
+<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>
--- a/resources/icons/person_outline_black_24dp.svg
+++ b/resources/icons/person_outline_black_24dp.svg
@ -0,0 +1,4 @@
+<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>
--- a/src/app/commoncomponents/InfoBox.qml
+++ b/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
--- a/src/app/commoncomponents/MaterialButton.qml
+++ b/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)
--- a/src/app/commoncomponents/PhotoboothPopup.qml
+++ b/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()

--- a/src/app/commoncomponents/PhotoboothView.qml
+++ b/src/app/commoncomponents/PhotoboothView.qml
@ -34,6 +34,8 @@ Item {
    property real avatarSize
    property bool doubleEditAvatar: false

+    property alias editButton: editImage
+
    height: avatarSize

    Rectangle {
--- a/src/app/constant/JamiStrings.qml
+++ b/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")

--- a/src/app/constant/JamiTheme.qml
+++ b/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
--- a/src/app/wizardview/components/CreateAccountPage.qml
+++ b/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
-                    }
-                }
-            }
-        }
-    }
 }
--- a/src/app/wizardview/components/CustomizeProfilePopup.qml
+++ b/src/app/wizardview/components/CustomizeProfilePopup.qml
@ -0,0 +1,143 @@
+/*
+ * 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
+        }
+    }
+}
--- a/src/app/wizardview/components/EncryptAccountPopup.qml
+++ b/src/app/wizardview/components/EncryptAccountPopup.qml
@ -0,0 +1,129 @@
+/*
+ * 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
+                }
+            }
+        }
+    }
+}
--- a/src/app/wizardview/components/GoodToKnowPopup.qml
+++ b/src/app/wizardview/components/GoodToKnowPopup.qml
@ -0,0 +1,70 @@
+/*
+ * 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
+        }
+    }
+}
+