proposal: add a provider message and contact option in the dynamic key

Makefile

@@ -7,7 +7,7 @@ GOBIND=env PATH="$(GOBIN):$(PATH)" "$(GOMOBILE)" bind
 IMPORT_HOST=github.com
 IMPORT_PATH=$(IMPORT_HOST)/Jigsaw-Code/outline-client
 
-.PHONY: android apple linux windows
+.PHONY: android apple linux windows browser
 
 all: android apple linux windows
 
@@ -74,3 +74,6 @@ $(XGO): go.mod
 go.mod: tools.go
 	go mod tidy
 	touch go.mod
+
+browser:
+	echo 'browser environment: nothing to do'

commitlint.config.js

@@ -22,5 +22,10 @@ module.exports = {
         'service/windows',
       ],
     ],
+    'type-enum': [
+      2,
+      'always',
+      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'proposal', 'refactor', 'revert', 'style', 'test'],
+    ],
   },
 };

src/electron/go_vpn_tunnel.ts

@@ -16,7 +16,7 @@ import {powerMonitor} from 'electron';
 import {platform} from 'os';
 
 import {pathToEmbeddedBinary} from '../infrastructure/electron/app_paths';
-import {ShadowsocksSessionConfig} from '../www/app/tunnel';
+import {ShadowsocksSessionConfig} from '../www/model/shadowsocks_session_config';
 import {TunnelStatus} from '../www/app/tunnel';
 import {ErrorCode, fromErrorCode, UnexpectedPluginError} from '../www/model/errors';
 

src/electron/index.ts

@@ -25,7 +25,7 @@ import autoLaunch = require('auto-launch'); // tslint:disable-line
 
 import * as errors from '../www/model/errors';
 
-import {ShadowsocksSessionConfig} from '../www/app/tunnel';
+import {ShadowsocksSessionConfig} from '../www/model/shadowsocks_session_config';
 import {TunnelStatus} from '../www/app/tunnel';
 import {GoVpnTunnel} from './go_vpn_tunnel';
 import {installRoutingServices, RoutingDaemon} from './routing_service';

src/electron/tunnel_store.ts

@@ -15,7 +15,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
-import {ShadowsocksSessionConfig} from '../www/app/tunnel';
+import {ShadowsocksSessionConfig} from '../www/model/shadowsocks_session_config';
 
 // Format to store a tunnel configuration.
 export interface SerializableTunnel {

src/www/app/app.ts

@@ -589,7 +589,7 @@ export class App {
   // Helpers:
 
   private makeServerListItem(server: Server): ServerListItem {
-    return {
+    const serverListItem: ServerListItem = {
       disabled: false,
       errorMessageId: server.errorMessageId,
       isOutlineServer: server.isOutlineServer,
@@ -598,6 +598,25 @@ export class App {
       id: server.id,
       connectionState: ServerConnectionState.DISCONNECTED,
     };
+
+    if (server.sessionConfig?.extra) {
+      const extraParams = server.sessionConfig.extra;
+
+      if (['error', 'warning', 'info'].includes(extraParams.messageType) && extraParams.messageContent) {
+        serverListItem.message = {
+          type: extraParams.messageType as 'error' | 'warning' | 'info',
+          content: extraParams.messageContent,
+        };
+      }
+
+      if (extraParams.contactEmail) {
+        serverListItem.contact = {
+          email: extraParams.email,
+        };
+      }
+    }
+
+    return serverListItem;
   }
 
   private throttleServerConnectionChange(serverId: string, time: number) {

src/www/app/cordova_main.ts

@@ -34,7 +34,7 @@ import {Tunnel, TunnelStatus} from './tunnel';
 import {AbstractUpdater} from './updater';
 import * as interceptors from './url_interceptor';
 import {FakeOutlineTunnel} from './fake_tunnel';
-import {ShadowsocksSessionConfig} from './tunnel';
+import {ShadowsocksSessionConfig} from '../model/shadowsocks_session_config';
 import {NoOpVpnInstaller, VpnInstaller} from './vpn_installer';
 
 const OUTLINE_PLUGIN_NAME = 'OutlinePlugin';

src/www/app/electron_outline_tunnel.ts

@@ -14,7 +14,8 @@
 
 import * as errors from '../model/errors';
 
-import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from './tunnel';
+import {Tunnel, TunnelStatus} from './tunnel';
+import {ShadowsocksSessionConfig} from '../model/shadowsocks_session_config';
 
 export class ElectronOutlineTunnel implements Tunnel {
   private statusChangeListener: ((status: TunnelStatus) => void) | null = null;

src/www/app/fake_tunnel.ts

@@ -14,7 +14,8 @@
 
 import * as errors from '../model/errors';
 
-import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from './tunnel';
+import {Tunnel, TunnelStatus} from './tunnel';
+import {ShadowsocksSessionConfig} from '../model/shadowsocks_session_config';
 
 // Fake Tunnel implementation for demoing and testing.
 // Note that because this implementation does not emit disconnection events, "switching" between

src/www/app/outline_server_repository/access_key_serialization.ts

@@ -16,7 +16,7 @@ import {SHADOWSOCKS_URI} from 'ShadowsocksConfig';
 
 import * as errors from '../../model/errors';
 
-import {ShadowsocksSessionConfig} from '../tunnel';
+import {ShadowsocksSessionConfig} from '../../model/shadowsocks_session_config';
 
 // DON'T use these methods outside of this folder!
 
@@ -30,14 +30,15 @@ export function staticKeyToShadowsocksSessionConfig(staticKey: string): Shadowso
       method: config.method.data,
       password: config.password.data,
       prefix: config.extra?.['prefix'],
+      extra: config.extra,
     };
   } catch (cause) {
     throw new errors.ServerAccessKeyInvalid('Invalid static access key.', {cause});
   }
 }
 
 function parseShadowsocksSessionConfigJson(maybeJsonText: string): ShadowsocksSessionConfig | null {
-  const {method, password, server, server_port, prefix} = JSON.parse(maybeJsonText);
+  const {method, password, server, server_port, prefix, extra} = JSON.parse(maybeJsonText);
 
   // These are the mandatory keys.
   const missingKeys = [];
@@ -58,6 +59,7 @@ function parseShadowsocksSessionConfigJson(maybeJsonText: string): ShadowsocksSe
     host: server,
     port: server_port,
     prefix,
+    extra,
   };
 }
 

src/www/app/outline_server_repository/server.ts

@@ -15,8 +15,9 @@
 import * as errors from '../../model/errors';
 import * as events from '../../model/events';
 import {Server, ServerType} from '../../model/server';
+import {ShadowsocksSessionConfig} from '../../model/shadowsocks_session_config';
 
-import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from '../tunnel';
+import {Tunnel, TunnelStatus} from '../tunnel';
 
 import {fetchShadowsocksSessionConfig, staticKeyToShadowsocksSessionConfig} from './access_key_serialization';
 
@@ -28,7 +29,7 @@ export class OutlineServer implements Server {
   private static readonly SUPPORTED_CIPHERS = ['chacha20-ietf-poly1305', 'aes-128-gcm', 'aes-192-gcm', 'aes-256-gcm'];
 
   errorMessageId?: string;
-  private sessionConfig?: ShadowsocksSessionConfig;
+  sessionConfig?: ShadowsocksSessionConfig;
 
   constructor(
     public readonly id: string,

src/www/app/tunnel.ts

@@ -12,13 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export interface ShadowsocksSessionConfig {
-  host?: string;
-  port?: number;
-  password?: string;
-  method?: string;
-  prefix?: string;
-}
+import {ShadowsocksSessionConfig} from '../model/shadowsocks_session_config';
 
 export const enum TunnelStatus {
   CONNECTED,

src/www/model/server.ts

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {ShadowsocksSessionConfig} from './shadowsocks_session_config';
+
 // TODO: add guidelines for this file
 
 export enum ServerType {
@@ -34,6 +36,9 @@ export interface Server {
   // The name of this server, as given by the user.
   name: string;
 
+  // The configuration used to connect to the server.
+  sessionConfig?: ShadowsocksSessionConfig;
+
   // The location to pull the session config from on each connection.
   sessionConfigLocation?: URL;
 

src/www/model/shadowsocks_session_config.ts

@@ -0,0 +1,22 @@
+// Copyright 2024 The Outline Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export interface ShadowsocksSessionConfig {
+  host?: string;
+  port?: number;
+  password?: string;
+  method?: string;
+  prefix?: string;
+  extra?: {[key: string]: string};
+}

src/www/style.css

@@ -27,6 +27,7 @@
   --min-supported-device-width: 320px;
 
   --outline-primary: hsl(170, 60%, 46%);
+  --outline-warning: hsl(48, 52%, 53%);
   --outline-error: hsl(4, 90%, 58%);
 
   --outline-black: hsl(0, 0%, 0%);

src/www/views/servers_view/server_list/index.ts

@@ -34,11 +34,11 @@ export class ServerList extends PolymerElement {
 
         server-row-card {
           margin: 0 auto 8px auto;
-          height: 130px;
+          height: 200px;
         }
 
         server-hero-card {
-          height: 400px;
+          height: 500px;
         }
       </style>
 

src/www/views/servers_view/server_list_item/index.ts

@@ -34,6 +34,13 @@ export interface ServerListItem {
   id: string;
   name: string;
   connectionState: ServerConnectionState;
+  message?: {
+    type: 'error' | 'warning' | 'info';
+    content: string;
+  };
+  contact?: {
+    email: string;
+  };
 }
 
 /**

src/www/views/servers_view/server_list_item/server_card/index.ts

@@ -123,11 +123,41 @@ const sharedCSS = css`
     grid-area: footer;
     padding: var(--outline-mini-gutter) var(--outline-gutter);
     text-align: end;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
-  .card-error {
+  .card-footer-button {
+    align-self: end;
+  }
+
+  .card-error,
+  .card-provider-message {
+    font-family: var(--outline-font-family);
+  }
+
+  .card-error,
+  .card-provider-message-error {
     color: var(--outline-error);
-    margin: 0 var(--outline-slim-gutter);
+  }
+
+  .card-provider-message-warning {
+    color: var(--outline-warning);
+  }
+
+  .card-provider-message-warning::before {
+    content: '⚠️ ';
+  }
+
+  .card-provider-message-info,
+  .card-provider-message-contact {
+    color: var(--outline-primary);
+  }
+
+  .card-provider-message-contact {
+    cursor: pointer;
+    text-decoration: underline;
   }
 `;
 
@@ -140,13 +170,18 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
     ServerConnectionState.RECONNECTING,
   ].includes(server.connectionState);
   const hasErrorMessage = Boolean(server.errorMessageId);
-
-  const messages = {
+  const messages: {[key: string]: string} = {
     serverName: server.name,
     error: hasErrorMessage ? localize(server.errorMessageId) : '',
     connectButton: localize(isConnectedState ? 'disconnect-button-label' : 'connect-button-label'),
   };
 
+  if (Boolean(server.message && server.contact) && !hasErrorMessage) {
+    messages.providerMessageType = server.message.type;
+    messages.providerMessage = localize(server.message.content);
+    messages.providerEmail = server.contact.email;
+  }
+
   const dispatchers = {
     beginRename: () =>
       element.dispatchEvent(
@@ -211,8 +246,17 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
       `,
       footer: html`
         <footer class="card-footer">
-          <span class="card-error">${messages.error}</span>
+          <div>
+            <span class="card-error">${messages.error}</span>
+            <span class="card-provider-message card-provider-message-${messages.providerMessageType}">
+              ${messages.providerMessage}
+              <a class="card-provider-message-contact" href="mailto:${messages.providerEmail}"
+                >${messages.providerEmail}</a
+              >
+            </span>
+          </div>
           <mwc-button
+            class="card-footer-button"
             label="${messages.connectButton}"
             @click="${dispatchers.connectToggle}"
             ?disabled=${hasErrorMessage}