Merge pull request #934 from openziti/ui_tweaks

See #552 and #910.

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## v1.0.2
 
+FEATURE: New `admin/new_account_link` configuration option to allow the insertion of "how do I register for an account?" links into the login form (https://github.com/openziti/zrok/issues/552)
+
+CHANGE: The release environment, share, and access modals in the API console now have a better message letting the user know they will still need to clean up their `zrok` processes (https://github.com/openziti/zrok/issues/910)
+
 CHANGE: The openziti/zrok Docker image has been updated to use the latest version of the ziti CLI, 1.4.3 (https://github.com/openziti/zrok/pull/917)
 
 ## v1.0.1

controller/config/config.go

@@ -38,6 +38,7 @@ type Config struct {
 type AdminConfig struct {
 	Secrets         []string `cf:"+secret"`
 	TouLink         string
+	NewAccountLink  string
 	ProfileEndpoint string
 }
 

controller/configuration.go

@@ -26,6 +26,7 @@ func (ch *configurationHandler) Handle(_ metadata.ConfigurationParams) middlewar
 	}
 	if cfg.Admin != nil {
 		data.TouLink = cfg.Admin.TouLink
+		data.NewAccountLink = cfg.Admin.NewAccountLink
 	}
 	if cfg.Invites != nil {
 		data.InviteTokenContact = cfg.Invites.TokenContact

etc/ctrl.yml

@@ -20,10 +20,15 @@ admin:
   secrets:
     -                             77623cad-1847-4d6d-8ffe-37defc33c909
   #
-  # If `tou_link` is present, the frontend will display the "Terms of Use" link on the login and registration forms
+  # If `tou_link` is present, the API console will display the "Terms of Use" link on the login and registration forms
   #
   tou_link:                       '<a href="https://google.com" target="_">Terms and Conditions</a>'
   #
+  # If `new_account_link` is present, the API console will inject the contents of this setting into the login form; the
+  # intention is that it is used to present a "How do I get an account?" link.
+  #
+  new_account_link:               '<a href="https://google.com" target="_">How do I get an account?</a>'
+  #
   # If `profile_endpoint` is present, the controller will start a `net/http/pprof` endpoint at the specified host:port
   #
   #profile_endpoint:               localhost:6060

rest_model_zrok/configuration.go

@@ -23,6 +23,9 @@ type Configuration struct {
 	// invites open
 	InvitesOpen bool `json:"invitesOpen,omitempty"`
 
+	// new account link
+	NewAccountLink string `json:"newAccountLink,omitempty"`
+
 	// requires invite token
 	RequiresInviteToken bool `json:"requiresInviteToken,omitempty"`
 

rest_server_zrok/embedded_spec.go

@@ -1985,6 +1985,9 @@ func init() {
         "invitesOpen": {
           "type": "boolean"
         },
+        "newAccountLink": {
+          "type": "string"
+        },
         "requiresInviteToken": {
           "type": "boolean"
         },
@@ -4298,6 +4301,9 @@ func init() {
         "invitesOpen": {
           "type": "boolean"
         },
+        "newAccountLink": {
+          "type": "string"
+        },
         "requiresInviteToken": {
           "type": "boolean"
         },

sdk/nodejs/sdk/src/api/models/ModelConfiguration.ts

@@ -31,6 +31,12 @@ export interface ModelConfiguration {
      * @memberof ModelConfiguration
      */
     touLink?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ModelConfiguration
+     */
+    newAccountLink?: string;
     /**
      * 
      * @type {boolean}
@@ -70,6 +76,7 @@ export function ModelConfigurationFromJSONTyped(json: any, ignoreDiscriminator:
         
         'version': json['version'] == null ? undefined : json['version'],
         'touLink': json['touLink'] == null ? undefined : json['touLink'],
+        'newAccountLink': json['newAccountLink'] == null ? undefined : json['newAccountLink'],
         'invitesOpen': json['invitesOpen'] == null ? undefined : json['invitesOpen'],
         'requiresInviteToken': json['requiresInviteToken'] == null ? undefined : json['requiresInviteToken'],
         'inviteTokenContact': json['inviteTokenContact'] == null ? undefined : json['inviteTokenContact'],
@@ -89,6 +96,7 @@ export function ModelConfigurationToJSONTyped(value?: ModelConfiguration | null,
         
         'version': value['version'],
         'touLink': value['touLink'],
+        'newAccountLink': value['newAccountLink'],
         'invitesOpen': value['invitesOpen'],
         'requiresInviteToken': value['requiresInviteToken'],
         'inviteTokenContact': value['inviteTokenContact'],

sdk/python/src/docs/Configuration.md

@@ -7,6 +7,7 @@ Name | Type | Description | Notes
 ------------ | ------------- | ------------- | -------------
 **version** | **str** |  | [optional] 
 **tou_link** | **str** |  | [optional] 
+**new_account_link** | **str** |  | [optional] 
 **invites_open** | **bool** |  | [optional] 
 **requires_invite_token** | **bool** |  | [optional] 
 **invite_token_contact** | **str** |  | [optional] 

sdk/python/src/test/test_configuration.py

@@ -37,6 +37,7 @@ class TestConfiguration(unittest.TestCase):
             return Configuration(
                 version = '',
                 tou_link = '',
+                new_account_link = '',
                 invites_open = True,
                 requires_invite_token = True,
                 invite_token_contact = ''

sdk/python/src/zrok_api/models/configuration.py

@@ -28,10 +28,11 @@ class Configuration(BaseModel):
     """ # noqa: E501
     version: Optional[StrictStr] = None
     tou_link: Optional[StrictStr] = Field(default=None, alias="touLink")
+    new_account_link: Optional[StrictStr] = Field(default=None, alias="newAccountLink")
     invites_open: Optional[StrictBool] = Field(default=None, alias="invitesOpen")
     requires_invite_token: Optional[StrictBool] = Field(default=None, alias="requiresInviteToken")
     invite_token_contact: Optional[StrictStr] = Field(default=None, alias="inviteTokenContact")
-    __properties: ClassVar[List[str]] = ["version", "touLink", "invitesOpen", "requiresInviteToken", "inviteTokenContact"]
+    __properties: ClassVar[List[str]] = ["version", "touLink", "newAccountLink", "invitesOpen", "requiresInviteToken", "inviteTokenContact"]
 
     model_config = ConfigDict(
         populate_by_name=True,
@@ -86,6 +87,7 @@ class Configuration(BaseModel):
         _obj = cls.model_validate({
             "version": obj.get("version"),
             "touLink": obj.get("touLink"),
+            "newAccountLink": obj.get("newAccountLink"),
             "invitesOpen": obj.get("invitesOpen"),
             "requiresInviteToken": obj.get("requiresInviteToken"),
             "inviteTokenContact": obj.get("inviteTokenContact")

specs/zrok.yml

@@ -1229,6 +1229,8 @@ definitions:
         type: string
       touLink:
         type: string
+      newAccountLink:
+        type: string
       invitesOpen:
         type: boolean
       requiresInviteToken:

ui/src/Login.tsx

@@ -13,14 +13,19 @@ const Login = ({ onLogin }: LoginProps) => {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [message, setMessage] = useState("");
-    const [tou, setTou] = useState(null as string);
+    const [tou, setTou] = useState<string>("");
+    const [newAccountLink, setNewAccountLink] = useState<string>("");
 
     useEffect(() => {
         new MetadataApi()._configuration()
             .then(d => {
+                console.log("d", d);
                 if(d.touLink && d.touLink.trim() !== "") {
                     setTou(d.touLink);
                 }
+                if(d.newAccountLink && d.newAccountLink.trim() != "") {
+                    setNewAccountLink(d.newAccountLink)
+                }
             })
             .catch(e => {
                 console.log(e);
@@ -86,6 +91,9 @@ const Login = ({ onLogin }: LoginProps) => {
                         <Box component="div" style={{ textAlign: "center" }}>
                             <Link to="/forgotPassword">Forgot Password?</Link>
                         </Box>
+                        <Box component="div" style={{ textAlign: "center" }}>
+                            <div dangerouslySetInnerHTML={{__html: newAccountLink}}></div>
+                        </Box>
                         <Box component="div" style={{ textAlign: "center" }}>
                             <div dangerouslySetInnerHTML={{__html: tou}}></div>
                         </Box>

ui/src/ReleaseAccessModal.tsx

@@ -70,6 +70,9 @@ const ReleaseAccessModal = ({ close, isOpen, user, access, detail }: ReleaseAcce
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <Typography variant="body1">Would you like to release the access <code>{frontendToken}</code> ?</Typography>
                 </Grid2>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <Typography variant="h6" color="red">WARNING: This operation removes permissions and frees resources, but it does NOT terminate your <code>zrok access</code> process&mdash;you must do that manually.</Typography>
+                </Grid2>
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{frontendToken}</code></p>} sx={{ mt: 2 }} />
                 </Grid2>

ui/src/ReleaseEnvironmentModal.tsx

@@ -69,7 +69,7 @@ const ReleaseEnvironmentModal = ({ close, isOpen, user, environment, detail }: R
                     <Typography variant="body1">Would you like to release the environment <code>{description}</code> ?</Typography>
                 </Grid2>
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                    <Typography variant="body1">Releasing this environment will also release any shares and accesses that are associated with it.</Typography>
+                    <Typography variant="h6" color="red">WARNING: Releasing this environment will also release any shares and accesses that are associated with it. This operation removes permissions and frees resources, but it does NOT terminate your <code>zrok share</code> or <code>zrok access</code> processes&mdash;you must do that manually.</Typography>
                 </Grid2>
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{description}</code></p>} sx={{ mt: 2 }} />

ui/src/ReleaseShareModal.tsx

@@ -70,6 +70,9 @@ const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareP
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <Typography variant="body1">Would you like to release the share <code>{shareToken}</code> ?</Typography>
                 </Grid2>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <Typography variant="h6" color="red">WARNING: This operation removes permissions and frees resources, but it does NOT terminate your <code>zrok share</code> process&mdash;you must do that manually.</Typography>
+                </Grid2>
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{shareToken}</code></p>} sx={{ mt: 2 }} />
                 </Grid2>

ui/src/api/models/ModelConfiguration.ts

@@ -31,6 +31,12 @@ export interface ModelConfiguration {
      * @memberof ModelConfiguration
      */
     touLink?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ModelConfiguration
+     */
+    newAccountLink?: string;
     /**
      * 
      * @type {boolean}
@@ -70,6 +76,7 @@ export function ModelConfigurationFromJSONTyped(json: any, ignoreDiscriminator:
         
         'version': json['version'] == null ? undefined : json['version'],
         'touLink': json['touLink'] == null ? undefined : json['touLink'],
+        'newAccountLink': json['newAccountLink'] == null ? undefined : json['newAccountLink'],
         'invitesOpen': json['invitesOpen'] == null ? undefined : json['invitesOpen'],
         'requiresInviteToken': json['requiresInviteToken'] == null ? undefined : json['requiresInviteToken'],
         'inviteTokenContact': json['inviteTokenContact'] == null ? undefined : json['inviteTokenContact'],
@@ -89,6 +96,7 @@ export function ModelConfigurationToJSONTyped(value?: ModelConfiguration | null,
         
         'version': value['version'],
         'touLink': value['touLink'],
+        'newAccountLink': value['newAccountLink'],
         'invitesOpen': value['invitesOpen'],
         'requiresInviteToken': value['requiresInviteToken'],
         'inviteTokenContact': value['inviteTokenContact'],