[feat] expose snowflake to ui

5 files changed, 185 insertions, 1 deletions

diff --git a/gui/components/StatusBox.qml b/gui/components/StatusBox.qml
index 7715123..5929033 100644
--- a/gui/components/StatusBox.qml
+++ b/gui/components/StatusBox.qml
@@ -80,9 +80,32 @@ Item {
             anchors.top: parent.top
             anchors.horizontalCenter: parent.horizontalCenter
             horizontalAlignment: Text.AlignHCenter
-            text: ""
             FadeBehavior on text { }
         }
+        Label {
+            id: snowflakeTip
+            anchors.top: connectionState.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: 20
+            horizontalAlignment: Text.AlignHCenter
+            text: qsTr("This can take several minutes")
+            font.pixelSize: Theme.fontSize * 0.8
+            visible: isSnowflakeOn()
+        }
+        ProgressBar {
+            id: snowflakeProgressBar
+            anchors.top: snowflakeTip.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: isSnowflakeOn()
+            value: 0
+        }
+        Label {
+            id: snowflakeTag
+            anchors.top: snowflakeProgressBar.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            horizontalAlignment: Text.AlignHCenter
+            visible: isSnowflakeOn()
+        }
     }
 
     Column {
@@ -156,4 +179,8 @@ Item {
             }
         }
     }
+
+    function isSnowflakeOn() {
+        return ctx != undefined && ctx.snowflakeProgress != "" && ctx.snowflakeProgress != "100"
+    }
 }
diff --git a/gui/components/VPNState.qml b/gui/components/VPNState.qml
index eeeb51d..3a8d49a 100644
--- a/gui/components/VPNState.qml
+++ b/gui/components/VPNState.qml
@@ -20,10 +20,37 @@ StateGroup {
             name: initializing
         },
         State {
+            when: ctx != undefined && ctx.snowflakeProgress != "" && ctx.snowflakeProgress != "100"
+            // TODO animate image
+            PropertyChanges {
+                target: connectionState
+                text: qsTr("Setting up")
+                font.pixelSize: Theme.fontSize * 1
+            }
+            PropertyChanges {
+                target: snowflakeProgressBar
+                value: parseInt(ctx.snowflakeProgress)/100
+            }
+            PropertyChanges {
+                target: snowflakeTag
+                text: getSnowflakeTag()
+            }
+            PropertyChanges {
+                target: statusBoxBackground
+                border.color: Theme.accentConnecting
+            }
+            PropertyChanges {
+                target: connectionImage
+                source: Theme.iconSnowflake
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+        },
+        State {
             when: ctx != undefined && ctx.status == "off" && startingUI == true
             PropertyChanges {
                 target: connectionState
                 text: qsTr("Connecting")
+                font.pixelSize: Theme.fontSize * 1.5
             }
             PropertyChanges {
                 target: statusBoxBackground
@@ -56,6 +83,8 @@ StateGroup {
             PropertyChanges {
                 target: connectionState
                 text: qsTr("Unsecured\nConnection")
+                font.pixelSize: Theme.fontSize * 1.5
+                visible: true
             }
             PropertyChanges {
                 target: statusBoxBackground
@@ -89,6 +118,8 @@ StateGroup {
             PropertyChanges {
                 target: connectionState
                 text: qsTr("Secured\nConnection")
+                font.pixelSize: Theme.fontSize * 1.5
+                visible: true
             }
             PropertyChanges {
                 target: statusBoxBackground
@@ -123,6 +154,8 @@ StateGroup {
             PropertyChanges {
                 target: connectionState
                 text: qsTr("Connecting")
+                font.pixelSize: Theme.fontSize * 1.5
+                visible: true
             }
             PropertyChanges {
                 target: statusBoxBackground
@@ -236,4 +269,35 @@ StateGroup {
                         ctx.appName) // TODO failed is not handled yet
         }
     }
+
+    function getSnowflakeTag() {
+        switch (ctx.snowflakeTag) {
+            case 'conn_pt':
+              return qsTr("pluggable transport connection")
+            case 'conn_done':
+              return qsTr("connection done")
+            case 'handshake':
+              return qsTr("doing handshake")
+            case 'handshake_done':
+              return qsTr("handshake done")
+            case 'onehop_create':
+              return qsTr("creating one-hop connection")
+            case 'requesting_status':
+              return qsTr("requesting status")
+            case 'loading_status':
+              return qsTr("loading status")
+            case 'loading_keys':
+              return qsTr("loading keys")
+            case 'requesting_descriptors':
+              return qsTr("requesting descriptors")
+            case 'loading_descriptors':
+              return qsTr("loading descriptors")
+            case 'circuit_create':
+              return qsTr("creating circuit")
+            case 'done':
+              return qsTr("done")
+            default:
+              return ctx.snowflakeTag
+        }
+    }
 }
diff --git a/gui/gui.qrc b/gui/gui.qrc
index 9e357bf..75ff8cf 100644
--- a/gui/gui.qrc
+++ b/gui/gui.qrc
@@ -67,6 +67,7 @@
         <file>resources/quit.svg</file>
         <file>resources/alert.svg</file>
         <file>resources/angle-right.svg</file>
+        <file>resources/snowflake.svg</file>
 
         <!-- riseup assets -->
         <file>resources/ravens.svg</file>
diff --git a/gui/resources/snowflake.svg b/gui/resources/snowflake.svg
new file mode 100644
index 0000000..bdc15ad
--- /dev/null
+++ b/gui/resources/snowflake.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   width="100"
+   height="100"
+   viewBox="0 0 99.999999 99.999999"
+   xml:space="preserve"
+   sodipodi:docname="snowflake.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs39" /><sodipodi:namedview
+   id="namedview37"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   width="100px"
+   inkscape:zoom="2.1555122"
+   inkscape:cx="-43.841087"
+   inkscape:cy="13.917805"
+   inkscape:window-width="2560"
+   inkscape:window-height="1388"
+   inkscape:window-x="0"
+   inkscape:window-y="29"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g4"
+   transform="matrix(2.7968552,0,0,2.7968552,0,-0.1932545)">
+	<path
+   d="m 35.291,17.4 h -3.523 l 1.062,-1.839 c 0.139,-0.239 0.058,-0.545 -0.183,-0.684 -0.242,-0.139 -0.547,-0.056 -0.684,0.184 l -1.35,2.339 h -2.68 l 2.729,-4.729 c 0.139,-0.238 0.058,-0.545 -0.183,-0.683 -0.24,-0.138 -0.545,-0.057 -0.684,0.183 l -3.02,5.229 h -5 l -1.508,-2.614 2.5,-4.33 h 6.039 c 0.274,0 0.5,-0.224 0.5,-0.5 0,-0.275 -0.226,-0.5 -0.5,-0.5 h -5.463 l 1.34,-2.319 2.699,0.001 c 0.276,0 0.5,-0.224 0.5,-0.5 0,-0.275 -0.224,-0.5 -0.5,-0.5 L 25.259,6.137 27.021,3.085 C 27.16,2.846 27.078,2.54 26.838,2.402 26.599,2.262 26.293,2.344 26.154,2.585 L 24.391,5.637 23.329,3.798 C 23.191,3.56 22.885,3.477 22.646,3.615 22.407,3.753 22.325,4.059 22.462,4.298 l 1.35,2.339 -1.338,2.319 -2.729,-4.729 C 19.607,3.987 19.301,3.905 19.062,4.043 18.823,4.182 18.741,4.487 18.878,4.727 l 3.02,5.228 -2.5,4.331 h -3.019 l -2.5,-4.33 3.019,-5.229 C 17.036,4.488 16.954,4.182 16.715,4.043 16.475,3.905 16.171,3.987 16.032,4.227 l -2.73,4.729 -1.339,-2.319 1.351,-2.34 C 13.452,4.059 13.37,3.752 13.131,3.614 12.892,3.475 12.586,3.558 12.448,3.797 L 11.386,5.637 9.628,2.584 C 9.489,2.344 9.183,2.263 8.945,2.401 8.706,2.539 8.624,2.844 8.762,3.084 l 1.762,3.052 H 8.402 c -0.276,0 -0.5,0.225 -0.5,0.5 0,0.276 0.224,0.5 0.5,0.5 h 2.7 l 1.339,2.319 h -5.46 c -0.276,0 -0.5,0.224 -0.5,0.5 0,0.276 0.224,0.5 0.5,0.5 h 6.038 l 2.5,4.331 -1.511,2.614 H 9.009 L 5.987,12.171 C 5.849,11.932 5.542,11.85 5.304,11.988 5.065,12.126 4.983,12.432 5.121,12.671 L 7.854,17.4 H 5.176 L 3.826,15.062 C 3.687,14.822 3.381,14.741 3.143,14.878 2.904,15.017 2.822,15.322 2.96,15.562 L 4.022,17.4 H 0.5 c -0.276,0 -0.5,0.224 -0.5,0.5 0,0.275 0.224,0.5 0.5,0.5 h 3.523 l -1.062,1.84 c -0.138,0.239 -0.056,0.545 0.183,0.684 0.079,0.045 0.165,0.066 0.25,0.066 0.173,0 0.341,-0.09 0.434,-0.25 l 1.35,-2.34 h 2.68 l -2.732,4.729 c -0.138,0.238 -0.056,0.545 0.183,0.684 0.079,0.045 0.165,0.066 0.25,0.066 0.173,0 0.341,-0.089 0.434,-0.25 L 9.014,18.4 h 4.999 l 1.509,2.612 -2.5,4.331 H 6.985 c -0.276,0 -0.5,0.225 -0.5,0.5 0,0.275 0.224,0.5 0.5,0.5 h 5.459 l -1.339,2.319 H 8.404 c -0.276,0 -0.5,0.224 -0.5,0.5 0,0.275 0.224,0.5 0.5,0.5 h 2.124 l -1.762,3.051 c -0.138,0.238 -0.056,0.545 0.183,0.684 0.079,0.045 0.165,0.066 0.25,0.066 0.173,0 0.341,-0.089 0.434,-0.25 l 1.762,-3.052 1.062,1.84 c 0.093,0.161 0.261,0.25 0.434,0.25 0.085,0 0.171,-0.021 0.25,-0.066 0.239,-0.139 0.321,-0.444 0.183,-0.684 l -1.352,-2.34 1.339,-2.319 2.73,4.729 c 0.093,0.161 0.261,0.25 0.434,0.25 0.085,0 0.171,-0.021 0.25,-0.066 0.239,-0.139 0.321,-0.443 0.183,-0.684 l -3.02,-5.229 2.5,-4.328 h 3.02 l 2.5,4.329 -3.021,5.229 c -0.138,0.239 -0.056,0.545 0.183,0.684 0.078,0.045 0.164,0.066 0.25,0.066 0.174,0 0.342,-0.089 0.434,-0.25 l 2.73,-4.729 1.34,2.319 -1.35,2.338 c -0.138,0.238 -0.056,0.545 0.184,0.684 0.08,0.045 0.166,0.066 0.25,0.066 0.174,0 0.342,-0.091 0.435,-0.25 l 1.062,-1.838 1.763,3.052 c 0.093,0.161 0.261,0.25 0.435,0.25 0.084,0 0.17,-0.021 0.25,-0.066 0.237,-0.139 0.319,-0.443 0.184,-0.684 L 25.273,29.66 h 2.123 c 0.276,0 0.5,-0.224 0.5,-0.5 0,-0.275 -0.224,-0.5 -0.5,-0.5 h -2.701 l -1.338,-2.319 5.461,10e-4 c 0.275,0 0.5,-0.225 0.5,-0.5 0,-0.275 -0.225,-0.5 -0.5,-0.5 l -6.039,-10e-4 -2.5,-4.329 1.51,-2.613 h 4.998 l 3.021,5.23 c 0.092,0.16 0.26,0.25 0.434,0.25 0.085,0 0.171,-0.021 0.25,-0.066 0.238,-0.139 0.32,-0.444 0.183,-0.684 L 27.936,18.4 h 2.682 l 1.352,2.34 c 0.094,0.161 0.262,0.25 0.434,0.25 0.086,0 0.172,-0.021 0.25,-0.066 0.24,-0.139 0.322,-0.443 0.185,-0.684 L 31.777,18.4 h 3.522 c 0.274,0 0.5,-0.225 0.5,-0.5 -0.007,-0.276 -0.233,-0.5 -0.508,-0.5 z m -14.666,1 -0.932,1.614 -0.289,0.5 h -0.576 -1.866 -0.577 l -0.289,-0.5 -0.93,-1.614 -0.289,-0.5 0.289,-0.5 0.932,-1.614 0.289,-0.5 h 0.577 1.864 0.578 l 0.289,0.5 0.93,1.614 0.289,0.5 z"
+   id="path2" />
+</g>
+<g
+   id="g6">
+</g>
+<g
+   id="g8">
+</g>
+<g
+   id="g10">
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+</svg>
diff --git a/gui/themes/themes.js b/gui/themes/themes.js
index 6c7ab4e..4c4d3a9 100644
--- a/gui/themes/themes.js
+++ b/gui/themes/themes.js
@@ -24,6 +24,8 @@ const maxTextWidth = 296;
 const windowMargin = 16;
 const popupMargin = 24;
 
+const iconSnowflake = "../resources/snowflake.svg";
+
 // XXX unused? move definitions here
 const desktopAppHeight = 520;
 const desktopAppWidth = 360;