C
C#Thinker

✅ How to structure this login/signup page layout

So I have this mockup of the layout I want for a login/signup page in my Blazor WASM app. Pretty standard, the signup thing should have fields for email, username, password, and avatar image, and the login one should have a field for the email and password. The question I'm running up against is how to properly separate all the design aspects out into components such that the page doesn't become overly cluttered yet the components feel reasonable enough. The email and username fields could just be their own component since they share the exact same behavior, however the password field looks the same, except it should display its text as dots instead of plain text, and it should have an eye icon on the right to toggle dots/plain text. I'm also wondering whether the two forms are different enough to warrant separating them into individual components, because much of the logic (like input and validation) would be practically the same, so that would lead to a lot of code repetition across the two components. (also excuse my terrible handwriting)
A
Angius•398d ago
TextInput, PasswordInput, AvatarSelector, ActionButton would be the components I'd use And, yes, I'd make each form its own component as well 
@if (register) {
    <Register />
} else {
    <Login />
}
@if (register) {
    <Register />
} else {
    <Login />
}
is IMHO better than placing all of that code in each branch
T
Thinker•398d ago
Just asking to make sure, those aren't pre-made components, right?
A
Angius•398d ago
Nope At least not far as I know
T
Thinker•398d ago
good because they sounded kinda like they could've been yeah, that makes sense
A
Accord•397d ago
Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.
Want results from more Discord servers?
Add your server
More Posts
❔ I am need of help before I give up and run my code on a server instead of a serverless solution.I have create an azure function locally and i've used the selenuim webdriver package for taking scre✅ .Net Core 6 Asymmetric Encryption with custom public and private keysHello all! How can i use the `Asymmetric Encryption` in .Net 6 but choosing/importing private and pu❔ No Design in C#Instances of this bug (1) 1. View Call Stack at System.Runtime.InteropServices.Marshal.ThrowExce❔ having issues on a reloading script on unity to reload weaponsthe code is used in a youtube video and i have pretty much copied to to get it to work but it doesnt❔ help with an exerciseI've encountered a weird problem that idk how to fix. Say we've got a string "31131123521" how do i ❔ Accessing HTTP Context at DbCommandInterceptor [.NET 7]Hi! I'm having some issues trying to access the HTTP Context at my DbCommand Interceptor class. What❔ XMLAttributeCollection -> Dictionary with LINQ?It's a confusing class. It only allows turning it into a Queryable, but I have no experience with th❔ MS SQL Reporting Server URL Being RedirectedWe have an application from a vendor that was written in C# and we recently upgraded the MS SQL data❔ dataset memory leakI found memory leak and I don't understand how to fix it Test case: ```cpp public class MemoryLeaksT❔ WebAPI .NET 7.0 - Encrypt connectionstring in appsettings.jsonguys, I'm writing some WebAPI using .NET 7.0, and I'd like to secure the connectionstring with encry❔ how to read strings correctly with System.Data.SQLitei m trying read turkish characters from database but i can't see correctly❔ Blazor server app, base url / base page to set environmentHi 🙂 I have a Blazor Server app, where I would like to use some dynamic baseurl. Say instead of my❔ C# Console Application -its only writing the same random string, how can i make it do different ones?❔ Rapid prototypingDo you feel there is such a thing as rapid prototyping or mvp development where you do things differ❔ HotChocolate with IQueryable, apply a required filter on the ef entityBasically, I'm trying to find a way to configure an `IObjectFieldDescriptor` by adding a required ar❔ Dev/prod databseHello, Me and a friend wants to create a webb-app project with a react frontend and C# backend. ❔ Book recommendation to learn c#/dotnetI've been programming in python for a little under two years. I am starting a new job in c#. Whats a❔ Use `this` inside method decoratorTried to follow https://stackoverflow.com/a/2966758 ```cs [AttributeUsage(AttributeTargets.Metho✅ How can I make VSCode auto add semicolons to statements on save?I'm coming from the world of Javascript and Typescript. There, you can just use Prettier to automati❔ Find common substring at start of every string in listI have a list of Windows path strings and I want to determine the common beginning shared by all of