Implement Login screen

17 files changed, 237 insertions, 0 deletions

diff --git a/android/build.gradle b/android/build.gradle
index 2559316d8e..43bfdb53c9 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -31,6 +31,7 @@ repositories {
 
 dependencies {
     implementation 'com.android.support:appcompat-v7:28.0.0'
+    implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.3.21'
 }
 
 buildscript {
diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml
index 2836f3d63a..450c316618 100644
--- a/android/src/main/AndroidManifest.xml
+++ b/android/src/main/AndroidManifest.xml
@@ -15,6 +15,7 @@
         <activity
                 android:name=".MainActivity"
                 android:label="@string/app_name"
+                android:windowSoftInputMode="adjustPan"
                 >
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/LoginFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/LoginFragment.kt
new file mode 100644
index 0000000000..12404d3e78
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/LoginFragment.kt
@@ -0,0 +1,53 @@
+package net.mullvad.mullvadvpn
+
+import android.os.Bundle
+import android.support.v4.app.Fragment
+import android.text.Editable
+import android.text.TextWatcher
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.EditText
+import android.widget.ImageButton
+
+const val MIN_ACCOUNT_TOKEN_LENGTH = 10
+
+class LoginFragment : Fragment() {
+    private lateinit var loginButton: ImageButton
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        val view = inflater.inflate(R.layout.login, container, false)
+        val accountInput: EditText = view.findViewById(R.id.account_input)
+
+        loginButton = view.findViewById(R.id.login_button)
+
+        accountInput.addTextChangedListener(AccountInputWatcher())
+        setLoginButtonEnabled(false)
+
+        return view
+    }
+
+    private fun setLoginButtonEnabled(enabled: Boolean) {
+        loginButton.apply {
+            if (enabled != isEnabled()) {
+                setEnabled(enabled)
+                setClickable(enabled)
+                setFocusable(enabled)
+            }
+        }
+    }
+
+    inner class AccountInputWatcher : TextWatcher {
+        override fun beforeTextChanged(text: CharSequence, start: Int, count: Int, after: Int) {}
+
+        override fun onTextChanged(text: CharSequence, start: Int, before: Int, count: Int) {}
+
+        override fun afterTextChanged(text: Editable) {
+            setLoginButtonEnabled(text.length >= MIN_ACCOUNT_TOKEN_LENGTH)
+        }
+    }
+}
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/MainActivity.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/MainActivity.kt
index b05f4df3b1..b5fc9c3306 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/MainActivity.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/MainActivity.kt
@@ -7,5 +7,16 @@ class MainActivity : FragmentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.main)
+
+        if (savedInstanceState == null) {
+            addInitialFragment()
+        }
+    }
+
+    private fun addInitialFragment() {
+        supportFragmentManager?.beginTransaction()?.apply {
+            add(R.id.main_fragment, LoginFragment())
+            commit()
+        }
     }
 }
diff --git a/android/src/main/res/drawable-hdpi/logo_icon.png b/android/src/main/res/drawable-hdpi/logo_icon.png
new file mode 100644
index 0000000000..1701158506
--- /dev/null
+++ b/android/src/main/res/drawable-hdpi/logo_icon.png
diff --git a/android/src/main/res/drawable-mdpi/logo_icon.png b/android/src/main/res/drawable-mdpi/logo_icon.png
new file mode 100644
index 0000000000..4d7b2af4e0
--- /dev/null
+++ b/android/src/main/res/drawable-mdpi/logo_icon.png
diff --git a/android/src/main/res/drawable-xhdpi/logo_icon.png b/android/src/main/res/drawable-xhdpi/logo_icon.png
new file mode 100644
index 0000000000..975ba02b3c
--- /dev/null
+++ b/android/src/main/res/drawable-xhdpi/logo_icon.png
diff --git a/android/src/main/res/drawable-xxhdpi/logo_icon.png b/android/src/main/res/drawable-xxhdpi/logo_icon.png
new file mode 100644
index 0000000000..5a27e27631
--- /dev/null
+++ b/android/src/main/res/drawable-xxhdpi/logo_icon.png
diff --git a/android/src/main/res/drawable-xxxhdpi/logo_icon.png b/android/src/main/res/drawable-xxxhdpi/logo_icon.png
new file mode 100644
index 0000000000..5476db715c
--- /dev/null
+++ b/android/src/main/res/drawable-xxxhdpi/logo_icon.png
diff --git a/android/src/main/res/drawable/icon_arrow_blue20.xml b/android/src/main/res/drawable/icon_arrow_blue20.xml
new file mode 100644
index 0000000000..d6a4616deb
--- /dev/null
+++ b/android/src/main/res/drawable/icon_arrow_blue20.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<vector
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="16dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="16.0"
+        >
+    <group>
+        <path android:fillColor="#33294D73"
+                android:pathData="M18.7015867,9 L14.4331381,12.762659 C13.851665,13.2752305 13.8579999,14.1003943 14.4392669,14.612784 C15.0245863,15.1287461 15.9602099,15.1275926 16.5380921,14.6181865 L23.5668627,8.42228969 C23.8565791,8.16690324 24.000373,7.83391619 23.999837,7.50067932 L24,7.4966702 C23.999589,7.16348359 23.8547954,6.83138119 23.5668627,6.57756713 L16.5380921,0.381670278 C15.956619,-0.130901228 15.0205338,-0.125317014 14.4392669,0.387072772 C13.8539474,0.903034846 13.8552559,1.72779176 14.4331381,2.23719784 L18.7017491,6 L1.50909424,6 C0.66354084,6 0,6.67157288 0,7.5 C0,8.33420277 0.675644504,9 1.50909424,9 L18.7015867,9 Z"
+                />
+    </group>
+</vector>
diff --git a/android/src/main/res/drawable/icon_arrow_white.xml b/android/src/main/res/drawable/icon_arrow_white.xml
new file mode 100644
index 0000000000..b8497d5fe6
--- /dev/null
+++ b/android/src/main/res/drawable/icon_arrow_white.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<vector
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="16dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="16.0"
+        >
+    <group>
+        <path android:fillColor="#FFFFFF"
+                android:pathData="M18.7015867,9 L14.4331381,12.762659 C13.851665,13.2752305 13.8579999,14.1003943 14.4392669,14.612784 C15.0245863,15.1287461 15.9602099,15.1275926 16.5380921,14.6181865 L23.5668627,8.42228969 C23.8565791,8.16690324 24.000373,7.83391619 23.999837,7.50067932 L24,7.4966702 C23.999589,7.16348359 23.8547954,6.83138119 23.5668627,6.57756713 L16.5380921,0.381670278 C15.956619,-0.130901228 15.0205338,-0.125317014 14.4392669,0.387072772 C13.8539474,0.903034846 13.8552559,1.72779176 14.4331381,2.23719784 L18.7017491,6 L1.50909424,6 C0.66354084,6 0,6.67157288 0,7.5 C0,8.33420277 0.675644504,9 1.50909424,9 L18.7015867,9 Z"
+                />
+    </group>
+</vector>
diff --git a/android/src/main/res/drawable/login_button_arrow.xml b/android/src/main/res/drawable/login_button_arrow.xml
new file mode 100644
index 0000000000..4a51e51585
--- /dev/null
+++ b/android/src/main/res/drawable/login_button_arrow.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:shape="rectangle"
+        >
+    <item android:state_enabled="false" android:drawable="@drawable/icon_arrow_blue20"/>
+    <item android:state_enabled="true" android:drawable="@drawable/icon_arrow_white"/>
+</selector>
diff --git a/android/src/main/res/drawable/login_button_background.xml b/android/src/main/res/drawable/login_button_background.xml
new file mode 100644
index 0000000000..8622392653
--- /dev/null
+++ b/android/src/main/res/drawable/login_button_background.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:shape="rectangle"
+        >
+    <item android:state_enabled="false">
+        <shape>
+            <solid android:color="@color/white"/>
+        </shape>
+    </item>
+
+    <item android:state_enabled="true">
+        <shape>
+            <solid android:color="@color/green"/>
+        </shape>
+    </item>
+</selector>
diff --git a/android/src/main/res/drawable/text_input_cursor.xml b/android/src/main/res/drawable/text_input_cursor.xml
new file mode 100644
index 0000000000..ffa98a486b
--- /dev/null
+++ b/android/src/main/res/drawable/text_input_cursor.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/darkBlue"/>
+    <size android:width="2sp" android:height="24sp"/>
+</shape>
diff --git a/android/src/main/res/layout/login.xml b/android/src/main/res/layout/login.xml
new file mode 100644
index 0000000000..7ca6e173da
--- /dev/null
+++ b/android/src/main/res/layout/login.xml
@@ -0,0 +1,101 @@
+<LinearLayout
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:id="@+id/main_fragment"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        >
+    <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_weight="0"
+            android:orientation="horizontal"
+            android:gravity="center_vertical"
+            android:padding="12dp"
+            >
+        <ImageView
+                android:layout_width="49dp"
+                android:layout_height="50dp"
+                android:src="@drawable/logo_icon"
+                />
+        <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="8dp"
+                android:textColor="@color/white60"
+                android:textSize="24sp"
+                android:textStyle="bold"
+                android:text="@string/app_name"
+                android:textAllCaps="true"
+                />
+    </LinearLayout>
+    <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:orientation="vertical"
+            android:padding="24dp"
+            >
+        <Space
+                android:layout_width="match_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                />
+        <TextView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_weight="0"
+                android:layout_marginBottom="4dp"
+                android:gravity="start"
+                android:textColor="@color/white"
+                android:textSize="32sp"
+                android:textStyle="bold"
+                android:text="@string/login_title"
+                />
+        <TextView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_weight="0"
+                android:layout_marginBottom="10dp"
+                android:gravity="start"
+                android:textColor="@color/white60"
+                android:textSize="13sp"
+                android:text="@string/login_description"
+                />
+        <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="48dp"
+                android:orientation="horizontal"
+                >
+            <EditText
+                    android:id="@+id/account_input"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_weight="1"
+                    android:paddingHorizontal="12dp"
+                    android:background="@color/white"
+                    android:inputType="number"
+                    android:singleLine="true"
+                    android:imeOptions="flagNoPersonalizedLearning"
+                    android:textCursorDrawable="@drawable/text_input_cursor"
+                    android:hint="@string/login_hint"
+                    android:textColorHint="@color/blue40"
+                    android:textColor="@color/blue"
+                    android:textSize="20sp"
+                    android:textStyle="bold"
+                    />
+            <ImageButton android:id="@+id/login_button"
+                    android:layout_width="48dp"
+                    android:layout_height="match_parent"
+                    android:layout_weight="0"
+                    android:background="@drawable/login_button_background"
+                    android:src="@drawable/login_button_arrow"
+                    />
+        </LinearLayout>
+        <Space
+                android:layout_width="match_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                />
+    </LinearLayout>
+</LinearLayout>
diff --git a/android/src/main/res/values/colors.xml b/android/src/main/res/values/colors.xml
index b0bf7bdb56..600e446ec3 100644
--- a/android/src/main/res/values/colors.xml
+++ b/android/src/main/res/values/colors.xml
@@ -1,4 +1,12 @@
 <resources>
     <color name="colorPrimary">#294D73</color>
     <color name="blue">#294D73</color>
+    <color name="blue40">#66294D73</color>
+    <color name="blue20">#33294D73</color>
+    <color name="darkBlue">#192E45</color>
+    <color name="white">#FFFFFF</color>
+    <color name="white60">#99FFFFFF</color>
+    <color name="green">#44AD4D</color>
+
+    <color name="textInputBorder">#234161</color>
 </resources>
diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml
index e37acca63b..3988e5f2d5 100644
--- a/android/src/main/res/values/strings.xml
+++ b/android/src/main/res/values/strings.xml
@@ -1,3 +1,7 @@
 <resources>
     <string name="app_name">Mullvad VPN</string>
+
+    <string name="login_title">Login</string>
+    <string name="login_description">Enter your account number</string>
+    <string name="login_hint">0000 0000 0000 0000</string>
 </resources>