diff --git a/app/assets/images/login/face_id_logo.svg b/app/assets/images/login/face_id_logo.svg new file mode 100644 index 0000000..0055786 --- /dev/null +++ b/app/assets/images/login/face_id_logo.svg @@ -0,0 +1,5 @@ + diff --git a/app/assets/sass/components/_ios-alert-modal.scss b/app/assets/sass/components/_ios-alert-modal.scss new file mode 100644 index 0000000..6f4ee75 --- /dev/null +++ b/app/assets/sass/components/_ios-alert-modal.scss @@ -0,0 +1,96 @@ +$font-color: #000; +$primary-color: #007AFF; +$ios-border-color: hsla(240,6%,25%,.36); +$ios-border: .5px solid $ios-border-color; +$ios-border-radius: 14px; + +.modal-mask { + position: fixed; + z-index: 9998; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: table; + transition: opacity 0.3s ease; + color: $font-color; +} + +.modal-wrapper { + display: table-cell; + vertical-align: middle; +} + +.modal-container { + width: 270px; + margin: 0px auto; + background-color: rgba(white, .75); + border-radius: $ios-border-radius; + transition: all 0.3s ease; + font-family: Helvetica, Arial, sans-serif; +} + +.modal-header { + padding: 20px 30px 0 30px; + text-align: center; + font-weight: 700; + text-transform: capitalize; + font-size: 19px; +} + +.modal-body { + padding: 10px 30px 20px 30px; + text-align: center; + font-size: 16px; + border-bottom: $ios-border; +} + +.modal-footer { + display: grid; + grid-auto-flow: column; + grid-template-column: repeat(2,1fr); +} + +.modal-default-button { + background-color: transparent; + border: 0; + box-shadow: none; + cursor: pointer; + transition: 0.3s ease; + font-size: 16px; + color: $primary-color; + padding: 15px 0; + border-right: $ios-border; + outline: none; + + &:hover { + background-color: hsla(0,0%,0%,.1); + } + + &:last-child { + border-right: none; + border-bottom-right-radius: $ios-border-radius; + } + + &:first-child { + border-bottom-left-radius: $ios-border-radius; + border-radius: 0; + } +} + +.modal-img { + margin-bottom: 10px; +} + +.modal-footer--full-width { + grid-auto-flow: row; + + .modal-default-button { + border-right: 0; + border-top: $ios-border; + + &:first-child { + border-top: 0; + } + } +} \ No newline at end of file diff --git a/app/assets/sass/components/_login-native.scss b/app/assets/sass/components/_login-native.scss index 3e4a8d1..1e85dd3 100644 --- a/app/assets/sass/components/_login-native.scss +++ b/app/assets/sass/components/_login-native.scss @@ -68,5 +68,6 @@ $app-login-face-id-height: 236px; bottom: 50px; left: 0; position: absolute; + text-align: center; width: 100%; } \ No newline at end of file diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index 9ce4d45..c746fbc 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -19,6 +19,7 @@ @import 'components/app-bottom-navigation'; @import 'components/bottom-sheet'; @import 'components/action-sheet'; +@import 'components/ios-alert-modal'; @import 'components/add-to-wallet'; @import 'components/buttons'; @import 'components/card'; diff --git a/app/data/session-data-defaults.js b/app/data/session-data-defaults.js index db81435..fa5b670 100644 --- a/app/data/session-data-defaults.js +++ b/app/data/session-data-defaults.js @@ -64,8 +64,12 @@ module.exports = { // Upcoming and past appointments "appointments": 4, + // Login + "faceIDOn": "yes", + // Errors "loginError": "no", "gpAppointmentError": "no", + "faceIDError": "no", } \ No newline at end of file diff --git a/app/views/data-settings.html b/app/views/data-settings.html index e788e63..f07f9e1 100644 --- a/app/views/data-settings.html +++ b/app/views/data-settings.html @@ -80,7 +80,53 @@
+ + + Close + +
+