web/satellite: logic for new signup/login flow

WHAT:
1. updated verification page URL in config
2. added list of partnered satellites to config
3. added logic for satellites dropdown on new signup/login pages

WHY:
1. signup/login flow was reworked in tardigrade.io repo (iframe removed, new pages etc.)
2. new config flag was added to check if satellite name matches at least one member of partnered satellites list to redirect user to verification page
3. new pages will have dropdown with partnered satellites list. Appropriate logic was added.

Change-Id: I33399ab66ca31f07b297a433f6b1f41da4cb6e66

satellite/console/consoleweb/server.go

@@ -74,7 +74,8 @@ type Config struct {
 	TermsAndConditionsURL        string `help:"url link to terms and conditions page" default:"https://storj.io/storage-sla/"`
 	SegmentIOPublicKey           string `help:"used to initialize segment.io at web satellite console" default:""`
 	AccountActivationRedirectURL string `help:"url link for account activation redirect" default:""`
-	VerificationPageURL          string `help:"url link to sign up verification page" default:"https://tardigrade.io/satellites/verify"`
+	VerificationPageURL          string `help:"url link to sign up verification page" default:"https://tardigrade.io/verify"`
+	PartneredSatelliteNames      string `help:"names of partnered satellites" default:"US-Central-1,Europe-West-1,Asia-East-1"`
 
 	RateLimit web.IPRateLimiterConfig
 
@@ -265,16 +266,18 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
 	header.Set("Referrer-Policy", "same-origin") // Only expose the referring url when navigating around the satellite itself.
 
 	var data struct {
-		SatelliteName       string
-		SegmentIOPublicKey  string
-		StripePublicKey     string
-		VerificationPageURL string
+		SatelliteName           string
+		SegmentIOPublicKey      string
+		StripePublicKey         string
+		VerificationPageURL     string
+		PartneredSatelliteNames string
 	}
 
 	data.SatelliteName = server.config.SatelliteName
 	data.SegmentIOPublicKey = server.config.SegmentIOPublicKey
 	data.StripePublicKey = server.stripePublicKey
 	data.VerificationPageURL = server.config.VerificationPageURL
+	data.PartneredSatelliteNames = server.config.PartneredSatelliteNames
 
 	if server.templates.index == nil || server.templates.index.Execute(w, data) != nil {
 		server.log.Error("index template could not be executed")

scripts/testdata/satellite-config.yaml.lock

@@ -88,6 +88,9 @@ compensation.withheld-percents: 75,75,75,50,50,50,25,25,25,0,0,0,0,0,0
 # enable open registration
 # console.open-registration-enabled: false
 
+# names of partnered satellites
+# console.partnered-satellite-names: US-Central-1,Europe-West-1,Asia-East-1
+
 # number of events before the limit kicks in
 # console.rate-limit.burst: 5
 
@@ -116,7 +119,7 @@ compensation.withheld-percents: 75,75,75,50,50,50,25,25,25,0,0,0,0,0,0
 # console.terms-and-conditions-url: https://storj.io/storage-sla/
 
 # url link to sign up verification page
-# console.verification-page-url: https://tardigrade.io/satellites/verify
+# console.verification-page-url: https://tardigrade.io/verify
 
 # the public address of the node, useful for nodes behind NAT
 contact.external-address: ""

web/satellite/index.html

@@ -7,6 +7,7 @@
     <meta name="segment-io" content="{{ .SegmentIOPublicKey }}">
     <meta name="stripe-public-key" content="{{ .StripePublicKey }}">
     <meta name="verification-page-url" content="{{ .VerificationPageURL }}">
+    <meta name="partnered-satellite-names" content="{{ .PartneredSatelliteNames }}">
     <title>{{ .SatelliteName }}</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL8SURBVHgBxVcxTFNRFL01JvylrRsmNWETWWSybg5I3NTQBCdRFyfrDuoKMgMyOQgdTcDAJmrUrWWCgQIbhJKy0TJQpsc73P/S9/tfP+8/GnqSn1fo77/3nnPufe8nhAR1ETeoy7hJjpj93/ycu0+UuUVuEA5Y2xaifirEVpX/nvknnBFbgpMGUfmIKOkRLRT578oxXy6IJcFCialH0EyaaPoZBy7tEQ3NEY1IKd4/iidHwqYLijLA559cuY6dT0RjBU5AAYm9fiivLFnBKMGBTyeqQ4BXhXDwdqjUiKZkskOzREsbzeeBNRMCEiDgr12uYl1WNbnW/oc2iUys8jrQyyxhHRkM3hdgAMFBHQyGG/GDqyDlsSeS/npQC99jlEBpOnyX2XCF8sGhZLbeMLMZkCDbJ1nYYTfDeMP9fMH5y5vmIKYE8RxUjBXPedDH1Zu6I9QFSzLQxErz4Xn5oNwg+2NSmuv3Lkvz4QlTi8rupDlBmA6tqQLrnYNCvoxSNAOtUEaakwzMv+ALidTP2OlKKiSK75Cs6hy9NYFkjzmG1SBCIuUq0Za8pgydge8R9E+e10qNrGE1ikH5435mo11bQgr4B9LEgVUC0Npm1o+vcuvBxB1NYFsaaeC2XUuW/Xs7msC9Xqa+MMa9jQr1KtXAQoKYHakeskbIhDrVasdTbbVY4s8ZYld/9PWuyeTSHksFBjBFcZ+aH/j/yZk5gcAcgImgIX6MNsKKhKBta1sB2A3HV5pD6iJQIzw/MICwoohc1F6ALBH03XemFYPl+VdzcBNUh6j5gZZEcP341opAAnX/AXl/A0FlrrshgMRR+YUvPPN8CHgAxlqWVYuEdH7V/ZilA6cosFDa53EcmUDKC+7X+IwxHEVhO0DK6aeXH88uHcWQA8xE7Yg69M6xgdWZUEFtNNDyx1s2KnyDIxu22zdZTjgWhANm/vL6clGIsnw3+Fbk94RreS8AMGrBxvwoT0lMPnSNC2JJoAPdgnMBJLjKq5lzAp1C19+OzwFiYzAU5f7eeQAAAABJRU5ErkJggg==" type="image/x-icon">
     <link rel="dns-prefetch" href="https://js.stripe.com">

web/satellite/src/components/common/HeaderlessInput.vue

@@ -5,8 +5,8 @@
     <div class="input-wrap">
         <div class="label-container">
             <ErrorIcon v-if="error"/>
-            <h3 class="label-container__label" v-if="isLabelShown" :style="style.labelStyle">{{label}}</h3>
-            <h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
+            <p class="label-container__label" v-if="isLabelShown" :style="style.labelStyle">{{label}}</p>
+            <p class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</p>
         </div>
         <input
             class="headerless-input"

web/satellite/src/router/index.ts

@@ -30,7 +30,7 @@ export abstract class RouteConfig {
     // root paths
     public static Root = new NavigationLink('/', 'Root');
     public static Login = new NavigationLink('/login', 'Login');
-    public static Register = new NavigationLink('/register', 'Register');
+    public static Register = new NavigationLink('/signup', 'Register');
     public static ForgotPassword = new NavigationLink('/forgot-password', 'Forgot Password');
     public static Account = new NavigationLink('/account', 'Account');
     public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard');

web/satellite/src/views/forgotPassword/ForgotPassword.vue

@@ -28,6 +28,9 @@ export default class ForgotPassword extends Vue {
 
     private readonly auth: AuthHttpApi = new AuthHttpApi();
 
+    // tardigrade logic
+    public isDropdownShown: boolean = false;
+
     /**
      * Checks if page is inside iframe
      */
@@ -40,6 +43,20 @@ export default class ForgotPassword extends Vue {
         this.emailError = '';
     }
 
+    /**
+     * Toggles satellite selection dropdown visibility (Tardigrade).
+     */
+    public toggleDropdown(): void {
+        this.isDropdownShown = !this.isDropdownShown;
+    }
+
+    /**
+     * Closes satellite selection dropdown (Tardigrade).
+     */
+    public closeDropdown(): void {
+        this.isDropdownShown = false;
+    }
+
     /**
      * Sends recovery password email.
      */

web/satellite/src/views/login/LoginArea.vue

@@ -38,6 +38,9 @@ export default class Login extends Vue {
     public readonly forgotPasswordPath: string = RouteConfig.ForgotPassword.path;
     public isActivatedBannerShown: boolean = false;
 
+    // Tardigrade logic
+    public isDropdownShown: boolean = false;
+
     public mounted(): void {
         if (this.$route.query.activated === 'true') {
             this.isActivatedBannerShown = true;
@@ -75,9 +78,23 @@ export default class Login extends Vue {
         this.$router.push(RouteConfig.Register.path);
     }
 
+    /**
+     * Toggles satellite selection dropdown visibility (Tardigrade).
+     */
+    public toggleDropdown(): void {
+        this.isDropdownShown = !this.isDropdownShown;
+    }
+
+    /**
+     * Closes satellite selection dropdown (Tardigrade).
+     */
+    public closeDropdown(): void {
+        this.isDropdownShown = false;
+    }
+
     /**
      * Performs login action.
-     * Then changes location to billing page.
+     * Then changes location to project dashboard page.
      */
     public async onLogin(): Promise<void> {
         if (this.isLoading) {

web/satellite/src/views/register/RegisterArea.vue

@@ -56,6 +56,9 @@ export default class RegisterArea extends Vue {
 
     public isPasswordStrengthShown: boolean = false;
 
+    // tardigrade logic
+    public isDropdownShown: boolean = false;
+
     /**
      * Lifecycle hook after initial render.
      * Sets up variables from route params.
@@ -103,10 +106,17 @@ export default class RegisterArea extends Vue {
     }
 
     /**
-     * Checks if page is inside iframe.
+     * Toggles satellite selection dropdown visibility (Tardigrade).
      */
-    public get isInsideIframe(): boolean {
-        return window.self !== window.top;
+    public toggleDropdown(): void {
+        this.isDropdownShown = !this.isDropdownShown;
+    }
+
+    /**
+     * Closes satellite selection dropdown (Tardigrade).
+     */
+    public closeDropdown(): void {
+        this.isDropdownShown = false;
     }
 
     /**
@@ -241,9 +251,12 @@ export default class RegisterArea extends Vue {
                 referralToken: this.referralToken,
             });
 
-            if (this.isInsideIframe) {
+            const satellitesString: string = MetaUtils.getMetaContent('partnered-satellite-names');
+            const partneredSatellites: string[] = satellitesString.split(',');
+            const satelliteName: string = MetaUtils.getMetaContent('satellite-name');
+
+            if (partneredSatellites.includes(satelliteName)) {
                 const verificationPageURL: string = MetaUtils.getMetaContent('verification-page-url');
-                const satelliteName: string = MetaUtils.getMetaContent('satellite-name');
                 const url = new URL(verificationPageURL);
 
                 url.searchParams.append('name', satelliteName);