From b7c3f3b553a779ff4863a85b8f81700a000dea4c Mon Sep 17 00:00:00 2001
From: cberthet <capucine.berthet@savoirfairelinux.com>
Date: Wed, 15 Nov 2023 10:48:53 -0500
Subject: [PATCH] CreateAccountPage: new design
GitLab: #1417
Change-Id: I15db389e699ae030c3657746b68f0c5ab2af31a6
---
resources/icons/brush_black_24dp.svg | 6 +
resources/icons/person_outline_black_24dp.svg | 4 +
src/app/commoncomponents/InfoBox.qml | 2 +-
src/app/commoncomponents/MaterialButton.qml | 5 +
src/app/commoncomponents/PhotoboothPopup.qml | 7 +-
src/app/commoncomponents/PhotoboothView.qml | 2 +
src/app/constant/JamiStrings.qml | 4 +
src/app/constant/JamiTheme.qml | 7 +
.../components/CreateAccountPage.qml | 267 ++++++------------
.../components/CustomizeProfilePopup.qml | 143 ++++++++++
.../components/EncryptAccountPopup.qml | 129 +++++++++
.../wizardview/components/GoodToKnowPopup.qml | 70 +++++
12 files changed, 467 insertions(+), 179 deletions(-)
create mode 100644 resources/icons/brush_black_24dp.svg
create mode 100644 resources/icons/person_outline_black_24dp.svg
create mode 100644 src/app/wizardview/components/CustomizeProfilePopup.qml
create mode 100644 src/app/wizardview/components/EncryptAccountPopup.qml
create mode 100644 src/app/wizardview/components/GoodToKnowPopup.qml
diff --git a/resources/icons/brush_black_24dp.svg b/resources/icons/brush_black_24dp.svg
new file mode 100644
index 000000000..3b45dae90
--- /dev/null
+++ 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>
diff --git a/resources/icons/person_outline_black_24dp.svg b/resources/icons/person_outline_black_24dp.svg
new file mode 100644
index 000000000..68e87b376
--- /dev/null
+++ 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>
diff --git a/src/app/commoncomponents/InfoBox.qml b/src/app/commoncomponents/InfoBox.qml
index ab4d41e6e..e277a0a74 100644
--- 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
diff --git a/src/app/commoncomponents/MaterialButton.qml b/src/app/commoncomponents/MaterialButton.qml
index c9fe94a24..6c29fe958 100644
--- 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)
diff --git a/src/app/commoncomponents/PhotoboothPopup.qml b/src/app/commoncomponents/PhotoboothPopup.qml
index 63a911cfc..a82abca3f 100644
--- 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()
diff --git a/src/app/commoncomponents/PhotoboothView.qml b/src/app/commoncomponents/PhotoboothView.qml
index 509bdb7ed..0680be16d 100644
--- 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 {
diff --git a/src/app/constant/JamiStrings.qml b/src/app/constant/JamiStrings.qml
index ccc9d2967..9cff727d1 100644
--- 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")
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index ff1b69520..4c3b28990 100644
--- 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
diff --git a/src/app/wizardview/components/CreateAccountPage.qml b/src/app/wizardview/components/CreateAccountPage.qml
index 4845b7f4b..21b9f6178 100644
--- 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
- }
- }
- }
- }
- }
}
diff --git a/src/app/wizardview/components/CustomizeProfilePopup.qml b/src/app/wizardview/components/CustomizeProfilePopup.qml
new file mode 100644
index 000000000..c52c04400
--- /dev/null
+++ 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
+ }
+ }
+}
diff --git a/src/app/wizardview/components/EncryptAccountPopup.qml b/src/app/wizardview/components/EncryptAccountPopup.qml
new file mode 100644
index 000000000..597e46704
--- /dev/null
+++ 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
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/wizardview/components/GoodToKnowPopup.qml b/src/app/wizardview/components/GoodToKnowPopup.qml
new file mode 100644
index 000000000..8cfde50ee
--- /dev/null
+++ 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
+ }
+ }
+}
+
--
GitLab