Merge pull request #2366 from crazyserver/MOBILE-3414

MOBILE-3414 login: Add onboarding slides

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",

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",

src/config.json

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

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",

src/core/login/pages/site-onboarding/site-onboarding.html

@@ -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>

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 {}

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;
+        }
+    }
+}

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);
+    }
+}

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.
      *

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.

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 = '<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">';
 

src/lang/en.json

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