Skip to content

Fix account page #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
printer83mph merged 15 commits into from
Oct 29, 2021
Merged

Fix account page #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d3a7ad7
Make verification code copyable
eyingxuan Oct 3, 2021
ed2f639
Spacing
eyingxuan Oct 3, 2021
eccbd4a
Merge branch 'master' into fix/email-copyable
printer83mph Oct 10, 2021
d229f11
Make code input copyable
printer83mph Oct 10, 2021
792194e
Disable deleting all email contacts
printer83mph Oct 10, 2021
f0010e0
Make contact adding cancelable
printer83mph Oct 10, 2021
a73ab2d
Tag color fix
printer83mph Oct 10, 2021
2fee6be
Minor style changes
printer83mph Oct 10, 2021
34ae559
Space out inputs
printer83mph Oct 10, 2021
d6fcf38
TODO
printer83mph Oct 10, 2021
2797de8
Fix increment arrows on desktop
printer83mph Oct 21, 2021
539dc39
Set limits on graduation year
printer83mph Oct 21, 2021
6c1a5cc
Remove todo hehe
printer83mph Oct 21, 2021
37e6d48
Replace X with actual x icon
printer83mph Oct 24, 2021
38c3aaa
Fix ying's requests <3
printer83mph Oct 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions backend/Platform/templates/emails/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,15 @@
margin-left: -3px;
}

.verification-block {
.verification-number {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 55px;
margin: 3px;
border-radius: 2px;
background-color: #E7E7E7;
display:flex;
justify-content: center;
align-items: center;
}

.verification-number {
font-weight: 600;
font-size: 20px;
color: #767676;
Expand Down
8 changes: 3 additions & 5 deletions backend/Platform/templates/emails/email_verification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@

<div id="verification-div">
{% for num in verification_code %}
<div class="verification-block">
<span class="verification-number">
{{ num }}
</span>
</div>
<span class="verification-number">
{{ num }}
</span>
{% endfor %}
</div>

Expand Down
52 changes: 34 additions & 18 deletions frontend/components/Accounts/Forms/ContactInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const FieldInput = ({
setShowAdd,
setVerifyContact,
setShowModal,
onCancel,
}) => {
const { addToast } = useToasts();
const [text, setText] = useState("");
Expand Down Expand Up @@ -90,7 +91,14 @@ const FieldInput = ({
setShowAdd(true);
};

return <EditInput value={text} onChange={onChange} onConfirm={onConfirm} />;
return (
<EditInput
value={text}
onChange={onChange}
onConfirm={onConfirm}
onCancel={onCancel}
/>
);
};

const MoreIndicator = ({
Expand Down Expand Up @@ -163,7 +171,7 @@ export const ExistingInput = ({
{isVerified && <Indicator src="/greentick.png" />}
<span>{text}</span>
{isPrimary && (
<Tag>
<Tag variant="primary">
<span>PRIMARY</span>
</Tag>
)}
Expand All @@ -172,13 +180,15 @@ export const ExistingInput = ({
<span>UNVERIFIED</span>
</Tag>
)}
<MoreIndicator
isPrimary={isPrimary}
isVerified={isVerified}
onDelete={() => setModalIsOpen(true)}
onMakePrimary={onMakePrimary}
onReverify={onReverify}
/>
{!isVerified || onDelete ? (
<MoreIndicator
isPrimary={isPrimary}
isVerified={isVerified}
onDelete={() => setModalIsOpen(true)}
onMakePrimary={onMakePrimary}
onReverify={onReverify}
/>
) : undefined}
<DeleteModal
type={contactType}
contact={text}
Expand All @@ -199,12 +209,13 @@ export const AddInput = ({ text, onClick, margin }) => (
</AddButton>
);

export const EditInput = ({ onConfirm, value, onChange }) => (
export const EditInput = ({ onConfirm, value, onChange, onCancel }) => (
<Flex childMargin="0.2rem" width="100%">
<FormInput height="2rem" value={value} onChange={onChange} />
<Button type="button" onClick={onConfirm}>
Confirm
</Button>
<Indicator src="/x-circle.svg" width="1.3rem" onClick={onCancel} />
</Flex>
);

Expand Down Expand Up @@ -238,14 +249,18 @@ ${contactType === ContactType.Email ? "email" : "phone messages"} again.`);
}
setShowModal(true);
}}
onDelete={async () => {
try {
await deleteContact(contactType, id);
} catch (e) {
addToast("Delete contact failed");
}
mutate();
}}
onDelete={
contactType === "email" && infolist.length === 1
? undefined
: async () => {
try {
await deleteContact(contactType, id);
} catch (e) {
addToast("Delete contact failed");
}
mutate();
}
}
onMakePrimary={() => mutate(id, { primary: true })}
key={id}
isPrimary={primary}
Expand All @@ -268,6 +283,7 @@ ${contactType === ContactType.Email ? "email" : "phone messages"} again.`);
setShowAdd={setShowAdd}
setShowModal={setShowModal}
setVerifyContact={setVerifyContact}
onCancel={() => setShowAdd(true)}
/>
)}
<VerificationModal
Expand Down
1 change: 1 addition & 0 deletions frontend/components/Accounts/Modals/Verification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const VerificationForm = (props: VerificationFormProps) => {
return (
<ReactCodeInput
name="verification"
type="tel"
fields={6}
onChange={handleInputChange}
ref={codeInput}
Expand Down
17 changes: 15 additions & 2 deletions frontend/components/Accounts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,17 @@ import ContactInput from "./Forms/ContactInput";
import { FormikSelectInput } from "./Forms/SelectInput";
import { ContactType, User } from "../../types";

const currentYear = new Date().getFullYear();

const FormSchema = Yup.object({
first_name: Yup.string().required("Required"),
student: Yup.object({
graduation_year: Yup.number().positive().integer().nullable(),
graduation_year: Yup.number()
.positive()
.integer()
.nullable()
.min(currentYear)
.max(currentYear + 10),
}),
});

Expand Down Expand Up @@ -115,6 +122,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
col={2}
row={1}
alignItems="start"
margin
>
<Flex
flexDirection="column"
Expand All @@ -130,6 +138,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
/>
</Flex>
</FormGroupItem>

<FormGroupItem
col={1}
row={2}
Expand Down Expand Up @@ -175,6 +184,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
fieldName="student.school"
/>
</FormGroupItem>

<FormGroupItem col={1} row={2}>
<Text weight="400">Major(s)</Text>
</FormGroupItem>
Expand All @@ -184,6 +194,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
fieldName="student.major"
/>
</FormGroupItem>

<FormGroupItem col={1} row={3}>
<Text weight="400">Grad Year</Text>
</FormGroupItem>
Expand All @@ -196,7 +207,9 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
</FormGroupGrid>
</>
)}
<Button margin="1.5rem 0 0 0">Save</Button>
<Button marginTop="1.7rem" fontSize="1.2rem">
Save
</Button>
</Form>
</Formik>
</div>
Expand Down
33 changes: 26 additions & 7 deletions frontend/components/Accounts/ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export const Text = styled.span<TextProps>`
export const FormGroupHeader = styled.h3`
font-style: normal;
font-weight: 600;
font-size: 1.5rem;
`;

export const FormGroupGrid = styled.div`

@eyingxuan eyingxuan Oct 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should definitely be more generalized instead of hardcoding the numbers - perhaps a marginBottom prop with type string with default of 0?

Expand All @@ -104,13 +105,15 @@ interface FormGroupItemProps {
col: number;
row: number;
alignItems?: string;
margin?: boolean;
}

export const FormGroupItem = styled.div<FormGroupItemProps>`
grid-column: ${(props) => props.col};
grid-row: ${(props) => props.row};
display: flex;
align-items: ${(props) => (props.alignItems ? props.alignItems : "center")};
margin-bottom: ${(props) => (props.margin ? ".8rem" : "0")};
`;

export const FormInput = styled.input<{ height?: string; error?: boolean }>`
Expand All @@ -124,16 +127,26 @@ export const FormInput = styled.input<{ height?: string; error?: boolean }>`
padding-left: 0.3rem;
`;

export const Indicator = styled.img<{ paddingTop?: string }>`
width: 1rem;
export const Indicator = styled.img<{ paddingTop?: string; width?: string }>`
width: ${(props) => props.width ?? "1rem"};
padding-top: ${(props) => props.paddingTop};
cursor: pointer;

&:hover {
opacity: 0.5;
}
`;

export const Tag = styled.div`
const TagVariants = {
default: { col: "#767676", bg: "#e7e7e7" },
primary: { col: "#455f7a", bg: "#adcced" },
};

export const Tag = styled.div<{ variant?: keyof typeof TagVariants }>`
height: 1rem;
margin-top: 0.35rem;
background-color: #e7e7e7;
background-color: ${({ variant = "default" }) => TagVariants[variant].bg};
color: ${({ variant = "default" }) => TagVariants[variant].col};
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -143,7 +156,6 @@ export const Tag = styled.div`
margin: 0.2rem;
font-size: 0.5rem;
font-weight: 600;
color: #767676;
}
`;

Expand All @@ -158,15 +170,22 @@ export const AddButton = styled.button<{ marginTop?: string }>`
margin-top: ${(props) => props.marginTop};
`;

export const Button = styled.button<{ margin?: string }>`
background-color: #209cee;
export const Button = styled.button<{
margin?: string;
backgroundColor?: string;
marginTop?: string;
fontSize?: string;
}>`
background-color: ${(props) => props.backgroundColor || "#209cee"};
color: #ffffff;
border: none;
border-radius: 0.2rem;
cursor: pointer;
font-size: ${(props) => props.fontSize};
font-weight: 600;
padding: 0.5rem 0.7rem 0.5rem 0.7rem;
margin: ${(props) => props.margin};
margin-top: ${(props) => props.marginTop};
`;

export const selectStyles = {
Expand Down
1 change: 1 addition & 0 deletions frontend/public/x-circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading