Merge pull request #3776 from crazyserver/MOBILE-4201

Mobile 4201

moodle.config.json

@@ -90,7 +90,6 @@
     "multisitesdisplay": "",
     "sitefindersettings": {},
     "onlyallowlistedsites": false,
-    "skipssoconfirmation": false,
     "forcedefaultlanguage": false,
     "privacypolicy": "https://moodle.net/moodle-app-privacy/",
     "notificoncolor": "#f98012",

scripts/langindex.json

@@ -2085,10 +2085,8 @@
   "core.login.invalidurl": "scorm",
   "core.login.invalidvaluemax": "local_moodlemobileapp",
   "core.login.invalidvaluemin": "local_moodlemobileapp",
-  "core.login.loggedoutssodescription": "local_moodlemobileapp",
   "core.login.login": "moodle",
   "core.login.loginbutton": "local_moodlemobileapp",
-  "core.login.logininsiterequired": "local_moodlemobileapp",
   "core.login.loginsteps": "moodle",
   "core.login.missingemail": "moodle",
   "core.login.missingfirstname": "moodle",
@@ -2124,7 +2122,6 @@
   "core.login.recaptchaincorrect": "local_moodlemobileapp",
   "core.login.reconnect": "local_moodlemobileapp",
   "core.login.reconnecthelp": "local_moodlemobileapp",
-  "core.login.reconnectssodescription": "local_moodlemobileapp",
   "core.login.reconnectsupportsubject": "local_moodlemobileapp",
   "core.login.reconnecttosite": "local_moodlemobileapp",
   "core.login.removeaccount": "local_moodlemobileapp",
@@ -2231,6 +2228,7 @@
   "core.openfile": "local_moodlemobileapp",
   "core.openfullimage": "local_moodlemobileapp",
   "core.openinbrowser": "local_moodlemobileapp",
+  "core.openinbrowserdescription": "local_moodlemobileapp",
   "core.openmodinbrowser": "local_moodlemobileapp",
   "core.opensecurityquestion": "local_moodlemobileapp",
   "core.opensettings": "local_moodlemobileapp",

src/core/components/user-avatar/user-avatar.scss

@@ -45,7 +45,6 @@
         display: block;
 
         img {
-            padding: 4px;
             border-radius: 50%;
         }
     }

src/core/features/login/components/login-methods/login-methods.html

@@ -1,7 +1,28 @@
-<ng-container *ngIf="loginMethods?.length">
+<div *ngIf="loginMethods.length || identityProviders.length || showScanQR" class="ion-text-center ion-padding core-login-methods-separator">
+    <span>{{ 'core.login.or' | translate }}</span>
+</div>
+
+<div class="core-login-methods" *ngIf="loginMethods.length">
     <ion-button [fill]="'outline'" class="ion-text-wrap ion-margin" *ngFor="let method of loginMethods" (click)="method.action()"
         [attr.aria-label]="method.name" expand="block">
         <ion-icon *ngIf="method.icon" [name]="method.icon" slot="start"></ion-icon>
         <ion-label>{{ method.name }}</ion-label>
     </ion-button>
+</div>
+
+<ng-container *ngIf="showScanQR">
+    <ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode" (click)="showInstructionsAndScanQR()">
+        <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
+        {{ 'core.scanqr' | translate }}
+    </ion-button>
 </ng-container>
+
+<!-- Identity providers. -->
+<ion-list *ngIf="identityProviders.length" class="core-login-identity-providers">
+    <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
+    <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
+        (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
+        <img *ngIf="provider.iconurl" [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true">
+        <ion-label>{{ provider.name }}</ion-label>
+    </ion-button>
+</ion-list>

src/core/features/login/components/login-methods/login-methods.ts

@@ -12,9 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { CoreSiteIdentityProvider, CoreSitePublicConfigResponse } from '@classes/site';
 import { CoreLoginHelper, CoreLoginMethod } from '@features/login/services/login-helper';
+import { CoreRedirectPayload } from '@services/navigator';
 import { CoreSites } from '@services/sites';
+import { CoreDomUtils } from '@services/utils/dom';
 
 @Component({
     selector: 'core-login-methods',
@@ -23,18 +26,75 @@ import { CoreSites } from '@services/sites';
 })
 export class CoreLoginMethodsComponent implements OnInit {
 
-    loginMethods?: CoreLoginMethod[];
+    @Input() reconnect = false;
+    @Input() siteUrl = '';
+    @Input() siteConfig?: CoreSitePublicConfigResponse;
+    @Input() redirectData?: CoreRedirectPayload;
+
+    showScanQR  = false;
+    loginMethods: CoreLoginMethod[] = [];
+    identityProviders: CoreSiteIdentityProvider[] = [];
 
     /**
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        this.loginMethods = await CoreLoginHelper.getLoginMethods();
-        const currentSite = CoreSites.getCurrentSite();
-        const defaultMethod = await CoreLoginHelper.getDefaultLoginMethod();
+        if (this.reconnect) {
+            this.loginMethods = await CoreLoginHelper.getLoginMethods();
+
+            const currentSite = CoreSites.getCurrentSite();
+            const defaultMethod = await CoreLoginHelper.getDefaultLoginMethod();
+            if (currentSite?.isLoggedOut() && defaultMethod) {
+                await defaultMethod.action();
+            }
+        }
+
+        if (this.siteConfig) {
+            const disabledFeatures = CoreLoginHelper.getDisabledFeatures(this.siteConfig);
+
+            this.identityProviders = CoreLoginHelper.getValidIdentityProviders(this.siteConfig, disabledFeatures);
+
+            if (this.reconnect) {
+                this.showScanQR = CoreLoginHelper.displayQRInSiteScreen();
+            }
+
+            // If still false or credentials screen.
+            if (!this.reconnect || !this.showScanQR) {
+                this.showScanQR = await CoreLoginHelper.displayQRInCredentialsScreen(this.siteConfig.tool_mobile_qrcodetype);
+            }
+        }
+    }
+
+    /**
+     * Show instructions and scan QR code.
+     *
+     * @returns Promise resolved when done.
+     */
+    async showInstructionsAndScanQR(): Promise<void> {
+        try {
+            await CoreLoginHelper.showScanQRInstructions();
+
+            await CoreLoginHelper.scanQR();
+        } catch {
+            // Ignore errors.
+        }
+    }
+
+    /**
+     * An OAuth button was clicked.
+     *
+     * @param provider The provider that was clicked.
+     */
+    oauthClicked(provider: CoreSiteIdentityProvider): void {
+        const result = CoreLoginHelper.openBrowserForOAuthLogin(
+            this.siteUrl,
+            provider,
+            this.siteConfig?.launchurl,
+            this.redirectData,
+        );
 
-        if (currentSite?.isLoggedOut() && defaultMethod) {
-            await defaultMethod.action();
+        if (!result) {
+            CoreDomUtils.showErrorModal('Invalid data.');
         }
     }
 

src/core/features/login/components/sites/sites.html

@@ -1,8 +1,8 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.back' | translate">
-                <ion-icon name="arrow-back" slot="icon-only" aria-hidden="true"></ion-icon>
+            <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.back' | translate" class="ion-back-button">
+                <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
 

src/core/features/login/lang.json

@@ -64,10 +64,8 @@
     "invalidurl": "Invalid URL specified",
     "invalidvaluemax": "The maximum value is {{$a}}",
     "invalidvaluemin": "The minimum value is {{$a}}",
-    "loggedoutssodescription": "You have to authenticate again. You need to log in to the site in a browser window.",
     "login": "Log in",
     "loginbutton": "Log in",
-    "logininsiterequired": "You need to log in to the site in a browser window.",
     "loginsteps": "For full access to this site, you first need to create an account.",
     "missingemail": "Missing email address",
     "missingfirstname": "Missing given name",
@@ -86,7 +84,7 @@
     "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",
+    "or": "Or",
     "password": "Password",
     "passwordforgotten": "Forgotten password",
     "passwordforgotteninstructions2": "To reset your password, submit your username or your email address below. If we can find you in the database, an email will be sent to your email address, with instructions how to get access again.",
@@ -103,7 +101,6 @@
     "recaptchaincorrect": "The security question answer is incorrect.",
     "reconnect": "Reconnect",
     "reconnecthelp": "If you have problems reconnecting, try again later or contact your school or learning provider.",
-    "reconnectssodescription": "Your session has expired. Please log in again in a browser window to continue.",
     "reconnectsupportsubject": "Need help reconnecting",
     "reconnecttosite": "Reconnect to the site",
     "removeaccount": "Remove account",

src/core/features/login/login.scss

@@ -16,10 +16,6 @@
         }
     }
 
-    form div {
-        color: var(--color);
-    }
-
     ion-button.core-button-as-link {
         --color: var(--core-login-text-color);
         text-decoration-color: var(--core-login-text-color);
@@ -29,56 +25,73 @@
         }
     }
 
-    form .item.item-input,
-    form .core-username.item {
-        margin-bottom: 16px;
-    }
 
-    form .core-username.ios {
-        --inner-border-width: 0 0 1px 0;
-    }
 
-    form .item,
-    form .item ion-label {
-        --background: var(--core-login-input-background);
-        --color: var(--core-login-input-color);
+    .core-login-reconnect-warning {
+        margin: 0px 0px 32px 0px;
     }
 
-    form .core-username.item p {
-        font-size: 16px;
-    }
+    .core-login-info-box {
+        margin-bottom: 32px;
+
+        .core-login-site {
+            .core-login-site-logo {
+                width: 90%;
+                max-width: 300px;
+                margin: 0px auto;
+
+                img {
+                    max-width: 100%;
+                    max-height: 104px;
+                }
+            }
+
+            .core-sitename {
+                font-size: 1.2rem;
+                margin-bottom: 8px;
+            }
+
+            .core-siteurl {
+                margin-top: 8px;
+                margin-bottom: 0px;
+            }
+        }
 
-    form .core-username.item.md p {
-        @include padding-horizontal(8px, null);
+        .core-login-site + .core-login-user {
+            margin-top: 24px;
+        }
     }
 
-    .core-login-site-logo img {
-        max-width: 100%;
+    core-user-avatar.large-avatar {
+        --core-avatar-size: var(--core-large-avatar-size);
     }
 
-    .core-sitename + .core-siteurl {
-        margin-top: 0;
+    .core-login-fullname {
+        margin-top: 8px;
+        margin-bottom: 0px;
     }
 
-    .core-sitename {
-        font-size: 1.2rem;
-        margin-bottom: 0;
+    .core-login-methods {
+        form .item.item-input {
+            margin-bottom: 16px;
+        }
+
+        form .item,
+        form .item ion-label {
+            --background: var(--core-login-input-background);
+            --color: var(--core-login-input-color);
+        }
     }
 
-    .core-login-site-logo {
-        width: 90%;
-        max-width: 300px;
-        margin: 5px auto;
+    ion-button {
+        margin-left: 0px;
+        margin-right: 0px;
     }
 
     .core-login-forgotten-password {
         text-decoration: underline;
     }
 
-    core-user-avatar.large-avatar {
-        --core-avatar-size: var(--core-large-avatar-size);
-    }
-
     @if ($core-login-hide-forgot-password) {
         .core-login-forgotten-password {
             display: none;
@@ -106,12 +119,61 @@
         }
     }
 
+    .core-login-methods-separator {
+        position: relative;
+        padding: 8px 0;
+
+        span {
+            background: var(--core-login-background);
+            padding: 0 8px;
+        }
+
+        &::before {
+            height: 1px;
+            position: absolute;
+            top: 50%;
+            left: 0px;
+            right: 0px;
+            border-bottom: 1px solid var(--gray-300);
+            content: "";
+            z-index: -1;
+        }
+    }
+
+
     @if ($core-login-hide-qrcode) {
         .core-login-site-qrcode,
-        .core-login-site-qrcode-separator {
+        .core-login-methods-separator {
             display: none;
         }
     }
+
+    .core-login-login-button {
+        margin-top: 32px;
+    }
+
+    .core-login-login-inbrowser-button {
+        margin-bottom: 8px;
+    }
+
+    p.core-login-inbrowser {
+        font-size: 12px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+
+    .core-login-sign-up {
+        margin-top: 8px;
+        border-top: 1px solid var(--gray-300);
+    }
+
+    .core-login-identity-providers h2,
+    .core-login-sign-up h2 {
+        margin-top: 16px;
+        margin-bottom: 8px;
+        font-size: 16px;
+    }
+
 }
 
 :host-context(html.dark) {