mirror of
https://github.com/documize/community.git
synced 2025-07-21 06:09:42 +02:00
Improve new user share space onboarding process
This commit is contained in:
Harvey Kandola
parent
659eb99c0f
commit
60fbdfda11
8 changed files with 95 additions and 365 deletions
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
//
|
||||
// https://documize.com
|
||||
|
||||
import { inject as service } from '@ember/service';
|
||||
import Controller from '@ember/controller';
|
||||
|
||||
export default Controller.extend({});
|
||||
export default Controller.extend({
|
||||
appMeta: service(),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@ export default Route.extend(AuthenticatedRouteMixin, {
|
|||
},
|
||||
|
||||
activate() {
|
||||
this.get('browser').setTitle('Share Space');
|
||||
this.get('browser').setTitleWithoutSuffix('Welcome to Documize');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +1,20 @@
|
|||
{{onboard/share-folder serial=serial folderId=folderId slug=slug}}
|
||||
{{#layout/master-sidebar hideNavigation=true}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<div class="section">
|
||||
<div class="title">welcome to documize</div>
|
||||
<p>Let's set up your account and you started</p>
|
||||
</div>
|
||||
{{/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}}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
<div class="document-meta">
|
||||
<div class="title">VERSION</div>
|
||||
{{#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}}
|
||||
<div class="menu">
|
||||
<li class="item header">Select version to view</li>
|
||||
{{#each versions as |version|}}
|
||||
<a class="item" href="#" {{action "onSelectVersion" version}}>{{version.versionId}}</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/attach-popover}}
|
||||
{{/ui/ui-toolbar}}
|
||||
{{else}}
|
||||
{{#if permissions.spaceManage}}
|
||||
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
|
||||
<div class="title">VERSION</div>
|
||||
{{#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}}
|
||||
<div class="menu">
|
||||
<li class="item header">Select version to view</li>
|
||||
{{#each versions as |version|}}
|
||||
<a class="item" href="#" {{action "onSelectVersion" version}}>{{version.versionId}}</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/attach-popover}}
|
||||
{{/ui/ui-toolbar}}
|
||||
{{else}}
|
||||
<div class="empty">Not versioned</div>
|
||||
{{#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}}
|
||||
<div class="empty">Not versioned</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{ui/ui-spacer size=200}}
|
||||
{{ui/ui-spacer size=200}}
|
||||
{{/if}}
|
||||
|
||||
<div class="title {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditStatus"}}>STATUS</div>
|
||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "label-draft"}}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,35 @@
|
|||
<div class="onboarding-container">
|
||||
<div class="sidebar">
|
||||
<img class="logo img-responsive" src="/assets/img/logo-color.png">
|
||||
<div class="stage-1">
|
||||
<p>Let's set up your account</p>
|
||||
<div class="form-group">
|
||||
<label for="stage-1-firstname">Firstname</label>
|
||||
<input id="stage-1-firstname" type="text" value="" class="form-control">
|
||||
<small class="form-text text-muted">Nickname or otherwise</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="stage-1-lastname">Lastname</label>
|
||||
<input id="stage-1-lastname" type="text" value="" class="form-control">
|
||||
<small class="form-text text-muted">Usually not the same as your firstname</small>
|
||||
</div>
|
||||
{{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}}
|
||||
<div class="stage-1">
|
||||
<div class="form-group">
|
||||
<label for="stage-1-firstname">First name</label>
|
||||
<input id="stage-1-firstname" type="text" value="" class="form-control form-control-lg">
|
||||
</div>
|
||||
<div class="stage-2">
|
||||
<p>Let's set up your account</p>
|
||||
<div class="form-group">
|
||||
<label for="stage-2-password">Choose Password</label>
|
||||
<input id="stage-2-password" type="password" value="" class="form-control">
|
||||
<small class="form-text text-muted">Between 6 and 50 characters</small>
|
||||
<div class="form-group">
|
||||
<label for="stage-1-lastname">Last name</label>
|
||||
<input id="stage-1-lastname" type="text" value="" class="form-control form-control-lg">
|
||||
</div>
|
||||
{{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}}
|
||||
</div>
|
||||
|
||||
<div class="stage-2">
|
||||
<div class="form-group">
|
||||
<label for="stage-2-password">Choose Password</label>
|
||||
<input id="stage-2-password" type="password" value="" class="form-control form-control-lg">
|
||||
<small class="form-text text-muted">Between 6 and 50 characters</small>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="stage-2-password-confirm">Confirm Password</label>
|
||||
<input id="stage-2-password-confirm" type="password" value="" class="form-control">
|
||||
<small class="form-text text-muted">Re-type your chosen password</small>
|
||||
</div>
|
||||
{{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}}
|
||||
</div>
|
||||
<div class="stage-3">
|
||||
<p>Please wait...</p>
|
||||
<div class="form-group">
|
||||
<label for="stage-2-password-confirm">Confirm Password</label>
|
||||
<input id="stage-2-password-confirm" type="password" value="" class="form-control form-control-lg">
|
||||
<small class="form-text text-muted">Re-type your chosen password</small>
|
||||
</div>
|
||||
{{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}}
|
||||
</div>
|
||||
|
||||
<div class="stage-3">
|
||||
<p class="wait">Please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue