Skip to content

Commit

Permalink
MOBILE-4201 login: Login restyling
Browse files Browse the repository at this point in the history
  • Loading branch information
@crazyserver
crazyserver committed Sep 6, 2023
1 parent 5731733 commit d76e90c
Show file tree
Hide file tree
Showing 8 changed files with 221 additions and 152 deletions.
1 change: 0 additions & 1 deletion src/core/components/user-avatar/user-avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@
display: block;

img {
padding: 4px;
border-radius: 50%;
}
}
Expand Down
13 changes: 4 additions & 9 deletions src/core/features/login/components/login-methods/login-methods.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<div *ngIf="loginMethods.length || identityProviders.length || showScanQR"
class="ion-text-center ion-padding core-login-site-qrcode-separator">
{{ 'core.login.or' | translate }}
<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">
Expand All @@ -19,12 +18,8 @@
</ng-container>

<!-- Identity providers. -->
<ion-list *ngIf="identityProviders.length" class="ion-padding-top core-login-identity-providers">
<ion-item class="ion-text-wrap">
<ion-label>
<h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
</ion-label>
</ion-item>
<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">
Expand Down
2 changes: 1 addition & 1 deletion src/core/features/login/lang.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,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.",
Expand Down
122 changes: 96 additions & 26 deletions src/core/features/login/login.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -29,43 +25,73 @@
}
}

form .item.item-input {
margin-bottom: 16px;


.core-login-reconnect-warning {
margin: 0px 0px 32px 0px;
}

form .item,
form .item ion-label {
--background: var(--core-login-input-background);
--color: var(--core-login-input-color);
.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;
}
}

.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;
Expand Down Expand Up @@ -93,9 +119,31 @@
}
}

.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;
}
}
Expand All @@ -106,8 +154,30 @@
}
}

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

}
Expand Down
125 changes: 64 additions & 61 deletions src/core/features/login/pages/credentials/credentials.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,79 +20,82 @@ <h1>{{ 'core.login.login' | translate }}</h1>
</ion-header>
<ion-content class="ion-padding limited-width">
<core-loading [hideUntil]="pageLoaded">
<div class="ion-text-wrap ion-text-center ion-margin-bottom">
<div class="core-login-site-logo">
<!-- Show site logo or a default image. -->
<img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
<img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
<div class="ion-text-wrap ion-text-center core-login-info-box">
<div class="core-login-site">
<div class="core-login-site-logo">
<!-- Show site logo or a default image. -->
<img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
<img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
</div>

<h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
<core-format-text [text]="siteName" [filter]="false"></core-format-text>
</h2>
<p class="core-siteurl">{{siteUrl}}</p>
</div>

<h2 *ngIf="siteName" class="ion-padding core-sitename">
<core-format-text [text]="siteName" [filter]="false"></core-format-text>
</h2>
<p class="core-siteurl">{{siteUrl}}</p>
<core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3"
[supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
<div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
</core-login-exceeded-attempts>
</div>

<core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3" [supportConfig]="supportConfig"
[supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
<div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
</core-login-exceeded-attempts>

<form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
<ion-item>
<ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
<ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
</ion-input>
</ion-item>
<ion-item class="ion-margin-bottom">
<ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
<core-show-password name="password">
<ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go" required="true">
<div class="core-login-methods">
<form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
<ion-item>
<ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
<ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
</ion-input>
</core-show-password>
</ion-item>
<ion-button expand="block" type="submit" [disabled]="!credForm.valid" class="ion-margin core-login-login-button ion-text-wrap">
{{ 'core.login.loginbutton' | translate }}
</ion-button>
<!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
<input type="submit" class="core-submit-hidden-enter" />
</ion-item>
<ion-item class="ion-margin-bottom">
<ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
<core-show-password name="password">
<ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
required="true">
</ion-input>
</core-show-password>
</ion-item>
<ion-button expand="block" type="submit" [disabled]="!credForm.valid"
class="ion-margin core-login-login-button ion-text-wrap">
{{ 'core.login.loginbutton' | translate }}
</ion-button>
<!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
<input type="submit" class="core-submit-hidden-enter" />

<!-- Forgotten password option. -->
<ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
{{ 'core.login.forgotten' | translate }}
</ion-button>
</form>
<!-- Forgotten password option. -->
<ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
{{ 'core.login.forgotten' | translate }}
</ion-button>
</form>

<ng-container *ngIf="isBrowserSSO">
<ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
{{ 'core.login.loginbutton' | translate }}
<ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
</ion-button>
<p class="text-center core-login-inbrowser">{{ 'core.openinbrowser_description' | translate }}</p>
</ng-container>

<ng-container *ngIf="isBrowserSSO">
<ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-button ion-text-wrap">
{{ 'core.login.loginbutton' | translate }}
<ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
</ion-button>
<p class="text-center core-login-inbrowser">{{ 'core.openinbrowser_description' | translate }}</p>
</ng-container>

<core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
</div>

<core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
<div class="core-login-sign-up" *ngIf="canSignup || authInstructions">
<h2>{{ 'core.login.firsttime' | translate }}</h2>

<ion-list *ngIf="canSignup || authInstructions" class="ion-padding-top core-login-sign-up">
<ion-item class="ion-text-wrap">
<ion-label>
<h2 class="item-heading">{{ 'core.login.firsttime' | translate }}</h2>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="authInstructions">
<ion-item class="ion-text-wrap ion-no-padding core-login-instructions">
<ion-label>
<p>
<core-format-text [text]="authInstructions" [filter]="false"></core-format-text>
</p>
<core-format-text *ngIf="authInstructions" [text]="authInstructions" [filter]="false"></core-format-text>
</ion-label>
</ion-item>
<ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
{{ 'core.login.startsignup' | translate }}
</ion-button>
</ion-list>


</div>
<ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
{{ 'core.login.startsignup' | translate }}
</ion-button>
</core-loading>
</ion-content>
Loading

0 comments on commit d76e90c

Please sign in to comment.