Skip to content
Permalink
Browse files

UI/UX improvements (#49)

* feat/authenticator: UI/UX improvements

- Added tutorial page
- Added launch screens for Android and iOS
- Added Settings page
- Refactor code and create separate ViewCells for reuse
- Removed unused icons
- Updated to use native controls for Android and iOS
- Use SafariViewController and Chrome Custom tabs to open the links
- ViewCell also disabled - not working on iOS
- Update request popup to auto resize for different requests
- Show first 6 digits of the hash in shared MData request if MData's meta name is empty
- Truncate app name and vendor in AppInfoPage, when text size is too big

* refactor/authenticator: Refactored code

* refactor/authenticator: Use global styles

* refactor/authenticator: Rename global FontSizes
  • Loading branch information...
ashwinkumar6 authored and ravinderjangra committed Feb 5, 2019
1 parent d4575a7 commit a2ae7e210cbb8b3b1a6539482249d729d127b5a5
Showing with 4,346 additions and 1,131 deletions.
  1. +32 −0 SafeAuthenticator.Android/Helpers/AndroidNativeBrowserService.cs
  2. +129 −0 SafeAuthenticator.Android/Helpers/FontExtensions.cs
  3. +65 −0 SafeAuthenticator.Android/Helpers/GradientContentViewRenderer.cs
  4. +311 −0 SafeAuthenticator.Android/Helpers/MaterialEntryRenderer.cs
  5. +0 −27 SafeAuthenticator.Android/Helpers/PaddedEntryRenderer.cs
  6. +16 −7 SafeAuthenticator.Android/MainActivity.cs
  7. +1 −1 SafeAuthenticator.Android/Properties/AndroidManifest.xml
  8. BIN SafeAuthenticator.Android/Resources/drawable-hdpi/authLogo.png
  9. BIN SafeAuthenticator.Android/Resources/drawable-hdpi/settingsIcon.png
  10. BIN SafeAuthenticator.Android/Resources/drawable-mdpi/authLogo.png
  11. BIN SafeAuthenticator.Android/Resources/drawable-mdpi/settingsIcon.png
  12. BIN SafeAuthenticator.Android/Resources/drawable-xhdpi/authLogo.png
  13. BIN SafeAuthenticator.Android/Resources/drawable-xhdpi/settingsIcon.png
  14. BIN SafeAuthenticator.Android/Resources/drawable-xxhdpi/authLogo.png
  15. BIN SafeAuthenticator.Android/Resources/drawable-xxhdpi/settingsIcon.png
  16. BIN SafeAuthenticator.Android/Resources/drawable-xxxhdpi/authLogo.png
  17. BIN SafeAuthenticator.Android/Resources/drawable-xxxhdpi/settingsIcon.png
  18. BIN SafeAuthenticator.Android/Resources/drawable/MData.png
  19. +12 −0 SafeAuthenticator.Android/Resources/drawable/SplashBackground.xml
  20. BIN SafeAuthenticator.Android/Resources/drawable/appcontainer.png
  21. BIN SafeAuthenticator.Android/Resources/drawable/clipboardPaste.png
  22. BIN SafeAuthenticator.Android/Resources/drawable/documents.png
  23. BIN SafeAuthenticator.Android/Resources/drawable/downloads.png
  24. BIN SafeAuthenticator.Android/Resources/drawable/hide_pass.png
  25. BIN SafeAuthenticator.Android/Resources/drawable/info.png
  26. BIN SafeAuthenticator.Android/Resources/drawable/music.png
  27. BIN SafeAuthenticator.Android/Resources/drawable/pictures.png
  28. BIN SafeAuthenticator.Android/Resources/drawable/publicContainer.png
  29. BIN SafeAuthenticator.Android/Resources/drawable/publicNames.png
  30. BIN SafeAuthenticator.Android/Resources/drawable/show_pass.png
  31. BIN SafeAuthenticator.Android/Resources/drawable/tutorial0.png
  32. BIN SafeAuthenticator.Android/Resources/drawable/tutorial1.png
  33. BIN SafeAuthenticator.Android/Resources/drawable/tutorial2.png
  34. BIN SafeAuthenticator.Android/Resources/drawable/videos.png
  35. +9 −4 SafeAuthenticator.Android/Resources/values/styles.xml
  36. +37 −11 SafeAuthenticator.Android/SafeAuthenticator.Android.csproj
  37. +19 −0 SafeAuthenticator.Android/SplashActivity.cs
  38. +33 −6 SafeAuthenticator.Android/app.config
  39. +3 −0 SafeAuthenticator.iOS/AppDelegate.cs
  40. +9 −0 SafeAuthenticator.iOS/Extensions/ColorExtension.cs
  41. +239 −0 SafeAuthenticator.iOS/Extensions/FontExtensions.cs
  42. +37 −0 SafeAuthenticator.iOS/Extensions/KeyboardExtensions.cs
  43. +103 −0 SafeAuthenticator.iOS/Extensions/StringExtensions.cs
  44. +1 −0 SafeAuthenticator.iOS/GlobalSuppressions.cs
  45. +23 −0 SafeAuthenticator.iOS/Helpers/AppleNativeBrowserService.cs
  46. +73 −0 SafeAuthenticator.iOS/Helpers/BorderlessEntryRenderer.cs
  47. +226 −0 SafeAuthenticator.iOS/Helpers/FloatLabeledTextField.cs
  48. +86 −0 SafeAuthenticator.iOS/Helpers/GradientContentViewRenderer.cs
  49. +322 −0 SafeAuthenticator.iOS/Helpers/MaterialEntryRenderer.cs
  50. +0 −24 SafeAuthenticator.iOS/Helpers/PaddedEntryRenderer.cs
  51. +66 −0 SafeAuthenticator.iOS/Helpers/ShowHidePasswordEffect.cs
  52. +3 −3 SafeAuthenticator.iOS/Info.plist
  53. +9 −8 SafeAuthenticator.iOS/LaunchScreen.storyboard
  54. BIN SafeAuthenticator.iOS/Resources/HidePasswordIcon.png
  55. BIN SafeAuthenticator.iOS/Resources/MData.png
  56. +26 −1 SafeAuthenticator.iOS/Resources/Media.xcassets/AppIcons.appiconset/Contents.json
  57. +0 −58 SafeAuthenticator.iOS/Resources/Media.xcassets/LaunchImages.launchimage/Contents.json
  58. BIN SafeAuthenticator.iOS/Resources/ShowPasswordIcon.png
  59. BIN SafeAuthenticator.iOS/Resources/appcontainer.png
  60. BIN ...nticator.Android/Resources/drawable/auth_start.png → SafeAuthenticator.iOS/Resources/authLogo.png
  61. BIN SafeAuthenticator.iOS/Resources/auth_start.png
  62. BIN SafeAuthenticator.iOS/Resources/clipboardPaste.png
  63. BIN SafeAuthenticator.iOS/Resources/documents.png
  64. BIN SafeAuthenticator.iOS/Resources/downloads.png
  65. BIN SafeAuthenticator.iOS/Resources/hide_pass.png
  66. BIN SafeAuthenticator.iOS/Resources/info.png
  67. BIN SafeAuthenticator.iOS/Resources/music.png
  68. BIN SafeAuthenticator.iOS/Resources/pictures.png
  69. BIN SafeAuthenticator.iOS/Resources/profile_generic.png
  70. BIN SafeAuthenticator.iOS/Resources/profile_generic@2x.png
  71. BIN SafeAuthenticator.iOS/Resources/profile_generic@3x.png
  72. BIN SafeAuthenticator.iOS/Resources/publicContainer.png
  73. BIN SafeAuthenticator.iOS/Resources/publicNames.png
  74. BIN SafeAuthenticator.iOS/Resources/settingsIcon@2.png
  75. BIN SafeAuthenticator.iOS/Resources/settingsIcon@3x.png
  76. BIN SafeAuthenticator.iOS/Resources/show_pass.png
  77. BIN SafeAuthenticator.iOS/Resources/slideout.png
  78. BIN SafeAuthenticator.iOS/Resources/slideout@2x.png
  79. BIN SafeAuthenticator.iOS/Resources/tab_about.png
  80. BIN SafeAuthenticator.iOS/Resources/tab_about@2x.png
  81. BIN SafeAuthenticator.iOS/Resources/tab_about@3x.png
  82. BIN SafeAuthenticator.iOS/Resources/tab_feed.png
  83. BIN SafeAuthenticator.iOS/Resources/tab_feed@2x.png
  84. BIN SafeAuthenticator.iOS/Resources/tab_feed@3x.png
  85. BIN SafeAuthenticator.iOS/Resources/tutorial0.png
  86. BIN SafeAuthenticator.iOS/Resources/tutorial1.png
  87. BIN SafeAuthenticator.iOS/Resources/tutorial2.png
  88. BIN SafeAuthenticator.iOS/Resources/videos.png
  89. +37 −24 SafeAuthenticator.iOS/SafeAuthenticator.iOS.csproj
  90. +72 −67 SafeAuthenticator/App.xaml
  91. +23 −3 SafeAuthenticator/App.xaml.cs
  92. +17 −0 SafeAuthenticator/Controls/AccessExtensions.cs
  93. +0 −54 SafeAuthenticator/Controls/Behaviour/PasswordImageBehavior.cs
  94. +0 −33 SafeAuthenticator/Controls/Behaviour/PasswordShowHideBehavior.cs
  95. +50 −0 SafeAuthenticator/Controls/ContainerPermissionViewCell.xaml
  96. +14 −0 SafeAuthenticator/Controls/ContainerPermissionViewCell.xaml.cs
  97. +40 −0 SafeAuthenticator/Controls/Converters/ContainerNameToImageConverter.cs
  98. +28 −0 SafeAuthenticator/Controls/Converters/FormatContainerNameConverter.cs
  99. +35 −0 SafeAuthenticator/Controls/Converters/FormatContainerPermissionsConverter.cs
  100. +27 −0 SafeAuthenticator/Controls/Converters/FormatTitleConverter.cs
  101. +12 −0 SafeAuthenticator/Controls/Effects/ShowHidePasswordEffect.cs
  102. +49 −0 SafeAuthenticator/Controls/GradientContentView.cs
  103. +7 −0 SafeAuthenticator/Controls/INativeBrowserService.cs
  104. +0 −46 SafeAuthenticator/Controls/ItemTappedAttachedProperty.cs
  105. +57 −0 SafeAuthenticator/Controls/MDataPermissionViewCell.xaml
  106. +14 −0 SafeAuthenticator/Controls/MDataPermissionViewCell.xaml.cs
  107. +100 −0 SafeAuthenticator/Controls/MaterialEntry.cs
  108. +0 −8 SafeAuthenticator/Controls/PaddedEntry.cs
  109. +65 −0 SafeAuthenticator/Controls/RegisteredAppViewCell.xaml
  110. +14 −0 SafeAuthenticator/Controls/RegisteredAppViewCell.xaml.cs
  111. +1 −0 SafeAuthenticator/Helpers/MessengerConstants.cs
  112. +71 −15 SafeAuthenticator/Helpers/Utilities.cs
  113. +19 −0 SafeAuthenticator/Models/ContainerPermissionsModel.cs
  114. +18 −0 SafeAuthenticator/Models/MDataModel.cs
  115. +0 −47 SafeAuthenticator/Models/ModelHelpers.cs
  116. +18 −0 SafeAuthenticator/Models/PermissionSetModel.cs
  117. +6 −1 SafeAuthenticator/Models/RegisteredAppModel.cs
  118. +18 −0 SafeAuthenticator/Models/StrengthIndicator.cs
  119. +48 −1 SafeAuthenticator/SafeAuthenticator.csproj
  120. +109 −96 SafeAuthenticator/Services/AuthService.cs
  121. +21 −14 SafeAuthenticator/ViewModels/AppInfoViewModel.cs
  122. +4 −1 SafeAuthenticator/ViewModels/BaseViewModel.cs
  123. +155 −40 SafeAuthenticator/ViewModels/CreateAcctViewModel.cs
  124. +27 −16 SafeAuthenticator/ViewModels/HomeViewModel.cs
  125. +21 −32 SafeAuthenticator/ViewModels/LoginViewModel.cs
  126. +41 −10 SafeAuthenticator/ViewModels/RequestDetailViewModel.cs
  127. +89 −0 SafeAuthenticator/ViewModels/SettingsViewModel.cs
  128. +80 −0 SafeAuthenticator/ViewModels/TutorialViewModel.cs
  129. +82 −41 SafeAuthenticator/Views/AppInfoPage.xaml
  130. +148 −66 SafeAuthenticator/Views/CreateAcctPage.xaml
  131. +1 −4 SafeAuthenticator/Views/CreateAcctPage.xaml.cs
  132. +40 −36 SafeAuthenticator/Views/HomePage.xaml
  133. +13 −17 SafeAuthenticator/Views/HomePage.xaml.cs
  134. +68 −65 SafeAuthenticator/Views/LoginPage.xaml
  135. +1 −1 SafeAuthenticator/Views/LoginPage.xaml.cs
  136. +258 −214 SafeAuthenticator/Views/RequestDetailPage.xaml
  137. +14 −27 SafeAuthenticator/Views/RequestDetailPage.xaml.cs
  138. +115 −0 SafeAuthenticator/Views/SettingsPage.xaml
  139. +50 −0 SafeAuthenticator/Views/SettingsPage.xaml.cs
  140. +206 −0 SafeAuthenticator/Views/TutorialPage.xaml
  141. +51 −0 SafeAuthenticator/Views/TutorialPage.xaml.cs
  142. +1 −1 Tests/SafeAuth.Tests.Android/SafeAuth.Tests.Android.csproj
  143. +1 −1 Tests/SafeAuth.Tests.IOS/SafeAuth.Tests.IOS.csproj
@@ -0,0 +1,32 @@
using Android.App;
using Android.Support.CustomTabs;
using SafeAuthenticator.Controls;
using SafeAuthenticator.Droid.Helpers;
using Xamarin.Forms;

[assembly: Dependency(typeof(AndroidNativeBrowserService))]
namespace SafeAuthenticator.Droid.Helpers
{
public class AndroidNativeBrowserService : INativeBrowserService
{
public void LaunchNativeEmbeddedBrowser(string url)
{
#pragma warning disable CS0618 // Type or member is obsolete
var activity = Forms.Context as Activity;
#pragma warning restore CS0618 // Type or member is obsolete

if (activity == null)
{
return;
}

var mgr = new CustomTabsActivityManager(activity);
mgr.CustomTabsServiceConnected += (name, client) =>
{
mgr.LaunchUrl(url);
};

mgr.BindService();
}
}
}
@@ -0,0 +1,129 @@
using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using Android.Graphics;
using Xamarin.Forms;
using AApplication = Android.App.Application;

namespace SafeAuthenticator.Droid.ControlsRenderers
{
public static class FontExtensions
{
private const string LoadFromAssetsRegex = @"\w+\.((ttf)|(otf))\#\w*";

private static readonly Dictionary<Tuple<string, FontAttributes>, Typeface> Typefaces = new Dictionary<Tuple<string, FontAttributes>, Typeface>();

// We don't create and cache a Regex object here because we may not ever need it, and creating Regexes is surprisingly expensive (especially on older hardware)
// Instead, we'll use the static Regex.IsMatch below, which will create and cache the regex internally as needed. It's the equivalent of Lazy<Regex> with less code.
// See https://msdn.microsoft.com/en-us/library/sdx2bds0(v=vs.110).aspx#Anchor_2

static Typeface _defaultTypeface;

public static float ToScaledPixel(this Font self)
{
if (self.IsDefault)
return 14;

if (self.UseNamedSize)
{
switch (self.NamedSize)
{
case NamedSize.Micro:
return 10;

case NamedSize.Small:
return 12;

case NamedSize.Default:
case NamedSize.Medium:
return 14;

case NamedSize.Large:
return 18;
}
}

return (float)self.FontSize;
}

public static Typeface ToTypeface(this Font self)
{
if (self.IsDefault)
return _defaultTypeface ?? (_defaultTypeface = Typeface.Default);

var key = new Tuple<string, FontAttributes>(self.FontFamily, self.FontAttributes);
Typeface result;
if (Typefaces.TryGetValue(key, out result))
return result;

if (self.FontFamily == null)
{
var style = ToTypefaceStyle(self.FontAttributes);
result = Typeface.Create(Typeface.Default, style);
}
else if (Regex.IsMatch(self.FontFamily, LoadFromAssetsRegex))
{
result = Typeface.CreateFromAsset(AApplication.Context.Assets, FontNameToFontFile(self.FontFamily));
}
else
{
var style = ToTypefaceStyle(self.FontAttributes);
result = Typeface.Create(self.FontFamily, style);
}
return Typefaces[key] = result;
}

internal static bool IsDefault(this Entry self)
{
return self.FontFamily == null && self.FontAttributes == FontAttributes.None;
}

internal static Typeface ToTypeface(this Entry self)
{
if (self.IsDefault())
return _defaultTypeface ?? (_defaultTypeface = Typeface.Default);

var key = new Tuple<string, FontAttributes>(self.FontFamily, self.FontAttributes);
Typeface result;
if (Typefaces.TryGetValue(key, out result))
return result;

if (self.FontFamily == null)
{
var style = ToTypefaceStyle(self.FontAttributes);
result = Typeface.Create(Typeface.Default, style);
}
else if (Regex.IsMatch(self.FontFamily, LoadFromAssetsRegex))
{
result = Typeface.CreateFromAsset(AApplication.Context.Assets, FontNameToFontFile(self.FontFamily));
}
else
{
var style = ToTypefaceStyle(self.FontAttributes);
result = Typeface.Create(self.FontFamily, style);
}
return Typefaces[key] = result;
}

public static TypefaceStyle ToTypefaceStyle(FontAttributes attrs)
{
var style = TypefaceStyle.Normal;
if ((attrs & (FontAttributes.Bold | FontAttributes.Italic)) == (FontAttributes.Bold | FontAttributes.Italic))
style = TypefaceStyle.BoldItalic;
else if ((attrs & FontAttributes.Bold) != 0)
style = TypefaceStyle.Bold;
else if ((attrs & FontAttributes.Italic) != 0)
style = TypefaceStyle.Italic;
return style;
}

static string FontNameToFontFile(string fontFamily)
{
int hashtagIndex = fontFamily.IndexOf('#');
if (hashtagIndex >= 0)
return fontFamily.Substring(0, hashtagIndex);

throw new InvalidOperationException($"Can't parse the {nameof(fontFamily)} {fontFamily}");
}
}
}
@@ -0,0 +1,65 @@
using Android.Content;
using Android.Graphics;
using Android.Graphics.Drawables;
using SafeAuthenticator.Controls;
using SafeAuthenticator.Droid.Helpers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(GradientContentView), typeof(GradientContentViewRenderer))]
namespace SafeAuthenticator.Droid.Helpers
{
public class GradientContentViewRenderer : ViewRenderer<GradientContentView, Android.Views.View>
{
public GradientContentViewRenderer(Context context)
: base(context)
{
}

public GradientDrawable GradientDrawable { get; set; }

private GradientContentView GradientContentView => Element;

protected override void OnElementChanged(ElementChangedEventArgs<GradientContentView> e)
{
base.OnElementChanged(e);

if (GradientContentView != null)
{
GradientDrawable = new GradientDrawable();
GradientDrawable.SetColors(new int[] { GradientContentView.StartColor.ToAndroid(), GradientContentView.EndColor.ToAndroid() });
}
}

protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);

if (GradientDrawable != null && GradientContentView != null)
{
if (e.PropertyName == GradientContentView.StartColorProperty.PropertyName ||
e.PropertyName == GradientContentView.EndColorProperty.PropertyName)
{
GradientDrawable.SetColors(new int[] { GradientContentView.StartColor.ToAndroid(), GradientContentView.EndColor.ToAndroid() });
Invalidate();
}

if (e.PropertyName == VisualElement.WidthProperty.PropertyName ||
e.PropertyName == VisualElement.HeightProperty.PropertyName ||
e.PropertyName == GradientContentView.OrientationProperty.PropertyName)
{
Invalidate();
}
}
}

protected override bool DrawChild(Canvas canvas, global::Android.Views.View child, long drawingTime)
{
GradientDrawable.Bounds = canvas.ClipBounds;
GradientDrawable.SetOrientation(GradientContentView.Orientation == GradientOrientation.Vertical ? GradientDrawable.Orientation.TopBottom
: GradientDrawable.Orientation.LeftRight);
GradientDrawable.Draw(canvas);
return base.DrawChild(canvas, child, drawingTime);
}
}
}
Oops, something went wrong.

0 comments on commit a2ae7e2

Please sign in to comment.
You can’t perform that action at this time.