mozilla
/
fx-private-relay
зеркало из https://github.com/mozilla/fx-private-relay.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge branch 'add-ui'

This commit is contained in:
groovecoder 2019-06-13 13:44:55 -05:00
Родитель 1bb0d70791 755ac48295
Коммит 9b286fbab5
14 изменённых файлов: 327 добавлений и 30 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
.gitignore поставляемый
Просмотреть файл

@ -2,3 +2,5 @@
*.sqlite3
node_modules
package-lock.json
env/
__pycache__

56
emails/templates/emails/messages.html
Просмотреть файл

@ -1,6 +1,50 @@
These are your messages for {{ relay_address.address }}:
<ul>
{% for message in messages %}
<li>{{ message.message }}</li>
{% endfor %}
</ul>
{% extends "base.html" %}
{% load socialaccount %}
{% block content %}
<main class="container px-4 lg:px-0 py-8 mx-auto max-w-4xl">
<div class="bg-white rounded py-8 sm:mt-8 shadow-md">
<div class="px-8 pb-8 border-b border-solid border-gray-400">
<div class="md:flex-wrap md:flex md:justify-between md:items-center">
<div class="name text-lg">
Messages for <strong>{Title}</strong>
<br>
<span class="text-md">{{ relay_address.address }}</span>
</div>
<div class="generate-button">
<a class="md:ml-8 mt-4 md:mt-0 inline-block py-2 px-4 leading-normal rounded border border-solid border-purple-800 text-purple-800 hover:bg-purple-800 hover:text-white" href="/">Back</a>
</div>
</div>
</div>
<!-- Empty State -->
<!-- List of Emails -->
<div class="px-4 mt-4 sm:mt-8 sm:px-8">
<ul>
{% for message in messages %}
<li>
<div class="border-b border-solid border-gray-300 pb-4 mb-4">
<div class="email-meta">
<div class="text-lg font-bold text-gray-800">
Subject: {subject line}
<br>
From: {email address}
<br>
</div>
<div class="text-gray-600 font-normal email-send">{Date/time email was sent}</div>
<div class="email-body leading-normal pt-4 text-gray-700">
{{ message.message }}
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</main>
{% endblock %}

8
privaterelay/settings.py
Просмотреть файл

@ -65,7 +65,9 @@ ROOT_URLCONF = 'privaterelay.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['privaterelay/templates',],
'DIRS': [
os.path.join(BASE_DIR, 'privaterelay', 'templates'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
@ -130,6 +132,10 @@ USE_TZ = True
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
SITE_ID = 1
AUTHENTICATION_BACKENDS = (

27
privaterelay/templates/account/logout.html Normal file
Просмотреть файл

@ -0,0 +1,27 @@
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign Out" %}{% endblock %}
{% block content %}
<main class="container px-4 lg:px-0 py-8 mx-auto max-w-4xl">
<div class="bg-white rounded py-8 sm:mt-8 shadow-md ">
<div class="px-8 pb-8">
<div class="px-8 mt-8 pb-16">
<p class="text-center text-2xl mb-8">{% trans 'Are you sure you want to sign out?' %}</p>
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
{% endif %}
<button class="w-full max-w-xs mx-auto block text-center py-2 px-4 leading-normal rounded border border-solid border-purple-700 text-purple-700 hover:bg-purple-700 hover:text-white" type="submit">{% trans 'Sign Out' %}</button>
</form>
</div>
</div>
</div>
</main>
{% endblock %}

41
privaterelay/templates/base.html
Просмотреть файл

@ -1,9 +1,34 @@
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% load static %}
{% load socialaccount %}
{% block content %}{% endblock %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Firefox Private Relay</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/style.css" %}">
</head>
<body>
{% include "includes/header.html" %}
{% if messages %}
<div class="p-4">
<div class="container mx-auto max-w-4xl ">
<div class="">
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }} bg-white p-4 shadow-md rounded" {% else %} class="bg-white p-4 shadow-lg rounded" {% endif %}>{{ message }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
{% block content %}{% endblock %}
{% include "includes/footer.html" %}
</body>
</html>

31
privaterelay/templates/home.html
Просмотреть файл

@ -4,6 +4,35 @@
{% block content %}
<a href="{% provider_login_url 'fxa' %}">Sign in with FxA</a>
<main class="container px-4 lg:px-0 py-8 mx-auto max-w-4xl">
<div class="sm:p-8 p-2">
<h2 class="leading-tight text-2xl md:text-3xl lg:text-4xl text-center text-purple-900 font-bold">Fast, easy sign-ups without the tracking. <small class="leading-snug font-normal block mt-4">Prevents your information from being sold or traded&nbsp;online.</small> </h2>
<div class="text-center mt-8 md:w-6/12 mx-auto">
<a class="w-full max-w-sm mx-auto block text-center py-2 px-4 leading-normal rounded border border-solid border-purple-700 text-purple-700 hover:bg-purple-700 hover:text-white" href="/accounts/fxa/login/">Sign up with FxA</a>
<p class="text-purple-900 text-xs py-4">Firefox browser not required for a Firefox Account.<br class="hidden md:block"> You may receive info about Mozilla&nbsp;services. </p>
<p class="text-purple-900" >Have an account? <a class="font-bold underline hover:text-blue-800" href="{% provider_login_url 'fxa' %}">Log in</a> </p>
</div>
</div>
<div class="bg-white rounded p-4 md:p-8 mt-4 sm:mt-8 shadow-md ">
<h2 class="leading-tight text-xl md:text-3xl text-center font-bold mt-4 mb-8 md:mb-16">How does it work?</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 text-center mb-12">
<img class="inline-block mb-4" src="//placehold.it/125x100/B8B958/000000"/>
<h3 class="text-xl font-bold sm:h-24 ">Sign In</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="w-full md:w-1/3 text-center mb-12">
<img class="inline-block mb-4" src="//placehold.it/125x100/5C49FD/FFFFFF"/>
<h3 class="text-xl font-bold sm:h-24 ">Create Anon Email Addresses</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="w-full md:w-1/3 text-center mb-12">
<img class="inline-block mb-4" src="//placehold.it/125x100/1604DF/FFFFFF"/>
<h3 class="text-xl font-bold sm:h-24 ">Use Them</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</main>
{% endblock %}

19
privaterelay/templates/includes/footer.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
{% load static %}
<footer class="p-8 shadow-md">
<div class="sm:flex sm:flex-wrap sm:justify-between sm:items-center mx-auto text-center ">
<a href="https://www.mozilla.org" class="inline-block">
<img alt="Mozilla" class="block w-24" src="{% static '/images/mozilla.svg' %}"/>
</a>
<!-- <ul class="flex flex-wrap items-center">
<li class="block sm:inline-block ">
<a href="#">Link</a>
</li>
<li class="block sm:inline-block sm:ml-4">
<a href="#">Link</a>
</li>
<li class="block sm:inline-block sm:ml-4">
<a href="#">Link</a>
</li>
</ul> -->
</div>
</footer>

12
privaterelay/templates/includes/header.html Normal file
Просмотреть файл

@ -0,0 +1,12 @@
{% load static %}
<header class="px-4 py-8 sm:px-8 shadow-lg">
<div class="flex justify-between items-center mx-auto">
<a href="/" class="inline-block w-auto sm:w-3/4">
<h1 class="text-lg sm:text-2xl md:text-3xl flex flex-wrap flex-row items-center">
<img class="hidden sm:inline-block mr-2 align-middle logo" alt="icon" src="{% static '/images/logo.svg' %}"/>
<span class="block sm:inline-block leading-tight"><strong>Firefox</strong> <br class="sm:hidden">Private Relay</span>
</h1>
</a>
{% include "includes/login.html" %}
</div>
</header>

17
privaterelay/templates/includes/login.html Normal file
Просмотреть файл

@ -0,0 +1,17 @@
{% load socialaccount %}
{% block content %}
<div class="user-area">
{% if request.user.is_anonymous %}
<a class="block py-2 px-4 leading-normal rounded border border-solid border-white text-white hover:bg-white hover:text-black" href="{% provider_login_url 'fxa' process='login' %}">Sign in <span class="hidden sm:inline">with FxA</span> </a>
{% else %}
{% get_social_accounts request.user as accounts %}
<div class="text-right sm:text-left">
<img class="hidden sm:inline-block w-8 mr-2" src="{{ accounts.fxa.0.extra_data.avatar }}" /> {{ accounts.fxa.0.extra_data.displayName }}
<a class="inline-block mt-2 sm:mt-0 ml-4 py-2 px-4 leading-normal rounded border border-solid border-white text-white hover:bg-white hover:text-black" href="{% url 'account_logout' %}">Sign out</a>
</div>
{% endif %}
</div>
{% endblock %}

57
privaterelay/templates/profile.html
Просмотреть файл

@ -6,19 +6,48 @@
{% get_social_accounts request.user as accounts %}
Hi <img src="{{ accounts.fxa.0.extra_data.avatar }}"> {{ accounts.fxa.0.extra_data.displayName }} <a href="/accounts/logout/">Log out</a>
<hr>
<a href="https://github.com/groovecoder/private-relay/tree/master/extension">Use the Private Relay extension for best results</a>.
<hr>
These are your relay addresses (click to see messages):
<ul>
{% for relay_address in relay_addresses %}
<li><a href="/emails/messages/?relay_address_id={{ relay_address.id }}">{{ relay_address.address }}@privaterelay.groovecoder.com</a></li>
{% endfor %}
</ul>
<form action="/emails/" method="POST">
{% csrf_token %}
<input type="submit" value="Generate new relay address">
</form>
<main class="container px-4 lg:px-0 py-8 mx-auto max-w-4xl">
<div class="bg-white rounded py-8 sm:mt-8 shadow-md ">
<div class="px-8 pb-8 border-b border-solid border-gray-300">
<div class="md:flex-wrap md:flex md:justify-between md:items-center">
<div class="name text-lg">
Hi, {{ accounts.fxa.0.extra_data.displayName }}
</div>
<div class="generate-button">
<form action="/emails/" method="POST">
{% csrf_token %}
<input class="md:ml-8 mt-4 md:mt-0 py-2 px-4 bg-transparent cursor-pointer leading-normal rounded border border-solid border-indigo-800 text-indigo-800 hover:bg-indigo-800 hover:text-white" type="submit" value="Generate new relay address">
</form>
</div>
</div>
</div>
<!-- Empty State -->
<!-- List of Emails -->
<div class="px-8 mt-8 main-list">
<h2 class="text-xl font-bold mt-4 mb-8">Generated Addresses</h2>
<ul>
{% for relay_address in relay_addresses %}
<li>
<div class="sm:flex-wrap sm:flex sm:justify-between sm:items-center border-b border-solid border-gray-400 pb-4 mb-4">
<div class="email-meta">
<div class="text-lg font-bold text-gray-800">
Email Name
</div>
<span class="break-all">{{ relay_address.address }}@privaterelay.groovecoder.com</span>
</div>
<div class="email-actions">
<!-- <a class="inline-block mt-4 sm:mt-0 sm:ml-8 py-2 px-4 leading-normal rounded border border-solid border-indigo-800 text-indigo-800 hover:bg-indigo-800 hover:text-white" href="/emails/messages/?relay_address_id={{ relay_address.id }}">Copy Address</a> -->
<a class="inline-block mt-4 sm:mt-0 sm:ml-8 py-2 px-4 leading-normal rounded border border-solid border-indigo-800 text-indigo-800 hover:bg-indigo-800 hover:text-white" href="/emails/messages/?relay_address_id={{ relay_address.id }}">View Messages</a>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</main>
{% endblock %}

85
static/css/style.css Normal file
Просмотреть файл

@ -0,0 +1,85 @@
:root {
--navy: #231142;
--blue: #3047C9;
--purple: #7A26A3;
--white: #FFFFFF;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 16px;
min-height: 100vh;
/* background-color: var(--blue); */
/* background-image: linear-gradient(135deg, var(--blue), var(--purple)); */
background: #FAFAFB;
display: flex;
flex-direction: column;
}
.logo {
max-width: 80px;
}
header {
background: var(--navy);
color: var(--white);
}
footer {
flex-shrink: 0;
}
main {
flex: 1 0 auto;
}
.main-list {
min-height: 50vh;
}
.beta-tag {
opacity: 0.75;
background: var(--purple);
color: var(--white);
text-transform: uppercase;
font-size: 11px;
padding: 0;
display: inline-block;
padding: 0 10px;
width: auto;
height: 25px;
line-height: 25px;
border-radius: 3px;
text-align: center;
letter-spacing: 2px;
}
.empty-content {
position: relative;
z-index: 1;
}
.messages li.success {
background: #c6f6d5;
border: 1px solid #22543d;
color: #22543d;
}
.messages li.error {
background: #fed7d7;
border: 1px solid #c53030;
color: #c53030;
}
.messages li.warning {
background: #faf089;
border: 1px solid #b7791f;
color: #b7791f;
}

1
static/images/logo.svg Normal file
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 29 KiB

1
static/images/mozilla.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 578.55 185.54"><path d="M503.5 117.21c0 4.92 2.37 8.82 9 8.82 7.8 0 16.11-5.6 16.61-18.31a80.86 80.86 0 0 0-11-1c-7.83-.01-14.61 2.19-14.61 10.49z"/><path d="M0 0v185.54h578.55V0zm163.78 139.93h-32V96.87c0-13.22-4.41-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h10.12v16.61h-32V96.87c0-13.22-4.4-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h14.54v16.61H22.22v-16.61h10.17V80.09h-11V63.48h32.87V75c4.58-8.13 12.55-13.05 23.22-13.05 11 0 21.19 5.26 24.92 16.45 4.24-10.17 12.88-16.45 24.92-16.45 13.73 0 26.28 8.31 26.28 26.45v34.94h10.17zm48.65 1.69c-23.56 0-39.84-14.41-39.84-38.82 0-22.38 13.56-40.86 41-40.86s40.86 18.48 40.86 39.84c.02 24.42-17.61 39.85-42.02 39.85zm121.72-1.69h-66.8l-2.2-11.53 42-48.32h-23.9l-3.39 11.87-15.77-1.69 2.71-26.79H334L335.69 75l-42.4 48.34H318l3.56-11.87 17.29 1.69zm41.36 0h-22.89v-27.46h22.89zm0-49h-22.89V63.48h22.89zm12 49L420.6 23.34h21.53l-33.06 116.59zm44.42 0L465 23.34h21.53l-33.04 116.59zm113.92 1.69c-10.17 0-15.76-5.94-16.78-15.26-4.41 7.8-12.21 15.26-24.58 15.26-11 0-23.56-5.94-23.56-21.87 0-18.82 18.14-23.22 35.6-23.22a100.23 100.23 0 0 1 12.55.68v-2.54c0-7.8-.17-17.12-12.55-17.12-4.58 0-8.14.34-11.7 2.2L502 90.6l-17.46-1.87 3.39-19.83c13.39-5.43 20.17-7 32.72-7 16.45 0 30.35 8.48 30.35 25.94v33.23c0 4.41 1.69 5.94 5.26 5.94a11.5 11.5 0 0 0 3.22-.51l.17 11.53a29.57 29.57 0 0 1-13.77 3.6z"/><path d="M213.27 78.73c-11.19 0-18.14 8.3-18.14 22.72 0 13.22 6.1 23.39 18 23.39 11.36 0 18.82-9.15 18.82-23.73-.03-15.43-8.33-22.38-18.68-22.38z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Двоичные данные
static/images/profile.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 9.3 KiB