Merge pull request #2366 from crazyserver/MOBILE-3414

MOBILE-3414 login: Add onboarding slides
main
Juan Leyva 2020-05-07 13:47:40 +02:00 committed by GitHub
commit bf94a13d2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 278 additions and 2 deletions

View File

@ -1755,6 +1755,16 @@
"core.login.mustconfirm": "moodle",
"core.login.newaccount": "moodle",
"core.login.notloggedin": "local_moodlemobileapp",
"core.login.onboardingcreatemanagecourses": "local_moodlemobileapp",
"core.login.onboardingenrolmanagestudents": "local_moodlemobileapp",
"core.login.onboardinggetstarted": "local_moodlemobileapp",
"core.login.onboardingialreadyhaveasite": "local_moodlemobileapp",
"core.login.onboardingimalearner": "local_moodlemobileapp",
"core.login.onboardingimaneducator": "local_moodlemobileapp",
"core.login.onboardingineedasite": "local_moodlemobileapp",
"core.login.onboardingprovidefeedback": "local_moodlemobileapp",
"core.login.onboardingtoconnect": "local_moodlemobileapp",
"core.login.onboardingwelcome": "local_moodlemobileapp",
"core.login.or": "local_moodlemobileapp",
"core.login.password": "moodle",
"core.login.passwordforgotten": "moodle",
@ -2020,6 +2030,7 @@
"core.sizekb": "moodle",
"core.sizemb": "moodle",
"core.sizetb": "local_moodlemobileapp",
"core.skip": "tool_usertours",
"core.sorry": "local_moodlemobileapp",
"core.sort": "moodle",
"core.sortby": "moodle",

View File

@ -1755,6 +1755,16 @@
"core.login.mustconfirm": "You need to confirm your account",
"core.login.newaccount": "New account",
"core.login.notloggedin": "You need to be logged in.",
"core.login.onboardingcreatemanagecourses": "Create & manage your courses",
"core.login.onboardingenrolmanagestudents": "Enrol & manage your students",
"core.login.onboardinggetstarted": "Get started with Moodle",
"core.login.onboardingialreadyhaveasite": "I already have a Moodle site",
"core.login.onboardingimalearner": "I'm a learner",
"core.login.onboardingimaneducator": "I'm an educator",
"core.login.onboardingineedasite": "I need a Moodle site",
"core.login.onboardingprovidefeedback": "Provide timely feedback",
"core.login.onboardingtoconnect": "To connect to the Moodle App you'll need a Moodle site",
"core.login.onboardingwelcome": "Welcome to the Moodle App!",
"core.login.or": "OR",
"core.login.password": "Password",
"core.login.passwordforgotten": "Forgotten password",
@ -2020,6 +2030,7 @@
"core.sizekb": "KB",
"core.sizemb": "MB",
"core.sizetb": "TB",
"core.skip": "Skip",
"core.sorry": "Sorry...",
"core.sort": "Sort",
"core.sortby": "Sort by",

View File

@ -93,6 +93,7 @@
"statusbarbgremotetheme": "#000000",
"statusbarlighttextremotetheme": true,
"enableanalytics": false,
"enableonboarding": true,
"forceColorScheme": "",
"webviewscheme": "moodleappfs",
"appstores": {

View File

@ -66,6 +66,16 @@
"mustconfirm": "You need to confirm your account",
"newaccount": "New account",
"notloggedin": "You need to be logged in.",
"onboardingcreatemanagecourses": "Create & manage your courses",
"onboardingenrolmanagestudents": "Enrol & manage your students",
"onboardinggetstarted": "Get started with Moodle",
"onboardingialreadyhaveasite": "I already have a Moodle site",
"onboardingimalearner": "I'm a learner",
"onboardingimaneducator": "I'm an educator",
"onboardingineedasite": "I need a Moodle site",
"onboardingprovidefeedback": "Provide timely feedback",
"onboardingtoconnect": "To connect to the Moodle App you'll need a Moodle site",
"onboardingwelcome": "Welcome to the Moodle App!",
"or": "OR",
"password": "Password",
"passwordforgotten": "Forgotten password",

View File

@ -0,0 +1,48 @@
<ion-header>
<ion-navbar>
<ion-buttons step>
<button ion-button icon-only (click)="previous($$event)" [attr.aria-label]="'core.back' | translate">
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button (click)="skip($event)">
{{'core.skip' | translate}}
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<div>
<div text-center padding class="core-login-site-logo">
<img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation">
</div>
<h3 class="core-login-onboarding-step">
{{'core.login.onboardingwelcome' | translate}}
</h3>
<div *ngIf="step == 0" class="core-login-onboarding-step">
<a ion-button block (click)="skip($event)" margin-bottom color="light">{{'core.login.onboardingimalearner' | translate}}</a>
<a ion-button block (click)="next($event)" margin-bottom color="light">{{'core.login.onboardingimaneducator' | translate}}</a>
</div>
<div *ngIf="step == 1" class="core-login-onboarding-step">
<p class="core-login-onboarding-text">
{{ 'core.login.onboardingtoconnect' | translate }}
</p>
<a ion-button block (click)="skip($event)" margin-bottom color="light">{{ 'core.login.onboardingialreadyhaveasite' | translate }}</a>
<a ion-button block (click)="next($event)" margin-bottom>{{ 'core.login.onboardingineedasite' | translate }}</a>
</div>
<div *ngIf="step == 2" class="core-login-onboarding-step">
<ul class="core-login-onboarding-text">
<li><core-icon name="fa-check-circle-o"></core-icon> {{ 'core.login.onboardingcreatemanagecourses' | translate }}</li>
<li><core-icon name="fa-check-circle-o"></core-icon> {{ 'core.login.onboardingenrolmanagestudents' | translate }}</li>
<li><core-icon name="fa-check-circle-o"></core-icon> {{ 'core.login.onboardingprovidefeedback' | translate }}</li>
</ul>
<a ion-button block (click)="gotoWeb($event)" margin-bottom>{{ 'core.login.onboardinggetstarted' | translate }}</a>
</div>
</div>
</ion-content>

View File

@ -0,0 +1,33 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CoreLoginSiteOnboardingPage } from './site-onboarding';
import { TranslateModule } from '@ngx-translate/core';
import { CoreDirectivesModule } from '@directives/directives.module';
import { CoreComponentsModule } from '@components/components.module';
@NgModule({
declarations: [
CoreLoginSiteOnboardingPage
],
imports: [
CoreComponentsModule,
CoreDirectivesModule,
IonicPageModule.forChild(CoreLoginSiteOnboardingPage),
TranslateModule.forChild(),
]
})
export class CoreLoginSiteOnboardingPageModule {}

View File

@ -0,0 +1,49 @@
page-core-login-site-onboarding {
.content {
background-color: $white;
}
.core-login-site-logo {
margin-top: 5px;
margin-bottom: 5px;
img {
width: 90%;
max-width: 300px;
}
}
h3 {
font-size: 1.3em;
}
.core-login-onboarding-step {
padding: 10px 20px;
text-align: center;
@include media-breakpoint-up(md) {
max-width: 80%;
}
margin: 0 auto;
p {
font-size: 1.1em;
margin-bottom: 10px;
}
ul {
font-size: 1.1em;
margin-bottom: 30px;
list-style-type: none;
@include text-align('start');
@include padding-horizontal(10px, null);
li {
margin-bottom: 10px;
}
}
.button-block {
margin-top: 20px;
}
}
}

View File

@ -0,0 +1,96 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component } from '@angular/core';
import { IonicPage, ViewController } from 'ionic-angular';
import { CoreUtils } from '@providers/utils/utils';
import { CoreConfig } from '@providers/config';
import { CoreLoginHelperProvider } from '../../providers/helper';
/**
* Component that displays onboarding help regarding the CoreLoginSitePage.
*/
@IonicPage({ segment: 'core-login-site-onboarding' })
@Component({
selector: 'page-core-login-site-onboarding',
templateUrl: 'site-onboarding.html',
})
export class CoreLoginSiteOnboardingPage {
step = 0;
constructor(
protected viewCtrl: ViewController,
) {}
/**
* Go to next step.
*
* @param e Click event.
*/
next(e: Event): void {
e.stopPropagation();
this.step++;
}
/**
* Go to previous step.
*
* @param e Click event.
*/
previous(e: Event): void {
e.stopPropagation();
if (this.step == 0) {
this.viewCtrl.dismiss();
} else {
this.step--;
}
}
/**
* Close modal.
*
* @param e Click event.
*/
skip(e: Event): void {
e.stopPropagation();
this.saveOnboardingDone();
this.viewCtrl.dismiss();
}
/**
* Create a site.
*
* @param e Click event.
*/
gotoWeb(e: Event): void {
e.stopPropagation();
this.saveOnboardingDone();
CoreUtils.instance.openInBrowser('https://moodle.com/getstarted/');
this.viewCtrl.dismiss();
}
/**
* Saves the onboarding has finished.
*/
protected saveOnboardingDone(): void {
CoreConfig.instance.set(CoreLoginHelperProvider.ONBOARDING_DONE, 1);
}
}

View File

@ -22,6 +22,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreTextUtilsProvider } from '@providers/utils/text';
import { CoreUrlUtilsProvider } from '@providers/utils/url';
import { CoreUtilsProvider } from '@providers/utils/utils';
import { CoreConfig } from '@providers/config';
import { CoreConfigConstants } from '../../../../configconstants';
import { CoreLoginHelperProvider } from '../../providers/helper';
import { FormBuilder, FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
@ -93,6 +94,13 @@ export class CoreLoginSitePage {
}
this.filteredSites = this.fixedSites;
url = this.fixedSites[0].url;
} else if (CoreConfigConstants.enableonboarding && !this.appProvider.isIOS() && !this.appProvider.isMac()) {
CoreConfig.instance.get(CoreLoginHelperProvider.ONBOARDING_DONE, false).then((onboardingDone) => {
if (!onboardingDone) {
// Check onboarding.
this.showOnboarding();
}
});
}
this.siteForm = fb.group({
@ -241,6 +249,14 @@ export class CoreLoginSitePage {
modal.present();
}
/**
* Show an onboarding modal.
*/
showOnboarding(): void {
const modal = this.modalCtrl.create('CoreLoginSiteOnboardingPage', {}, { cssClass: 'core-modal-fullscreen' });
modal.present();
}
/**
* Show an error that aims people to solve the issue.
*

View File

@ -103,8 +103,7 @@ export class CoreLoginSitesPage {
});
}).catch((error) => {
this.logger.error('Error deleting site ' + site.id, error);
this.domUtils.showErrorModalDefault(error, 'Delete site failed.');
this.domUtils.showErrorModal('core.login.errordeletesite', true);
this.domUtils.showErrorModalDefault(error, 'core.login.errordeletesite', true);
});
}).catch(() => {
// User cancelled, nothing to do.

View File

@ -75,6 +75,7 @@ export interface CoreLoginSSOData {
@Injectable()
export class CoreLoginHelperProvider {
static OPEN_COURSE = 'open_course';
static ONBOARDING_DONE = 'onboarding_done';
static FAQ_URL_IMAGE_HTML = '<img src="assets/img/login/faq_url.png" role="presentation">';
static FAQ_QRCODE_IMAGE_HTML = '<img src="assets/img/login/faq_qrcode.png" role="presentation">';

View File

@ -248,6 +248,7 @@
"sizekb": "KB",
"sizemb": "MB",
"sizetb": "TB",
"skip": "Skip",
"sorry": "Sorry...",
"sort": "Sort",
"sortby": "Sort by",