@designcrowd/fe-shared-lib 1.5.7 → 1.5.8

package/src/experiences/components/AuthFlow/Auth.stories.js

@@ -1,345 +1,345 @@
-import SignIn from './SignIn.vue';
-import SignUp from './SignUp.vue';
-import SignUpModal from './SignUpModal.vue';
-import ForgotPassword from './ForgotPassword.vue';
-import ResetPasswordModal from './ResetPasswordModal.vue';
-import ResetPasswordSuccessModal from './ResetPasswordSuccessModal.vue';
-import AuthLegal from './AuthLegal.vue';
-
-export default {
-  title: 'Components/SignIn',
-  component: SignIn,
-};
-
-export const SignInSample = () => {
-  return {
-    components: {
-      SignIn,
-    },
-    template: `
-        <div class="tw-container tw-font-sans">
-            <SignIn
-                sign-up-text="New to BrandCrowd?"
-                sign-up-url="#"
-                login-with-google-url="#"
-                login-with-facebook-url="https://www.facebook.com"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                forgot-password-url="#"
-                anti-forgery-token="#"
-            />
-        </div>
-    `,
-  };
-};
-
-export const SignInEmailLoadingSample = () => {
-  return {
-    components: {
-      SignIn,
-    },
-    template: `
-        <div class="tw-container tw-font-sans">
-            <SignIn
-                sign-up-text="New to BrandCrowd?"
-                sign-up-url="#"
-                login-with-google-url="#"
-                login-with-facebook-url="https://www.facebook.com"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                forgot-password-url="#"
-                anti-forgery-token="#"
-                :email-loading="true"
-            />
-        </div>
-    `,
-  };
-};
-export const SignInFacebookLoadingSample = () => {
-  return {
-    components: {
-      SignIn,
-    },
-    template: `
-        <div class="tw-container tw-font-sans">
-            <SignIn
-                sign-up-text="New to BrandCrowd?"
-                sign-up-url="#"
-                login-with-google-url="#"
-                login-with-facebook-url="https://www.facebook.com"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                forgot-password-url="#"
-                anti-forgery-token="#"
-                :facebook-loading="true"
-            />
-        </div>
-    `,
-  };
-};
-export const SignInGoogleLoadingSample = () => {
-  return {
-    components: {
-      SignIn,
-    },
-    template: `
-        <div class="tw-container tw-font-sans">
-            <SignIn
-                sign-up-text="New to BrandCrowd?"
-                sign-up-url="#"
-                login-with-google-url="#"
-                login-with-facebook-url="https://www.facebook.com"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                forgot-password-url="#"
-                anti-forgery-token="#"
-                :google-loading="true"
-            />
-        </div>
-    `,
-  };
-};
-export const SignInNoPasswordSample = () => {
-  return {
-    components: {
-      SignIn,
-    },
-    methods: {
-      preFacebookLoginHook(callback = () => {}) {
-        callback({
-          antiForgeryToken: 'hellofacebook',
-          returnUrl:
-            '/identity/account/loginwithfacebook?returnUrl=/maker/logo/assignlogodraft?logoDraftToken=d99de525-757f-4514-9459-303813b052cc&returnUrl=%2Fmaker%2Flogo%2F28ce4ec5-cf54-4091-bd3f-eed82bd7115c%2Fdraft%2Fd99de525-757f-4514-9459-303813b052cc%3FsavedDraft%3DTrue&isDownload=False',
-        });
-      },
-      preGoogleLoginHook(callback = () => {}) {
-        callback({
-          antiForgeryToken: 'hellogoogle',
-          returnUrl:
-            '/identity/account/loginwithgoogle?returnUrl=/maker/logo/assignlogodraft?logoDraftToken=d99de525-757f-4514-9459-303813b052cc&returnUrl=%2Fmaker%2Flogo%2F28ce4ec5-cf54-4091-bd3f-eed82bd7115c%2Fdraft%2Fd99de525-757f-4514-9459-303813b052cc%3FsavedDraft%3DTrue&isDownload=False',
-        });
-      },
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignIn
-                title="Sign In"
-                description="Enter your email below"
-                sign-up-text="New to BrandCrowd?"
-                sign-up-url=""
-                login-with-google-url="#"
-                login-with-facebook-url="https://www.facebook.com"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                forgot-password-url="#"
-                anti-forgery-token="#"
-                :capture-password="false"
-                :pre-facebook-login-hook="preFacebookLoginHook"
-                :pre-google-login-hook="preGoogleLoginHook"
-            />
-        </div>
-    `,
-  };
-};
-
-export const SignInWithRecommendedActionLinkSample = () => {
-  return {
-    components: {
-      SignIn,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignIn
-                sign-up-text="New to BrandCrowd?"
-                sign-up-url=""
-                login-with-google-url="#"
-                login-with-facebook-url="https://www.facebook.com"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                forgot-password-url="#"
-                anti-forgery-token="#"
-                :hello-bar="{
-                  label: 'A password has not been set on this account. Please set a new password via the Reset Password function.',
-                  variant: 'warning',
-                }"
-                recommended-action-link='/hello'
-            />
-        </div>
-    `,
-  };
-};
-
-export const SignUpSample = () => {
-  return {
-    components: {
-      SignUp,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignUp
-                sign-in-url=""
-                login-with-google-url="#"
-                login-with-facebook-url="#"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                anti-forgery-token="#"
-            />
-        </div>
-    `,
-  };
-};
-
-export const SignUpSampleFacebookDisabled = () => {
-  return {
-    components: {
-      SignUp,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignUp
-                sign-in-url=""
-                login-with-google-url="#"
-                login-with-facebook-url=""
-                terms-of-use-url=""
-                privacy-policy-url=""
-                anti-forgery-token="#"
-            />
-        </div>
-    `,
-  };
-};
-
-export const SignUpSampleGoogleDisabled = () => {
-  return {
-    components: {
-      SignUp,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignUp
-                sign-in-url=""
-                login-with-google-url=""
-                login-with-facebook-url="#"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                anti-forgery-token="#"
-            />
-        </div>
-    `,
-  };
-};
-
-export const SignUpSampleWithError = () => {
-  return {
-    components: {
-      SignUp,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignUp
-                sign-in-url=""
-                login-with-google-url="#"
-                login-with-facebook-url="#"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                anti-forgery-token="#"
-                :hello-bar="{
-                  label: 'Uh oh! We\\'re sorry, something\\'s gone wrong, we were unable to create an account',
-                  variant: 'error',
-                }"
-            />
-        </div>
-    `,
-  };
-};
-
-export const SignUpModalSample = () => {
-  return {
-    components: {
-      SignUpModal,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignUpModal
-                title="Create a free account"
-                sign-in-url=""
-                sign-up-url=""
-                login-with-google-url="#"
-                login-with-facebook-url="#"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                anti-forgery-token="#"
-            />
-        </div>
-    `,
-  };
-};
-
-export const ForgotPasswordSample = () => {
-  return {
-    components: {
-      ForgotPassword,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <ForgotPassword
-                title="Forgot Password?"
-                sign-in-url=""
-                forgot-password-url=""
-                anti-forgery-token="#"
-            />
-        </div>
-    `,
-  };
-};
-
-export const ResetPasswordModalSample = () => {
-  return {
-    components: {
-      ResetPasswordModal,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <ResetPasswordModal
-                title="Reset Password"
-                user-name="user@email.com"
-                reset-password-token=""
-                anti-forgery-token="#"
-            />
-        </div>
-    `,
-  };
-};
-
-export const ResetPasswordSuccessModalSample = () => {
-  return {
-    components: {
-      ResetPasswordSuccessModal,
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <ResetPasswordSuccessModal
-                title="Reset Password Success!"
-                sign-in-url=""
-                forgot-password-url=""
-            />
-        </div>
-    `,
-  };
-};
-
-export const AuthLegalSample = () => {
-  return {
-    components: {
-      AuthLegal,
-    },
-    template: `
-        <div class="tw-container tw-max-w-xl tw-font-sans">
-          <AuthLegal
-            :terms-of-use-url="termsOfUseUrl"
-            :privacy-policy-url="privacyPolicyUrl"
-          />
-        </div>
-    `,
-  };
-};
+import SignIn from './SignIn.vue';
+import SignUp from './SignUp.vue';
+import SignUpModal from './SignUpModal.vue';
+import ForgotPassword from './ForgotPassword.vue';
+import ResetPasswordModal from './ResetPasswordModal.vue';
+import ResetPasswordSuccessModal from './ResetPasswordSuccessModal.vue';
+import AuthLegal from './AuthLegal.vue';
+
+export default {
+  title: 'Components/SignIn',
+  component: SignIn,
+};
+
+export const SignInSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignInEmailLoadingSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :email-loading="true"
+            />
+        </div>
+    `,
+  };
+};
+export const SignInFacebookLoadingSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :facebook-loading="true"
+            />
+        </div>
+    `,
+  };
+};
+export const SignInGoogleLoadingSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :google-loading="true"
+            />
+        </div>
+    `,
+  };
+};
+export const SignInNoPasswordSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    methods: {
+      preFacebookLoginHook(callback = () => {}) {
+        callback({
+          antiForgeryToken: 'hellofacebook',
+          returnUrl:
+            '/identity/account/loginwithfacebook?returnUrl=/maker/logo/assignlogodraft?logoDraftToken=d99de525-757f-4514-9459-303813b052cc&returnUrl=%2Fmaker%2Flogo%2F28ce4ec5-cf54-4091-bd3f-eed82bd7115c%2Fdraft%2Fd99de525-757f-4514-9459-303813b052cc%3FsavedDraft%3DTrue&isDownload=False',
+        });
+      },
+      preGoogleLoginHook(callback = () => {}) {
+        callback({
+          antiForgeryToken: 'hellogoogle',
+          returnUrl:
+            '/identity/account/loginwithgoogle?returnUrl=/maker/logo/assignlogodraft?logoDraftToken=d99de525-757f-4514-9459-303813b052cc&returnUrl=%2Fmaker%2Flogo%2F28ce4ec5-cf54-4091-bd3f-eed82bd7115c%2Fdraft%2Fd99de525-757f-4514-9459-303813b052cc%3FsavedDraft%3DTrue&isDownload=False',
+        });
+      },
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignIn
+                title="Sign In"
+                description="Enter your email below"
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :capture-password="false"
+                :pre-facebook-login-hook="preFacebookLoginHook"
+                :pre-google-login-hook="preGoogleLoginHook"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignInWithRecommendedActionLinkSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :hello-bar="{
+                  label: 'A password has not been set on this account. Please set a new password via the Reset Password function.',
+                  variant: 'warning',
+                }"
+                recommended-action-link='/hello'
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSample = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSampleFacebookDisabled = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url="#"
+                login-with-facebook-url=""
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSampleGoogleDisabled = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url=""
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSampleWithError = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+                :hello-bar="{
+                  label: 'Uh oh! We\\'re sorry, something\\'s gone wrong, we were unable to create an account',
+                  variant: 'error',
+                }"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpModalSample = () => {
+  return {
+    components: {
+      SignUpModal,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUpModal
+                title="Create a free account"
+                sign-in-url=""
+                sign-up-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const ForgotPasswordSample = () => {
+  return {
+    components: {
+      ForgotPassword,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <ForgotPassword
+                title="Forgot Password?"
+                sign-in-url=""
+                forgot-password-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const ResetPasswordModalSample = () => {
+  return {
+    components: {
+      ResetPasswordModal,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <ResetPasswordModal
+                title="Reset Password"
+                user-name="user@email.com"
+                reset-password-token=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const ResetPasswordSuccessModalSample = () => {
+  return {
+    components: {
+      ResetPasswordSuccessModal,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <ResetPasswordSuccessModal
+                title="Reset Password Success!"
+                sign-in-url=""
+                forgot-password-url=""
+            />
+        </div>
+    `,
+  };
+};
+
+export const AuthLegalSample = () => {
+  return {
+    components: {
+      AuthLegal,
+    },
+    template: `
+        <div class="tw-container tw-max-w-xl tw-font-sans">
+          <AuthLegal
+            :terms-of-use-url="termsOfUseUrl"
+            :privacy-policy-url="privacyPolicyUrl"
+          />
+        </div>
+    `,
+  };
+};