From e69cc03c89793236338a6f53bb64e796bc9be7d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 6 May 2020 15:13:48 +0200 Subject: [PATCH] MOBILE-3414 login: Add onboarding slides --- scripts/langindex.json | 11 +++ src/assets/lang/en.json | 11 +++ src/config.json | 1 + src/core/login/lang/en.json | 10 ++ .../site-onboarding/site-onboarding.html | 48 ++++++++++ .../site-onboarding/site-onboarding.module.ts | 33 +++++++ .../site-onboarding/site-onboarding.scss | 49 ++++++++++ .../pages/site-onboarding/site-onboarding.ts | 96 +++++++++++++++++++ src/core/login/pages/site/site.ts | 16 ++++ src/core/login/pages/sites/sites.ts | 3 +- src/core/login/providers/helper.ts | 1 + src/lang/en.json | 1 + 12 files changed, 278 insertions(+), 2 deletions(-) create mode 100644 src/core/login/pages/site-onboarding/site-onboarding.html create mode 100644 src/core/login/pages/site-onboarding/site-onboarding.module.ts create mode 100644 src/core/login/pages/site-onboarding/site-onboarding.scss create mode 100644 src/core/login/pages/site-onboarding/site-onboarding.ts diff --git a/scripts/langindex.json b/scripts/langindex.json index bb5317983..6ca10682f 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -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", diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index 7fd738ba5..6325157f3 100644 --- a/src/assets/lang/en.json +++ b/src/assets/lang/en.json @@ -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", diff --git a/src/config.json b/src/config.json index 245bd890e..ad7afb0dd 100644 --- a/src/config.json +++ b/src/config.json @@ -93,6 +93,7 @@ "statusbarbgremotetheme": "#000000", "statusbarlighttextremotetheme": true, "enableanalytics": false, + "enableonboarding": true, "forceColorScheme": "", "webviewscheme": "moodleappfs" } diff --git a/src/core/login/lang/en.json b/src/core/login/lang/en.json index dc38595fd..12e1f3a3d 100644 --- a/src/core/login/lang/en.json +++ b/src/core/login/lang/en.json @@ -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", diff --git a/src/core/login/pages/site-onboarding/site-onboarding.html b/src/core/login/pages/site-onboarding/site-onboarding.html new file mode 100644 index 000000000..8c3e1ba5b --- /dev/null +++ b/src/core/login/pages/site-onboarding/site-onboarding.html @@ -0,0 +1,48 @@ + + + + + + + + + + + +
+ + + + + + + + + +
+ diff --git a/src/core/login/pages/site-onboarding/site-onboarding.module.ts b/src/core/login/pages/site-onboarding/site-onboarding.module.ts new file mode 100644 index 000000000..2e6312cd7 --- /dev/null +++ b/src/core/login/pages/site-onboarding/site-onboarding.module.ts @@ -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 {} diff --git a/src/core/login/pages/site-onboarding/site-onboarding.scss b/src/core/login/pages/site-onboarding/site-onboarding.scss new file mode 100644 index 000000000..dedaac785 --- /dev/null +++ b/src/core/login/pages/site-onboarding/site-onboarding.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/core/login/pages/site-onboarding/site-onboarding.ts b/src/core/login/pages/site-onboarding/site-onboarding.ts new file mode 100644 index 000000000..31d1ab17f --- /dev/null +++ b/src/core/login/pages/site-onboarding/site-onboarding.ts @@ -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); + } +} diff --git a/src/core/login/pages/site/site.ts b/src/core/login/pages/site/site.ts index eec309a4c..7f7fd6f06 100644 --- a/src/core/login/pages/site/site.ts +++ b/src/core/login/pages/site/site.ts @@ -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. * diff --git a/src/core/login/pages/sites/sites.ts b/src/core/login/pages/sites/sites.ts index d8cf372fc..900d472e0 100644 --- a/src/core/login/pages/sites/sites.ts +++ b/src/core/login/pages/sites/sites.ts @@ -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. diff --git a/src/core/login/providers/helper.ts b/src/core/login/providers/helper.ts index 1bd6a43f6..8fb8fe985 100644 --- a/src/core/login/providers/helper.ts +++ b/src/core/login/providers/helper.ts @@ -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 = ''; static FAQ_QRCODE_IMAGE_HTML = ''; diff --git a/src/lang/en.json b/src/lang/en.json index 8d279f23c..68f82b580 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -248,6 +248,7 @@ "sizekb": "KB", "sizemb": "MB", "sizetb": "TB", + "skip": "Skip", "sorry": "Sorry...", "sort": "Sort", "sortby": "Sort by",