Merge pull request #1 from haverchuck/angular-ui-ionic-dn

Angular ui ionic dn
aws-amplify · Aug 22, 2018 · df71735 · df71735
2 parents 166f56d + 48279c5
commit df71735
Show file tree

Hide file tree

Showing 13 changed files with 511 additions and 299 deletions.
diff --git a/packages/aws-amplify-angular/ionic.scss → packages/aws-amplify-angular/ionic.css b/packages/aws-amplify-angular/ionic.scss → packages/aws-amplify-angular/ionic.css
@@ -70,4 +70,47 @@
   --ion-color-dark-contrast-rgb: 255,255,255;
   --ion-color-dark-shade: #1e1e1e;
   --ion-color-dark-tint: #383838;
-}
+}
+
+.amplify-input-label-ionic {
+  height: 18px;
+  width: 280.32px;
+  color: #152939;
+  font-family: "Amazon Ember";
+  font-size: 14px;
+  letter-spacing: 0.4px;
+  line-height: 18px;
+}
+
+.amplify-input-ionic {
+  padding-top: 16px;
+  padding-bottom: 17px;
+  padding-right: 8px;
+  padding-bottom: 8px;
+}
+
+.amplify-authenticator-ionic {
+  box-shadow: none !important;
+}
+
+.amplify-form-header-ionic {
+  width: 275px !important;
+  font-family: "Amazon Ember";
+}
+
+.amplify-phone-ionic-selection {
+  min-width: 100px;
+};
+
+.amplify-phone-ionic-input {
+  max-width: 264px;
+}
+
+.amplify-interactions-container-ionic {
+  width: 430px !important;
+}
+
+.amplify-form-input-interactions-ionic {
+  width: 100%;
+  margin: 0.5em 0;
+}
diff --git a/packages/aws-amplify-angular/src/aws-amplify-ionic-module.ts b/packages/aws-amplify-angular/src/aws-amplify-ionic-module.ts
@@ -39,7 +39,7 @@ const components = [
   entryComponents: [
     ...components
   ],
-  providers: [ AmplifyService ],
+  providers: [ AmplifyService],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   exports: [
     ...components

diff --git a/...plify-angular/src/components/authenticator/authenticator/authenticator.component.ionic.ts b/...plify-angular/src/components/authenticator/authenticator/authenticator.component.ionic.ts
@@ -4,48 +4,44 @@ import { AmplifyService, AuthState } from '../../../providers';
 import { AuthenticatorComponentCore } from './authenticator.component.core';
 
 const template = `
-<div class="amplify-ionic-authenticator">
-  <div>
-    <amplify-auth-sign-in-ionic [authState]="authState"></amplify-auth-sign-in-ionic>
-  </div>
-  <div>
-    <amplify-auth-sign-up-ionic
-    *ngIf="!shouldHide('SignUp')"
-    [authState]="authState"
-    ></amplify-auth-sign-up-ionic>
-  </div>
-  <div>
-    <amplify-auth-confirm-sign-up-ionic
-    *ngIf="!shouldHide('ConfirmSignUp')"
-    [authState]="authState"
-    ></amplify-auth-confirm-sign-up-ionic>
-  </div>
-  <div>
-    <amplify-auth-confirm-sign-in-ionic
-    *ngIf="!shouldHide('ConfirmSignIn')"
-    [authState]="authState"
-    ></amplify-auth-confirm-sign-in-ionic>
-  </div>
-  <div>
-    <amplify-auth-forgot-password-ionic
-    *ngIf="!shouldHide('ForgotPassword')"
-    [authState]="authState"
-    ></amplify-auth-forgot-password-ionic>
-  </div>
-  <div>
-    <amplify-auth-greetings-ionic
-      *ngIf="!shouldHide('Greetings')"
-      [authState]="authState"
-    ></amplify-auth-greetings-ionic>
-  </div>
-  <div>
-    <amplify-auth-require-new-password-ionic
-    *ngIf="!shouldHide('RequireNewPassword')"
-    [authState]="authState"
-    ></amplify-auth-require-new-password-ionic>
-  </div>
+<div class="amplify-authenticator amplify-authenticator-ionic ">
+
+<amplify-auth-sign-in-ionic
+  *ngIf="!shouldHide('SignIn')"
+  [authState]="authState"
+></amplify-auth-sign-in-ionic>
+
+<amplify-auth-sign-up-ionic
+  *ngIf="!shouldHide('SignUp')"
+  [authState]="authState"
+></amplify-auth-sign-up-ionic>
+
+<amplify-auth-confirm-sign-up-ionic
+  *ngIf="!shouldHide('ConfirmSignUp')"
+  [authState]="authState"
+></amplify-auth-confirm-sign-up-ionic>
+
+<amplify-auth-confirm-sign-in-ionic
+*ngIf="!shouldHide('ConfirmSignIn')"
+[authState]="authState"
+></amplify-auth-confirm-sign-in-ionic>
+
+<amplify-auth-forgot-password-ionic
+*ngIf="!shouldHide('ForgotPassword')"
+[authState]="authState"
+></amplify-auth-forgot-password-ionic>
+
+<amplify-auth-greetings-ionic
+*ngIf="!shouldHide('Greetings')"
+[authState]="authState"
+></amplify-auth-greetings-ionic>
+
+ <amplify-auth-require-new-password-ionic
+*ngIf="!shouldHide('RequireNewPassword')"
+[authState]="authState"
+></amplify-auth-require-new-password-ionic>
 </div>
-`
+`;
 
 @Component({
   selector: 'amplify-authenticator-ionic',

diff --git a/...src/components/authenticator/confirm-sign-in-component/confirm-sign-in-component.ionic.ts b/...src/components/authenticator/confirm-sign-in-component/confirm-sign-in-component.ionic.ts
@@ -5,30 +5,27 @@ import { ConfirmSignInComponentCore } from './confirm-sign-in-component.core'
 const template = `
 <div class="amplify-form-container" *ngIf="_show">
   <div class="amplify-form-body">
-
-    <div class="amplify-form-row">
-      <div class="amplify-form-cell-left">
-        <a class="amplify-form-link"
-          (click)="onSignIn()"
-        >Back to Sign In</a>
-      </div>
-    </div>
-
+    <div class="amplify-form-header amplify-form-header-ionic">Confirm your sign in code</div>
     <ion-list>
-      <ion-item>
-        <ion-label stacked>Code</ion-label>
+      <ion-item lines="none">
+        <ion-label class="amplify-input-label amplify-input-label-ionic" position="stacked">Code *</ion-label>
         <ion-input 
           #code
-          type="text" 
+          type="text"
+          class="amplify-form-input" 
           (keyup)="setCode(code.value)"
           (keyup.enter)="onConfirm()"
         ></ion-input>
       </ion-item>
     </ion-list>
 
-    <ion-button
-      (click)="onConfirm()"
-    >Confirm</ion-button>
+    <div class="amplify-form-actions">
+      <div>
+        <ion-button expand="block" color="primary"
+          (click)="onConfirm()"
+        >Confirm Code</ion-button>
+      </div>
+    </div>
   </div>
   <div class="amplify-form-footer">
     <div class="amplify-form-message-error" *ngIf="errorMessage">{{ errorMessage }}</div>

diff --git a/...src/components/authenticator/confirm-sign-up-component/confirm-sign-up.component.ionic.ts b/...src/components/authenticator/confirm-sign-up-component/confirm-sign-up.component.ionic.ts
@@ -3,46 +3,44 @@ import { AmplifyService, AuthState } from '../../../providers';
 import { ConfirmSignUpComponentCore } from './confirm-sign-up.component.core';
 
 const template = `
-<div class="amplify-form-container" *ngIf="_show">
+<div class="amplify-authenticator amplify-authenticator-ionic" *ngIf="_show">
   <div class="amplify-form-body">
-
-    <div class="amplify-form-row">
-      
-      <div class="amplify-form-cell-left">
-        <a class="amplify-form-link"
-          (click)="onSignIn()"
-        >Back to Sign In</a>
-      </div>
-
-    </div>
-
+    <div class="amplify-form-header amplify-form-header-ionic">Confirm your sign up code</div>
     <ion-list>
-      <ion-item>
-        <ion-label stacked>Username</ion-label>
+      <ion-item lines="none">
+        <ion-label class="amplify-input-label amplify-input-label-ionic" position="stacked">Username *</ion-label>
         <ion-input type="text" 
-        (keyup)="setUsername($event.target.value)"
+          class="amplify-form-input"
+          (keyup)="setUsername($event.target.value)"
           [value]="username"
         ></ion-input>
       </ion-item>
     
-      <ion-item>
-        <ion-label stacked>Code</ion-label>
+      <ion-item lines="none">
+        <ion-label  class="amplify-input-label amplify-input-label-ionic" position="stacked">Code *</ion-label>
         <ion-input 
           #code
-          type="text" 
+          type="text"
+          class="amplify-form-input"
           (keyup)="setCode(code.value)"
           (keyup.enter)="onConfirm()"
         ></ion-input>
       </ion-item>
     </ion-list>
       
-    <ion-button
-      (click)="onConfirm()">Confirm</ion-button>
-    <ion-button
-      (click)="onResend()">Resend</ion-button>
-
+    <div class="amplify-form-actions">
+      <div>
+        <ion-button expand="block" color="primary"
+          (click)="onConfirm()"
+        >Confirm Code</ion-button>
+      </div>
+    <div class="amplify-form-cell-left">
+      <div class="amplify-form-signup">Have an account? <a class="amplify-form-link" (click)="onSignIn()">Sign In</a></div>
+    </div>
+    <div class="amplify-form-cell-left">
+      <div class="amplify-form-signup">Lost your code? <a class="amplify-form-link" (click)="onResend()">Resend</a></div>
+    </div>
   </div>
-
   <div class="amplify-form-footer">
     <div class="amplify-form-message-error" *ngIf="errorMessage">{{ errorMessage }}</div>
   </div>

diff --git a/...src/components/authenticator/forgot-password-component/forgot-password.component.ionic.ts b/...src/components/authenticator/forgot-password-component/forgot-password.component.ionic.ts
@@ -4,68 +4,62 @@ import { ForgotPasswordComponentCore } from './forgot-password.component.core';
 import { includes } from '../common';
 
 const template = `
-<div class="amplify-container" *ngIf="_show">
+<div class="amplify-authenticator amplify-authenticator-ionic" *ngIf="_show">
   <div class="amplify-form-body">
-    <div class="amplify-form-header">Sign in to your account</div>
-    <div class="amplify-form-text" *ngIf="!code_sent">You will receive a verification code</div>
-    <div class="amplify-form-text" *ngIf="code_sent">Enter the code you received and set a new password</div>
+  <div class="amplify-form-header amplify-form-header-ionic">Reset your password</div>
+  <div class="amplify-form-text" *ngIf="!code_sent">You will receive a verification code to reset your password</div>
 
-    <ion-list>
+  <ion-list>
 
-    <ion-item *ngIf="!code_sent">
-      <ion-label position="stacked">Username</ion-label>
+    <ion-item lines="none" *ngIf="!code_sent">
+      <ion-label class="amplify-input-label amplify-input-label-ionic" position="stacked">Username *</ion-label>
       <ion-input type="text" 
-        placeholder="Username"
+        class="amplify-form-input"
         (keyup)="setUsername($event.target.value)"
         [value]="username"
       ></ion-input>
     </ion-item>
   
-    <ion-item *ngIf="code_sent">
-      <ion-label position="stacked">Code</ion-label>
+    <ion-item lines="none" *ngIf="code_sent">
+      <ion-label class="amplify-input-label amplify-input-label-ionic" position="stacked">Code *</ion-label>
       <ion-input 
         #code
-        type="text" 
-        placeholder="Enter your code"
+        type="text"
+        class="amplify-form-input"
         (keyup)="setCode(code.value)"
       ></ion-input>
     </ion-item>
 
-    <ion-item *ngIf="code_sent">
-      <ion-label position="stacked">Password</ion-label>
+    <ion-item lines="none" *ngIf="code_sent">
+      <ion-label class="amplify-input-label amplify-input-label-ionic" position="stacked">Password *</ion-label>
       <ion-input 
         #password
-        type="password" 
-        placeholder="Enter your password"
+        type="password"
+        class="amplify-form-input"
         (keyup)="setPassword(password.value)"
         (keyup.enter)="onSubmit()"
       ></ion-input>
     </ion-item>
   
   </ion-list>
-
-  <div class="amplify-form-row">
-    <ion-button
-      (click)="onSend()"
-      *ngIf="!code_sent"
-    >Submit</ion-button>
-    <ion-button
+  <div class="amplify-form-actions">
+    <div>
+      <ion-button expand="block" color="primary"
+        (click)="onSend()"
+        *ngIf="!code_sent"
+      >Submit</ion-button>
+      <ion-button expand="block" color="primary"
       *ngIf="code_sent"
       (click)="onSubmit()"
-    >Verify</ion-button>
+      >Verify</ion-button>
+    </div>
+    <div class="amplify-form-cell-left">
+      <div class="amplify-form-signup">Have an account? <a class="amplify-form-link" (click)="onSignIn()">Sign In</a></div>
+    </div>
+    <div class="amplify-form-cell-right">
+      <div class="amplify-form-signup">Lost your code? <a class="amplify-form-link" (click)="onResend()">Resend</a></div>
     </div>
   </div>
-
-  <ion-list>
-    <ion-item *ngIf="code_sent">
-      <a class="amplify-form-link" (click)="onSend()">Resend Code</a>
-    </ion-item>
-    
-    <ion-item *ngIf="!code_sent">
-      <a class="amplify-form-link" (click)="onSignIn()">Back to Sign in</a>
-    </ion-item>
-  </ion-list>
-
 <div class="amplify-alert" *ngIf="errorMessage">
   <div class="amplify-alert-body">
     <span class="amplify-alert-icon">&#9888;</span>