mirror of
https://github.com/documize/community.git
synced 2025-07-21 14:19:43 +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';
|
import Component from '@ember/component';
|
||||||
|
|
||||||
export default Component.extend(Modals, {
|
export default Component.extend(Modals, {
|
||||||
|
appMeta: service(),
|
||||||
documentService: service('document'),
|
documentService: service('document'),
|
||||||
sessionService: service('session'),
|
sessionService: service('session'),
|
||||||
router: service(),
|
router: service(),
|
||||||
|
|
|
||||||
|
|
@ -124,7 +124,7 @@ export default Component.extend({
|
||||||
let creds = { password: password, email: user.email };
|
let creds = { password: password, email: user.email };
|
||||||
|
|
||||||
self.get('session').authenticate('authenticator:documize', creds).then(() => {
|
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);
|
// var credentials = encodingUtil.Base64.encode(netUtil.getSubdomain() + ":" + user.email + ":" + password);
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,9 @@
|
||||||
//
|
//
|
||||||
// https://documize.com
|
// https://documize.com
|
||||||
|
|
||||||
|
import { inject as service } from '@ember/service';
|
||||||
import Controller from '@ember/controller';
|
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() {
|
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 {
|
.onboarding-container {
|
||||||
width: 100%;
|
p {
|
||||||
text-align: left;
|
margin: 1rem 0 5rem 0;
|
||||||
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;
|
font-size: 1.3rem;
|
||||||
color: $color-black-light-2;
|
font-weight: 500;
|
||||||
|
color: map-get($green-shades, 700);
|
||||||
}
|
}
|
||||||
|
|
||||||
p.note
|
.stage-1 {
|
||||||
{
|
display: block;
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rightbar
|
.stage-2 {
|
||||||
{
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
// }
|
|
||||||
|
|
||||||
/*********************************************/
|
|
||||||
/* Spinner */
|
|
||||||
/*********************************************/
|
|
||||||
#spinner-1, #spinner-2
|
|
||||||
{
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sk-spinner-wave.sk-spinner
|
.stage-3 {
|
||||||
{
|
display: none;
|
||||||
margin: 0 auto;
|
|
||||||
width: 170px;
|
|
||||||
height: 30px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 10px;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-spinner-wave div
|
p.wait {
|
||||||
{
|
margin: 5rem 0 0 0;
|
||||||
background-color: #12A936;
|
font-size: 2rem;
|
||||||
height: 100%;
|
font-weight: 600;
|
||||||
width: 6px;
|
color: map-get($yellow-shades, 800);
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<div class="document-meta">
|
<div class="document-meta">
|
||||||
|
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
|
||||||
<div class="title">VERSION</div>
|
<div class="title">VERSION</div>
|
||||||
{{#if (gt versions.length 0)}}
|
{{#if (gt versions.length 0)}}
|
||||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||||
|
|
@ -23,6 +24,7 @@
|
||||||
{{/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="title {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditStatus"}}>STATUS</div>
|
||||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "label-draft"}}
|
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "label-draft"}}
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,35 @@
|
||||||
<div class="onboarding-container">
|
<div class="onboarding-container">
|
||||||
<div class="sidebar">
|
|
||||||
<img class="logo img-responsive" src="/assets/img/logo-color.png">
|
|
||||||
<div class="stage-1">
|
<div class="stage-1">
|
||||||
<p>Let's set up your account</p>
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="stage-1-firstname">First name</label>
|
<label for="stage-1-firstname">First name</label>
|
||||||
<input id="stage-1-firstname" type="text" value="" class="form-control">
|
<input id="stage-1-firstname" type="text" value="" class="form-control form-control-lg">
|
||||||
<small class="form-text text-muted">Nickname or otherwise</small>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="stage-1-lastname">Last name</label>
|
<label for="stage-1-lastname">Last name</label>
|
||||||
<input id="stage-1-lastname" type="text" value="" class="form-control">
|
<input id="stage-1-lastname" type="text" value="" class="form-control form-control-lg">
|
||||||
<small class="form-text text-muted">Usually not the same as your firstname</small>
|
|
||||||
</div>
|
</div>
|
||||||
{{ui/ui-spacer size=300}}
|
{{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}}
|
{{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stage-2">
|
<div class="stage-2">
|
||||||
<p>Let's set up your account</p>
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="stage-2-password">Choose Password</label>
|
<label for="stage-2-password">Choose Password</label>
|
||||||
<input id="stage-2-password" type="password" value="" class="form-control">
|
<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>
|
<small class="form-text text-muted">Between 6 and 50 characters</small>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="stage-2-password-confirm">Confirm Password</label>
|
<label for="stage-2-password-confirm">Confirm Password</label>
|
||||||
<input id="stage-2-password-confirm" type="password" value="" class="form-control">
|
<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>
|
<small class="form-text text-muted">Re-type your chosen password</small>
|
||||||
</div>
|
</div>
|
||||||
{{ui/ui-spacer size=300}}
|
{{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}}
|
{{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stage-3">
|
<div class="stage-3">
|
||||||
<p>Please wait...</p>
|
<p class="wait">Please wait...</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue