From 60fbdfda11f50498437b4294461044ece60e2c47 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Fri, 11 Jan 2019 14:03:03 +0000 Subject: [PATCH] Improve new user share space onboarding process --- gui/app/components/document/sidebar-meta.js | 1 + gui/app/components/onboard/share-folder.js | 2 +- gui/app/pods/auth/share/controller.js | 9 +- gui/app/pods/auth/share/route.js | 2 +- gui/app/pods/auth/share/template.hbs | 21 +- gui/app/styles/core/view/onboard.scss | 326 +----------------- .../components/document/sidebar-meta.hbs | 40 ++- .../components/onboard/share-folder.hbs | 59 ++-- 8 files changed, 95 insertions(+), 365 deletions(-) diff --git a/gui/app/components/document/sidebar-meta.js b/gui/app/components/document/sidebar-meta.js index 2e0a2706..c6c73264 100644 --- a/gui/app/components/document/sidebar-meta.js +++ b/gui/app/components/document/sidebar-meta.js @@ -16,6 +16,7 @@ import Modals from '../../mixins/modal'; import Component from '@ember/component'; export default Component.extend(Modals, { + appMeta: service(), documentService: service('document'), sessionService: service('session'), router: service(), diff --git a/gui/app/components/onboard/share-folder.js b/gui/app/components/onboard/share-folder.js index 69c44c07..9243614f 100644 --- a/gui/app/components/onboard/share-folder.js +++ b/gui/app/components/onboard/share-folder.js @@ -124,7 +124,7 @@ export default Component.extend({ let creds = { password: password, email: user.email }; self.get('session').authenticate('authenticator:documize', creds).then(() => { - window.location.href = 's/' + self.folderId + "/" + self.slug; + window.location.href = '//' + window.location.host + '/s/' + self.folderId + "/" + self.slug; }); // var credentials = encodingUtil.Base64.encode(netUtil.getSubdomain() + ":" + user.email + ":" + password); diff --git a/gui/app/pods/auth/share/controller.js b/gui/app/pods/auth/share/controller.js index f0b1abcb..baeb5e49 100644 --- a/gui/app/pods/auth/share/controller.js +++ b/gui/app/pods/auth/share/controller.js @@ -1,14 +1,17 @@ // Copyright 2016 Documize Inc. . All rights reserved. // -// This software (Documize Community Edition) is licensed under +// This software (Documize Community Edition) is licensed under // GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html // // You can operate outside the AGPL restrictions by purchasing // Documize Enterprise Edition and obtaining a commercial license -// by contacting . +// by contacting . // // https://documize.com +import { inject as service } from '@ember/service'; import Controller from '@ember/controller'; -export default Controller.extend({}); \ No newline at end of file +export default Controller.extend({ + appMeta: service(), +}); diff --git a/gui/app/pods/auth/share/route.js b/gui/app/pods/auth/share/route.js index 00996c15..e46dfea5 100644 --- a/gui/app/pods/auth/share/route.js +++ b/gui/app/pods/auth/share/route.js @@ -37,6 +37,6 @@ export default Route.extend(AuthenticatedRouteMixin, { }, activate() { - this.get('browser').setTitle('Share Space'); + this.get('browser').setTitleWithoutSuffix('Welcome to Documize'); } }); diff --git a/gui/app/pods/auth/share/template.hbs b/gui/app/pods/auth/share/template.hbs index 0d92b902..dd34e50f 100644 --- a/gui/app/pods/auth/share/template.hbs +++ b/gui/app/pods/auth/share/template.hbs @@ -1 +1,20 @@ -{{onboard/share-folder serial=serial folderId=folderId slug=slug}} +{{#layout/master-sidebar hideNavigation=true}} + {{ui/ui-spacer size=300}} +
+
welcome to documize
+

Let's set up your account and you started

+
+{{/layout/master-sidebar}} + +{{#layout/master-content}} + {{layout/logo-heading + title=appMeta.title + desc=appMeta.message + logo=true}} + + {{onboard/share-folder + serial=serial + folderId=folderId + slug=slug}} +{{/layout/master-content}} + diff --git a/gui/app/styles/core/view/onboard.scss b/gui/app/styles/core/view/onboard.scss index ef7469d7..f68d4cbd 100644 --- a/gui/app/styles/core/view/onboard.scss +++ b/gui/app/styles/core/view/onboard.scss @@ -1,317 +1,27 @@ .onboarding-container { - width: 100%; - text-align: left; - color: $color-black-light-1; - letter-spacing: 1px; - margin: 50px 0; - - .stage-1 - { - display: block; - - .account-name-preview - { - color: #fff; - background: #b9b9b9 !important; - } - - img - { - // margin: 100px 0 0 200px; - } - } - - .stage-2 - { - display: none; - - .account-name-preview - { - color: #fff; - background: rgba(27,117,187,1); - background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1))); - background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 ); - } - - img - { - // margin: 100px 0 0 200px; - } - } - - .note - { - font-size: 0.9rem;; - font-style: italic; - color: map-get($gray-shades, 500); - } - - .mismatch - { - display: none; - color: map-get($red-shades, 700); - font-weight: 700; - } - - .stage-3 - { - @extend .stage-2; - - img - { - margin: 100px 0 0 200px; - } - - #spinner-1 - { - margin: 140px 0 0 170px; - } - } - - .stage-4 - { - @extend .stage-3; - - a - { - display: block; - font-size: 20px; - text-decoration: underline; - - &:hover - { - text-decoration: none; - } - } - } - - .stage-5 - { - @extend .stage-3; - - #spinner-1 - { - margin: 140px 0 0 170px; - } - } - - .account-name-preview - { - color: #fff; - height: 55px; - width: 100%; - font-family: Arial; - opacity: 0.8; - text-align: left; - background: rgba(27,117,187,1); - background: -moz-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,117,187,1)), color-stop(100%, rgba(73,155,234,1))); - background: -webkit-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: -o-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: -ms-linear-gradient(left, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - background: linear-gradient(to right, rgba(27,117,187,1) 0%, rgba(73,155,234,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1b75bb", endColorstr="#499bea", GradientType=1 ); - - .title - { - display: inline-block; - font-size: 16px; - text-transform: uppercase; - font-weight: 400; - margin: 18px 0 0 20px; - overflow: hidden; - white-space: nowrap; - width: 80%; - } - - .nav-icon - { - display: inline-block; - background-image: url(img/onboard/nav-icons.png); - background-repeat: no-repeat; - height: 25px; - width: 25px; - vertical-align: top; - z-index: 1; - background-position: 0 -75px; - margin: 15px 0 0 20px; - } - } - - .sidebar - { - .logo - { - height: 62px; - margin-bottom: 15px; - margin-top: 20px; - } - - h2 - { - font-size: 2rem;; - color: $color-black-light-2; - margin-bottom: 30px; - } - - p - { - font-size: 1.3rem; - color: $color-black-light-2; - } - - p.note - { - font-size: 0.9rem; - } - } - - .rightbar - { - @extend .absolute-center; - height: 400px; - max-width: 500px; - background-color: #f6f9fc; - position: relative; - border-radius: 10px; - background-color: #fff; - box-shadow: 0 6px 20px 0 rgba(30,71,101,.1); - } - - input[type='email'], input[type='text'], input[type='password'] { - // background-color: transparent; + p { + margin: 1rem 0 5rem 0; + font-size: 1.3rem; + font-weight: 500; + color: map-get($green-shades, 700); } - // input[type='submit'] - // { - // padding: 10px 15px; - // background: #12A936; - // border: 0; - // color: map-get($gray-shades, 100); - // border-radius: 3px; - // font-weight: 500; - // font-size: 16px; - // -webkit-appearance: none; - // vertical-align: bottom; - // height: auto; - // width: auto; - // display: inline-block; - // margin: 20px 0 0 0; - // letter-spacing: 0.7px; - // @include ease-in(); - // float: right; - // @extend .no-outline; - // @extend .no-select; - // - // &:hover - // { - // background: lighten(#12A936, 4%); - // } - // } - // - // input[type='email'], input[type='text'], input[type='password'] - // { - // padding: 5px 15px; - // background: white; - // border: 1px solid #e2e2e2; - // @include border-radius(3px); - // color: $color-black-light-1; - // font-weight: bold; - // font-size: 16px; - // -webkit-appearance: none; - // vertical-align: bottom; - // width: 90%; - // display: block; - // margin: 20px 0 10px 0; - // letter-spacing: 1px; - // } + .stage-1 { + display: block; + } - /*********************************************/ - /* Spinner */ - /*********************************************/ - #spinner-1, #spinner-2 - { + .stage-2 { display: none; } - .sk-spinner-wave.sk-spinner - { - margin: 0 auto; - width: 170px; - height: 30px; - text-align: center; - font-size: 10px; - display: inline-block; - margin-bottom: 20px; - } - - .sk-spinner-wave div - { - background-color: #12A936; - height: 100%; - width: 6px; - display: inline-block; - -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; - animation: sk-waveStretchDelay 1.2s infinite ease-in-out; - } - - .sk-spinner-wave .sk-rect2 - { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; - } - - .sk-spinner-wave .sk-rect3 - { - -webkit-animation-delay: -1s; - animation-delay: -1s; - } - - .sk-spinner-wave .sk-rect4 - { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; - } - - .sk-spinner-wave .sk-rect5 - { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; - } - - @-webkit-keyframes sk-waveStretchDelay - { - 0%, 40%, 100% - { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); - } - - 20% - { - -webkit-transform: scaleY(1); - transform: scaleY(1); - } - } - - @keyframes sk-waveStretchDelay - { - 0%, 40%, 100% - { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); - } - - 20% - { - -webkit-transform: scaleY(1); - transform: scaleY(1); - } - } + .stage-3 { + display: none; + p.wait { + margin: 5rem 0 0 0; + font-size: 2rem; + font-weight: 600; + color: map-get($yellow-shades, 800); + } + } } diff --git a/gui/app/templates/components/document/sidebar-meta.hbs b/gui/app/templates/components/document/sidebar-meta.hbs index 9a3dda45..c9bea0dd 100644 --- a/gui/app/templates/components/document/sidebar-meta.hbs +++ b/gui/app/templates/components/document/sidebar-meta.hbs @@ -1,28 +1,30 @@
-
VERSION
- {{#if (gt versions.length 0)}} - {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}} - {{ui/ui-toolbar-label label=document.versionId color=constants.Color.Gray}} - {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} -
-
  • Select version to view
    • - {{#each versions as |version|}} - {{version.versionId}} - {{/each}} -
    - {{/attach-popover}} - {{/ui/ui-toolbar}} - {{else}} - {{#if permissions.spaceManage}} + {{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}} +
    VERSION
    + {{#if (gt versions.length 0)}} {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}} - {{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Gray linkTo="document.settings"}} + {{ui/ui-toolbar-label label=document.versionId color=constants.Color.Gray}} + {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} +
    +
  • Select version to view
    • + {{#each versions as |version|}} + {{version.versionId}} + {{/each}} +
    + {{/attach-popover}} {{/ui/ui-toolbar}} {{else}} -
    Not versioned
    + {{#if permissions.spaceManage}} + {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}} + {{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Gray linkTo="document.settings"}} + {{/ui/ui-toolbar}} + {{else}} +
    Not versioned
    + {{/if}} {{/if}} - {{/if}} - {{ui/ui-spacer size=200}} + {{ui/ui-spacer size=200}} + {{/if}}
    STATUS
    -
    - -
    -

    Let's set up your account

    -
    - - - Nickname or otherwise -
    -
    - - - Usually not the same as your firstname -
    - {{ui/ui-spacer size=300}} - {{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}} +
    +
    + +
    -
    -

    Let's set up your account

    -
    - - - Between 6 and 50 characters +
    + + +
    + {{ui/ui-spacer size=300}} + {{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}} +
    + +
    +
    + + + Between 6 and 50 characters -
    -
    - - - Re-type your chosen password -
    - {{ui/ui-spacer size=300}} - {{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}}
    -
    -

    Please wait...

    +
    + + + Re-type your chosen password
    + {{ui/ui-spacer size=300}} + {{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}} +
    + +
    +

    Please wait...