wizardview: redesign

Change-Id: If0a3d896b35385f24c9d04b67b12146febfff7c2

images/icons/backup-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>

images/icons/devices-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/></svg>

images/icons/router-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.2 5.9l.8-.8C19.6 3.7 17.8 3 16 3s-3.6.7-5 2.1l.8.8C13 4.8 14.5 4.2 16 4.2s3 .6 4.2 1.7zm-.9.8c-.9-.9-2.1-1.4-3.3-1.4s-2.4.5-3.3 1.4l.8.8c.7-.7 1.6-1 2.5-1 .9 0 1.8.3 2.5 1l.8-.8zM19 13h-2V9h-2v4H5c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM8 18H6v-2h2v2zm3.5 0h-2v-2h2v2zm3.5 0h-2v-2h2v2z"/></svg>

qml.qrc

@@ -29,6 +29,7 @@
         <file>src/commoncomponents/HoverableRadiusButton.qml</file>
         <file>src/commoncomponents/PasswordDialog.qml</file>
         <file>src/commoncomponents/InfoLineEdit.qml</file>
+        <file>src/commoncomponents/MaterialLineEdit.qml</file>
         <file>src/commoncomponents/PhotoboothView.qml</file>
         <file>src/commoncomponents/LookupStatusLabel.qml</file>
         <file>src/commoncomponents/ListViewJami.qml</file>
@@ -43,6 +44,7 @@
         <file>src/wizardview/components/ImportFromDevicePage.qml</file>
         <file>src/wizardview/components/ConnectToAccountManagerPage.qml</file>
         <file>src/wizardview/components/SpinnerPage.qml</file>
+        <file>src/wizardview/components/ProfilePage.qml</file>
         <file>src/wizardview/components/CollapsiblePasswordWidget.qml</file>
         <file>src/MainApplicationWindow.qml</file>
         <file>src/mainview/MainView.qml</file>
@@ -97,6 +99,7 @@
         <file>src/mainview/components/ContactPickerItemDelegate.qml</file>
         <file>src/wizardview/components/HoverableGradientButton.qml</file>
         <file>src/commoncomponents/AccountMigrationDialog.qml</file>
+        <file>src/commoncomponents/MaterialButton.qml</file>
         <file>src/mainview/components/RecordBox.qml</file>
         <file>src/commoncomponents/ElidedTextLabel.qml</file>
     </qresource>

ressources.qrc

@@ -22,6 +22,8 @@
         <file>images/waiting.gif</file>
         <file>images/icons/ic_add_black_18dp_2x.png</file>
         <file>images/icons/info-24px.svg</file>
+        <file>images/icons/backup-24px.svg</file>
+        <file>images/icons/devices-24px.svg</file>
         <file>images/icons/ic_arrow_back_24px.svg</file>
         <file>images/icons/ic_arrow_back_white_24dp.png</file>
         <file>images/icons/ic_arrow_drop_down_black_9dp_2x.png</file>
@@ -42,7 +44,6 @@
         <file>images/icons/ic_content_copy.svg</file>
         <file>images/icons/ic_delete_black_18dp_2x.png</file>
         <file>images/icons/ic_done_white_24dp.png</file>
-        <file>images/icons/ic_folder_black_18dp_2x.png</file>
         <file>images/icons/open_in_full-24px.svg</file>
         <file>images/icons/close_fullscreen-24px.svg</file>
         <file>images/icons/ic_group_add_white_24dp.png</file>
@@ -109,13 +110,12 @@
         <file>images/icons/av_icons/send-24px.svg</file>
         <file>images/icons/av_icons/stop-24px.svg</file>
         <file>images/icons/av_icons/mic-24px.svg</file>
-        <file>images/icons/check_box-24px.svg</file>
-        <file>images/icons/check_box_outline_blank-24px.svg</file>
         <file>images/icons/ic_close_black_24dp.png</file>
         <file>images/icons/extension_24dp.svg</file>
         <file>images/icons/settings_backup_restore-black-18dp.svg</file>
         <file>images/icons/person-24px.svg</file>
         <file>images/icons/drafts-24px.svg</file>
         <file>images/icons/person_add-24px.svg</file>
+        <file>images/icons/router-24px.svg</file>
     </qresource>
 </RCC>

src/MainApplicationWindow.qml

@@ -59,10 +59,6 @@ ApplicationWindow {
         Connections {
             target: mainViewLoader.item
 
-            function onNeedToAddNewAccount() {
-                wizardView.show()
-            }
-
             function onCloseApp() {
                 Qt.quit()
             }
@@ -74,27 +70,37 @@ ApplicationWindow {
         }
     }
 
-    WizardView {
+    Window {
         id: wizardView
 
-        onNeedToShowMainViewWindow: {
+        title: "Jami"
-            mainViewLoader.newAddedAccountIndex = accountIndex
-            if (mainViewLoader.source.toString() !== "qrc:/src/mainview/MainView.qml") {
-                mainViewLoader.loaded.disconnect(slotNewAccountAdded)
-                mainViewLoader.loaded.connect(slotNewAccountAdded)
-                mainViewLoader.setSource("qrc:/src/mainview/MainView.qml")
-            } else {
-                slotNewAccountAdded()
-            }
-        }
 
-        onWizardViewIsClosed: {
+        minimumWidth: 400
-            if (mainViewLoader.source.toString() !== "qrc:/src/mainview/MainView.qml") {
+        minimumHeight: 600
-                Qt.quit()
+
+        WizardView {
+            anchors.fill: parent
+            onNeedToShowMainViewWindow: {
+                mainViewLoader.newAddedAccountIndex = accountIndex
+                if (mainViewLoader.source.toString() !== "qrc:/src/mainview/MainView.qml") {
+                    mainViewLoader.loaded.disconnect(slotNewAccountAdded)
+                    mainViewLoader.loaded.connect(slotNewAccountAdded)
+                    mainViewLoader.setSource("qrc:/src/mainview/MainView.qml")
+                } else {
+                    slotNewAccountAdded()
+                }
+                wizardView.close()
+            }
+
+            onWizardViewIsClosed: {
+                if (mainViewLoader.source.toString() !== "qrc:/src/mainview/MainView.qml") {
+                    Qt.quit()
+                }
             }
         }
     }
 
+
     Component.onCompleted: {
         if(!startAccountMigration()){
             startClientByMainview()

src/commoncomponents/HoverableButton.qml

@@ -47,12 +47,11 @@ Button {
 
     property alias radius: hoverableButtonBackground.radius
     property alias source: hoverableButtonImage.source
-    property var checkedImage: null
+    property var checkedImage: ""
-    property var baseImage: null
+    property var baseImage: ""
     property var checkedColor: null
     property var baseColor: null
     property alias color: hoverableButton.baseColor
-
     property string toolTipText: ""
 
     font.pointSize: fontPointSize

src/commoncomponents/MaterialButton.qml

@@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Sébastien blin <sebastien.blin@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 2.14
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.15
+
+Button {
+    id: root
+
+    property alias source: root.icon.source
+    property string toolTipText: ""
+    property var color: "transparent"
+    property var outlined: false
+
+    Layout.alignment: Qt.AlignCenter
+    Layout.preferredWidth: 400
+    Layout.preferredHeight: 36
+
+    font.kerning: true
+
+    icon.source: ""
+    icon.height: 18
+    icon.width: 18
+
+    contentItem: Item {
+        Rectangle {
+            anchors.fill: parent
+            color: "transparent"
+            Image {
+                source: root.icon.source
+                width: root.icon.width
+                height: root.icon.height
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 16
+                layer {
+                    enabled: true
+                    effect: ColorOverlay {
+                        id: overlay
+                        color: outlined ? root.color : "white"
+                    }
+                }
+            }
+            Text {
+                text: root.text
+                color: outlined? root.color : "white"
+                font: root.font
+                anchors.centerIn: parent
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+    }
+
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
+    ToolTip.visible: hovered && (toolTipText.length > 0)
+    ToolTip.text: toolTipText
+
+    background: Rectangle {
+        id: backgroundRect
+        anchors.fill: parent
+        color: !outlined ? root.color : "transparent"
+        border.color: outlined ? root.color : "transparent"
+        radius: 4
+    }
+}

src/commoncomponents/MaterialLineEdit.qml

@@ -0,0 +1,84 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls.Styles 1.4
+import QtGraphicalEffects 1.15
+
+import "../constant"
+
+TextField {
+    enum BorderColorMode {
+        NORMAL,
+        RIGHT,
+        ERROR
+    }
+
+    property int fieldLayoutWidth: 256
+    property int fieldLayoutHeight: 48
+    property bool layoutFillwidth: false
+
+    property int borderColorMode: InfoLineEdit.NORMAL
+    property var iconSource: {
+        switch(borderColorMode){
+        case InfoLineEdit.RIGHT:
+        case InfoLineEdit.NORMAL:
+            return ""
+        case InfoLineEdit.ERROR:
+            return "qrc:/images/icons/round-error-24px.svg"
+        }
+    }
+    property var backgroundColor: JamiTheme.rgb256(240,240,240)
+    property var borderColor: {
+        switch(borderColorMode){
+        case InfoLineEdit.NORMAL:
+            return "black"
+        case InfoLineEdit.RIGHT:
+            return "green"
+        case InfoLineEdit.ERROR:
+            return "red"
+        }
+    }
+
+    Layout.minimumHeight: fieldLayoutHeight
+    Layout.preferredHeight: fieldLayoutHeight
+    Layout.maximumHeight: fieldLayoutHeight
+
+    Layout.minimumWidth: fieldLayoutWidth
+    Layout.maximumWidth: fieldLayoutWidth
+    Layout.preferredWidth: fieldLayoutWidth
+
+    Layout.fillWidth: layoutFillwidth
+    Layout.alignment: Qt.AlignHCenter
+
+    wrapMode: Text.Wrap
+    readOnly: false
+    selectByMouse: true
+    font.pointSize: 10
+    padding: 16
+    font.kerning: true
+    horizontalAlignment: Text.AlignLeft
+    verticalAlignment: Text.AlignVCenter
+
+    Image {
+        source: iconSource
+        width: 24
+        height: 24
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        layer {
+            enabled: true
+            effect: ColorOverlay {
+                id: overlay
+                color: borderColor
+            }
+        }
+    }
+
+    background: Rectangle {
+        anchors.fill: parent
+        radius: 4
+        border.color: readOnly? "black" : borderColor
+        color: readOnly? "transparent" : backgroundColor
+    }
+}

src/commoncomponents/PhotoboothView.qml

@@ -100,15 +100,16 @@ ColumnLayout{
             id: avatarLabelBackground
 
             anchors.fill: parent
-            color: "transparent"
+            color: "grey"
+            radius: height / 2
 
             Image{
                 id: avatarImg
 
                 anchors.fill: parent
-                source: {
+                source:  {
                     if(imgBase64.length === 0){
-                        return ""
+                        return "qrc:/images/default_avatar_overlay.svg"
                     } else {
                         return "data:image/png;base64," + imgBase64
                     }

src/constant/JamiTheme.qml

@@ -54,6 +54,8 @@ Item {
 
     property string hangUpButtonTintedRed: "#ff0000"
     property string buttonTintedBlue: "#00aaff"
+    property string buttonTintedGrey: "#999"
+    property string buttonTintedGreyInactive: "#bbb"
 
     property string selectionBlue: "#109ede"
     property string selectionGreen: "#21be2b"
@@ -99,6 +101,7 @@ Item {
     }
 
     property color blue_: "#109ede"
+    property color wizardBlueButtons: "#28b1ed"
     property color blueLogo_: rgb256(0, 7, 71)
     property color lightBlue_: "#c1ebf0"
     property color lightGrey_: rgb256(242, 242, 242)

src/mainview/MainView.qml

@@ -29,6 +29,7 @@ import net.jami.Models 1.0
  * Import qml component files.
  */
 import "components"
+import "../wizardview"
 import "../settingsview"
 import "../settingsview/components"
 
@@ -40,7 +41,7 @@ Window {
 
     property int mainViewWindowPreferredWidth: 650
     property int mainViewWindowPreferredHeight: 600
-    property int sidePanelViewStackPreferredWidth: 250
+    property int sidePanelViewStackPreferredWidth: 400
     property int mainViewStackPreferredWidth: 250
     property int aboutPopUpPreferredWidth: 250
 
@@ -59,9 +60,8 @@ Window {
     property bool needToShowCallStack: false
     property bool needToCloseCallStack: false
 
-    signal noAccountIsAvailable
-    signal needToAddNewAccount
     signal closeApp
+    signal noAccountIsAvailable
 
     function pushCallStackView(){
         if (mainViewStack.visible) {
@@ -230,6 +230,28 @@ Window {
         }
     }
 
+    WizardView {
+            id: wizardView
+
+            anchors.fill: parent
+
+            onNeedToShowMainViewWindow: {
+                mainViewLoader.newAddedAccountIndex = accountIndex
+                if (mainViewLoader.source.toString() !== "qrc:/src/mainview/MainView.qml") {
+                    mainViewLoader.loaded.disconnect(slotNewAccountAdded)
+                    mainViewLoader.loaded.connect(slotNewAccountAdded)
+                    mainViewLoader.setSource("qrc:/src/mainview/MainView.qml")
+                } else {
+                    slotNewAccountAdded()
+                }
+                mainViewStackLayout.currentIndex = 0
+            }
+
+            onWizardViewIsClosed: {
+                mainViewStackLayout.currentIndex = 0
+            }
+        }
+
     StackLayout {
         id: mainViewStackLayout
 
@@ -519,7 +541,7 @@ Window {
         }
 
         onNeedToAddNewAccount: {
-            mainViewWindow.needToAddNewAccount()
+            mainViewStackLayout.currentIndex = 2
         }
     }
 
@@ -593,6 +615,20 @@ Window {
 
         Component.onCompleted: {
 
+            sidePanelViewStack.SplitView.maximumWidth = Qt.binding(function() {
+                return (hiddenView ? splitView.width : splitView.width - sidePanelViewStackPreferedWidth)
+            })
+
+            recordBox.x = Qt.binding(function() {
+                var i = (welcomeViewStack.width > 1000 ? Math.round((welcomeViewStack.width-1000)*0.5) : 0)
+                return sidePanelViewStack.width + recordBox.x_offset + i
+            })
+
+            recordBox.y = Qt.binding(function() {
+                return sidePanelViewStack.height + recordBox.y_offset
+            })
+
+
             /*
              * Set qml MessageWebView object pointer to c++.
              */

src/mainview/components/AccountComboBoxPopup.qml

@@ -71,12 +71,16 @@ Popup {
                 fillMode: Image.PreserveAspectFit
                 mipmap: true
 
-
                 /*
                  * Role::Picture
                  */
-                source: "data:image/png;base64," + accountListModel.data(
+                source: {
-                            accountListModel.index(index, 0), 259)
+                    var data = accountListModel.data(accountListModel.index(index, 0), 259)
+                    if (data === undefined) {
+                        return ""
+                    }
+                    return "data:image/png;base64," + data
+                }
             }
 
             Text {
@@ -145,15 +149,17 @@ Popup {
             }
         }
 
-        footer: HoverableButton {
+        footer: Button {
             id: comboBoxFooterItem
 
             implicitWidth: accountComboBox.width
             implicitHeight: accountComboBox.height
 
+            background: Rectangle {
+                color: comboBoxFooterItem.hovered? JamiTheme.releaseColor : JamiTheme.backgroundColor
+            }
+
             text: qsTr("Add Account") + "+"
-            backgroundColor: JamiTheme.backgroundColor
-            onExitColor: JamiTheme.backgroundColor
 
             onClicked: {
                 comboBoxPopup.close()

src/settingsadaptor.cpp

@@ -335,7 +335,11 @@ SettingsAdaptor::clearCurrentAvatar()
 lrc::api::account::ConfProperties_t
 SettingsAdaptor::getAccountConfig()
 {
-    return LRCInstance::accountModel().getAccountConfig(LRCInstance::getCurrAccId());
+    lrc::api::account::ConfProperties_t res;
+    try {
+        res = LRCInstance::accountModel().getAccountConfig(LRCInstance::getCurrAccId());
+    } catch (...) {}
+    return res;
 }
 
 QString

src/settingsview/components/AdvancedSettingsView.qml

@@ -240,7 +240,9 @@ ColumnLayout {
     JamiFileDialog {
         id: privateKey_Dialog
 
-        property string oldPath : ClientWrapper.settingsAdaptor.getAccountConfig_TLS_PrivateKeyFile()
+        property string oldPath : {
+            return ClientWrapper.settingsAdaptor.getAccountConfig_TLS_PrivateKeyFile()
+        }
         property string openPath : oldPath === "" ? (ClientWrapper.utilsAdaptor.getCurrentPath() + "/ringtones/") : (ClientWrapper.utilsAdaptor.toFileAbsolutepath(oldPath))
 
         mode: JamiFileDialog.OpenFile

src/wizardview/WizardView.qml

@@ -17,7 +17,6 @@
  */
 
 import QtQuick 2.14
-import QtQuick.Window 2.14
 import QtQuick.Controls 1.4 as CT
 import QtQuick.Controls 2.14
 import QtQuick.Controls.Universal 2.12
@@ -29,7 +28,7 @@ import "../commoncomponents"
 import "../constant"
 import "components"
 
-Window {
+Rectangle {
     id: wizardViewWindow
 
     enum Mode {
@@ -48,14 +47,14 @@ Window {
         SEARCHING
     }
 
-    property int layoutWidth: 768
-    property int layoutHeight: 768
     property int textFontSize: 9
     property int wizardMode: WizardView.CREATE
     property int addedAccountIndex: -1
-    property bool registrationStateOk: false
+    property bool showBackUp: false
+    property bool showProfile: false
+    property bool showBottom: false
     property string fileToImport: ""
-    property string registedName: ""
+    property string registeredName: ""
 
     property var inputParaObject: ({})
 
@@ -65,21 +64,12 @@ Window {
     signal needToShowMainViewWindow(int accountIndex)
     signal wizardViewIsClosed
 
-    title: "Jami"
     visible: true
-    width: layoutWidth
+    anchors.fill: parent
-    height: layoutHeight
 
-    onClosing: {
-        close.accepted = false
-        changePageQML(controlPanelStackView.welcomePageStackId)
-        wizardViewWindow.hide()
-        wizardViewWindow.wizardViewIsClosed()
-    }
 
     Component.onCompleted: {
-        changePageQML(
+        changePageQML(controlPanelStackView.welcomePageStackId)
-                    controlPanelStackView.welcomePageStackId)
     }
 
     Connections{
@@ -87,10 +77,16 @@ Window {
 
         function onAccountAdded(showBackUp, index) {
             addedAccountIndex = index
-            if (showBackUp) {
+            ClientWrapper.accountAdaptor.accountChanged(index)
+            if (showProfile) {
+                changePageQML(controlPanelStackView.profilePageId)
+                profilePage.readyToSaveDetails = true
+            } else if (controlPanelStackView.currentIndex == controlPanelStackView.profilePageId) {
+                ClientWrapper.lrcInstance.accountListChanged()
+                profilePage.readyToSaveDetails = true
+            } else if (showBackUp) {
                 changePageQML(controlPanelStackView.backupKeysPageId)
             } else {
-                wizardViewWindow.hide()
                 changePageQML(controlPanelStackView.welcomePageStackId)
                 needToShowMainViewWindow(addedAccountIndex)
                 ClientWrapper.lrcInstance.accountListChanged()
@@ -99,7 +95,13 @@ Window {
 
         // reportFailure
         function onReportFailure() {
-            reportFailureQML()
+            if (controlPanelStackView.currentIndex == controlPanelStackView.importFromDevicePageId) {
+                importFromDevicePage.errorText = qsTr("Error when creating your account. Check your credentials")
+            } else if (controlPanelStackView.currentIndex == controlPanelStackView.importFromBackupPageId) {
+                importFromBackupPage.errorText = qsTr("Error when creating your account. Check your credentials")
+            } else if (controlPanelStackView.currentIndex == controlPanelStackView.connectToAccountManagerPageId) {
+                connectToAccountManagerPage.errorText = qsTr("Error when creating your account. Check your credentials")
+            }
         }
     }
 
@@ -113,239 +115,59 @@ Window {
         }
     }
 
-    // failure redirect timer and qml object holder
-    Timer {
-        id: failureRedirectPageTimer
-
-        repeat: false
-        triggeredOnStart: false
-        interval: 1000
-
-        onTriggered: {
-            spinnerPage.successState = true
-        }
-    }
-
-    function reportFailureQML() {
-        spinnerPage.successState = false
-        failureRedirectPageTimer.restart()
-    }
-
-    function createAccountQML() {
-        switch (wizardMode) {
-        case WizardView.CONNECTMANAGER:
-            ClientWrapper.accountAdaptor.createJAMSAccount(inputParaObject)
-            break
-        case WizardView.CREATE:
-        case WizardView.IMPORT:
-            ClientWrapper.accountAdaptor.createJamiAccount(registedName,
-                                                           inputParaObject,
-                                                           createAccountPage.boothImgBase64,
-                                                           (wizardMode === WizardView.CREATE))
-            break
-        default:
-            ClientWrapper.accountAdaptor.createSIPAccount(inputParaObject,createSIPAccountPage.boothImgBase64)
-        }
-
-        changePageQML(controlPanelStackView.spinnerPageId)
-        update()
-    }
-
     function slotRegisteredNameFound(status, address, name) {
-        if (name.length < 3) {
+        if (name.length != 0 && name.length < 3) {
-            registrationStateOk = false
             createAccountPage.nameRegistrationUIState = WizardView.INVALID
-        } else if (registedName === name) {
+        } else if (registeredName === name) {
             switch (status) {
             case NameDirectory.LookupStatus.NOT_FOUND:
             case NameDirectory.LookupStatus.ERROR:
-                registrationStateOk = true
                 createAccountPage.nameRegistrationUIState = WizardView.FREE
                 break
             case NameDirectory.LookupStatus.INVALID_NAME:
             case NameDirectory.LookupStatus.INVALID:
-                registrationStateOk = false
                 createAccountPage.nameRegistrationUIState = WizardView.INVALID
                 break
             case NameDirectory.LookupStatus.SUCCESS:
-                registrationStateOk = false
                 createAccountPage.nameRegistrationUIState = WizardView.TAKEN
                 break
             }
         }
-        validateWizardProgressionQML()
-    }
-
-    // function to set up nav bar visibility and the three buttons' visibiliy
-    function setNavBarVisibility(navVisible, back) {
-        navBarView.visible = (navVisible == true) || (back == true)
-        btnNext.visible = (navVisible == true)
-        btnPevious.visible = (navVisible == true)
-        btnBack.visible = (back == true)
-                && (ClientWrapper.utilsAdaptor.getAccountListSize() != 0)
-    }
-
-    function processWizardInformationsQML() {
-        inputParaObject = {}
-        switch (wizardMode) {
-        case WizardView.CREATE:
-            spinnerPage.progressLabelEditText = qsTr(
-                        "Generating your Jami account...")
-            inputParaObject["alias"] = createAccountPage.text_fullNameEditAlias
-
-            inputParaObject["password"] = createAccountPage.text_confirmPasswordEditAlias
-
-            createAccountPage.clearAllTextFields()
-            break
-        case WizardView.IMPORT:
-            registedName = ""
-            spinnerPage.progressLabelEditText = qsTr(
-                        "Importing account archive...")
-            // should only work in import from backup page or import from device page
-            if (controlPanelStackView.currentIndex
-                    == controlPanelStackView.importFromBackupPageId) {
-                inputParaObject["password"]
-                        = importFromBackupPage.text_passwordFromDeviceAlias
-                importFromBackupPage.clearAllTextFields()
-            } else if (controlPanelStackView.currentIndex
-                       == controlPanelStackView.importFromDevicePageId) {
-                inputParaObject["archivePin"] = importFromBackupPage.text_pinFromDeviceAlias
-                inputParaObject["password"]
-                        = importFromDevicePage.text_passwordFromDeviceAlias
-                importFromDevicePage.clearAllTextFields()
-            }
-            break
-        case WizardView.MIGRATE:
-            spinnerPage.progressLabelEditText = qsTr(
-                        "Migrating your Jami account...")
-            break
-        case WizardView.CREATESIP:
-            spinnerPage.progressLabelEditText = qsTr(
-                        "Generating your SIP account...")
-            if (createSIPAccountPage.text_sipFullNameEditAlias.length == 0) {
-                inputParaObject["alias"] = "SIP"
-            } else {
-                inputParaObject["alias"] = createSIPAccountPage.text_sipFullNameEditAlias
-            }
-
-            inputParaObject["hostname"] = createSIPAccountPage.text_sipServernameEditAlias
-            inputParaObject["username"] = createSIPAccountPage.text_sipUsernameEditAlias
-            inputParaObject["password"] = createSIPAccountPage.text_sipPasswordEditAlias
-            inputParaObject["proxy"] = createSIPAccountPage.text_sipProxyEditAlias
-
-            break
-        case WizardView.CONNECTMANAGER:
-            spinnerPage.progressLabelEditText = qsTr(
-                        "Connecting to account manager...")
-            inputParaObject["username"]
-                    = connectToAccountManagerPage.text_usernameManagerEditAlias
-            inputParaObject["password"]
-                    = connectToAccountManagerPage.text_passwordManagerEditAlias
-            inputParaObject["manager"]
-                    = connectToAccountManagerPage.text_accountManagerEditAlias
-            connectToAccountManagerPage.clearAllTextFields()
-            break
-        }
-
-        inputParaObject["archivePath"] = fileToImport
-
-        if (!("archivePin" in inputParaObject)) {
-            inputParaObject["archivePath"] = ""
-        }
-
-        // change page to spinner page
-        changePageQML(controlPanelStackView.spinnerPageId)
-        //create account
-        createAccountQML()
-        ClientWrapper.utilsAdaptor.createStartupLink()
     }
 
     function changePageQML(pageIndex) {
-        if (pageIndex == controlPanelStackView.spinnerPageId) {
-            setNavBarVisibility(false)
-        }
         controlPanelStackView.currentIndex = pageIndex
         if (pageIndex == controlPanelStackView.welcomePageStackId) {
             fileToImport = ""
-            setNavBarVisibility(false, true)
+            registeredNameFoundConnection.enabled = true
             createAccountPage.nameRegistrationUIState = WizardView.BLANK
         } else if (pageIndex == controlPanelStackView.createAccountPageId) {
             createAccountPage.initializeOnShowUp()
-            setNavBarVisibility(true)
             // connection between register name found and its slot
             registeredNameFoundConnection.enabled = true
-            // validate wizard progression
-            validateWizardProgressionQML()
-            // start photobooth
-            createAccountPage.startBooth()
         } else if (pageIndex == controlPanelStackView.createSIPAccountPageId) {
             createSIPAccountPage.initializeOnShowUp()
-            setNavBarVisibility(true)
             btnNext.enabled = true
             // start photo booth
             createSIPAccountPage.startBooth()
         } else if (pageIndex == controlPanelStackView.importFromDevicePageId) {
             importFromDevicePage.initializeOnShowUp()
-            setNavBarVisibility(true)
         } else if (pageIndex == controlPanelStackView.spinnerPageId) {
             createAccountPage.nameRegistrationUIState = WizardView.BLANK
             createAccountPage.isToSetPassword_checkState_choosePasswordCheckBox = false
         } else if (pageIndex == controlPanelStackView.connectToAccountManagerPageId) {
-            setNavBarVisibility(true)
             connectToAccountManagerPage.initializeOnShowUp()
             btnNext.enabled = false
         } else if (pageIndex == controlPanelStackView.importFromBackupPageId) {
-            setNavBarVisibility(true)
             importFromBackupPage.clearAllTextFields()
             fileToImport = ""
             btnNext.enabled = false
-        } else if (pageIndex == controlPanelStackView.backupKeysPageId) {
+        } else if (pageIndex == controlPanelStackView.profilePageId) {
-            setNavBarVisibility(false)
+            profilePage.initializeOnShowUp()
+            profilePage.showBottom = showBottom
         }
     }
 
-    function validateWizardProgressionQML() {
-        if (controlPanelStackView.currentIndex
-                == controlPanelStackView.importFromDevicePageId) {
-            var validPin = !(importFromDevicePage.text_pinFromDeviceAlias.length == 0)
-            btnNext.enabled = validPin
-            return
-        } else if (controlPanelStackView.currentIndex
-                   == controlPanelStackView.connectToAccountManagerPageId) {
-            var validUsername = !(connectToAccountManagerPage.text_usernameManagerEditAlias.length == 0)
-            var validPassword = !(connectToAccountManagerPage.text_passwordManagerEditAlias.length == 0)
-            var validManager = !(connectToAccountManagerPage.text_accountManagerEditAlias.length == 0)
-            btnNext.enabled = validUsername && validPassword
-                    && validManager
-            return
-        } else if (controlPanelStackView.currentIndex
-                   == controlPanelStackView.importFromBackupPageId) {
-            var validImport = !(fileToImport.length == 0)
-            btnNext.enabled = validImport
-            return
-        }
-
-        var usernameOk = !createAccountPage.checkState_signUpCheckboxAlias
-                || (createAccountPage.checkState_signUpCheckboxAlias
-                    && !(registedName.length == 0)
-                    && (registedName == createAccountPage.text_usernameEditAlias)
-                    && (registrationStateOk == true))
-        var passwordOk = (createAccountPage.text_passwordEditAlias
-                          == createAccountPage.text_confirmPasswordEditAlias)
-
-        // set password status label
-        if (passwordOk
-                && !(createAccountPage.text_passwordEditAlias.length == 0)) {
-            createAccountPage.displayState_passwordStatusLabelAlias = "Success"
-        } else if (!passwordOk) {
-            createAccountPage.displayState_passwordStatusLabelAlias = "Fail"
-        } else {
-            createAccountPage.displayState_passwordStatusLabelAlias = "Hide"
-        }
-        //set enable state of next button
-        btnNext.enabled = (usernameOk && passwordOk)
-    }
-
     PasswordDialog {
         id: passwordDialog
 
@@ -368,7 +190,6 @@ Window {
                                                          title, info)
                 if (success) {
                     console.log("Account Export Succeed")
-                    wizardViewWindow.hide()
                     needToShowMainViewWindow(addedAccountIndex)
                     ClientWrapper.lrcInstance.accountListChanged()
                 }
@@ -377,366 +198,241 @@ Window {
     }
 
     MouseArea {
-            anchors.fill: parent
+        anchors.fill: parent
-            onClicked: forceActiveFocus()
+        onClicked: forceActiveFocus()
-        }
+    }
 
-    // main frame rectangle
+    ScrollView {
-    ScrollView  {
+        id: frame
-        id: wizardViewRect
+        clip: true
         anchors.fill: parent
 
-        clip: true
+        StackLayout {
+            id: controlPanelStackView
+            currentIndex: welcomePageStackId
+            height: wizardView.height
+            width: wizardView.width
 
-        ColumnLayout {
+            property int welcomePageStackId: 0
-                id: content
+            property int createAccountPageId: 1
-                width: wizardViewWindow.width      // ensure correct width
+            property int createSIPAccountPageId: 2
-                height: wizardViewWindow.height     // ensure correct height
+            property int importFromBackupPageId: 3
+            property int backupKeysPageId: 4
+            property int importFromDevicePageId: 5
+            property int connectToAccountManagerPageId: 6
+            property int spinnerPageId: 7
+            property int profilePageId: 8
 
-                Layout.alignment: Qt.AlignHCenter
+            WelcomePageLayout {
-                RowLayout {
+                // welcome page, index 0
-                    Layout.alignment: Qt.AlignHCenter
+                id: welcomePage
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
 
-                    StackLayout {
+                onWelcomePageRedirectPage: {
-                        id: controlPanelStackView
+                    changePageQML(toPageIndex)
-                        currentIndex: welcomePageStackId
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-
-                        property int welcomePageStackId: 0
-                        property int createAccountPageId: 1
-                        property int createSIPAccountPageId: 2
-                        property int importFromBackupPageId: 3
-                        property int backupKeysPageId: 4
-                        property int importFromDevicePageId: 5
-                        property int connectToAccountManagerPageId: 6
-                        property int spinnerPageId: 7
-
-                        WelcomePageLayout {
-                            // welcome page, index 0
-                            id: welcomePage
-
-                            onWelcomePageRedirectPage: {
-                                changePageQML(toPageIndex)
-                            }
-
-                            onVisibleChanged: {
-                                if (visible)
-                                    setNavBarVisibility(false,
-                                                                          true)
-                            }
-
-                            Component.onCompleted: {
-                                setNavBarVisibility(false, true)
-                            }
-                        }
-
-                        CreateAccountPage {
-                            // create account page, index 1
-                            id: createAccountPage
-
-                            onText_usernameEditAliasChanged: {
-                            registrationStateOk = false
-                            if (createAccountPage.checkState_signUpCheckboxAlias
-                                    && (createAccountPage.text_usernameEditAlias.length != 0)) {
-                                registedName = ClientWrapper.utilsAdaptor.stringSimplifier(
-                                            createAccountPage.text_usernameEditAlias)
-                                lookupTimer.restart()
-                                } else {
-                                createAccountPage.nameRegistrationUIState = WizardView.BLANK
-                                lookupTimer.stop()
-                                if (createAccountPage.text_usernameEditAlias.length == 0) {
-                                    lookupTimer.restart()
-                                    }
-                                }
-                                validateWizardProgressionQML()
-                            }
-
-                            onValidateWizardProgressionCreateAccountPage: {
-                                validateWizardProgressionQML()
-                            }
-
-                            onText_passwordEditAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-
-                            onText_confirmPasswordEditAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-
-                        Timer {
-                            id: lookupTimer
-
-                            repeat: false
-                            triggeredOnStart: false
-                            interval: 200
-
-                            onTriggered: {
-                                if (createAccountPage.checkState_signUpCheckboxAlias
-                                        && (createAccountPage.text_usernameEditAlias.length != 0)) {
-                                    createAccountPage.nameRegistrationUIState = WizardView.SEARCHING
-                                    ClientWrapper.nameDirectory.lookupName("", registedName)
-                                }
-                            }
-                        }
-                    }
-
-                        CreateSIPAccountPage {
-                            // create SIP account page, index 2
-                            id: createSIPAccountPage
-                        }
-
-                        ImportFromBackupPage {
-                            // import from backup page, index 3
-                            id: importFromBackupPage
-
-                            onText_passwordFromBackupEditAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-
-                        onImportFromFile_Dialog_Accepted: {
-                            fileToImport = ClientWrapper.utilsAdaptor.toNativeSeparators(fileDir)
-                            inputParaObject[""]
-
-                            if (fileToImport.length != 0) {
-                                importFromBackupPage.fileImportBtnText = ClientWrapper.utilsAdaptor.toFileInfoName(
-                                            fileToImport)
-                            } else {
-                                importFromBackupPage.fileImportBtnText = qsTr(
-                                            "Archive(none)")
-                            }
-                            validateWizardProgressionQML()
-                            }
-                        }
-
-                        BackupKeyPage {
-                            // backup keys page, index 4
-                            id: backupKeysPage
-
-                            onNeverShowAgainBoxClicked: {
-                                ClientWrapper.accountAdaptor.settingsNeverShowAgain(isChecked)
-                            }
-
-                            onExport_Btn_FileDialogAccepted: {
-                                if (accepted) {
-                                    // is there password? If so, go to password dialog, else, go to following directly
-                                    if (ClientWrapper.accountAdaptor.hasPassword()) {
-                                        passwordDialog.path = ClientWrapper.utilsAdaptor.getAbsPath(folderDir)
-                                        passwordDialog.open()
-                                        return
-                                    } else {
-                                        if (folderDir.length > 0) {
-                                            ClientWrapper.accountAdaptor.exportToFile(
-                                                        ClientWrapper.utilsAdaptor.getCurrAccId(),
-                                                        ClientWrapper.utilsAdaptor.getAbsPath(folderDir))
-                                        }
-                                    }
-                                }
-
-                                wizardViewWindow.hide()
-                                changePageQML(controlPanelStackView.welcomePageStackId)
-                                needToShowMainViewWindow(addedAccountIndex)
-                                ClientWrapper.lrcInstance.accountListChanged()
-                            }
-
-
-                            onSkip_Btn_Clicked: {
-                                wizardViewWindow.hide()
-                                changePageQML(controlPanelStackView.welcomePageStackId)
-                                needToShowMainViewWindow(addedAccountIndex)
-                                ClientWrapper.lrcInstance.accountListChanged()
-                            }
-                    }
-
-                        ImportFromDevicePage {
-                            // import from device page, index 5
-                            id: importFromDevicePage
-
-                            onText_pinFromDeviceAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-
-                            onText_passwordFromDeviceAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-                        }
-
-                        ConnectToAccountManagerPage {
-                            // connect to account manager Page, index 6
-                            id: connectToAccountManagerPage
-
-                            onText_usernameManagerEditAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-
-                            onText_passwordManagerEditAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-
-                            onText_accountManagerEditAliasChanged: {
-                                validateWizardProgressionQML()
-                            }
-                        }
-
-                        SpinnerPage {
-                            // spinner Page, index 7
-                            id: spinnerPage
-                        }
-                    }
                 }
 
-                RowLayout {
+                onLeavePage: {
-                    id: navBarView
+                    wizardViewIsClosed()
+                }
+            }
 
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            CreateAccountPage {
-                    Layout.fillWidth: true
+                // create account page, index 1
+                id: createAccountPage
 
-                    Layout.maximumHeight: 52
+                onCreateAccount: {
-                    Layout.preferredHeight: 52
+                    inputParaObject = {}
+                    inputParaObject["password"] = text_passwordEditAlias
+                    ClientWrapper.accountAdaptor.createJamiAccount(
+                        text_usernameEditAlias.text,
+                        inputParaObject,
+                        createAccountPage.boothImgBase64,
+                        true)
+                    showBackUp = true
+                    showBottom = true
+                    changePageQML(controlPanelStackView.profilePageId)
+                }
 
-                    HoverableGradientButton {
+                onText_usernameEditAliasChanged: {
-                        id: btnPevious
+                    lookupTimer.restart()
-                        Layout.alignment: Qt.AlignLeft
+                }
-                        width: 85
-                        height: 30
-                        radius: height / 2
 
-                        Layout.leftMargin: 11
+                onLeavePage: {
+                    changePageQML(controlPanelStackView.welcomePageStackId)
+                }
 
-                        Layout.preferredWidth: 85
+                Timer {
-                        Layout.preferredHeight: 30
+                    id: lookupTimer
-                        text: qsTr("Previous")
-                        font.pointSize: 10
-                        font.kerning: true
 
-                        toolTipText: qsTr("Previous page button")
+                    repeat: false
+                    triggeredOnStart: false
+                    interval: 200
 
-                        onClicked: {
+                    onTriggered: {
-                            // stop photobooth previewing
+                        registeredName = createAccountPage.text_usernameEditAlias
-                            if(controlPanelStackView.currentIndex == controlPanelStackView.createAccountPageId) {
+                        if (registeredName.length !== 0) {
-                                createAccountPage.stopBooth()
+                            createAccountPage.nameRegistrationUIState = WizardView.SEARCHING
-                            }
+                            ClientWrapper.nameDirectory.lookupName("", registeredName)
-                            if(controlPanelStackView.currentIndex == controlPanelStackView.createSIPAccountPageId) {
+                        } else {
-                                createSIPAccountPage.stopBooth()
-                            }
-
-                            // Disconnect registered name found Connection
-                            registeredNameFoundConnection.enabled = false
-                            // deal with look up status label and collapsible password widget
                             createAccountPage.nameRegistrationUIState = WizardView.BLANK
-                            createAccountPage.isToSetPassword_checkState_choosePasswordCheckBox = false
-                            // switch to welcome page
-                            if (controlPanelStackView.currentIndex
-                                    == controlPanelStackView.createAccountPageId
-                                    || controlPanelStackView.currentIndex
-                                    == controlPanelStackView.createSIPAccountPageId
-                                    || controlPanelStackView.currentIndex
-                                    == controlPanelStackView.importFromBackupPageId
-                                    || controlPanelStackView.currentIndex
-                                    == controlPanelStackView.importFromDevicePageId
-                                    || controlPanelStackView.currentIndex
-                                    == controlPanelStackView.connectToAccountManagerPageId) {
-                                changePageQML(
-                                            controlPanelStackView.welcomePageStackId)
-                            }
-                        }
-                    }
-
-                    Item {
-                        Layout.alignment: Qt.AlignHCenter
-                        Layout.fillHeight: true
-                        Layout.minimumWidth: 40
-                        Layout.fillWidth: true
-                    }
-
-                    HoverableGradientButton {
-                        id: btnBack
-                        Layout.alignment: Qt.AlignLeft
-                        width: 85
-                        height: 30
-                        radius: height / 2
-
-                        Layout.preferredWidth: 85
-                        Layout.preferredHeight: 30
-                        text: qsTr("Back")
-                        font.pointSize: 10
-                        font.kerning: true
-
-                        toolTipText: qsTr("Cancel account create/link")
-
-                        onClicked: {
-                            wizardViewWindow.hide()
-                            needToShowMainViewWindow(addedAccountIndex)
-                        }
-                    }
-
-                    Item {
-                        Layout.alignment: Qt.AlignHCenter
-                        Layout.fillHeight: true
-                        Layout.minimumWidth: 40
-                        Layout.fillWidth: true
-                    }
-
-                    HoverableGradientButton {
-                        id: btnNext
-                        Layout.alignment: Qt.AlignRight
-                        width: 85
-                        height: 30
-                        radius: height / 2
-
-                        Layout.rightMargin: 11
-
-                        Layout.minimumWidth: 85
-                        Layout.preferredWidth: 85
-                        Layout.maximumWidth: 85
-
-                        Layout.minimumHeight: 30
-                        Layout.preferredHeight: 30
-                        Layout.maximumHeight: 30
-
-                        text: qsTr("Next")
-                        font.pointSize: 10
-                        font.kerning: true
-
-                        toolTipText: qsTr("Next page button")
-
-                        onClicked: {
-                            // stop photobooth previewing
-                            if(controlPanelStackView.currentIndex == controlPanelStackView.createAccountPageId) {
-                                createAccountPage.stopBooth()
-                            }
-                            if(controlPanelStackView.currentIndex == controlPanelStackView.createSIPAccountPageId) {
-                                createSIPAccountPage.stopBooth()
-                            }
-
-                            registeredNameFoundConnection.enabled = false
-
-                            if (controlPanelStackView.currentIndex
-                                    == controlPanelStackView.createAccountPageId) {
-                                wizardMode = WizardView.CREATE
-                                processWizardInformationsQML()
-                            } else if (controlPanelStackView.currentIndex
-                                       == controlPanelStackView.importFromDevicePageId) {
-                                wizardMode = WizardView.IMPORT
-                                processWizardInformationsQML()
-                            } else if (controlPanelStackView.currentIndex
-                                       == controlPanelStackView.createSIPAccountPageId) {
-                                wizardMode = WizardView.CREATESIP
-                                processWizardInformationsQML()
-                            } else if (controlPanelStackView.currentIndex
-                                       == controlPanelStackView.connectToAccountManagerPageId) {
-                                wizardMode = WizardView.CONNECTMANAGER
-                                processWizardInformationsQML()
-                            } else if (controlPanelStackView.currentIndex
-                                       == controlPanelStackView.importFromBackupPageId) {
-                                wizardMode = WizardView.IMPORT
-                                processWizardInformationsQML()
-                            }
                         }
                     }
                 }
             }
+
+            CreateSIPAccountPage {
+                // create SIP account page, index 2
+                id: createSIPAccountPage
+
+                onLeavePage: {
+                    changePageQML(controlPanelStackView.welcomePageStackId)
+                }
+
+                onCreateAccount: {
+                    inputParaObject = {}
+                    inputParaObject["hostname"] = createSIPAccountPage.text_sipServernameEditAlias
+                    inputParaObject["username"] = createSIPAccountPage.text_sipUsernameEditAlias
+                    inputParaObject["password"] = createSIPAccountPage.text_sipPasswordEditAlias
+                    inputParaObject["proxy"] = createSIPAccountPage.text_sipProxyEditAlias
+                    createSIPAccountPage.clearAllTextFields()
+
+                    ClientWrapper.accountAdaptor.createSIPAccount(inputParaObject, "")
+                    showBackUp = false
+                    showBottom = false
+                    changePageQML(controlPanelStackView.profilePageId)
+                    controlPanelStackView.profilePage.readyToSaveDetails = true
+                }
+            }
+
+            ImportFromBackupPage {
+                // import from backup page, index 3
+                id: importFromBackupPage
+
+                onLeavePage: {
+                    changePageQML(controlPanelStackView.welcomePageStackId)
+                }
+
+                onImportAccount: {
+                    inputParaObject = {}
+                    inputParaObject["archivePath"] = ClientWrapper.utilsAdaptor.getAbsPath(importFromBackupPage.filePath)
+                    inputParaObject["password"] = importFromBackupPage.text_passwordFromBackupEditAlias
+                    importFromBackupPage.clearAllTextFields()
+                    showBackUp = false
+                    showBottom = false
+                    showProfile = true
+                    ClientWrapper.accountAdaptor.createJamiAccount(
+                        "", inputParaObject, "", false)
+                }
+            }
+
+            BackupKeyPage {
+                    // backup keys page, index 4
+                    id: backupKeysPage
+
+                    onNeverShowAgainBoxClicked: {
+                        ClientWrapper.accountAdaptor.settingsNeverShowAgain(isChecked)
+                    }
+
+                    onExport_Btn_FileDialogAccepted: {
+                        if (accepted) {
+                            // is there password? If so, go to password dialog, else, go to following directly
+                            if (ClientWrapper.accountAdaptor.hasPassword()) {
+                                passwordDialog.path = ClientWrapper.utilsAdaptor.getAbsPath(folderDir)
+                                passwordDialog.open()
+                                return
+                            } else {
+                                if (folderDir.length > 0) {
+                                    ClientWrapper.accountAdaptor.exportToFile(
+                                                ClientWrapper.utilsAdaptor.getCurrAccId(),
+                                                ClientWrapper.utilsAdaptor.getAbsPath(folderDir))
+                                }
+                            }
+                        }
+
+                        changePageQML(controlPanelStackView.welcomePageStackId)
+                        needToShowMainViewWindow(addedAccountIndex)
+                        ClientWrapper.lrcInstance.accountListChanged()
+                    }
+
+                    onLeavePage: {
+                        changePageQML(controlPanelStackView.welcomePageStackId)
+                        needToShowMainViewWindow(addedAccountIndex)
+                        ClientWrapper.lrcInstance.accountListChanged()
+                    }
+            }
+
+            ImportFromDevicePage {
+                // import from device page, index 5
+                id: importFromDevicePage
+
+                onLeavePage: {
+                    changePageQML(controlPanelStackView.welcomePageStackId)
+                }
+
+                onImportAccount: {
+                    inputParaObject = {}
+                    inputParaObject["archivePin"] = importFromDevicePage.text_pinFromDeviceAlias
+                    inputParaObject["password"] = importFromDevicePage.text_passwordFromDeviceAlias
+
+                    showProfile = true
+                    showBackUp = false
+                    showBottom = false
+                    ClientWrapper.accountAdaptor.createJamiAccount(
+                        "", inputParaObject, "", false)
+                }
+            }
+
+            ConnectToAccountManagerPage {
+                // connect to account manager Page, index 6
+                id: connectToAccountManagerPage
+
+                onCreateAccount: {
+                    inputParaObject = {}
+                    inputParaObject["username"]
+                            = connectToAccountManagerPage.text_usernameManagerEditAlias
+                    inputParaObject["password"]
+                            = connectToAccountManagerPage.text_passwordManagerEditAlias
+                    inputParaObject["manager"]
+                            = connectToAccountManagerPage.text_accountManagerEditAlias
+                    ClientWrapper.accountAdaptor.createJAMSAccount(inputParaObject)
+                }
+
+                onLeavePage: {
+                    changePageQML(controlPanelStackView.welcomePageStackId)
+                }
+            }
+
+            SpinnerPage {
+                // spinner Page, index 7
+                id: spinnerPage
+            }
+
+            ProfilePage {
+                // profile Page, index 8
+                id: profilePage
+
+                function leave() {
+                    if (showBackUp)
+                        changePageQML(controlPanelStackView.backupKeysPageId)
+                    else {
+                        changePageQML(controlPanelStackView.welcomePageStackId)
+                        needToShowMainViewWindow(addedAccountIndex)
+                        ClientWrapper.lrcInstance.accountListChanged()
+                    }
+                }
+
+                onSaveProfile: {
+                    ClientWrapper.settingsAdaptor.setCurrAccAvatar(profilePage.boothImgBase64)
+                    ClientWrapper.accountAdaptor.setCurrAccDisplayName(profilePage.displayName)
+                    leave()
+                }
+
+                onLeavePage: {
+                    leave()
+                }
+            }
+        }
     }
+
+    color: JamiTheme.backgroundColor
 }

src/wizardview/components/BackupKeyPage.qml

@@ -23,10 +23,13 @@ import Qt.labs.platform 1.1
 
 import "../../constant"
 import "../../commoncomponents"
+import "../../settingsview/components"
+
+Rectangle {
+    id: root
 
-ColumnLayout {
     signal neverShowAgainBoxClicked(bool isChecked)
-    signal skip_Btn_Clicked
+    signal leavePage
     signal export_Btn_FileDialogAccepted(bool accepted, string folderDir)
 
     /*
@@ -58,143 +61,133 @@ ColumnLayout {
         }
     }
 
-    Layout.fillWidth: true
+    anchors.fill: parent
-    Layout.fillHeight: true
 
-    Item {
+    color: JamiTheme.backgroundColor
-        Layout.alignment: Qt.AlignHCenter
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
 
-    /*
-     * Main layout for BackupKeyPage which consists of the buttons and "never show again" check box
-     */
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.maximumWidth: 366
-
         spacing: 12
 
-        Label {
+        anchors.horizontalCenter: parent.horizontalCenter
-            id: backupKeysLabel
+        anchors.verticalCenter: parent.verticalCenter
-            Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: backupBtn.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Layout.maximumWidth: 366
+        RowLayout {
-            Layout.maximumHeight: 21
+            spacing: 12
-            Layout.preferredWidth: 366
+            height: 48
-            Layout.preferredHeight: 21
 
-            text: qsTr("Backup your account")
+            anchors.left: backupBtn.left
-            font.pointSize: 13
+            anchors.right: backupBtn.right
-            font.kerning: true
+
+            Label {
+                text: qsTr("Backup your account!")
+
+                font.pointSize: JamiTheme.textFontSize + 3
+            }
+
+            Label {
+                text: qsTr("Recommended")
+                color: "white"
+                padding: 8
+                anchors.right: parent.right
+
+                background: Rectangle {
+                    color: "#aed581"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
         }
+
         Label {
-            id: backupInfoLabel1
+            text: qsTr("This account only exists on this device. If you lost your device or uninstall the application, your account will be deleted. You can backup your account now or later.")
-            Layout.maximumWidth: 366
+            wrapMode: Text.Wrap
-            Layout.maximumHeight: 57
+            anchors.left: backupBtn.left
-            Layout.preferredWidth: 366
+            anchors.right: backupBtn.right
-            Layout.preferredHeight: 57
 
-            text: qsTr("This account only exists on this device. If you lost your device or uninstall the application,your account will be deleted. You can backup your account now or later.")
+            font.pointSize: JamiTheme.textFontSize
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignJustify
-            verticalAlignment: Text.AlignVCenter
         }
-        CheckBox {
-            id: neverShowAgainBox
-            checked: false
 
-            Layout.maximumWidth: 366
+        RowLayout {
-            Layout.maximumHeight: 19
+            spacing: 12
-            Layout.preferredWidth: 366
+            height: 48
-            Layout.preferredHeight: 19
 
-            indicator.implicitWidth: 10
+            anchors.right: backupBtn.right
-            indicator.implicitHeight:10
+            anchors.left: backupBtn.left
 
-            text: qsTr("Never show me this again")
+            Label {
-            font.pointSize: 8
+                text: qsTr("Never show me this again")
+
+                font.pointSize: JamiTheme.textFontSize
+            }
+
+            Switch {
+                id: passwordSwitch
+                Layout.alignment: Qt.AlignRight
+
+                onToggled: {
+                    neverShowAgainBoxClicked(checked)
+                }
+            }
+        }
+
+        MaterialButton {
+            id: backupBtn
+            text: qsTr("BACKUP ACCOUNT")
+            color: JamiTheme.buttonTintedGrey
 
             onClicked: {
-                neverShowAgainBoxClicked(checked)
+                exportBtn_Dialog.open()
+                leavePage()
             }
         }
-        RowLayout {
-            Layout.fillWidth: true
-            Layout.maximumHeight: 20
 
-            Item {
+        MaterialButton {
-                Layout.alignment: Qt.AlignVCenter
+            text: qsTr("SKIP")
-                Layout.fillHeight: true
+            color: JamiTheme.buttonTintedGrey
-                Layout.maximumWidth: 40
+            outlined: true
-                Layout.minimumWidth: 10
-            }
 
-            HoverableGradientButton {
+            onClicked: {
-                id: exportBtn
+                leavePage()
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 85
-                Layout.preferredWidth: 85
-                Layout.maximumWidth: 85
-
-                Layout.minimumHeight: 30
-                Layout.preferredHeight: 30
-                Layout.maximumHeight: 30
-
-                text: qsTr("Export")
-                font.kerning: true
-                fontPointSize: 10
-                radius: height / 2
-                backgroundColor: JamiTheme.releaseColor
-
-                onClicked: {
-                    exportBtn_Dialog.open()
-                }
-            }
-
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
-
-            HoverableGradientButton {
-                id: skipBtn
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 85
-                Layout.preferredWidth: 85
-                Layout.maximumWidth: 85
-
-                Layout.minimumHeight: 30
-                Layout.preferredHeight: 30
-                Layout.maximumHeight: 30
-
-                text: qsTr("Skip")
-                fontPointSize: 10
-                font.kerning: true
-                radius: height / 2
-                backgroundColor: JamiTheme.releaseColor
-
-                onClicked: {
-                    skip_Btn_Clicked()
-                }
-            }
-
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillHeight: true
-                Layout.maximumWidth: 40
-                Layout.minimumWidth: 10
             }
         }
     }
 
-    Item {
+    HoverableButton {
-        Layout.alignment: Qt.AlignHCenter
+        id: cancelButton
-        Layout.fillWidth: true
+        z: 2
-        Layout.fillHeight: true
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Close")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }

src/wizardview/components/CollapsiblePasswordWidget.qml

@@ -51,7 +51,7 @@ GridLayout {
 
     Layout.leftMargin: 32
 
-    InfoLineEdit {
+    MaterialLineEdit {
         id: passwordEdit
 
         visible: visibleCollapsble
@@ -83,7 +83,7 @@ GridLayout {
         Layout.minimumHeight: 30
     }
 
-    InfoLineEdit {
+    MaterialLineEdit {
         id: confirmPasswordEdit
 
         visible: visibleCollapsble

src/wizardview/components/ConnectToAccountManagerPage.qml

@@ -23,10 +23,13 @@ import QtQuick.Controls 2.14
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
+Rectangle {
+    id: root
+
     property alias text_usernameManagerEditAlias: usernameManagerEdit.text
     property alias text_passwordManagerEditAlias: passwordManagerEdit.text
     property alias text_accountManagerEditAlias: accountManagerEdit.text
+    property string errorText: ""
 
     function initializeOnShowUp() {
         clearAllTextFields()
@@ -36,67 +39,161 @@ ColumnLayout {
         usernameManagerEdit.clear()
         passwordManagerEdit.clear()
         accountManagerEdit.clear()
+        errorText = ""
     }
 
-    Layout.fillWidth: true
+    anchors.fill: parent
-    Layout.fillHeight: true
 
-    Item {
+    color: JamiTheme.backgroundColor
-        Layout.alignment: Qt.AlignHCenter
+
-        Layout.preferredHeight: 40
+    signal leavePage
-        Layout.fillWidth: true
+    signal createAccount
-        Layout.fillHeight: true
-    }
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.fillWidth: true
-
         spacing: 12
 
-        Label {
+        anchors.horizontalCenter: parent.horizontalCenter
-            id: signInLabel
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: parent.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Layout.alignment: Qt.AlignHCenter
+        RowLayout {
-            Layout.minimumWidth: 256
+            spacing: 12
-            Layout.preferredHeight: 21
+            height: 48
-            text: qsTr("Sign in")
+
-            font.pointSize: 13
+            Layout.fillWidth: true
-            font.kerning: true
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            Label {
+                text: qsTr("Enter URL of management server")
+            }
+
+            Label {
+                text: qsTr("Required")
+                color: "#ff1f62"
+                padding: 8
+                anchors.right: parent.right
+
+                background: Rectangle {
+                    color: "#fee4e9"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
-            id: usernameManagerEdit
+            id: accountManagerEdit
 
-            Layout.alignment: Qt.AlignHCenter
+            selectByMouse: true
+            placeholderText: qsTr("Jami management server URL")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
+        }
+
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            text: qsTr("Enter your organization credentials")
+            wrapMode: Text.Wrap
+        }
+
+        MaterialLineEdit {
+            id: usernameManagerEdit
 
             selectByMouse: true
             placeholderText: qsTr("Username")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: passwordManagerEdit
 
-            Layout.alignment: Qt.AlignHCenter
             selectByMouse: true
-            echoMode: TextInput.Password
             placeholderText: qsTr("Password")
+            font.pointSize: 10
+            font.kerning: true
+
+            echoMode: TextInput.Password
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
         }
 
-        InfoLineEdit {
+        MaterialButton {
-            id: accountManagerEdit
+            id: connectBtn
+            text: qsTr("CONNECT")
+            enabled: accountManagerEdit.text.length !== 0
+                && usernameManagerEdit.text.length !== 0
+                && passwordManagerEdit.text.length !== 0
+            color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
 
+            onClicked: {
+                errorText = ""
+                createAccount()
+            }
+        }
+
+        Label {
+            text: errorText
+
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
             Layout.alignment: Qt.AlignHCenter
 
-            selectByMouse: true
+            font.pointSize: JamiTheme.textFontSize
-            placeholderText: qsTr("Account Manager")
+            color: "red"
+
+            height: 32
         }
     }
 
-    Item {
+    HoverableButton {
-        Layout.alignment: Qt.AlignHCenter
+        id: cancelButton
-        Layout.preferredHeight: 40
+        z: 2
-        Layout.fillWidth: true
+
-        Layout.fillHeight: true
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }

src/wizardview/components/CreateAccountPage.qml

@@ -19,307 +19,341 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
+import Qt.labs.platform 1.1
 
 import "../"
 import "../../constant"
 import "../../commoncomponents"
+import "../../settingsview/components"
+
+Rectangle {
+    id: root
 
-ColumnLayout {
-    property alias text_fullNameEditAlias: fullNameEdit.text
     property alias text_usernameEditAlias: usernameEdit.text
-
     property int nameRegistrationUIState: WizardView.BLANK
+    property alias text_passwordEditAlias: passwordEdit.text
 
-    property alias checkState_signUpCheckboxAlias: signUpCheckbox.checked
+    signal createAccount
-    property alias isToSetPassword_checkState_choosePasswordCheckBox: choosePasswordCheckBox.checked
+    signal leavePage
-
-    // photo booth alias
-    property alias boothImgBase64: setAvatarWidget.imgBase64
-
-    // collapse password widget property aliases
-    property alias text_passwordEditAlias: collapsiblePasswordWidget.text_passwordEditAlias
-    property alias text_confirmPasswordEditAlias: collapsiblePasswordWidget.text_confirmPasswordEditAlias
-    property alias displayState_passwordStatusLabelAlias: collapsiblePasswordWidget.state_passwordStatusLabelAlias
-
-    signal validateWizardProgressionCreateAccountPage
 
     function initializeOnShowUp() {
+        createAccountStack.currentIndex = 0
         clearAllTextFields()
-
+        passwordSwitch.checked = false
-        signUpCheckbox.checked = true
-        choosePasswordCheckBox.checked = false
-        usernameEdit.enabled = true
-        fullNameEdit.enabled = true
     }
 
     function clearAllTextFields() {
         usernameEdit.clear()
-        fullNameEdit.clear()
+        passwordEdit.clear()
-
+        passwordConfirmEdit.clear()
-        collapsiblePasswordWidget.clearAllTextFields()
     }
 
-    function setCollapsiblePasswordWidgetVisibility(visible) {
+    anchors.fill: parent
-        choosePasswordCheckBox.checked = visible
+
-        if (visible) {
+    color: JamiTheme.backgroundColor
-            choosePasswordCheckBox.visible = true
+
+    /*
+    * JamiFileDialog for exporting account
+    */
+    JamiFileDialog {
+        id: exportBtn_Dialog
+
+        mode: JamiFileDialog.SaveFile
+
+        title: qsTr("Export Account Here")
+        folder: StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/Desktop"
+
+        nameFilters: [qsTr("Jami archive files") + " (*.gz)", qsTr(
+                "All files") + " (*)"]
+
+        onAccepted: {
+            export_Btn_FileDialogAccepted(true, file)
+        }
+
+        onRejected: {
+            export_Btn_FileDialogAccepted(false, folder)
+        }
+
+        onVisibleChanged: {
+            if (!visible) {
+                rejected()
+            }
         }
     }
 
-    function startBooth(){
+    StackLayout {
-        setAvatarWidget.startBooth()
+        id: createAccountStack
-    }
+        anchors.verticalCenter: root.verticalCenter
-
+        anchors.horizontalCenter: root.horizontalCenter
-    function stopBooth(){
-        setAvatarWidget.stopBooth()
-    }
-
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-
-    spacing: 6
-
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    ColumnLayout {
-        Layout.alignment: Qt.AlignHCenter
-
-        spacing: 5
 
         ColumnLayout {
-            Layout.fillWidth: true
+            spacing: 12
-            spacing: 6
 
-            Layout.alignment: Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
+            Layout.preferredWidth: root.width
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-        Label {
+            RowLayout {
-            id: profileSectionLabel
+                spacing: 12
+                height: 48
 
-
-            Layout.alignment: Qt.AlignHCenter
-
-            text: qsTr("Profile")
-            font.pointSize: 13
-            font.kerning: true
-
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-    PhotoboothView{
-        id: setAvatarWidget
-
-        Layout.alignment: Qt.AlignHCenter
-
-        Layout.maximumWidth: 261
-        Layout.preferredWidth: 261
-        Layout.minimumWidth: 261
-        Layout.maximumHeight: 261
-        Layout.preferredHeight: 261
-        Layout.minimumHeight: 261
-    }
-
-        RowLayout {
-            spacing: 6
-            Layout.alignment: Qt.AlignHCenter
-            Layout.maximumHeight: 30
-
-            Item {
                 Layout.fillWidth: true
-                Layout.maximumHeight: 10
+                anchors.left: usernameEdit.left
-            }
 
-            InfoLineEdit {
+                Label {
-                id: fullNameEdit
+                    text: qsTr("Choose a username for your account")
+                }
 
-                fieldLayoutWidth: 261
+                Label {
+                    text: qsTr("Recommended")
+                    color: "white"
+                    padding: 8
+                    anchors.right: parent.right
 
-                Layout.alignment: Qt.AlignCenter
+                    background: Rectangle {
-
+                        color: "#aed581"
-                selectByMouse: true
+                        radius: 24
-                placeholderText: qsTr("Profile name")
+                        anchors.fill: parent
-                font.pointSize: 10
-                font.kerning: true
-            }
-
-            Item {
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-            }
-        }
-        }
-    }
-
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    ColumnLayout {
-        Layout.alignment: Qt.AlignHCenter
-
-        spacing: 5
-        Label {
-            id: accountSectionLabel
-            Layout.alignment: Qt.AlignHCenter
-
-            Layout.maximumWidth: 261
-            Layout.preferredWidth: 261
-            Layout.minimumWidth: 261
-            Layout.maximumHeight: 30
-            Layout.preferredHeight: 30
-            Layout.minimumHeight: 30
-
-            text: qsTr("Account")
-            font.pointSize: 13
-            font.kerning: true
-
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-        ColumnLayout {
-            Layout.fillWidth: true
-            spacing: 6
-
-            CheckBox {
-                id: signUpCheckbox
-                checked: true
-
-                indicator.width: 10
-                indicator.height: 10
-
-                Layout.leftMargin: 32
-
-                Layout.minimumWidth: 261
-
-                Layout.maximumHeight: 30
-                Layout.preferredHeight: 30
-                Layout.minimumHeight: 25
-
-                Layout.alignment: Qt.AlignLeft
-
-                text: qsTr("Register public username")
-                font.pointSize: 10
-                font.kerning: true
-
-                indicator.implicitWidth: 20
-                indicator.implicitHeight:20
-
-                onClicked: {
-                    if (!checked) {
-                        usernameEdit.clear()
                     }
-
-                    validateWizardProgressionCreateAccountPage()
                 }
             }
-        }
 
-        RowLayout {
+            MaterialLineEdit {
-            spacing: 6
-            Layout.fillWidth: true
-
-            Layout.leftMargin: 32
-
-            InfoLineEdit {
                 id: usernameEdit
 
-                fieldLayoutWidth: 261
-
-                Layout.alignment: Qt.AlignHCenter
-
                 selectByMouse: true
                 placeholderText: qsTr("Choose your username")
                 font.pointSize: 10
                 font.kerning: true
 
-                enabled: signUpCheckbox.visible && signUpCheckbox.checked
+                borderColorMode: nameRegistrationUIState === WizardView.BLANK ? MaterialLineEdit.NORMAL
+                                : nameRegistrationUIState >= WizardView.FREE ? MaterialLineEdit.NORMAL : MaterialLineEdit.ERROR
+
+                fieldLayoutWidth: chooseUsernameButton.width
+                Layout.topMargin: 32
             }
 
-            LookupStatusLabel{
+            Label {
-                id: lookupStatusLabel
+                text: {
-
+                    switch(nameRegistrationUIState){
-                visible: true
-
-                lookupStatusState: {
-                    switch (nameRegistrationUIState) {
                     case WizardView.BLANK:
-                        return "Blank"
-                    case WizardView.INVALID:
-                        return "Invalid"
-                    case WizardView.TAKEN:
-                        return "Taken"
-                    case WizardView.FREE:
-                        return "Free"
                     case WizardView.SEARCHING:
-                        return "Searching"
+                    case WizardView.FREE:
-                    default:
+                        return ""
-                        return "Blank"
+                    case WizardView.INVALID:
+                        return qsTr("Invalid username")
+                    case WizardView.TAKEN:
+                        return qsTr("Username already taken")
                     }
                 }
+
+                anchors.left: usernameEdit.left
+                anchors.right: usernameEdit.right
+                Layout.alignment: Qt.AlignHCenter
+
+                font.pointSize: JamiTheme.textFontSize
+                color: "red"
+
+                height: 32
+            }
+
+            MaterialButton {
+                id: chooseUsernameButton
+                text: qsTr("CHOOSE USERNAME")
+                color: nameRegistrationUIState === WizardView.FREE?
+                        JamiTheme.buttonTintedGrey
+                        : JamiTheme.buttonTintedGreyInactive
+
+                onClicked: {
+                    if (nameRegistrationUIState === WizardView.FREE)
+                        createAccountStack.currentIndex = createAccountStack.currentIndex + 1
+                }
+            }
+
+            MaterialButton {
+                text: qsTr("SKIP CHOOSING USERNAME")
+                color: JamiTheme.buttonTintedGrey
+                outlined: true
+
+                onClicked: {
+                    createAccountStack.currentIndex = createAccountStack.currentIndex + 1
+                }
             }
         }
 
         ColumnLayout {
-            Layout.fillWidth: true
+            spacing: 12
-            spacing: 6
 
-            CheckBox {
+            anchors.verticalCenter: parent.verticalCenter
-                id: choosePasswordCheckBox
+            Layout.preferredWidth: root.width
-                checked: false
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-                indicator.width: 10
+            RowLayout {
-                indicator.height: 10
+                spacing: 12
+                height: 48
 
-                Layout.leftMargin: 32
+                anchors.right: createAccountButton.right
+                anchors.left: createAccountButton.left
 
-                Layout.minimumWidth: 261
+                Label {
+                    text: qsTr("Encrypt account with password")
 
-                Layout.preferredHeight: 30
+                    font.pointSize: JamiTheme.textFontSize + 3
-                Layout.minimumHeight: 25
+                }
 
-                indicator.implicitWidth: 20
+                Label {
-                indicator.implicitHeight:20
+                    text: qsTr("Optional")
+                    color: "white"
+                    anchors.right: parent.right
+                    padding: 8
 
-                Layout.alignment: Qt.AlignLeft
+                    background: Rectangle {
-
+                        color: "#28b1ed"
-                text: qsTr("Choose a password for enhanced security")
+                        radius: 24
-                font.pointSize: 8
+                        anchors.fill: parent
-                font.kerning: true
-
-                onClicked: {
-                    if (!checked) {
-                        collapsiblePasswordWidget.clearAllTextFields()
                     }
-
-                    validateWizardProgressionCreateAccountPage()
                 }
             }
 
-            CollapsiblePasswordWidget {
+            RowLayout {
-                id: collapsiblePasswordWidget
+                spacing: 12
+                height: 48
+
+                anchors.right: createAccountButton.right
+                anchors.left: createAccountButton.left
+
+                Label {
+                    text: qsTr("Choose a password to encrypt the account key on this device")
+
+                    font.pointSize: JamiTheme.textFontSize
+                }
+
+                Switch {
+                    id: passwordSwitch
+                    Layout.alignment: Qt.AlignRight
+                }
+            }
+
+            MaterialLineEdit {
+                id: passwordEdit
+
+                visible: passwordSwitch.checked
+
+                fieldLayoutWidth: createAccountButton.width
 
                 Layout.alignment: Qt.AlignHCenter
 
-                visibleCollapsble: choosePasswordCheckBox.checked
+                selectByMouse: true
-                                   && choosePasswordCheckBox.visible
+                echoMode: TextInput.Password
+                placeholderText: qsTr("Password")
+                font.pointSize: 10
+                font.kerning: true
+            }
+
+            MaterialLineEdit {
+                id: passwordConfirmEdit
+
+                visible: passwordSwitch.checked
+
+                fieldLayoutWidth: createAccountButton.width
+
+                Layout.alignment: Qt.AlignHCenter
+
+                selectByMouse: true
+                echoMode: TextInput.Password
+                placeholderText: qsTr("Confirm password")
+                font.pointSize: 10
+                font.kerning: true
+            }
+
+            Label {
+                anchors.right: createAccountButton.right
+                anchors.left: createAccountButton.left
+
+                text: qsTr("Note that the password cannot be recovered")
+
+                font.pointSize: JamiTheme.textFontSize
+            }
+
+            MaterialButton {
+                id: createAccountButton
+                text: qsTr("CREATE ACCOUNT")
+                color: !passwordSwitch.checked ||
+                    (passwordEdit.text === passwordConfirmEdit.text && passwordEdit.text.length !== 0)?
+                    JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
+
+                onClicked: {
+                    createAccount()
+                    createAccountStack.currentIndex = createAccountStack.currentIndex + 1
+                }
             }
         }
+    }
 
-        Item {
+    RowLayout {
-            Layout.maximumWidth: 261
+        spacing: 12
-            Layout.preferredWidth: 261
+        height: 48
-            Layout.minimumWidth: 261
 
-            Layout.maximumHeight: 30
+        anchors.top: createAccountStack.bottom
-            Layout.preferredHeight: 30
+        anchors.horizontalCenter: root.horizontalCenter
-            Layout.minimumHeight: 30
+        Layout.alignment: Qt.AlignHCenter
 
-            Layout.alignment: Qt.AlignHCenter
+        Rectangle {
+            color: usernameEdit.visible? JamiTheme.wizardBlueButtons : "grey"
+            radius: height / 2
+            height: 12
+            width: 12
+        }
+
+        Rectangle {
+            color: createAccountButton.visible? JamiTheme.wizardBlueButtons : "grey"
+            radius: height / 2
+            height: 12
+            width: 12
+        }
+
+        Rectangle {
+            color: "grey"
+            radius: height / 2
+            height: 12
+            width: 12
+        }
+    }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Shortcut {
+            sequence: StandardKey.Cancel
+            enabled: parent.visible
+            onActivated: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
         }
     }
 }

src/wizardview/components/CreateSIPAccountPage.qml

@@ -23,14 +23,16 @@ import QtQuick.Controls 2.14
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
+
-    property alias text_sipFullNameEditAlias: sipFullNameEdit.text
+Rectangle {
+    id: root
+
     property alias text_sipServernameEditAlias: sipServernameEdit.text
     property alias text_sipProxyEditAlias: sipProxyEdit.text
     property alias text_sipUsernameEditAlias: sipUsernameEdit.text
     property alias text_sipPasswordEditAlias: sipPasswordEdit.text
 
-    property alias boothImgBase64: setSIPAvatarWidget.imgBase64
+    property /*alias*/ var boothImgBase64: null//setSIPAvatarWidget.imgBase64
 
     function initializeOnShowUp() {
         clearAllTextFields()
@@ -41,123 +43,54 @@ ColumnLayout {
         sipPasswordEdit.clear()
         sipServernameEdit.clear()
         sipProxyEdit.clear()
-        sipFullNameEdit.clear()
         sipUsernameEdit.clear()
     }
 
-    function startBooth(){
+    signal createAccount
-        setSIPAvatarWidget.startBooth()
+    signal leavePage
-    }
 
-    function stopBooth(){
+    anchors.fill: parent
-        setSIPAvatarWidget.stopBooth()
-    }
 
-    Layout.fillWidth: true
+    color: JamiTheme.backgroundColor
-    Layout.fillHeight: true
-
-    spacing: 6
-
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    Label {
-        id: sipProfileSectionLabel
-
-        Layout.maximumWidth: 368
-        Layout.preferredWidth: 368
-        Layout.maximumHeight: 21
-        Layout.preferredHeight: 21
-
-        Layout.alignment: Qt.AlignHCenter
-
-        text: qsTr("Profile")
-        font.pointSize: 13
-        font.kerning: true
-
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-    }
-
-    PhotoboothView{
-        id: setSIPAvatarWidget
-
-        Layout.alignment: Qt.AlignHCenter
-
-        Layout.maximumWidth: 261
-        Layout.preferredWidth: 261
-        Layout.minimumWidth: 261
-        Layout.maximumHeight: 261
-        Layout.preferredHeight: 261
-        Layout.minimumHeight: 261
-    }
-
-    RowLayout {
-        spacing: 0
-        Layout.alignment: Qt.AlignHCenter
-        Layout.maximumHeight: 30
-
-        Item {
-            Layout.fillWidth: true
-            Layout.maximumHeight: 10
-        }
-
-        InfoLineEdit {
-            id: sipFullNameEdit
-
-            fieldLayoutWidth : 261
-            Layout.alignment: Qt.AlignCenter
-            selectByMouse: true
-            placeholderText: qsTr("Profile name")
-            font.pointSize: 10
-            font.kerning: true
-        }
-
-        Item {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-        }
-    }
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    Label {
-        id: sipAccountSectionLabel
-        Layout.maximumWidth: 368
-        Layout.preferredWidth: 368
-        Layout.maximumHeight: 21
-        Layout.preferredHeight: 21
-
-        Layout.alignment: Qt.AlignHCenter
-
-        text: qsTr("SIP Account")
-        font.pointSize: 12
-        font.kerning: true
-
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-    }
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignHCenter
+        spacing: 12
-        spacing: 7
 
-        Item {
+        anchors.horizontalCenter: parent.horizontalCenter
-            Layout.fillWidth: true
+        anchors.verticalCenter: parent.verticalCenter
-            Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: createAccountButton.width
-            Layout.maximumHeight: 40
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            Layout.minimumHeight: 30
+
-            Layout.preferredHeight: 40
+        RowLayout {
+            spacing: 12
+            height: 48
+
+            anchors.left: createAccountButton.left
+            anchors.right: createAccountButton.right
+
+            Label {
+                text: qsTr("Configure an existing SIP account")
+            }
+
+            Label {
+                text: qsTr("Required")
+                color: "#ff1f62"
+                padding: 8
+
+                background: Rectangle {
+                    color: "#fee4e9"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipServernameEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             placeholderText: qsTr("Server")
@@ -165,10 +98,12 @@ ColumnLayout {
             font.kerning: true
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipProxyEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             placeholderText: qsTr("Proxy")
@@ -176,10 +111,12 @@ ColumnLayout {
             font.kerning: true
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipUsernameEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             placeholderText: qsTr("Username")
@@ -187,10 +124,12 @@ ColumnLayout {
             font.kerning: true
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipPasswordEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             echoMode: TextInput.Password
@@ -198,5 +137,52 @@ ColumnLayout {
             font.pointSize: 10
             font.kerning: true
         }
+
+        MaterialButton {
+            id: createAccountButton
+            text: qsTr("CREATE SIP ACCOUNT")
+            color: JamiTheme.wizardBlueButtons
+
+            onClicked: {
+                createAccount()
+            }
+        }
+    }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }

src/wizardview/components/HoverableGradientButton.qml

@@ -49,6 +49,7 @@ Button {
     property string onEnterColor: JamiTheme.hoverColor
     property string onExitColor: backgroundColor
     property string textColor: "white"
+    property string tooltipText: ""
 
     property string toolTipText: ""
 

src/wizardview/components/ImportFromBackupPage.qml

@@ -20,18 +20,23 @@ import QtQuick 2.14
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
 import Qt.labs.platform 1.1
+import net.jami.Models 1.0
 
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
+Rectangle {
+    id: root
+
     property alias text_passwordFromBackupEditAlias: passwordFromBackupEdit.text
     property string fileImportBtnText: qsTr("Archive(none)")
 
-    signal importFromFile_Dialog_Accepted(string fileDir)
+    property string filePath: ""
+    property string errorText: ""
 
     function clearAllTextFields() {
         passwordFromBackupEdit.clear()
+        errorText = ""
         fileImportBtnText = qsTr("Archive(none)")
     }
 
@@ -42,135 +47,137 @@ ColumnLayout {
         title: qsTr("Open File")
         folder: StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/Desktop"
 
-        nameFilters: [qsTr("Jami archive files") + " (*.gz)", qsTr(
+        nameFilters: [qsTr("Jami archive files") + " (*.gz)", qsTr("All files") + " (*)"]
-                "All files") + " (*)"]
 
         onAccepted: {
-            importFromFile_Dialog_Accepted(file)
+            filePath = file
+            if (file.length != 0) {
+                fileImportBtnText = ClientWrapper.utilsAdaptor.toFileInfoName(file)
+            } else {
+                fileImportBtnText = qsTr("Archive(none)")
+            }
         }
     }
 
-    Layout.fillWidth: true
+    anchors.fill: parent
-    Layout.fillHeight: true
 
-    Item {
+    color: JamiTheme.backgroundColor
-        Layout.alignment: Qt.AlignHCenter
+
-        Layout.fillWidth: true
+    signal leavePage
-        Layout.fillHeight: true
+    signal importAccount
-    }
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.maximumWidth: 366
-
         spacing: 12
 
-        RowLayout {
+        anchors.verticalCenter: parent.verticalCenter
-            Layout.fillWidth: true
+        anchors.horizontalCenter: root.horizontalCenter
-            Layout.maximumHeight: 24
+        Layout.preferredWidth: parent.width
-            spacing: 0
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Item {
+        Text {
-                Layout.alignment: Qt.AlignVCenter
+            anchors.left: connectBtn.left
-                Layout.fillWidth: true
+            anchors.right: connectBtn.right
-                Layout.fillHeight: true
-            }
 
-            Label {
+            text: qsTr("Import from backup")
-                id: importFromBackupLabel
+            font.pointSize: JamiTheme.menuFontSize
-                Layout.minimumHeight: 24
-                Layout.minimumWidth: 234
-                text: qsTr("Import from backup")
-                font.pointSize: 13
-                font.kerning: true
-                horizontalAlignment: Qt.AlignLeft
-                verticalAlignment: Qt.AlignVCenter
-            }
-
-            HoverableRadiusButton {
-                id: backupInfoBtn
-
-                buttonImageHeight: height
-                buttonImageWidth: width
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 24
-                Layout.preferredWidth: 24
-                Layout.maximumWidth: 24
-
-                Layout.minimumHeight: 24
-                Layout.preferredHeight: 24
-                Layout.maximumHeight: 24
-
-                radius: height / 2
-                icon.source: "/images/icons/info-24px.svg"
-                icon.height: 24
-                icon.width: 24
-
-                backgroundColor: JamiTheme.releaseColor
-                onClicked: {
-                    backupInfoLabel.visible = !backupInfoLabel.visible
-                }
-            }
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
         }
 
-        HoverableGradientButton {
+        MaterialButton {
             id: fileImportBtn
 
-            Layout.alignment: Qt.AlignHCenter
-            Layout.maximumWidth: 256
-            Layout.preferredWidth: 256
-
-            Layout.maximumHeight: 30
-            Layout.preferredHeight: 30
-            Layout.minimumHeight: 30
-
             text: fileImportBtnText
-            font.pointSize: 10
+            toolTipText: qsTr("Import your account's archive")
-            font.kerning: true
+            source: "qrc:/images/icons/round-folder-24px.svg"
-
+            color: JamiTheme.buttonTintedGrey
-            radius: height / 2
-            backgroundColor: JamiTheme.releaseColor
 
             onClicked: {
                 importFromFile_Dialog.open()
             }
         }
 
-        InfoLineEdit {
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            text: qsTr("You can obtain an archive by clicking on \"Export account\" in the account settings. This will create a .gz file on your device.")
+            wrapMode: Text.Wrap
+        }
+
+        MaterialLineEdit {
             id: passwordFromBackupEdit
 
-            Layout.alignment: Qt.AlignHCenter
-
             selectByMouse: true
-            echoMode: TextInput.Password
             placeholderText: qsTr("Password")
+            font.pointSize: 10
+            font.kerning: true
+
+            echoMode: TextInput.Password
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
+        }
+
+        MaterialButton {
+            id: connectBtn
+            text: qsTr("CONNECT FROM BACKUP")
+            color: filePath.length === 0?
+                JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
+
+            onClicked: {
+                errorText = ""
+                importAccount()
+            }
         }
 
         Label {
-            id: backupInfoLabel
+            text: errorText
 
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
             Layout.alignment: Qt.AlignHCenter
-            Layout.maximumWidth: 366
-            Layout.preferredWidth: 366
 
-            text: qsTr("You can obtain an archive by clicking on \"Export account\" in the account settings. This will create a .gz file on your device.")
+            font.pointSize: JamiTheme.textFontSize
-            wrapMode: Text.WordWrap
+            color: "red"
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
 
-            visible: false
+            height: 32
         }
     }
 
-    Item {
+    HoverableButton {
-        Layout.alignment: Qt.AlignHCenter
+        id: cancelButton
-        Layout.fillWidth: true
+        z: 2
-        Layout.fillHeight: true
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }

src/wizardview/components/ImportFromDevicePage.qml

@@ -23,9 +23,12 @@ import QtQuick.Controls 2.14
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
+Rectangle {
+    id: root
+
     property alias text_pinFromDeviceAlias: pinFromDevice.text
     property alias text_passwordFromDeviceAlias: passwordFromDevice.text
+    property string errorText: ""
 
     function initializeOnShowUp() {
         clearAllTextFields()
@@ -36,107 +39,125 @@ ColumnLayout {
         passwordFromDevice.clear()
     }
 
-    Layout.fillWidth: true
+    anchors.fill: parent
-    Layout.fillHeight: true
 
-    Item {
+    color: JamiTheme.backgroundColor
-        Layout.alignment: Qt.AlignHCenter
+
-        Layout.preferredHeight: 40
+    signal leavePage
-        Layout.fillWidth: true
+    signal importAccount
-        Layout.fillHeight: true
-    }
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.fillWidth: true
-
         spacing: 12
 
-        RowLayout {
+        anchors.horizontalCenter: parent.horizontalCenter
-            Layout.fillWidth: true
+        anchors.verticalCenter: parent.verticalCenter
-            Layout.maximumHeight: 24
+        Layout.preferredWidth: parent.width
-            spacing: 0
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Item {
+        Text {
-                Layout.alignment: Qt.AlignVCenter
+            anchors.left: connectBtn.left
-                Layout.fillWidth: true
+            anchors.right: connectBtn.right
-                Layout.fillHeight: true
-            }
 
-            Label {
+            text: qsTr("Enter your main Jami account password")
-                id: importFromDeviceLabel
+            font.pointSize: JamiTheme.menuFontSize
-                Layout.minimumHeight: 24
-                Layout.minimumWidth: 234
-                text: qsTr("Import from device")
-                font.pointSize: 13
-                font.kerning: true
-            }
-
-            HoverableRadiusButton {
-                id: pinInfoBtn
-
-                buttonImageHeight: height
-                buttonImageWidth: width
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 24
-                Layout.maximumWidth: 24
-                Layout.minimumHeight: 24
-                Layout.maximumHeight: 24
-
-                radius: height / 2
-                icon.source: "/images/icons/info-24px.svg"
-                backgroundColor: JamiTheme.releaseColor
-
-                onClicked: {
-                    pinInfoLabel.visible = !pinInfoLabel.visible
-                }
-            }
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
         }
-        InfoLineEdit {
-            id: pinFromDevice
 
-            Layout.alignment: Qt.AlignHCenter
+        MaterialLineEdit {
+            id: passwordFromDevice
+
+            selectByMouse: true
+            placeholderText: qsTr("Password")
+            font.pointSize: 10
+            font.kerning: true
+
+            echoMode: TextInput.Password
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
+        }
+
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            text: qsTr("Enter the PIN from another configured Jami account. Use the \"export Jami account\" feature to obtain a PIN")
+            wrapMode: Text.Wrap
+        }
+
+        MaterialLineEdit {
+            id: pinFromDevice
 
             selectByMouse: true
             placeholderText: qsTr("PIN")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
         }
 
-        InfoLineEdit {
+        MaterialButton {
-            id: passwordFromDevice
+            id: connectBtn
+            text: qsTr("CONNECT FROM ANOTHER DEVICE")
+            color: pinFromDevice.text.length === 0?
+                JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
 
-            Layout.alignment: Qt.AlignHCenter
+            onClicked: {
-
+                errorText = ""
-            selectByMouse: true
+                importAccount()
-            echoMode: TextInput.Password
+            }
-            placeholderText: qsTr("Password")
         }
 
         Label {
-            id: pinInfoLabel
+            text: errorText
 
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
             Layout.alignment: Qt.AlignHCenter
-            Layout.minimumWidth: 256
-            Layout.maximumWidth: 256
 
-            text: qsTr("To obtain a PIN (valid for 10 minutes), you need to open the account settings on the other device and click on \"Link to another device\".")
+            font.pointSize: JamiTheme.textFontSize
-            wrapMode: Text.WordWrap
+            color: "red"
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
 
-            visible: false
+            height: 32
         }
     }
 
-    Item {
+    HoverableButton {
-        Layout.alignment: Qt.AlignHCenter
+        id: cancelButton
-        Layout.preferredHeight: 40
+        z: 2
-        Layout.fillWidth: true
+
-        Layout.fillHeight: true
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Shortcut {
+            sequence: StandardKey.Cancel
+            enabled: parent.visible
+            onActivated: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }

src/wizardview/components/ProfilePage.qml

@@ -0,0 +1,213 @@
+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Yang Wang <yang.wang@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 2.14
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.14
+
+import "../../constant"
+import "../../commoncomponents"
+
+Rectangle {
+    id: root
+
+    function initializeOnShowUp() {
+        clearAllTextFields()
+        boothImgBase64 = ""
+        readyToSaveDetails = false
+    }
+
+    function clearAllTextFields() {
+        aliasEdit.clear()
+    }
+
+    anchors.fill: parent
+
+    color: JamiTheme.backgroundColor
+
+    signal leavePage
+    signal saveProfile
+
+    property var readyToSaveDetails: false
+    property var showBottom: false
+    property alias boothImgBase64: setAvatarWidget.imgBase64
+    property alias displayName: aliasEdit.text
+
+    ColumnLayout {
+        spacing: 12
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: parent.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+
+        RowLayout {
+            spacing: 12
+            height: 48
+
+            Layout.preferredWidth: saveProfileBtn.width
+
+            Label {
+                text: qsTr("Profile is only shared with contacts")
+
+                font.pointSize: JamiTheme.textFontSize + 3
+            }
+
+            Label {
+                text: qsTr("Optional")
+                color: "white"
+                Layout.alignment: Qt.AlignRight
+                padding: 8
+
+                background: Rectangle {
+                    color: "#28b1ed"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
+        }
+
+        PhotoboothView {
+            id: setAvatarWidget
+
+            Layout.alignment: Qt.AlignHCenter
+
+            Layout.maximumWidth: 256
+            Layout.preferredWidth: 256
+            Layout.minimumWidth: 256
+            Layout.maximumHeight: 256
+            Layout.preferredHeight: 256
+            Layout.minimumHeight: 256
+        }
+
+        MaterialLineEdit {
+            id: aliasEdit
+
+            selectByMouse: true
+            placeholderText: qsTr("Enter your name")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: saveProfileBtn.width
+        }
+
+        MaterialButton {
+            id: saveProfileBtn
+            enabled: readyToSaveDetails
+            text: enabled? qsTr("Save Profile") : qsTr("Generating account…")
+            color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
+
+            onClicked: {
+                saveProfile()
+            }
+        }
+
+        MaterialButton {
+            text: qsTr("SKIP")
+            enabled: saveProfileBtn.enabled
+            color: enabled? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive
+            outlined: true
+
+            onClicked: {
+                leavePage()
+            }
+        }
+
+        RowLayout {
+            id: bottomLayout
+            height: 48
+            spacing: 12
+            visible: showBottom
+
+            Layout.preferredWidth: saveProfileBtn.width
+            Layout.topMargin: 12
+            Layout.alignment: Qt.AlignHCenter
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            Rectangle {
+                color: "grey"
+                radius: height / 2
+                height: 12
+                width: 12
+            }
+
+            Rectangle {
+                color: "grey"
+                radius: height / 2
+                height: 12
+                width: 12
+            }
+
+            Rectangle {
+                color: JamiTheme.wizardBlueButtons
+                radius: height / 2
+                height: 12
+                width: 12
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+        }
+
+    }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+        visible: readyToSaveDetails
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Close")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
+    }
+}

src/wizardview/components/WelcomePageLayout.qml

@@ -1,6 +1,7 @@
 /*
  * Copyright (C) 2020 by Savoir-faire Linux
  * Author: Yang Wang <yang.wang@savoirfairelinux.com>
+ * Author: Sébastien blin <sebastien.blin@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
@@ -19,26 +20,25 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.15
+import net.jami.Models 1.0
 
 import "../../constant"
 import "../../commoncomponents"
 
 ColumnLayout {
-    property alias connectAccountManagerButtonAlias: connectAccountManagerButton
+    anchors.fill: parent
-    property alias newSIPAccountButtonAlias: newSIPAccountButton
+    anchors.verticalCenter: parent.verticalCenter
-
+    anchors.horizontalCenter: parent.horizontalCenter
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-    spacing: 6
 
     signal welcomePageRedirectPage(int toPageIndex)
+    signal leavePage
 
     Item {
         // put a spacer to make the buttons closs to the middle
-        Layout.minimumHeight: 57
+        Layout.preferredHeight: 48
-        Layout.maximumHeight: 57
-        Layout.preferredHeight: 57
         Layout.fillWidth: true
+        Layout.fillHeight: true
     }
     RowLayout {
         Layout.fillWidth: true
@@ -52,13 +52,6 @@ ColumnLayout {
             font.kerning: true
         }
     }
-    Item {
-        Layout.minimumHeight: 17
-        Layout.maximumHeight: 17
-        Layout.preferredHeight: 17
-        Layout.fillWidth: true
-    }
-
     RowLayout {
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignHCenter
@@ -80,29 +73,18 @@ ColumnLayout {
             }
         }
     }
-    Item {
-        // put a spacer to make the buttons closs to the middle
-        Layout.preferredHeight: 57
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        HoverableGradientButton {
+        MaterialButton {
             id: newAccountButton
 
-            Layout.alignment: Qt.AlignCenter
+            text: qsTr("CREATE A JAMI ACCOUNT")
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            text: qsTr("Create local account")
-            font.pointSize: 10
-            font.kerning: true
-            radius: height / 2
-
             toolTipText: qsTr("Create new Jami account")
+            source: "qrc:/images/default_avatar_overlay.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(1)
@@ -110,24 +92,18 @@ ColumnLayout {
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
 
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        HoverableGradientButton {
+        MaterialButton {
             id: fromDeviceButton
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            text: qsTr("Import from device")
-            font.pointSize: 10
-            font.kerning: true
-
-            backgroundColor: JamiTheme.releaseColor
-            radius: height / 2
 
+            text: qsTr("IMPORT FROM ANOTHER DEVICE")
             toolTipText: qsTr("Import account from other device")
+            source: "qrc:/images/icons/devices-24px.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(5)
@@ -135,24 +111,18 @@ ColumnLayout {
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
 
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        HoverableGradientButton {
+        MaterialButton {
             id: fromBackupButton
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            text: qsTr("Import from backup")
-            font.pointSize: 10
-            font.kerning: true
-
-            backgroundColor: JamiTheme.releaseColor
-            radius: height / 2
 
+            text: qsTr("CONNECT FROM BACKUP")
             toolTipText: qsTr("Import account from backup file")
+            source: "qrc:/images/icons/backup-24px.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(3)
@@ -160,26 +130,18 @@ ColumnLayout {
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
 
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        Button {
+        MaterialButton {
             id: showAdvancedButton
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            Layout.alignment: Qt.AlignCenter
-            text: qsTr("Show Advanced")
-            font.pointSize: 8
-            font.kerning: true
 
-            background: Rectangle{
+            text: qsTr("SHOW ADVANCED")
-                anchors.fill: parent
+            toolTipText: qsTr("Show advanced options")
-
+            color: JamiTheme.buttonTintedBlue
-                color: "transparent"
+            outlined: true
-                radius: height /2
-            }
 
             hoverEnabled: true
 
@@ -194,25 +156,19 @@ ColumnLayout {
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignHCenter
 
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
-        HoverableGradientButton {
+        MaterialButton {
             id: connectAccountManagerButton
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            Layout.alignment: Qt.AlignCenter
-            text: qsTr("Connect to account manager")
             visible: false
-            font.pointSize: 10
-            font.kerning: true
-
-            backgroundColor: JamiTheme.releaseColor
-            radius: height / 2
 
+            text: qsTr("CONNECT TO MANAGEMENT SERVER")
             toolTipText: qsTr("Login to account manager")
+            source: "qrc:/images/icons/router-24px.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(6)
@@ -220,25 +176,18 @@ ColumnLayout {
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignHCenter
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
-
+        MaterialButton {
-        HoverableGradientButton {
             id: newSIPAccountButton
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            Layout.alignment: Qt.AlignCenter
-            text: qsTr("Add a new SIP account")
             visible: false
-            font.pointSize: 10
-            font.kerning: true
-
-            radius: height / 2
-            backgroundColor: JamiTheme.releaseColor
 
+            text: qsTr("CREATE A SIP ACCOUNT")
             toolTipText: qsTr("Create new SIP account")
+            source: "qrc:/images/default_avatar_overlay.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(2)
@@ -251,4 +200,45 @@ ColumnLayout {
         Layout.preferredHeight: 65
         Layout.fillWidth: true
     }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        visible: {
+            return ClientWrapper.utilsAdaptor.getAccountListSize() > 0
+        }
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 40
+        topPadding: 40
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Close")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
+    }
 }