OnBoarding

features/onboarding/.gitignore

@@ -0,0 +1 @@
+/build

features/onboarding/build.gradle.kts

@@ -0,0 +1,20 @@
+plugins {
+    id("io.element.android-compose")
+}
+
+android {
+    namespace = "io.element.android.x.features.onboarding"
+}
+
+dependencies {
+    implementation(project(":libraries:core"))
+    implementation(project(":libraries:elementresources"))
+    implementation(project(":libraries:designsystem"))
+    implementation(libs.mavericks.compose)
+    implementation(libs.timber)
+    implementation(libs.accompanist.pager)
+    implementation(libs.accompanist.pagerindicator)
+    testImplementation("junit:junit:4.13.2")
+    androidTestImplementation("androidx.test.ext:junit:1.1.3")
+    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
+}

features/onboarding/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.kts.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

features/onboarding/src/androidTest/java/io/element/android/x/features/login/ExampleInstrumentedTest.kt

@@ -0,0 +1,24 @@
+package io.element.android.x.features.login
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("io.element.android.x.features.login.test", appContext.packageName)
+    }
+}

features/onboarding/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+</manifest>

features/onboarding/src/main/java/io/element/android/x/features/onboarding/OnBoardingActions.kt

@@ -0,0 +1,5 @@
+package io.element.android.x.features.onboarding
+
+sealed interface OnBoardingActions {
+    data class GoToPage(val page: Int) : OnBoardingActions
+}

features/onboarding/src/main/java/io/element/android/x/features/onboarding/OnBoardingScreen.kt

@@ -0,0 +1,147 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
+package io.element.android.x.features.onboarding
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment.Companion.CenterHorizontally
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.airbnb.mvrx.compose.collectAsState
+import com.airbnb.mvrx.compose.mavericksViewModel
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.HorizontalPager
+import com.google.accompanist.pager.HorizontalPagerIndicator
+import com.google.accompanist.pager.rememberPagerState
+import io.element.android.x.designsystem.components.VectorButton
+
+@Composable
+fun OnBoardingScreen(
+    viewModel: OnBoardingViewModel = mavericksViewModel(),
+    onSignUp: () -> Unit = { },
+    onSignIn: () -> Unit = { },
+) {
+    val state: OnBoardingViewState by viewModel.collectAsState()
+    OnBoardingContent(
+        state,
+        onSignUp = onSignUp,
+        onSignIn = onSignIn,
+    )
+}
+
+
+@OptIn(ExperimentalPagerApi::class)
+@Composable
+fun OnBoardingContent(
+    state: OnBoardingViewState,
+    onSignUp: () -> Unit,
+    onSignIn: () -> Unit,
+) {
+    val carrouselState = remember { SplashCarouselStateFactory().create() }
+    Surface(
+        color = MaterialTheme.colorScheme.background,
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(vertical = 16.dp)
+        ) {
+            Column(
+                modifier = Modifier.fillMaxSize(),
+            ) {
+                val pagerState = rememberPagerState()
+                // pagerState.scrollToPage(state.currentPage)
+                HorizontalPager(
+                    modifier = Modifier.weight(1f),
+                    count = carrouselState.items.size,
+                    state = pagerState,
+                ) { page ->
+                    // Our page content
+                    OnBoardingPage(carrouselState.items[page])
+                }
+                HorizontalPagerIndicator(
+                    pagerState = pagerState,
+                    modifier = Modifier
+                        .align(CenterHorizontally)
+                        .padding(16.dp),
+                )
+                VectorButton(
+                    text = "CREATE ACCOUNT",
+                    onClick = {
+                        onSignUp()
+                    },
+                    enabled = true,
+                    modifier = Modifier
+                        .align(CenterHorizontally)
+                        .padding(top = 16.dp)
+                )
+                VectorButton(
+                    text = "I ALREADY HAVE AN ACCOUNT",
+                    onClick = {
+                        onSignIn()
+                    },
+                    enabled = true,
+                    modifier = Modifier
+                        .align(CenterHorizontally)
+                        .padding(top = 16.dp)
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun OnBoardingPage(
+    item: SplashCarouselState.Item,
+) {
+    Box {
+        /*
+        Image(
+            painterResource(id = item.pageBackground),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize()
+        )
+         */
+        Column(
+            modifier = Modifier.padding(vertical = 16.dp, horizontal = 32.dp)
+        ) {
+            Image(
+                painterResource(id = item.image),
+                contentDescription = null,
+                modifier = Modifier
+                    .align(CenterHorizontally)
+                    .size(192.dp)
+                    .padding(16.dp)
+            )
+            Text(
+                text = stringResource(id = item.title),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .align(CenterHorizontally)
+                    .padding(8.dp),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Bold,
+                fontSize = 24.sp,
+            )
+            Text(
+                text = stringResource(id = item.body),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .align(CenterHorizontally),
+                textAlign = TextAlign.Center,
+            )
+        }
+    }
+}

features/onboarding/src/main/java/io/element/android/x/features/onboarding/OnBoardingViewModel.kt

@@ -0,0 +1,19 @@
+package io.element.android.x.features.onboarding
+
+import com.airbnb.mvrx.MavericksViewModel
+
+class OnBoardingViewModel(initialState: OnBoardingViewState) :
+    MavericksViewModel<OnBoardingViewState>(initialState) {
+
+    fun handle(action: OnBoardingActions) {
+        when (action) {
+            is OnBoardingActions.GoToPage -> handleGoToPage(action)
+        }
+    }
+
+    private fun handleGoToPage(action: OnBoardingActions.GoToPage) {
+        setState {
+            copy(currentPage = action.page)
+        }
+    }
+}

features/onboarding/src/main/java/io/element/android/x/features/onboarding/OnBoardingViewState.kt

@@ -0,0 +1,7 @@
+package io.element.android.x.features.onboarding
+
+import com.airbnb.mvrx.MavericksState
+
+data class OnBoardingViewState(
+    val currentPage: Int = 0,
+) : MavericksState

features/onboarding/src/main/java/io/element/android/x/features/onboarding/SplashCarouselState.kt

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.x.features.onboarding
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+
+data class SplashCarouselState(
+        val items: List<Item>
+) {
+    data class Item(
+            @StringRes val title: Int,
+            @StringRes val body: Int,
+            @DrawableRes val image: Int,
+            @DrawableRes val pageBackground: Int
+    )
+}

features/onboarding/src/main/java/io/element/android/x/features/onboarding/SplashCarouselStateFactory.kt

@@ -0,0 +1,56 @@
+package io.element.android.x.features.onboarding
+
+import androidx.annotation.DrawableRes
+import io.element.android.x.element.resources.R as ElementR
+
+class SplashCarouselStateFactory() {
+    fun create(): SplashCarouselState {
+        val lightTheme = true
+        fun background(@DrawableRes lightDrawable: Int) =
+            if (lightTheme) lightDrawable else R.drawable.bg_color_background
+
+        fun hero(@DrawableRes lightDrawable: Int, @DrawableRes darkDrawable: Int) =
+            if (lightTheme) lightDrawable else darkDrawable
+        return SplashCarouselState(
+            listOf(
+                SplashCarouselState.Item(
+                    ElementR.string.ftue_auth_carousel_secure_title,
+                    ElementR.string.ftue_auth_carousel_secure_body,
+                    hero(
+                        R.drawable.ic_splash_conversations,
+                        R.drawable.ic_splash_conversations_dark
+                    ),
+                    background(R.drawable.bg_carousel_page_1)
+                ),
+                SplashCarouselState.Item(
+                    ElementR.string.ftue_auth_carousel_control_title,
+                    ElementR.string.ftue_auth_carousel_control_body,
+                    hero(R.drawable.ic_splash_control, R.drawable.ic_splash_control_dark),
+                    background(R.drawable.bg_carousel_page_2)
+                ),
+                SplashCarouselState.Item(
+                    ElementR.string.ftue_auth_carousel_encrypted_title,
+                    ElementR.string.ftue_auth_carousel_encrypted_body,
+                    hero(R.drawable.ic_splash_secure, R.drawable.ic_splash_secure_dark),
+                    background(R.drawable.bg_carousel_page_3)
+                ),
+                SplashCarouselState.Item(
+                    collaborationTitle(),
+                    ElementR.string.ftue_auth_carousel_workplace_body,
+                    hero(
+                        R.drawable.ic_splash_collaboration,
+                        R.drawable.ic_splash_collaboration_dark
+                    ),
+                    background(R.drawable.bg_carousel_page_4)
+                )
+            )
+        )
+    }
+
+    private fun collaborationTitle(): Int {
+        return when {
+            true -> R.string.cut_the_slack_from_teams
+            else -> ElementR.string.ftue_auth_carousel_workplace_title
+        }
+    }
+}

features/onboarding/src/main/res/drawable/bg_carousel_page_1.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:angle="@integer/rtl_mirror_flip"
+        android:endColor="#3372C7DA"
+        android:startColor="#33BBE7CF" />
+</shape>

features/onboarding/src/main/res/drawable/bg_carousel_page_2.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:angle="@integer/rtl_mirror_flip"
+        android:endColor="#33B972DA"
+        android:startColor="#3372C7DA" />
+</shape>

features/onboarding/src/main/res/drawable/bg_carousel_page_3.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:angle="@integer/rtl_mirror_flip"
+        android:endColor="#330DBD8B"
+        android:startColor="#33B972DA" />
+</shape>

features/onboarding/src/main/res/drawable/bg_carousel_page_4.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+        android:angle="@integer/rtl_mirror_flip"
+        android:endColor="#33BBE7CF"
+        android:startColor="#330DBD8B" />
+</shape>

features/onboarding/src/main/res/drawable/bg_color_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="?android:colorBackground" />
+</shape>

features/onboarding/src/main/res/drawable/bg_gradient_ftue_breaker.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape>
+            <gradient
+                android:angle="@integer/rtl_mirror_flip"
+                android:endColor="#55DFD1FF"
+                android:startColor="#55A5F2E0" />
+        </shape>
+    </item>
+    <item>
+        <shape>
+            <gradient
+                android:angle="90"
+                android:endColor="@android:color/transparent"
+                android:startColor="?android:colorBackground" />
+        </shape>
+    </item>
+</layer-list>

features/onboarding/src/main/res/values/strings.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="cut_the_slack_from_teams">Cut the slack from teams.</string>
+</resources>

features/onboarding/src/test/java/io/element/android/x/features/login/ExampleUnitTest.kt

@@ -0,0 +1,17 @@
+package io.element.android.x.features.login
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}