Added connect not allowed note on the main panel

Fixes brave/brave-browser#22109
brave · Apr 9, 2022 · a92f86e · a92f86e
1 parent f363394
commit a92f86e
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 5 deletions.
diff --git a/components/brave_vpn/brave_vpn_constants.h b/components/brave_vpn/brave_vpn_constants.h
@@ -66,6 +66,7 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_VPN_SUPPORT_OPTIONAL_OS_VERSION},
     {"braveVpnSupportNotes", IDS_BRAVE_VPN_SUPPORT_NOTES},
     {"braveVpnSupportSubmit", IDS_BRAVE_VPN_SUPPORT_SUBMIT},
+    {"braveVpnConnectNotAllowed", IDS_BRAVE_VPN_CONNECT_NOT_ALLOWED},
 };
 
 constexpr char kManageUrlProd[] = "http://account.brave.com/";

diff --git a/components/brave_vpn/brave_vpn_service.cc b/components/brave_vpn/brave_vpn_service.cc
@@ -452,7 +452,8 @@ void BraveVpnService::GetConnectionState(GetConnectionStateCallback callback) {
 void BraveVpnService::ResetConnectionState() {
   DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_checker_);
   // Reset is allowed only when it has failed state.
-  if (connection_state_ != ConnectionState::CONNECT_NOT_ALLOWED && connection_state_ != ConnectionState::CONNECT_FAILED)
+  if (connection_state_ != ConnectionState::CONNECT_NOT_ALLOWED &&
+      connection_state_ != ConnectionState::CONNECT_FAILED)
     return;
 
   UpdateAndNotifyConnectionStateChange(ConnectionState::DISCONNECTED, true);

diff --git a/components/brave_vpn/resources/panel/components/main-panel/index.tsx b/components/brave_vpn/resources/panel/components/main-panel/index.tsx
@@ -11,6 +11,7 @@ import SettingsPanel from '../settings-panel'
 import ContactSupport from '../contact-support'
 import { useSelector, useDispatch } from '../../state/hooks'
 import * as Actions from '../../state/actions'
+import { ConnectionState } from '../../api/panel_browser_api'
 
 function MainPanel () {
   const dispatch = useDispatch()
@@ -19,6 +20,7 @@ function MainPanel () {
   const currentRegion = useSelector(state => state.currentRegion)
   const hasError = useSelector(state => state.hasError)
   const isSelectingRegion = useSelector(state => state.isSelectingRegion)
+  const connectionStatus = useSelector(state => state.connectionStatus)
 
   const onSelectRegionButtonClick = () => {
     dispatch(Actions.toggleRegionSelector(true))
@@ -64,6 +66,11 @@ function MainPanel () {
         </S.PanelHeader>
         <S.PanelTitle>{getLocale('braveVpn')}</S.PanelTitle>
         <Toggle />
+        {connectionStatus === ConnectionState.CONNECT_NOT_ALLOWED && (
+          <S.ConnectNotAllowedNote>
+          <div>{getLocale('braveVpnConnectNotAllowed')}</div>
+          </S.ConnectNotAllowedNote>
+        )}
         <S.RegionSelectorButton
           type='button'
           onClick={onSelectRegionButtonClick}

diff --git a/components/brave_vpn/resources/panel/components/main-panel/style.ts b/components/brave_vpn/resources/panel/components/main-panel/style.ts
@@ -84,3 +84,18 @@ export const RegionLabel = styled.span`
   color: var(--region-label-color);
   letter-spacing: 0.04em;
 `
+
+export const ConnectNotAllowedNote = styled.section`
+  color: ${(p) => p.theme.color.text01};
+  font-family: ${(p) => p.theme.fontFamily.heading};
+  font-size: 14px;
+  text-align: center;
+  padding: 0 22px;
+  margin-bottom: 20px;
+  
+  div {
+    padding: 12px;
+    background-color: ${(p) => p.theme.color.warningBackground};
+    border-radius: 8px;
+  }
+`
diff --git a/components/brave_vpn/resources/panel/components/toggle/index.tsx b/components/brave_vpn/resources/panel/components/toggle/index.tsx
@@ -38,12 +38,14 @@ function Toggle () {
         {status === ConnectionState.CONNECTING && <S.Loader><LoaderIcon /></S.Loader>}
         {status === ConnectionState.DISCONNECTING && <S.Loader><LoaderIcon /></S.Loader>}
         {status === ConnectionState.DISCONNECTED && <S.InActiveIndicator />}
+        {status === ConnectionState.CONNECT_NOT_ALLOWED && <S.InActiveIndicator />}
         {status === ConnectionState.CONNECT_FAILED && <S.FailedIndicator />}
         <S.StatusText>
           {status === ConnectionState.CONNECTED && getLocale('braveVpnConnected')}
           {status === ConnectionState.CONNECTING && getLocale('braveVpnConnecting')}
           {status === ConnectionState.DISCONNECTING && getLocale('braveVpnDisconnecting')}
           {status === ConnectionState.DISCONNECTED && getLocale('braveVpnDisconnected')}
+          {status === ConnectionState.CONNECT_NOT_ALLOWED && getLocale('braveVpnDisconnected')}
           {status === ConnectionState.CONNECT_FAILED && getLocale('braveVpnConnectionFailed')}
         </S.StatusText>
       </S.StatusBox>

diff --git a/components/brave_vpn/resources/panel/stories/locale.ts b/components/brave_vpn/resources/panel/stories/locale.ts
@@ -46,5 +46,6 @@ provideStrings({
   braveVpnSupportOptionalAppVersion: 'App version:',
   braveVpnSupportOptionalOsVersion: 'OS version:',
   braveVpnSupportNotes: 'Support provided in partnership with Guardian.',
-  braveVpnSupportSubmit: 'Submit'
+  braveVpnSupportSubmit: 'Submit',
+  braveVpnConnectNotAllowed: 'VPN connection failed. Please try connecting again, and be sure to click Allow to enable Brave\'s VPN configuration.'
 })
diff --git a/components/brave_vpn/resources/panel/stories/mock-data/api.ts b/components/brave_vpn/resources/panel/stories/mock-data/api.ts
@@ -36,6 +36,7 @@ BraveVPN.setPanelBrowserApiForTesting({
     createSupportTicket: (email: string, subject: string, body: string) => Promise.resolve({
       success: true,
       response: 'OK'
-    })
+    }),
+    resetConnectionState: doNothing
   }
 })
diff --git a/components/brave_vpn/resources/panel/theme/vpn-dark.ts b/components/brave_vpn/resources/panel/theme/vpn-dark.ts
@@ -12,7 +12,8 @@ const vpnDarkTheme: ITheme & IThemeVPN = {
   name: 'VPN Dark',
   color: {
     ...defaultDarkTheme.color,
-    panelBackground: 'linear-gradient(180deg, #1E2029 59.48%, #332C60 100%)'
+    panelBackground: 'linear-gradient(180deg, #1E2029 59.48%, #332C60 100%)',
+    warningBackground: 'rgba(255, 221, 99, 0.2)'
   }
 }
 

diff --git a/components/brave_vpn/resources/panel/theme/vpn-light.ts b/components/brave_vpn/resources/panel/theme/vpn-light.ts
@@ -12,7 +12,8 @@ const vpnLightTheme: ITheme & IThemeVPN = {
   name: 'VPN Light',
   color: {
     ...defaultTheme.color,
-    panelBackground: 'linear-gradient(180deg, #FFFFFF 58.56%, #F8F8FF 100%)'
+    panelBackground: 'linear-gradient(180deg, #FFFFFF 58.56%, #F8F8FF 100%)',
+    warningBackground: '##FFFCF0'
   }
 }
 

diff --git a/components/brave_vpn/resources/panel/theme/vpn-theme.ts b/components/brave_vpn/resources/panel/theme/vpn-theme.ts
@@ -6,5 +6,6 @@
 export default interface IThemeVPN {
   color: {
     panelBackground: string
+    warningBackground: string
   }
 }
diff --git a/components/resources/brave_vpn_strings.grdp b/components/resources/brave_vpn_strings.grdp
@@ -179,4 +179,8 @@
   <message name="IDS_BRAVE_VPN_SUPPORT_SUBMIT" desc="Text for submit button on VPN support form">
     Submit
   </message>
+
+  <message name="IDS_BRAVE_VPN_CONNECT_NOT_ALLOWED" desc="A highlited note on the main panel when permission from the user is not allowed to create a VPN profile on OS-level">
+    VPN connection failed. Please try connecting again, and be sure to click Allow to enable Brave's VPN configuration.
+  </message>
 </grit-part>