Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-21 14:19:43 +02:00
Code Releases Activity

onboard new UX

Browse source
This commit is contained in:
Harvey Kandola 2017-11-27 19:33:42 +00:00
parent 102f0c3800
commit 2ba948bc82
4 changed files with 73 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

24
gui/app/components/onboard/share-folder.js
View file

@ -38,18 +38,22 @@ export default Component.extend({
$("#stage-1-next").off('click').on('click', function() {
if (!$("#stage-1-firstname").val()) {
$("#stage-1-firstname").focus();
$("#stage-1-firstname").addClass("error");
$("#stage-1-firstname").addClass("is-invalid");
$(".name-status").attr("src", "/assets/img/onboard/person-red.png");
return;
}
$("#stage-1-firstname").removeClass("is-invalid");
if (!$("#stage-1-lastname").val()) {
$("#stage-1-lastname").focus();
$("#stage-1-lastname").addClass("error");
$("#stage-1-lastname").addClass("is-invalid");
$(".name-status").attr("src", "/assets/img/onboard/person-red.png");
return;
}
$("#stage-1-lastname").removeClass("is-invalid");
self.set('processing', false);
$(".stage-1").fadeOut("slow", function() {
@ -66,9 +70,9 @@ export default Component.extend({
$("#stage-2-password-confirm").keyup(function() {
if ($("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50 ||
($("#stage-2-password").val() !== $("#stage-2-password-confirm").val())) {
$(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
// $(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
} else {
$(".password-status").attr("src", "/assets/img/onboard/lock-green.png");
// $(".password-status").attr("src", "/assets/img/onboard/lock-green.png");
}
});
});
@ -78,22 +82,26 @@ export default Component.extend({
$("#stage-2-next").off('click').on('click', function() {
if (!$("#stage-2-password").val() || $("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50) {
$("#stage-2-password").focus();
$("#stage-2-password").addClass("error");
$("#stage-2-password").addClass("is-invalid");
return;
}
$("#stage-2-password").removeClass("is-invalid");
if (!$("#stage-2-password-confirm").val()) {
$("#stage-2-password-confirm").focus();
$("#stage-2-password-confirm").addClass("error");
$("#stage-2-password-confirm").addClass("is-invalid");
return;
}
if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) {
$(".mismatch").show();
$(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
// $(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
return;
}
$("#stage-2-password-confirm").removeClass("is-invalid");
self.set('processing', false);
$(".stage-2").fadeOut("slow", function() {
@ -104,7 +112,7 @@ export default Component.extend({
self.set('processing', true);
$(".stage-3").fadeIn();
$("#spinner-1").show();
// $("#spinner-1").show();
var payload = '{ "Password": "' + $("#stage-2-password").val() + '", "Serial": "' + self.serial + '", "Firstname": "' + $("#stage-1-firstname").val() + '", "Lastname": "' + $("#stage-1-lastname").val() + '" }';
var password = $("#stage-2-password").val();

8
gui/app/pods/auth/share/template.hbs
View file

@ -1,7 +1 @@
<div class="onboarding-container">
<div class="container-fluid">
<div class="row">
{{onboard/share-folder serial=serial folderId=folderId slug=slug}}
</div>
</div>
</div>
{{onboard/share-folder serial=serial folderId=folderId slug=slug}}

16
gui/app/styles/view/page-onboard.scss
View file

@ -2,7 +2,8 @@
width: 100%;
text-align: left;
color: $color-off-black;
letter-spacing: 1px;
letter-spacing: 1px;
margin: 50px 0;
.stage-1
{
@ -16,7 +17,7 @@
img
{
margin: 100px 0 0 200px;
// margin: 100px 0 0 200px;
}
}
@ -39,7 +40,7 @@
img
{
margin: 100px 0 0 200px;
// margin: 100px 0 0 200px;
}
}
@ -144,10 +145,6 @@
.sidebar
{
margin-left: -15px;
padding: 100px 50px 50px 50px;
overflow: auto;
.logo
{
height: 62px;
@ -177,9 +174,8 @@
.rightbar
{
@extend .absolute-center;
height: 400px;
width: 500px;
margin-top: 200px;
height: 400px;
max-width: 500px;
background-color: #f6f9fc;
position: relative;
border-radius: 10px;

125
gui/app/templates/components/onboard/share-folder.hbs
View file

@ -1,81 +1,56 @@
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="sidebar">
<div class="onboarding-container">
<div class="container">
<div class="row">
<img class="logo" src="/assets/img/logo-color.png"/>
<div class="col col-sm-6">
<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>
<div class="form-group mt-5">
<div id="stage-1-next" class="btn btn-success">Next &rarr;</div>
</div>
</div>
<div class="stage-2">
<h2>Password</h2>
<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>
<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>
<div class="form-group mt-5">
<div id="stage-2-next" class="btn btn-success">Sign In &rarr;</div>
</div>
</div>
<div class="stage-3">
<h1>Please Wait</h1>
<p>Signing you in...</p>
</div>
</div>
</div>
<div class="stage-1">
<p>Let's set up your account</p>
<div class="input-control">
<label>Firstname</label>
<div class="tip">Nickname or otherwise</div>
<input id="stage-1-firstname" type="text" value="" />
</div>
<div class="input-control">
<label>Lastname</label>
<div class="tip">What the government calls you</div>
<input id="stage-1-lastname" type="text" value="" />
</div>
<div class="input-control">
<div id="stage-1-next" class="regular-button button-green">Next &rarr;</div>
</div>
</div>
<div class="stage-2">
<h2>Password</h2>
<div class="input-control">
<label>Password</label>
<div class="tip">Between 6 and 50 characters</div>
<input id="stage-2-password" type="password" value="" />
</div>
<div class="input-control">
<label>Confirm Password</label>
<div class="tip">Re-type your chosen password</div>
<input id="stage-2-password-confirm" type="password" value="" />
</div>
<div class="input-control">
<div id="stage-2-next" class="regular-button button-green">Sign In &rarr;</div>
</div>
</div>
<div class="stage-3">
<h1>Please Wait</h1>
<p>Signing you in...</p>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="rightbar">
<div class="stage-1">
<div class="account-name-preview">
<div class="nav-icon"></div>
<div class="title">DOCUMIZE</div>
<img class="name-status" src="/assets/img/onboard/person.png" />
</div>
</div>
<div class="stage-2">
<div class="account-name-preview">
<div class="nav-icon"></div>
<div class="title">DOCUMIZE</div>
<img class="password-status" src="/assets/img/onboard/lock.png" />
</div>
</div>
<div class="stage-3">
<div class="account-name-preview">
<div class="nav-icon"></div>
<div class="title"></div>
<div id="spinner-1" class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
</div>
</div>
</div>