Commit 053cb1b8 authored by Chaitanya Pandit's avatar Chaitanya Pandit
Browse files

#56 Create Onboarding UI flow

parent b88a5820
.onboarding {
defaultRenderer: custom
showSearchBar: false
showContextualBottomBar: false
showBottomBar: false
showTopBar: false
VStack {
alignment: center
background: #F6F5F5
spacing: 5
padding: 0 0 10 0
Text {
text: "STEP 1"
font: 13 regular
textAlign: center
color: primary
padding: 50 20 0 10
}
Text {
text: "Where do you store your contacts?"
font: 30 light
textAlign: center
color: primary
padding: 20 20 0 20
}
Text {
text: "Choose the services you use most often to connect your data to the Wallet."
font: 16 semibold
textAlign: left
color: primary
padding: 20 20 0 20
}
Text {
text: "By importing your data to your wallet you take a first step to protect your privacy."
font: 16 semibold
textAlign: left
color: primary
padding: 10 20 0 20
}
SubView {
id: pluginGrid
height: 200
padding: 10 10 10 10
view {
viewName: Plugin
defaultRenderer: grid
background: #F6F5F5
editMode: true
[datasource = pod] {
query: "Plugin"
sortProperty: dateModified
sortAscending: false
}
arguments: {
showToolbar: false
showBottomBar: false
readOnly: true
}
}
}
Button {
background: #000
cornerRadius: 100
width: 50
height: 50
Image {
alignment: center
systemName: "arrow.right"
resizable: true
sizingMode: fit
color: #fff
font: 24
padding: 10 10 10 10
}
onPress: openView {
viewName: "onboarding-login"
items: {{importerGrid.selected}}
}
}
}
}
.onboarding-login {
defaultRenderer: custom
showSearchBar: false
showContextualBottomBar: false
showBottomBar: false
showTopBar: false
VStack {
alignment: top
background: #F6F5F5
spacing: 10
Text {
text: "STEP 2"
font: 13 regular
textAlign: center
color: primary
padding: 50 20 0 10
}
Text {
alignment: left
text: "Connect Whatsapp"
font: 30 light
textAlign: left
color: primary
padding: 20 20 0 10
}
VStack {
alignment: left
padding: 10
Text {
text: "Please provide your login and password to connect your Whatsapp account."
font: 16
textAlign: left
color: primary
}
Text {
padding: 20 0 0 0
text: "Whatsapp login"
font: 12 semibold
textAlign: left
color: primary
}
Textfield {
rows: 1
minHeight: 50
border: #DDD 1
background: #ffFFFF
}
Text {
padding: 20 0 0 0
text: "Password"
font: 12 semibold
textAlign: left
color: primary
}
Textfield {
secure: true
rows: 1
minHeight: 50
background: #ffFFFF
border: #DDD 1
}
}
Button {
background: #000
cornerRadius: 30
width: 200
height: 50
HStack {
Text {
text: "Login To Whatsapp"
color: #fff
}
Image {
alignment: center
systemName: "arrow.right"
resizable: true
sizingMode: fit
color: #fff
font: 20
padding: 18 0 18 0
}
}
onPress: openpopup {
title: "We couldn’t log you in."
text: "Your username or password are incorrect."
actions: [
openView {"title": "Try again", viewName: "onboarding-two-factor"}
]
}
}
HStack {
Button {
cornerRadius: 30
padding: 25 10
onPress: openView {
viewName: "onboarding-access"
}
HStack {
Text {
text: "Let's skip this, I'm not sure."
font: 16
color: #000
}
}
}
}
}
}
.onboarding-two-factor {
defaultRenderer: custom
showSearchBar: false
showContextualBottomBar: false
showBottomBar: false
showTopBar: false
VStack {
alignment: top
background: #F6F5F5
spacing: 10
Text {
text: "STEP 3: Whatsapp"
font: 13 regular
textAlign: center
color: primary
padding: 50 20 0 10
}
Text {
alignment: left
text: "Confirm it's you"
font: 30 light
textAlign: left
color: primary
padding: 20 20 0 10
}
VStack {
alignment: left
padding: 10
Text {
text: "Two factor authentication is required. Please provide one time password sent to you via SMS."
font: 16
textAlign: left
color: primary
}
Text {
padding: 20 0 0 0
text: "Authentication code"
font: 12 semibold
textAlign: left
color: primary
}
Textfield {
rows: 1
minHeight: 50
border: #DDD 1
background: #ffFFFF
}
}
Button {
background: #000
cornerRadius: 30
width: 210
height: 50
HStack {
Text {
text: "Authenticate Whatsapp"
color: #fff
}
Image {
alignment: center
systemName: "arrow.right"
resizable: true
sizingMode: fit
color: #fff
font: 20
padding: 18 0 18 0
}
}
onPress: openpopup {
title: "Authenticaion failed."
text: "Your phone failed to authenticate. Try signing in again later.."
actions: [
openView {"title": "Try again", viewName: "onboarding-access"}
]
}
}
HStack {
Button {
cornerRadius: 30
padding: 25 10
onPress: openView {
viewName: "onboarding-access"
}
HStack {
Text {
text: "Let's skip this, I'll do it later"
font: 16
color: #000
}
}
}
}
}
}
.onboarding-access {
defaultRenderer: custom
showSearchBar: false
showContextualBottomBar: false
showBottomBar: false
showTopBar: false
VStack {
alignment: top
background: #F6F5F5
spacing: 10
Text {
text: "STEP 4"
font: 13 regular
textAlign: center
color: primary
padding: 50 20 0 10
}
Text {
alignment: left
text: "Allow access."
font: 30 light
textAlign: left
color: primary
padding: 20 20 0 10
}
VStack {
alignment: left
padding: 10
Text {
text: "We need your permission to access your data."
font: 16
textAlign: left
color: primary
}
Text {
padding: 20 0 0 0
text: "CONTACT BOOK"
font: 14 semibold
textAlign: left
color: #17A4E0
}
Text {
padding: 5 0 0 0
text: "Because memri is all about people."
font: 16
textAlign: left
color: primary
}
Text {
padding: 20 0 0 0
text: "LOCATION"
font: 14 semibold
textAlign: left
color: #17A4E0
}
Text {
padding: 5 0 0 0
text: "So that you have the fastest (and nearest!) server to where you are."
font: 16
textAlign: left
color: primary
}
Text {
padding: 5 0 0 0
text: "Learn more about our infrastructure."
font: 16
textAlign: left
color: primary
}
Text {
padding: 20 0 0 0
text: "STORAGE AND MEDIA"
font: 14 semibold
textAlign: left
color: #17A4E0
}
Text {
padding: 5 0 0 0
text: "Your content is always yours. We don’t ever peek through. Yet you need to share it with your pod."
font: 16
textAlign: left
color: primary
}
}
Button {
background: #000
cornerRadius: 30
width: 210
height: 50
HStack {
Text {
text: "Allow access"
color: #fff
}
Image {
alignment: center
systemName: "arrow.right"
resizable: true
sizingMode: fit
color: #fff
font: 20
padding: 18 0 18 0
}
}
onPress: [
requestcontacts,
requestlocation,
requeststorage,
openView {
viewName: "onboarding-finish"
}]
}
HStack {
Button {
cornerRadius: 30
padding: 25 10
onPress: openView {
viewName: "onboarding-finish"
}
HStack {
Text {
text: "Let's skip this, I'll do it later"
font: 16
color: #000
}
}
}
}
}
}
.onboarding-finish {
defaultRenderer: custom
showSearchBar: false
showContextualBottomBar: false
showBottomBar: false
showTopBar: false
VStack {
alignment: top
background: #F6F5F5
spacing: 10
Text {
alignment: left
text: "Yay! Good to see you here!"
font: 30 light
textAlign: left
color: primary
padding: 20
}
VStack {
alignment: left
padding: 10
Text {
text: "Enjoy the full wallet experience for free for 7 days. No strings attached."
font: 16
textAlign: left
color: primary
}
Text {
padding: 20 0 0 0
text: "● free trial"
font: 16
textAlign: left
color: primary
}
Text {
text: "● no credit card required"
font: 16
textAlign: left
color: primary
}
Text {
text: "● your free trial ends automatically after 7 days."
font: 16
textAlign: left
color: primary
}
}
HStack {
padding: 20 0
alignment: center
Text {
font: 16
text: "I consent to sharing my usage data for the purpose of enhancing user experience."
}
Toggle {
value: {{.allowSharing}}
}
}
Text {
padding: 0 20 20 20
color: #828282
font: 13
text: "When this setting is on, you consent for memri to report information on app usage (anonymous), for example, which of the features are most frequently used. Learn more."
}
Button {
background: #000
cornerRadius: 30
width: 210
height: 50
HStack {
Text {
text: "You're all set!"
color: #fff
}
Image {
alignment: center
systemName: "arrow.right"
resizable: true
sizingMode: fit
color: #fff
font: 20
padding: 18 0 18 0
}
}
onPress: openView {
viewName: "allPeople"
}
}
}
}
[
{
"_type": "NavigationItem",
"title": "Onboarding",
"sessionName": "onboarding"
},
{
"_type":"Indexer",
"name":"Geolocation indexer",
......
......@@ -14,7 +14,7 @@ protocol CVUAction {
var id: String { get }
var defaultVars: [String: CVUValue] { get }
var vars: [String: CVUValue] { get }
func execute(sceneController: SceneController, context: CVUContext)
func execute(sceneController: SceneController, context: CVUContext, completion: ((Any?) -> ())?)
func getString(_ key: String, _ context: CVUContext, _ viewContext: ViewContextController?) -> String?
}
......@@ -35,8 +35,9 @@ extension CVUAction {
return value
}
func execute(sceneController: SceneController, context: CVUContext) {
func execute(sceneController: SceneController, context: CVUContext, completion: ((Any?) -> ())?) {
// Default implementation does nothing
completion?(nil)
}
}
......@@ -91,6 +92,18 @@ func cvuAction(named: String) -> CVUAction.Type? {
return CVUAction_Unlink.self
case "multiaction":
return CVUAction_MultiAction.self
case "requestcontacts":
return CVUAction_RequestContactsPermission.self
case "requestlocation":
return CVUAction_RequestLocationPermission.self
case "requestcamera":
return CVUAction_RequestCameraPermission.self
case "requestphotolibrary":
return CVUAction_RequestPhotoLibraryPermission.self